From 097d4c6c3230c8027672f559b0b66624b9214ae8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 May 2024 19:42:35 +0100 Subject: [PATCH] Editor: Move the InterfaceSkeleton to the editor package (#62118) Co-authored-by: youknowriad Co-authored-by: draganescu --- .../fullscreen-mode-close.js} | 2 +- .../src/components/back-button/index.js | 34 +++ .../style.scss | 15 + .../fullscreen-mode-close.js.snap} | 0 .../test/fullscreen-mode-close.js} | 2 +- .../edit-post/src/components/header/index.js | 53 ---- .../src/components/header/style.scss | 14 - .../edit-post/src/components/layout/index.js | 256 ++++++------------ .../src/components/layout/style.scss | 2 +- .../use-padding-appender.js | 0 .../components/layout/use-should-iframe.js | 40 +++ .../{header => }/more-menu/index.js | 4 +- .../more-menu/manage-patterns-menu-item.js | 0 .../more-menu/welcome-guide-menu-item.js | 0 .../visual-editor/block-inspector-button.js | 59 ---- .../src/components/visual-editor/index.js | 108 -------- packages/edit-post/src/index.js | 14 +- packages/edit-post/src/style.scss | 3 +- .../src/components/header-edit-mode/index.js | 29 +- .../src/components/editor-interface/index.js | 195 +++++++++++++ .../src/components/header/back-button.js} | 15 +- .../editor/src/components/header/index.js | 4 +- .../src/components/text-editor/index.js | 13 +- .../src/components/visual-editor/index.js | 16 +- packages/editor/src/private-apis.js | 4 + 25 files changed, 432 insertions(+), 450 deletions(-) rename packages/edit-post/src/components/{header/fullscreen-mode-close/index.js => back-button/fullscreen-mode-close.js} (97%) create mode 100644 packages/edit-post/src/components/back-button/index.js rename packages/edit-post/src/components/{header/fullscreen-mode-close => back-button}/style.scss (88%) rename packages/edit-post/src/components/{header/fullscreen-mode-close/test/__snapshots__/index.js.snap => back-button/test/__snapshots__/fullscreen-mode-close.js.snap} (100%) rename packages/edit-post/src/components/{header/fullscreen-mode-close/test/index.js => back-button/test/fullscreen-mode-close.js} (97%) delete mode 100644 packages/edit-post/src/components/header/index.js delete mode 100644 packages/edit-post/src/components/header/style.scss rename packages/edit-post/src/components/{visual-editor => layout}/use-padding-appender.js (100%) create mode 100644 packages/edit-post/src/components/layout/use-should-iframe.js rename packages/edit-post/src/components/{header => }/more-menu/index.js (92%) rename packages/edit-post/src/components/{header => }/more-menu/manage-patterns-menu-item.js (100%) rename packages/edit-post/src/components/{header => }/more-menu/welcome-guide-menu-item.js (100%) delete mode 100644 packages/edit-post/src/components/visual-editor/block-inspector-button.js delete mode 100644 packages/edit-post/src/components/visual-editor/index.js create mode 100644 packages/editor/src/components/editor-interface/index.js rename packages/{edit-post/src/components/header/main-dashboard-button/index.js => editor/src/components/header/back-button.js} (55%) diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js similarity index 97% rename from packages/edit-post/src/components/header/fullscreen-mode-close/index.js rename to packages/edit-post/src/components/back-button/fullscreen-mode-close.js index 839802f380e1f3..59694de16cb925 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js +++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js @@ -22,7 +22,7 @@ import { useReducedMotion } from '@wordpress/compose'; /** * Internal dependencies */ -import { store as editPostStore } from '../../../store'; +import { store as editPostStore } from '../../store'; function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) { const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect( diff --git a/packages/edit-post/src/components/back-button/index.js b/packages/edit-post/src/components/back-button/index.js new file mode 100644 index 00000000000000..ecce4623cea493 --- /dev/null +++ b/packages/edit-post/src/components/back-button/index.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { __unstableMotion as motion } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import FullscreenModeClose from './fullscreen-mode-close'; +import { unlock } from '../../lock-unlock'; + +const { BackButton: BackButtonFill } = unlock( editorPrivateApis ); + +const slideX = { + hidden: { x: '-100%' }, + distractionFreeInactive: { x: 0 }, + hover: { x: 0, transition: { type: 'tween', delay: 0.2 } }, +}; + +function BackButton( { initialPost } ) { + return ( + + + + + + ); +} + +export default BackButton; diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/back-button/style.scss similarity index 88% rename from packages/edit-post/src/components/header/fullscreen-mode-close/style.scss rename to packages/edit-post/src/components/back-button/style.scss index 28a108c521bc44..d6455c707fb1d9 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/back-button/style.scss @@ -64,3 +64,18 @@ margin-top: -($border-width); } } + +/** + * Show icon label overrides. + */ +.show-icon-labels .editor-header { + .edit-post-fullscreen-mode-close.has-icon { + width: $header-height; + svg { + display: block; + } + &::after { + content: none; + } + } +} diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap similarity index 100% rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap rename to packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js similarity index 97% rename from packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js rename to packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js index b66d548045ad42..4a549370d0f056 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js +++ b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js @@ -11,7 +11,7 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import FullscreenModeClose from '../'; +import FullscreenModeClose from '../fullscreen-mode-close'; jest.mock( '@wordpress/data/src/components/use-select', () => { // This allows us to tweak the returned value on each test. diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js deleted file mode 100644 index 311279292d8f6a..00000000000000 --- a/packages/edit-post/src/components/header/index.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as editorPrivateApis } from '@wordpress/editor'; -import { useSelect } from '@wordpress/data'; -import { __unstableMotion as motion } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import FullscreenModeClose from './fullscreen-mode-close'; -import PostEditorMoreMenu from './more-menu'; -import MainDashboardButton from './main-dashboard-button'; -import { store as editPostStore } from '../../store'; -import { unlock } from '../../lock-unlock'; - -const { Header: EditorHeader } = unlock( editorPrivateApis ); - -const slideX = { - hidden: { x: '-100%' }, - distractionFreeInactive: { x: 0 }, - hover: { x: 0, transition: { type: 'tween', delay: 0.2 } }, -}; - -function Header( { setEntitiesSavedStatesCallback, initialPost } ) { - const { hasActiveMetaboxes } = useSelect( ( select ) => { - return { - hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - }; - }, [] ); - - return ( - - - - - - - - - ); -} - -export default Header; diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss deleted file mode 100644 index 53672eb09e701f..00000000000000 --- a/packages/edit-post/src/components/header/style.scss +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Show icon label overrides. - */ -.show-icon-labels .editor-header { - .edit-post-fullscreen-mode-close.has-icon { - width: $header-height; - svg { - display: block; - } - &::after { - content: none; - } - } -} diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 0444b7f7293784..b79cefa096625d 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -10,24 +10,19 @@ import { AutosaveMonitor, LocalAutosaveMonitor, UnsavedChangesWarning, - EditorNotices, EditorKeyboardShortcutsRegister, - EditorSnackbars, store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { - BlockBreadcrumb, - BlockToolbar, privateApis as blockEditorPrivateApis, store as blockEditorStore, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; import { PluginArea } from '@wordpress/plugins'; -import { __, _x, sprintf } from '@wordpress/i18n'; -import { useState, useCallback, useMemo } from '@wordpress/element'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { __, sprintf } from '@wordpress/i18n'; +import { useCallback, useMemo } from '@wordpress/element'; import { store as noticesStore } from '@wordpress/notices'; import { store as preferencesStore } from '@wordpress/preferences'; import { privateApis as commandsPrivateApis } from '@wordpress/commands'; @@ -38,55 +33,54 @@ import { addQueryArgs } from '@wordpress/url'; /** * Internal dependencies */ -import VisualEditor from '../visual-editor'; +import BackButton from '../back-button'; import EditPostKeyboardShortcuts from '../keyboard-shortcuts'; import InitPatternModal from '../init-pattern-modal'; import BrowserURL from '../browser-url'; -import Header from '../header'; import MetaBoxes from '../meta-boxes'; +import PostEditorMoreMenu from '../more-menu'; import WelcomeGuide from '../welcome-guide'; import { store as editPostStore } from '../../store'; import { unlock } from '../../lock-unlock'; import useEditPostCommands from '../../commands/use-commands'; +import { usePaddingAppender } from './use-padding-appender'; +import { useShouldIframe } from './use-should-iframe'; const { getLayoutStyles } = unlock( blockEditorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); const { useCommandContext } = unlock( commandsPrivateApis ); -const { - InserterSidebar, - ListViewSidebar, - ComplementaryArea, - FullscreenMode, - SavePublishPanels, - InterfaceSkeleton, - interfaceStore, - Sidebar, - TextEditor, -} = unlock( editorPrivateApis ); +const { EditorInterface, FullscreenMode, Sidebar } = + unlock( editorPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); - -const interfaceLabels = { - /* translators: accessibility text for the editor top bar landmark region. */ - header: __( 'Editor top bar' ), - /* 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' ), -}; +const DESIGN_POST_TYPES = [ + 'wp_template', + 'wp_template_part', + 'wp_block', + 'wp_navigation', +]; function useEditorStyles() { - const { hasThemeStyleSupport, editorSettings } = useSelect( - ( select ) => ( { + const { + hasThemeStyleSupport, + editorSettings, + isZoomedOutView, + hasMetaBoxes, + renderingMode, + postType, + } = useSelect( ( select ) => { + const { __unstableGetEditorMode } = select( blockEditorStore ); + const { getCurrentPostType, getRenderingMode } = select( editorStore ); + const _postType = getCurrentPostType(); + return { hasThemeStyleSupport: select( editPostStore ).isFeatureActive( 'themeStyles' ), editorSettings: select( editorStore ).getEditorSettings(), - } ), - [] - ); + isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + hasMetaBoxes: select( editPostStore ).hasMetaBoxes(), + renderingMode: getRenderingMode(), + postType: _postType, + }; + }, [] ); // Compute the default styles. return useMemo( () => { @@ -120,7 +114,24 @@ function useEditorStyles() { } ); } - return hasThemeStyles ? editorSettings.styles : defaultEditorStyles; + const baseStyles = hasThemeStyles + ? editorSettings.styles ?? [] + : defaultEditorStyles; + + // Add a constant padding for the typewritter effect. When typing at the + // bottom, there needs to be room to scroll up. + if ( + ! isZoomedOutView && + ! hasMetaBoxes && + renderingMode === 'post-only' && + ! DESIGN_POST_TYPES.includes( postType ) + ) { + baseStyles.push( { + css: 'body{padding-bottom: 40vh}', + } ); + } + + return baseStyles; }, [ editorSettings.defaultEditorStyles, editorSettings.disableLayoutStyles, @@ -132,71 +143,44 @@ function useEditorStyles() { function Layout( { initialPost } ) { useCommands(); useEditPostCommands(); - - const isMobileViewport = useViewportMatch( 'medium', '<' ); const isWideViewport = useViewportMatch( 'large' ); - const isLargeViewport = useViewportMatch( 'medium' ); - + const paddingAppenderRef = usePaddingAppender(); + const shouldIframe = useShouldIframe(); const { createErrorNotice } = useDispatch( noticesStore ); const { mode, isFullscreenActive, - isRichEditingEnabled, sidebarIsOpened, hasActiveMetaboxes, - previousShortcut, - nextShortcut, hasBlockSelected, - isInserterOpened, - isListViewOpened, showIconLabels, isDistractionFree, showBlockBreadcrumbs, showMetaBoxes, - documentLabel, hasHistory, - hasBlockBreadcrumbs, - blockEditorMode, isEditingTemplate, + isWelcomeGuideVisible, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); - const { getEditorSettings, getPostTypeLabel } = select( editorStore ); - const editorSettings = getEditorSettings(); - const postTypeLabel = getPostTypeLabel(); + const { getEditorSettings } = select( editorStore ); + const { isFeatureActive } = select( editPostStore ); return { - showMetaBoxes: - select( editorStore ).getRenderingMode() === 'post-only', - sidebarIsOpened: !! ( - select( interfaceStore ).getActiveComplementaryArea( 'core' ) || - select( editorStore ).isPublishSidebarOpened() - ), + mode: select( editorStore ).getEditorMode(), isFullscreenActive: select( editPostStore ).isFeatureActive( 'fullscreenMode' ), - isInserterOpened: select( editorStore ).isInserterOpened(), - isListViewOpened: select( editorStore ).isListViewOpened(), - mode: select( editorStore ).getEditorMode(), - isRichEditingEnabled: editorSettings.richEditingEnabled, hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - previousShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/editor/previous-region' ), - nextShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/editor/next-region' ), + hasBlockSelected: + !! select( blockEditorStore ).getBlockSelectionStart(), showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), - // translators: Default label for the Document in the Block Breadcrumb. - documentLabel: postTypeLabel || _x( 'Document', 'noun' ), - hasBlockSelected: - !! select( blockEditorStore ).getBlockSelectionStart(), + showMetaBoxes: + select( editorStore ).getRenderingMode() === 'post-only', hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord, - hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), - blockEditorMode: - select( blockEditorStore ).__unstableGetEditorMode(), isEditingTemplate: select( editorStore ).getCurrentPostType() === 'wp_template', + isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), }; }, [] ); @@ -208,21 +192,6 @@ function Layout( { initialPost } ) { const styles = useEditorStyles(); - // 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 ] - ); - // We need to add the show-icon-labels class to the body element so it is applied to modals. if ( showIconLabels ) { document.body.classList.add( 'show-icon-labels' ); @@ -234,15 +203,10 @@ function Layout( { initialPost } ) { 'is-sidebar-opened': sidebarIsOpened, 'has-metaboxes': hasActiveMetaboxes, 'is-distraction-free': isDistractionFree && isWideViewport, - 'is-entity-save-view-open': !! entitiesSavedStatesCallback, 'has-block-breadcrumbs': - hasBlockBreadcrumbs && ! isDistractionFree && isWideViewport, + showBlockBreadcrumbs && ! isDistractionFree && isWideViewport, } ); - const secondarySidebarLabel = isListViewOpened - ? __( 'Document Overview' ) - : __( 'Block Library' ); - function onPluginAreaError( name ) { createErrorNotice( sprintf( @@ -317,83 +281,6 @@ function Layout( { initialPost } ) { - - - } - editorNotices={ } - secondarySidebar={ - mode === 'visual' && - ( ( isInserterOpened && ) || - ( isListViewOpened && ) ) - } - sidebar={ - ! isDistractionFree && ( - - ) - } - notices={ } - content={ - <> - { ! isDistractionFree && } - { ( mode === 'text' || ! isRichEditingEnabled ) && ( - - ) } - { ! isLargeViewport && mode === 'visual' && ( - - ) } - { isRichEditingEnabled && mode === 'visual' && ( - - ) } - { ! isDistractionFree && showMetaBoxes && ( -
- - -
- ) } - - } - footer={ - ! isDistractionFree && - ! isMobileViewport && - showBlockBreadcrumbs && - isRichEditingEnabled && - blockEditorMode !== 'zoom-out' && - mode === 'visual' && ( -
- -
- ) - } - actions={ - - } - shortcuts={ { - previous: previousShortcut, - next: nextShortcut, - } } - /> @@ -405,6 +292,25 @@ function Layout( { initialPost } ) { } /> ) } + + + + { ! isDistractionFree && showMetaBoxes && ( +
+ + +
+ ) } + ); } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index bb0ce2e38732ea..e1b4ff07bf30bf 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -1,4 +1,4 @@ -.edit-post-visual-editor { +.editor-visual-editor { flex: 1 0 auto; height: auto; } diff --git a/packages/edit-post/src/components/visual-editor/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js similarity index 100% rename from packages/edit-post/src/components/visual-editor/use-padding-appender.js rename to packages/edit-post/src/components/layout/use-padding-appender.js diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js new file mode 100644 index 00000000000000..03efae92c72f7d --- /dev/null +++ b/packages/edit-post/src/components/layout/use-should-iframe.js @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import { store as editorStore } from '@wordpress/editor'; +import { useSelect } from '@wordpress/data'; +import { store as blocksStore } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import { store as editPostStore } from '../../store'; + +const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; + +export function useShouldIframe() { + const { + isBlockBasedTheme, + hasV3BlocksOnly, + isEditingTemplate, + hasMetaBoxes, + } = useSelect( ( select ) => { + const { getEditorSettings, getCurrentPostType } = select( editorStore ); + const { getBlockTypes } = select( blocksStore ); + const editorSettings = getEditorSettings(); + return { + isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, + hasV3BlocksOnly: getBlockTypes().every( ( type ) => { + return type.apiVersion >= 3; + } ), + isEditingTemplate: getCurrentPostType() === 'wp_template', + hasMetaBoxes: select( editPostStore ).hasMetaBoxes(), + }; + }, [] ); + + return ( + ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && + ! hasMetaBoxes ) || + isEditingTemplate + ); +} diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js similarity index 92% rename from packages/edit-post/src/components/header/more-menu/index.js rename to packages/edit-post/src/components/more-menu/index.js index c9f1c50251ca21..136742a19dddd4 100644 --- a/packages/edit-post/src/components/header/more-menu/index.js +++ b/packages/edit-post/src/components/more-menu/index.js @@ -10,10 +10,10 @@ import { displayShortcut } from '@wordpress/keycodes'; /** * Internal dependencies */ -import { unlock } from '../../../lock-unlock'; +import { unlock } from '../../lock-unlock'; import ManagePatternsMenuItem from './manage-patterns-menu-item'; import WelcomeGuideMenuItem from './welcome-guide-menu-item'; -import EditPostPreferencesModal from '../../preferences-modal'; +import EditPostPreferencesModal from '../preferences-modal'; const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis ); diff --git a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js similarity index 100% rename from packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js rename to packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js diff --git a/packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js b/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js similarity index 100% rename from packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js rename to packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js deleted file mode 100644 index 87b55d4eb3fdca..00000000000000 --- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { MenuItem } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { speak } from '@wordpress/a11y'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; - -const noop = () => {}; - -export function BlockInspectorButton( { onClick = noop, small = false } ) { - const { shortcut, areAdvancedSettingsOpened } = useSelect( - ( select ) => ( { - shortcut: select( - keyboardShortcutsStore - ).getShortcutRepresentation( 'core/editor/toggle-sidebar' ), - areAdvancedSettingsOpened: - select( editPostStore ).getActiveGeneralSidebarName() === - 'edit-post/block', - } ), - [] - ); - const { openGeneralSidebar, closeGeneralSidebar } = - useDispatch( editPostStore ); - - const label = areAdvancedSettingsOpened - ? __( 'Hide more settings' ) - : __( 'Show more settings' ); - - return ( - { - if ( areAdvancedSettingsOpened ) { - closeGeneralSidebar(); - speak( __( 'Block settings closed' ) ); - } else { - openGeneralSidebar( 'edit-post/block' ); - speak( - __( - 'Additional settings are now available in the Editor block settings sidebar' - ) - ); - } - onClick(); - } } - shortcut={ shortcut } - > - { ! small && label } - - ); -} - -export default BlockInspectorButton; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js deleted file mode 100644 index 24a50cb7ba69a3..00000000000000 --- a/packages/edit-post/src/components/visual-editor/index.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * WordPress dependencies - */ -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { useMemo } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; -import { store as blocksStore } from '@wordpress/blocks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; -import { unlock } from '../../lock-unlock'; -import { usePaddingAppender } from './use-padding-appender'; - -const { VisualEditor: VisualEditorRoot } = unlock( editorPrivateApis ); - -const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false; -const DESIGN_POST_TYPES = [ - 'wp_template', - 'wp_template_part', - 'wp_block', - 'wp_navigation', -]; - -export default function VisualEditor( { styles } ) { - const { - isWelcomeGuideVisible, - renderingMode, - isBlockBasedTheme, - hasV3BlocksOnly, - isEditingTemplate, - isZoomedOutView, - postType, - } = useSelect( ( select ) => { - const { isFeatureActive } = select( editPostStore ); - const { getEditorSettings, getRenderingMode, getCurrentPostType } = - select( editorStore ); - const { getBlockTypes } = select( blocksStore ); - const { __unstableGetEditorMode } = select( blockEditorStore ); - const editorSettings = getEditorSettings(); - const _postType = getCurrentPostType(); - return { - isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), - renderingMode: getRenderingMode(), - isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, - hasV3BlocksOnly: getBlockTypes().every( ( type ) => { - return type.apiVersion >= 3; - } ), - isEditingTemplate: _postType === 'wp_template', - isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', - postType: _postType, - }; - }, [] ); - const hasMetaBoxes = useSelect( - ( select ) => select( editPostStore ).hasMetaBoxes(), - [] - ); - - const paddingAppenderRef = usePaddingAppender(); - - let paddingBottom; - - // Add a constant padding for the typewritter effect. When typing at the - // bottom, there needs to be room to scroll up. - if ( - ! isZoomedOutView && - ! hasMetaBoxes && - renderingMode === 'post-only' && - ! DESIGN_POST_TYPES.includes( postType ) - ) { - paddingBottom = '40vh'; - } - - styles = useMemo( - () => [ - ...styles, - { - // We should move this in to future to the body. - css: paddingBottom - ? `body{padding-bottom:${ paddingBottom }}` - : '', - }, - ], - [ styles, paddingBottom ] - ); - - const isToBeIframed = - ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && - ! hasMetaBoxes ) || - isEditingTemplate; - - return ( - - ); -} diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index f19248fa0d51c2..0ec4388a9af70e 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -14,12 +14,19 @@ import { registerLegacyWidgetBlock, registerWidgetGroupBlock, } from '@wordpress/widgets'; -import { store as editorStore } from '@wordpress/editor'; +import { + store as editorStore, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; /** * Internal dependencies */ import Editor from './editor'; +import { unlock } from './lock-unlock'; + +const { BackButton: __experimentalMainDashboardButton } = + unlock( editorPrivateApis ); /** * Initializes and returns an instance of Editor. @@ -151,8 +158,7 @@ export function reinitializeEditor() { } ); } -export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close'; -export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button'; - +export { default as __experimentalFullscreenModeClose } from './components/back-button/fullscreen-mode-close'; +export { __experimentalMainDashboardButton }; export { store } from './store'; export * from './deprecated'; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 7a935f198660a8..a95c02242644b5 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -1,5 +1,4 @@ -@import "./components/header/style.scss"; -@import "./components/header/fullscreen-mode-close/style.scss"; +@import "./components/back-button/style.scss"; @import "./components/layout/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; @import "./components/welcome-guide/style.scss"; diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index fcd4ea1b388028..3f4176fc198de0 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -31,20 +31,23 @@ function Header( { setEntitiesSavedStatesCallback } ) { }, [] ); return ( - - } - forceDisableBlockTools={ ! hasDefaultEditorCanvasView } - title={ - ! hasDefaultEditorCanvasView - ? getEditorCanvasContainerTitle( editorCanvasView ) - : undefined - } - > + <> + + } + forceDisableBlockTools={ ! hasDefaultEditorCanvasView } + title={ + ! hasDefaultEditorCanvasView + ? getEditorCanvasContainerTitle( editorCanvasView ) + : undefined + } + /> - + ); } diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js new file mode 100644 index 00000000000000..60ee3043e073bb --- /dev/null +++ b/packages/editor/src/components/editor-interface/index.js @@ -0,0 +1,195 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface'; +import { useSelect } from '@wordpress/data'; +import { __, _x } from '@wordpress/i18n'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { + store as blockEditorStore, + BlockBreadcrumb, + BlockToolbar, +} from '@wordpress/block-editor'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; +import { useViewportMatch } from '@wordpress/compose'; +import { useState, useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +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'; + +const interfaceLabels = { + /* translators: accessibility text for the editor top bar landmark region. */ + header: __( 'Editor top bar' ), + /* 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' ), +}; + +export default function EditorInterface( { + className, + styles, + children, + forceIsDirty, + contentRef, + disableIframe, + autoFocus, +} ) { + const { + mode, + isRichEditingEnabled, + isInserterOpened, + isListViewOpened, + isDistractionFree, + previousShortcut, + nextShortcut, + showBlockBreadcrumbs, + documentLabel, + blockEditorMode, + } = useSelect( ( select ) => { + const { get } = select( preferencesStore ); + const { getEditorSettings, getPostTypeLabel } = select( editorStore ); + const editorSettings = getEditorSettings(); + const postTypeLabel = getPostTypeLabel(); + + return { + mode: select( editorStore ).getEditorMode(), + isRichEditingEnabled: editorSettings.richEditingEnabled, + isInserterOpened: select( editorStore ).isInserterOpened(), + isListViewOpened: select( editorStore ).isListViewOpened(), + isDistractionFree: get( 'core', 'distractionFree' ), + previousShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/editor/previous-region' ), + nextShortcut: select( + keyboardShortcutsStore + ).getAllShortcutKeyCombinations( 'core/editor/next-region' ), + showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), + // translators: Default label for the Document in the Block Breadcrumb. + documentLabel: postTypeLabel || _x( 'Document', 'noun' ), + blockEditorMode: + select( blockEditorStore ).__unstableGetEditorMode(), + }; + }, [] ); + const isWideViewport = useViewportMatch( 'large' ); + const isLargeViewport = useViewportMatch( 'medium' ); + const secondarySidebarLabel = isListViewOpened + ? __( 'Document Overview' ) + : __( 'Block Library' ); + + // 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 ] + ); + + return ( + + } + editorNotices={ } + secondarySidebar={ + mode === 'visual' && + ( ( isInserterOpened && ) || + ( isListViewOpened && ) ) + } + sidebar={ + ! isDistractionFree && + } + notices={ } + content={ + <> + { ! isDistractionFree && } + { ( mode === 'text' || ! isRichEditingEnabled ) && ( + + ) } + { ! isLargeViewport && mode === 'visual' && ( + + ) } + { isRichEditingEnabled && mode === 'visual' && ( + + ) } + { children } + + } + footer={ + ! isDistractionFree && + isLargeViewport && + showBlockBreadcrumbs && + isRichEditingEnabled && + blockEditorMode !== 'zoom-out' && + mode === 'visual' && ( +
+ +
+ ) + } + actions={ + + } + shortcuts={ { + previous: previousShortcut, + next: nextShortcut, + } } + /> + ); +} diff --git a/packages/edit-post/src/components/header/main-dashboard-button/index.js b/packages/editor/src/components/header/back-button.js similarity index 55% rename from packages/edit-post/src/components/header/main-dashboard-button/index.js rename to packages/editor/src/components/header/back-button.js index 0878a7cce49012..7b775d11cd7a83 100644 --- a/packages/edit-post/src/components/header/main-dashboard-button/index.js +++ b/packages/editor/src/components/header/back-button.js @@ -6,13 +6,13 @@ import { createSlotFill, } from '@wordpress/components'; +// Keeping an old name for backward compatibility. const slotName = '__experimentalMainDashboardButton'; -const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName ); +const { Fill, Slot } = createSlotFill( slotName ); -const MainDashboardButton = Fill; - -const Slot = ( { children } ) => { +const BackButton = Fill; +const BackButtonSlot = ( { children } ) => { const fills = useSlotFills( slotName ); const hasFills = Boolean( fills && fills.length ); @@ -20,9 +20,8 @@ const Slot = ( { children } ) => { return children; } - return ; + return ; }; +BackButton.Slot = BackButtonSlot; -MainDashboardButton.Slot = Slot; - -export default MainDashboardButton; +export default BackButton; diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 98501386434b69..477ce41c968a6a 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -17,6 +17,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies */ +import BackButton from './back-button'; import CollapsableBlockToolbar from '../collapsible-block-toolbar'; import DocumentBar from '../document-bar'; import DocumentTools from '../document-tools'; @@ -41,7 +42,6 @@ function Header( { forceDisableBlockTools, setEntitiesSavedStatesCallback, title, - children, } ) { const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -81,7 +81,7 @@ function Header( { // as some plugins might be relying on its presence. return (
- { children } + { const { getEditorSettings } = select( editorStore ); @@ -25,6 +26,14 @@ export default function TextEditor() { }; }, [] ); + const titleRef = useRef(); + useEffect( () => { + if ( autoFocus ) { + return; + } + titleRef?.current?.focus(); + }, [ autoFocus ] ); + return (
{ isRichEditingEnabled && ( @@ -40,7 +49,7 @@ export default function TextEditor() {
) }
- +
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js index 52bc953eff3290..f47743d6c15f42 100644 --- a/packages/editor/src/components/visual-editor/index.js +++ b/packages/editor/src/components/visual-editor/index.js @@ -376,11 +376,17 @@ function VisualEditor( { return (