From 096ea04616319f8dd1dc329949740f2731ad1082 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 May 2024 16:00:34 +0100 Subject: [PATCH 1/3] Site Editor: Update to use the EditorCanvas component from the editor package --- .../edit-post/src/components/layout/index.js | 2 + .../src/components/layout/style.scss | 21 +- .../block-editor/site-editor-canvas.js | 24 --- .../src/components/block-editor/style.scss | 26 --- ...r-canvas.js => use-editor-iframe-props.js} | 49 +---- .../editor-canvas-container/index.js | 19 +- .../editor-canvas-container/style.scss | 8 + .../edit-site/src/components/editor/index.js | 197 +++++------------- .../src/components/editor/style.scss | 4 + .../src/components/header-edit-mode/index.js | 54 ----- .../components/header-edit-mode/style.scss | 3 - .../{header-edit-mode => }/more-menu/index.js | 2 +- .../more-menu/site-export.js | 0 .../more-menu/welcome-guide-menu-item.js | 0 packages/edit-site/src/style.scss | 1 - .../editor-interface/content-slot-fill.js | 15 ++ .../src/components/editor-interface/index.js | 93 ++++++--- .../src/components/visual-editor/index.js | 2 +- .../src/components/visual-editor/style.scss | 1 + packages/editor/src/private-apis.js | 4 +- .../components/interface-skeleton/index.js | 6 - 21 files changed, 173 insertions(+), 358 deletions(-) delete mode 100644 packages/edit-site/src/components/block-editor/site-editor-canvas.js rename packages/edit-site/src/components/block-editor/{editor-canvas.js => use-editor-iframe-props.js} (62%) delete mode 100644 packages/edit-site/src/components/header-edit-mode/index.js delete mode 100644 packages/edit-site/src/components/header-edit-mode/style.scss rename packages/edit-site/src/components/{header-edit-mode => }/more-menu/index.js (94%) rename packages/edit-site/src/components/{header-edit-mode => }/more-menu/site-export.js (100%) rename packages/edit-site/src/components/{header-edit-mode => }/more-menu/welcome-guide-menu-item.js (100%) create mode 100644 packages/editor/src/components/editor-interface/content-slot-fill.js diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b79cefa096625..6603b1f685152 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -11,6 +11,7 @@ import { LocalAutosaveMonitor, UnsavedChangesWarning, EditorKeyboardShortcutsRegister, + EditorSnackbars, store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; @@ -294,6 +295,7 @@ function Layout( { initialPost } ) { ) } + - { ( [ editorCanvasView ] ) => - editorCanvasView ? ( -
- { editorCanvasView } -
- ) : ( - - ) - } - - ); -} diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 14f2074130d11..3849eed24a4ea 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -1,29 +1,3 @@ -// The button element easily inherits styles that are meant for the editor style. -// These rules enhance the specificity to reduce that inheritance. -// This is duplicated in visual-editor. -.edit-site-block-editor__editor-styles-wrapper .components-button { - font-family: $default-font; - font-size: $default-font-size; - padding: 6px 12px; - - &.is-tertiary, - &.has-icon { - padding: 6px; - } -} - -.edit-site-visual-editor { - height: 100%; - background-color: $gray-300; - - // Controls height of editor and editor canvas container (style book, global styles revisions previews etc.) - iframe { - display: block; - width: 100%; - height: 100%; - } -} - .edit-site-visual-editor__editor-canvas { &.is-focused { outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color); diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js similarity index 62% rename from packages/edit-site/src/components/block-editor/editor-canvas.js rename to packages/edit-site/src/components/block-editor/use-editor-iframe-props.js index bac51c5df7d33..3b5c9f7fe6572 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js @@ -8,12 +8,9 @@ import clsx from 'clsx'; */ import { useSelect, useDispatch } from '@wordpress/data'; import { ENTER, SPACE } from '@wordpress/keycodes'; -import { useState, useEffect, useMemo } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -21,9 +18,7 @@ import { import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -const { VisualEditor } = unlock( editorPrivateApis ); - -function EditorCanvas( { settings } ) { +export default function useEditorIframeProps() { const { canvasMode, currentPostIsTrashed } = useSelect( ( select ) => { const { getCanvasMode } = unlock( select( editSiteStore ) ); @@ -75,36 +70,10 @@ function EditorCanvas( { settings } ) { readonly: true, }; - const styles = useMemo( - () => [ - ...settings.styles, - { - // Forming a "block formatting context" to prevent margin collapsing. - // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - - css: `body{${ - canvasMode === 'view' - ? `min-height: 100vh; ${ - currentPostIsTrashed ? '' : 'cursor: pointer;' - }` - : '' - }}}`, - }, - ], - [ settings.styles, canvasMode, currentPostIsTrashed ] - ); - - return ( - - ); + return { + className: clsx( 'edit-site-visual-editor__editor-canvas', { + 'is-focused': isFocused && canvasMode === 'view', + } ), + ...( canvasMode === 'view' ? viewModeIframeProps : {} ), + }; } - -export default EditorCanvas; diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index ca5bc3a0b34f4..baebc1bc1bc89 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -4,7 +4,6 @@ import { Children, cloneElement, useState } from '@wordpress/element'; import { Button, - privateApis as componentsPrivateApis, __experimentalUseSlotFills as useSlotFills, } from '@wordpress/components'; import { ESCAPE } from '@wordpress/keycodes'; @@ -24,7 +23,7 @@ import { import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -const { ResizableEditor } = unlock( editorPrivateApis ); +const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis ); /** * Returns a translated string for the title of the editor canvas container. @@ -45,15 +44,6 @@ function getEditorCanvasContainerTitle( view ) { } } -// Creates a private slot fill. -const { createPrivateSlotFill } = unlock( componentsPrivateApis ); -const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot'; -const { - privateKey, - Slot: EditorCanvasContainerSlot, - Fill: EditorCanvasContainerFill, -} = createPrivateSlotFill( SLOT_FILL_NAME ); - function EditorCanvasContainer( { children, closeButtonLabel, @@ -123,7 +113,7 @@ function EditorCanvasContainer( { const shouldShowCloseButton = onClose || closeButtonLabel; return ( - +
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } @@ -145,14 +135,13 @@ function EditorCanvasContainer( {
- + ); } function useHasEditorCanvasContainer() { - const fills = useSlotFills( privateKey ); + const fills = useSlotFills( EditorContentSlotFill.privateKey ); return !! fills?.length; } -EditorCanvasContainer.Slot = EditorCanvasContainerSlot; export default EditorCanvasContainer; export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle }; diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index 0aca5f8045ce8..fad566212e732 100644 --- a/packages/edit-site/src/components/editor-canvas-container/style.scss +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -1,5 +1,13 @@ .edit-site-editor-canvas-container { height: 100%; + background-color: $gray-300; + + // Controls height of editor and editor canvas container (style book, global styles revisions previews etc.) + iframe { + display: block; + width: 100%; + height: 100%; + } .edit-site-layout.is-full-canvas & { padding: $grid-unit-30 $grid-unit-30 0; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 0384b3c80ab42..26b20b66f11c7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -8,30 +8,23 @@ import clsx from 'clsx'; */ import { useDispatch, useSelect } from '@wordpress/data'; import { Notice } from '@wordpress/components'; -import { useInstanceId, useViewportMatch } from '@wordpress/compose'; -import { store as preferencesStore } from '@wordpress/preferences'; -import { - BlockBreadcrumb, - BlockToolbar, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { useInstanceId } from '@wordpress/compose'; import { EditorKeyboardShortcutsRegister, - EditorNotices, privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; import { __, sprintf } from '@wordpress/i18n'; import { store as coreDataStore } from '@wordpress/core-data'; import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library'; -import { useState, useCallback } from '@wordpress/element'; +import { useCallback, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies */ -import Header from '../header-edit-mode'; import WelcomeGuide from '../welcome-guide'; import { store as editSiteStore } from '../../store'; import { GlobalStylesRenderer } from '../global-styles-renderer'; @@ -40,76 +33,51 @@ import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; import useEditedEntityRecord from '../use-edited-entity-record'; import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; -import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings'; import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; +import { isPreviewingTheme } from '../../utils/is-previewing-theme'; +import { + getEditorCanvasContainerTitle, + useHasEditorCanvasContainer, +} from '../editor-canvas-container'; +import SaveButton from '../save-button'; +import SiteEditorMoreMenu from '../more-menu'; +import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; const { + EditorInterface, ExperimentalEditorProvider: EditorProvider, - InserterSidebar, - ListViewSidebar, - InterfaceSkeleton, - ComplementaryArea, - SavePublishPanels, Sidebar, - TextEditor, } = unlock( editorPrivateApis ); const { useHistory } = unlock( routerPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); -const interfaceLabels = { - /* translators: accessibility text for the editor content landmark region. */ - body: __( 'Editor content' ), - /* translators: accessibility text for the editor settings landmark region. */ - sidebar: __( 'Editor settings' ), - /* translators: accessibility text for the editor publish landmark region. */ - actions: __( 'Editor publish' ), - /* translators: accessibility text for the editor footer landmark region. */ - footer: __( 'Editor footer' ), - /* translators: accessibility text for the editor header landmark region. */ - header: __( 'Editor top bar' ), -}; - export default function Editor( { isLoading } ) { const { record: editedPost, getTitle, isLoaded: hasLoadedPost, } = useEditedEntityRecord(); - const { type: editedPostType } = editedPost; - - const isLargeViewport = useViewportMatch( 'medium' ); - const { context, contextPost, editorMode, canvasMode, - blockEditorMode, - isInserterOpen, - isListViewOpen, - isDistractionFree, - showIconLabels, - showBlockBreadcrumbs, - postTypeLabel, isEditingPage, supportsGlobalStyles, + showIconLabels, + editorCanvasView, + currentPostIsTrashed, } = useSelect( ( select ) => { - const { get } = select( preferencesStore ); const { getEditedPostContext, getCanvasMode, isPage } = unlock( select( editSiteStore ) ); - const { __unstableGetEditorMode } = select( blockEditorStore ); + const { get } = select( preferencesStore ); const { getEntityRecord, getCurrentTheme } = select( coreDataStore ); - const { - isInserterOpened, - isListViewOpened, - getPostTypeLabel, - getEditorMode, - } = select( editorStore ); + const { getEditorMode } = select( editorStore ); const _context = getEditedPostContext(); // The currently selected entity to display. @@ -125,32 +93,24 @@ export default function Editor( { isLoading } ) { : undefined, editorMode: getEditorMode(), canvasMode: getCanvasMode(), - blockEditorMode: __unstableGetEditorMode(), - isInserterOpen: isInserterOpened(), - isListViewOpen: isListViewOpened(), - isDistractionFree: get( 'core', 'distractionFree' ), - showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), - showIconLabels: get( 'core', 'showIconLabels' ), - postTypeLabel: getPostTypeLabel(), isEditingPage: isPage(), supportsGlobalStyles: getCurrentTheme()?.is_block_theme, + showIconLabels: get( 'core', 'showIconLabels' ), + editorCanvasView: unlock( + select( editSiteStore ) + ).getEditorCanvasContainerView(), + currentPostIsTrashed: + select( editorStore ).getCurrentPostAttribute( 'status' ) === + 'trash', }; }, [] ); + const _isPreviewingTheme = isPreviewingTheme(); + const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); + const iframeProps = useEditorIframeProps(); const isViewMode = canvasMode === 'view'; const isEditMode = canvasMode === 'edit'; const showVisualEditor = isViewMode || editorMode === 'visual'; - const shouldShowBlockBreadcrumbs = - ! isDistractionFree && - showBlockBreadcrumbs && - isEditMode && - showVisualEditor && - blockEditorMode !== 'zoom-out'; - const shouldShowInserter = isEditMode && showVisualEditor && isInserterOpen; - const shouldShowListView = isEditMode && showVisualEditor && isListViewOpen; - const secondarySidebarLabel = isListViewOpen - ? __( 'List View' ) - : __( 'Block Library' ); const postWithTemplate = !! context?.postId; let title; @@ -174,22 +134,24 @@ export default function Editor( { isLoading } ) { ); const settings = useSpecificEditorSettings(); + const styles = useMemo( + () => [ + ...settings.styles, + { + // Forming a "block formatting context" to prevent margin collapsing. + // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - // Local state for save panel. - // Note 'truthy' callback implies an open panel. - const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] = - useState( false ); - - const closeEntitiesSavedStates = useCallback( - ( arg ) => { - if ( typeof entitiesSavedStatesCallback === 'function' ) { - entitiesSavedStatesCallback( arg ); - } - setEntitiesSavedStatesCallback( false ); - }, - [ entitiesSavedStatesCallback ] + css: `body{${ + canvasMode === 'view' + ? `min-height: 100vh; ${ + currentPostIsTrashed ? '' : 'cursor: pointer;' + }` + : '' + }}}`, + }, + ], + [ settings.styles, canvasMode, currentPostIsTrashed ] ); - const { createSuccessNotice } = useDispatch( noticesStore ); const history = useHistory(); const onActionPerformed = useCallback( @@ -269,73 +231,28 @@ export default function Editor( { isLoading } ) { settings={ settings } useSubRegistry={ false } > - + - ) - } - actions={ - - } - content={ - <> - { isEditMode && } - { editorMode === 'text' && isEditMode && ( - - ) } - { ! isLargeViewport && showVisualEditor && ( - - ) } - { showVisualEditor && } - - } - secondarySidebar={ - isEditMode && - ( ( shouldShowInserter && ) || - ( shouldShowListView && ) ) - } - sidebar={ - isEditMode && - ! isDistractionFree && ( - - ) + styles={ styles } + enableRegionNavigation={ false } + customSaveButton={ + _isPreviewingTheme && } - footer={ - shouldShowBlockBreadcrumbs && ( - - ) + forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ + ! hasDefaultEditorCanvasView + ? getEditorCanvasContainerTitle( + editorCanvasView + ) + : undefined } - labels={ { - ...interfaceLabels, - secondarySidebar: secondarySidebarLabel, - } } + iframeProps={ iframeProps } /> { - return { - editorCanvasView: unlock( - select( editSiteStore ) - ).getEditorCanvasContainerView(), - }; - }, [] ); - - return ( - <> - - } - forceDisableBlockTools={ ! hasDefaultEditorCanvasView } - title={ - ! hasDefaultEditorCanvasView - ? getEditorCanvasContainerTitle( editorCanvasView ) - : undefined - } - /> - - - ); -} - -export default Header; diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss deleted file mode 100644 index 69b1e9dff3849..0000000000000 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.editor-header { - padding-left: $header-height; -} diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/more-menu/index.js similarity index 94% rename from packages/edit-site/src/components/header-edit-mode/more-menu/index.js rename to packages/edit-site/src/components/more-menu/index.js index f0df5cf57fe6f..4c4e9bb45c093 100644 --- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js +++ b/packages/edit-site/src/components/more-menu/index.js @@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor'; */ import SiteExport from './site-export'; import WelcomeGuideMenuItem from './welcome-guide-menu-item'; -import { unlock } from '../../../lock-unlock'; +import { unlock } from '../../lock-unlock'; const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis ); diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js b/packages/edit-site/src/components/more-menu/site-export.js similarity index 100% rename from packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js rename to packages/edit-site/src/components/more-menu/site-export.js diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js similarity index 100% rename from packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js rename to packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 20eb3397b00ed..6203c24196592 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -6,7 +6,6 @@ @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; @import "./components/global-styles-sidebar/style.scss"; -@import "./components/header-edit-mode/style.scss"; @import "./components/page/style.scss"; @import "./components/page-pages/style.scss"; @import "./components/page-patterns/style.scss"; diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js new file mode 100644 index 0000000000000..1aab394e87230 --- /dev/null +++ b/packages/editor/src/components/editor-interface/content-slot-fill.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { privateApis as componentsPrivateApis } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { createPrivateSlotFill } = unlock( componentsPrivateApis ); +const SLOT_FILL_NAME = 'EditCanvasContainerSlot'; +const EditorContentSlotFill = createPrivateSlotFill( SLOT_FILL_NAME ); + +export default EditorContentSlotFill; diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 60ee3043e073b..b78e3caa0b57c 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -24,13 +24,13 @@ import { useState, useCallback } from '@wordpress/element'; */ import { store as editorStore } from '../../store'; import EditorNotices from '../editor-notices'; -import EditorSnackbars from '../editor-snackbars'; import Header from '../header'; import InserterSidebar from '../inserter-sidebar'; import ListViewSidebar from '../list-view-sidebar'; import SavePublishPanels from '../save-publish-panels'; import TextEditor from '../text-editor'; import VisualEditor from '../visual-editor'; +import EditorContentSlotFill from './content-slot-fill'; const interfaceLabels = { /* translators: accessibility text for the editor top bar landmark region. */ @@ -47,12 +47,17 @@ const interfaceLabels = { export default function EditorInterface( { className, + enableRegionNavigation, styles, children, forceIsDirty, contentRef, disableIframe, autoFocus, + customSaveButton, + forceDisableBlockTools, + title, + iframeProps, } ) { const { mode, @@ -60,6 +65,7 @@ export default function EditorInterface( { isInserterOpened, isListViewOpened, isDistractionFree, + isPreviewMode, previousShortcut, nextShortcut, showBlockBreadcrumbs, @@ -77,6 +83,7 @@ export default function EditorInterface( { isInserterOpened: select( editorStore ).isInserterOpened(), isListViewOpened: select( editorStore ).isListViewOpened(), isDistractionFree: get( 'core', 'distractionFree' ), + isPreviewMode: editorSettings.__unstableIsPreviewMode, previousShortcut: select( keyboardShortcutsStore ).getAllShortcutKeyCombinations( 'core/editor/previous-region' ), @@ -112,6 +119,7 @@ export default function EditorInterface( { return ( + ! isPreviewMode && ( +
+ ) } editorNotices={ } secondarySidebar={ + ! isPreviewMode && mode === 'visual' && ( ( isInserterOpened && ) || ( isListViewOpened && ) ) } sidebar={ + ! isPreviewMode && ! isDistractionFree && } - notices={ } content={ <> - { ! isDistractionFree && } - { ( mode === 'text' || ! isRichEditingEnabled ) && ( - - ) } - { ! isLargeViewport && mode === 'visual' && ( - + { ! isDistractionFree && ! isPreviewMode && ( + ) } - { isRichEditingEnabled && mode === 'visual' && ( - - ) } - { children } + + + { ( [ editorCanvasView ] ) => + ! isPreviewMode && editorCanvasView ? ( + editorCanvasView + ) : ( + <> + { ! isPreviewMode && + ( mode === 'text' || + ! isRichEditingEnabled ) && ( + + ) } + { ! isPreviewMode && + ! isLargeViewport && + mode === 'visual' && ( + + ) } + { ( isPreviewMode || + ( isRichEditingEnabled && + mode === 'visual' ) ) && ( + + ) } + { children } + + ) + } + } footer={ + ! isPreviewMode && ! isDistractionFree && isLargeViewport && showBlockBreadcrumbs && diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index f47743d6c15f4..7d8f38ae7a0eb 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -363,7 +363,7 @@ function VisualEditor( { const iframeStyles = useMemo( () => { return [ - ...styles, + ...( styles ?? [] ), { css: `.is-root-container{display:flow-root;${ // Some themes will have `min-height: 100vh` for the root container, diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss index 59f98450257f6..597769ff7fb78 100644 --- a/packages/editor/src/components/visual-editor/style.scss +++ b/packages/editor/src/components/visual-editor/style.scss @@ -29,6 +29,7 @@ font-size: $default-font-size; padding: 6px 12px; + &.is-tertiary, &.has-icon { padding: 6px; } diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 3f4c24b4b1e07..745ca7cb44090 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -9,6 +9,7 @@ import * as interfaceApis from '@wordpress/interface'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; +import EditorContentSlotFill from './components/editor-interface/content-slot-fill'; import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; @@ -48,8 +49,9 @@ lock( privateApis, { BackButton, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, - GlobalStylesProvider, EditorInterface, + EditorContentSlotFill, + GlobalStylesProvider, Header, InserterSidebar, ListViewSidebar, diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 81d95a9760273..ed4d98cdf7637 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -81,7 +81,6 @@ function InterfaceSkeleton( editorNotices, sidebar, secondarySidebar, - notices, content, actions, labels, @@ -210,11 +209,6 @@ function InterfaceSkeleton( ) } - { !! notices && ( -
- { notices } -
- ) } Date: Thu, 30 May 2024 16:22:04 +0100 Subject: [PATCH 2/3] Cleanup editor private apis --- packages/editor/src/private-apis.js | 30 ---------------------- packages/editor/src/private-apis.native.js | 24 ----------------- 2 files changed, 54 deletions(-) diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index 745ca7cb44090..58e15135e13ac 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -10,32 +10,17 @@ import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import EditorContentSlotFill from './components/editor-interface/content-slot-fill'; -import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; import BackButton from './components/header/back-button'; import EditorInterface from './components/editor-interface'; -import Header from './components/header'; import CreateTemplatePartModal from './components/create-template-part-modal'; -import InserterSidebar from './components/inserter-sidebar'; -import ListViewSidebar from './components/list-view-sidebar'; -import PatternOverridesPanel from './components/pattern-overrides-panel'; import PluginPostExcerpt from './components/post-excerpt/plugin'; -import PostPanelRow from './components/post-panel-row'; import PreferencesModal from './components/preferences-modal'; -import PostActions from './components/post-actions'; import { usePostActions } from './components/post-actions/actions'; -import PostCardPanel from './components/post-card-panel'; -import PostStatus from './components/post-status'; import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; -import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; -import SavePublishPanels from './components/save-publish-panels'; -import PostContentInformation from './components/post-content-information'; -import PostLastEditedPanel from './components/post-last-edited-panel'; import ResizableEditor from './components/resizable-editor'; import Sidebar from './components/sidebar'; -import TextEditor from './components/text-editor'; -import VisualEditor from './components/visual-editor'; import { mergeBaseAndUserConfigs, GlobalStylesProvider, @@ -52,31 +37,16 @@ lock( privateApis, { EditorInterface, EditorContentSlotFill, GlobalStylesProvider, - Header, - InserterSidebar, - ListViewSidebar, mergeBaseAndUserConfigs, - PatternOverridesPanel, PluginPostExcerpt, - PostActions, - PostPanelRow, PreferencesModal, usePostActions, - PostCardPanel, - PostStatus, ToolsMoreMenuGroup, ViewMoreMenuGroup, - PrivatePostExcerptPanel, - SavePublishPanels, - PostContentInformation, - PostLastEditedPanel, ResizableEditor, Sidebar, - TextEditor, - VisualEditor, // This is a temporary private API while we're updating the site editor to use EditorProvider. - useAutoSwitchEditorSidebars, useBlockEditorSettings, interfaceStore, ...remainingInterfaceApis, diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js index d6fb0894d04d6..7c302c9c87d3a 100644 --- a/packages/editor/src/private-apis.native.js +++ b/packages/editor/src/private-apis.native.js @@ -10,24 +10,12 @@ import VisualEditor from './components/visual-editor'; import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; -import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; -import InserterSidebar from './components/inserter-sidebar'; -import ListViewSidebar from './components/list-view-sidebar'; -import PatternOverridesPanel from './components/pattern-overrides-panel'; import PluginPostExcerpt from './components/post-excerpt/plugin'; -import PostPanelRow from './components/post-panel-row'; import PreferencesModal from './components/preferences-modal'; -import PostActions from './components/post-actions'; import { usePostActions } from './components/post-actions/actions'; -import PostCardPanel from './components/post-card-panel'; -import PostStatus from './components/post-status'; import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; -import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; -import SavePublishPanels from './components/save-publish-panels'; -import PostContentInformation from './components/post-content-information'; -import PostLastEditedPanel from './components/post-last-edited-panel'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -36,25 +24,13 @@ lock( privateApis, { VisualEditor, ExperimentalEditorProvider, EntitiesSavedStatesExtensible, - InserterSidebar, - ListViewSidebar, - PatternOverridesPanel, PluginPostExcerpt, - PostActions, - PostPanelRow, PreferencesModal, usePostActions, - PostCardPanel, - PostStatus, ToolsMoreMenuGroup, ViewMoreMenuGroup, - PrivatePostExcerptPanel, - SavePublishPanels, - PostContentInformation, - PostLastEditedPanel, // This is a temporary private API while we're updating the site editor to use EditorProvider. - useAutoSwitchEditorSidebars, useBlockEditorSettings, interfaceStore, ...remainingInterfaceApis, From 7e94d0c522538e562547d4905dcd198a61a7e075 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 31 May 2024 09:10:59 +0100 Subject: [PATCH 3/3] Fix e2e tests --- test/e2e/specs/site-editor/block-removal.spec.js | 12 +++++++++--- test/e2e/specs/site-editor/list-view.spec.js | 6 +++--- test/e2e/specs/site-editor/navigation-editor.spec.js | 4 ++-- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js index 14f0ae422cc98..7fc547c19e59e 100644 --- a/test/e2e/specs/site-editor/block-removal.spec.js +++ b/test/e2e/specs/site-editor/block-removal.spec.js @@ -30,7 +30,9 @@ test.describe( 'Site editor block removal prompt', () => { .click(); // Select and try to remove Query Loop block - const listView = page.getByRole( 'region', { name: 'List View' } ); + const listView = page.getByRole( 'region', { + name: 'Document Overview', + } ); await listView.getByRole( 'link', { name: 'Query Loop' } ).click(); await page.keyboard.press( 'Backspace' ); @@ -52,7 +54,9 @@ test.describe( 'Site editor block removal prompt', () => { .click(); // Select and open child blocks of Query Loop block - const listView = page.getByRole( 'region', { name: 'List View' } ); + const listView = page.getByRole( 'region', { + name: 'Document Overview', + } ); await listView.getByRole( 'link', { name: 'Query Loop' } ).click(); await page.keyboard.press( 'ArrowRight' ); @@ -79,7 +83,9 @@ test.describe( 'Site editor block removal prompt', () => { .click(); // Select Query Loop list item - const listView = page.getByRole( 'region', { name: 'List View' } ); + const listView = page.getByRole( 'region', { + name: 'Document Overview', + } ); await listView.getByRole( 'link', { name: 'Query Loop' } ).click(); // Reveal its inner blocks in the list view diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js index ba8a316ee10c4..db514463a73d7 100644 --- a/test/e2e/specs/site-editor/list-view.spec.js +++ b/test/e2e/specs/site-editor/list-view.spec.js @@ -26,7 +26,7 @@ test.describe( 'Site Editor List View', () => { editor, } ) => { await expect( - page.locator( 'role=region[name="List View"i]' ) + page.locator( 'role=region[name="Document Overview"i]' ) ).toBeHidden(); // Turn on block list view by default. @@ -37,7 +37,7 @@ test.describe( 'Site Editor List View', () => { await page.reload(); await expect( - page.locator( 'role=region[name="List View"i]' ) + page.locator( 'role=region[name="Document Overview"i]' ) ).toBeVisible(); // The preferences cleanup. @@ -121,7 +121,7 @@ test.describe( 'Site Editor List View', () => { await pageUtils.pressKeys( 'shift+Tab' ); await expect( page - .getByRole( 'region', { name: 'List View' } ) + .getByRole( 'region', { name: 'Document Overview' } ) .getByRole( 'button', { name: 'Close', } ) diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js index 47519dc3ba613..2813ceb13748a 100644 --- a/test/e2e/specs/site-editor/navigation-editor.spec.js +++ b/test/e2e/specs/site-editor/navigation-editor.spec.js @@ -45,7 +45,7 @@ test.describe( 'Editing Navigation Menus', () => { const listView = page .getByRole( 'region', { - name: 'List View', + name: 'Document Overview', } ) .getByRole( 'treegrid', { name: 'Block navigation structure', @@ -99,7 +99,7 @@ test.describe( 'Editing Navigation Menus', () => { // Check the standard tabs are not present. await expect( - sidebar.getByRole( 'tab', { name: 'List View' } ) + sidebar.getByRole( 'tab', { name: 'Document Overview' } ) ).toBeHidden(); await expect( sidebar.getByRole( 'tab', { name: 'Settings' } )