From ff0495fd659bc474531ccaf2798b286b1420299d Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 31 Jan 2024 16:59:10 +1100 Subject: [PATCH 1/3] Update focus mode to consisetntly use the document bar's back button --- .../src/components/block-canvas/style.scss | 2 +- .../src/components/visual-editor/style.scss | 2 +- .../components/block-editor/back-button.js | 51 ----- .../block-editor/site-editor-canvas.js | 7 +- .../src/components/block-editor/style.scss | 22 +-- .../block-editor/use-site-editor-settings.js | 18 ++ .../src/components/document-bar/index.js | 184 ++++++++++-------- .../src/components/document-bar/style.scss | 37 ---- 8 files changed, 129 insertions(+), 194 deletions(-) delete mode 100644 packages/edit-site/src/components/block-editor/back-button.js diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss index c431b5ca00b0f..2dc9e32d7a393 100644 --- a/packages/block-editor/src/components/block-canvas/style.scss +++ b/packages/block-editor/src/components/block-canvas/style.scss @@ -9,5 +9,5 @@ iframe[name="editor-canvas"]:not(.has-editor-padding) { } iframe[name="editor-canvas"].has-editor-padding { - padding: $grid-unit-60 $grid-unit-60 0; + padding: $grid-unit-30 $grid-unit-30 0; } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 46838c97f8799..8ad587d4e5a58 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -11,7 +11,7 @@ // Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like // interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color) // when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration). - background-color: $gray-900; + background-color: $gray-300; // The button element easily inherits styles that are meant for the editor style. // These rules enhance the specificity to reduce that inheritance. diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js deleted file mode 100644 index 7161626660227..0000000000000 --- a/packages/edit-site/src/components/block-editor/back-button.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * WordPress dependencies - */ -import { Button } from '@wordpress/components'; -import { arrowLeft } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import { - TEMPLATE_PART_POST_TYPE, - NAVIGATION_POST_TYPE, - PATTERN_TYPES, -} from '../../utils/constants'; -import { unlock } from '../../lock-unlock'; - -const { useLocation, useHistory } = unlock( routerPrivateApis ); - -function BackButton() { - const location = useLocation(); - const history = useHistory(); - const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE; - const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE; - const isPattern = location.params.postType === PATTERN_TYPES.user; - - const isFocusMode = - location.params.focusMode || - isTemplatePart || - isNavigationMenu || - isPattern; - - if ( ! isFocusMode ) { - return null; - } - - return ( - - ); -} - -export default BackButton; diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js index e946068ea1d84..f1e4a5fa3f2c6 100644 --- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js @@ -11,7 +11,6 @@ import { useViewportMatch, useResizeObserver } from '@wordpress/compose'; /** * Internal dependencies */ -import BackButton from './back-button'; import ResizableEditor from './resizable-editor'; import EditorCanvas from './editor-canvas'; import EditorCanvasContainer from '../editor-canvas-container'; @@ -20,6 +19,7 @@ import { store as editSiteStore } from '../../store'; import { FOCUSABLE_ENTITIES, NAVIGATION_POST_TYPE, + TEMPLATE_POST_TYPE, } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; import { privateApis as routerPrivateApis } from '@wordpress/router'; @@ -54,7 +54,9 @@ export default function SiteEditorCanvas() { isFocusMode && ! isViewMode && // Disable resizing in mobile viewport. - ! isMobileViewport; + ! isMobileViewport && + // Disable resizing when editing a template in focus mode. + templateType !== TEMPLATE_POST_TYPE; const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE; const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode; @@ -74,7 +76,6 @@ export default function SiteEditorCanvas() { 'is-view-mode': isViewMode, } ) } > - { + const isFocusMode = + location.params.focusMode || + FOCUSABLE_ENTITIES.includes( location.params.postType ); + return isFocusMode ? () => history.back() : undefined; + }, [ location.params.focusMode, location.params.postType, history ] ); + return goBack; +} + export function useSpecificEditorSettings() { const getPostLinkProps = usePostLinkProps(); const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect( @@ -118,6 +133,7 @@ export function useSpecificEditorSettings() { ); const archiveLabels = useArchiveLabel( templateSlug ); const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all'; + const goBack = useGoBack(); const defaultEditorSettings = useMemo( () => { return { ...settings, @@ -127,6 +143,7 @@ export function useSpecificEditorSettings() { focusMode: canvasMode !== 'view', defaultRenderingMode, getPostLinkProps, + goBack, // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, __experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel, @@ -136,6 +153,7 @@ export function useSpecificEditorSettings() { canvasMode, defaultRenderingMode, getPostLinkProps, + goBack, archiveLabels.archiveTypeLabel, archiveLabels.archiveNameLabel, ] ); diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 97e9c8a2cf779..0400b1bcac4cb 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -12,6 +12,8 @@ import { Button, __experimentalText as Text, __experimentalHStack as HStack, + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; import { BlockIcon } from '@wordpress/block-editor'; import { @@ -22,16 +24,16 @@ import { symbol, } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; -import { useEntityRecord } from '@wordpress/core-data'; +import { store as coreStore } from '@wordpress/core-data'; import { store as commandsStore } from '@wordpress/commands'; -import { useState, useEffect, useRef } from '@wordpress/element'; +import { useRef, useEffect } from '@wordpress/element'; /** * Internal dependencies */ import { store as editorStore } from '../../store'; -const typeLabels = { +const TYPE_LABELS = { // translators: 1: Pattern title. wp_pattern: __( 'Editing pattern: %s' ), // translators: 1: Navigation menu title. @@ -42,122 +44,142 @@ const typeLabels = { wp_template_part: __( 'Editing template part: %s' ), }; -const icons = { +const ICONS = { wp_block: symbol, wp_navigation: navigationIcon, }; +const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ]; + +const GLOBAL_POST_TYPES = [ + ...TEMPLATE_POST_TYPES, + 'wp_block', + 'wp_navigation', +]; + +const MotionButton = motion( Button ); + export default function DocumentBar() { - const { postType, postId, goBack } = useSelect( ( select ) => { + const { + postType, + goBack, + document, + isResolving, + templateIcon, + templateTitle, + } = useSelect( ( select ) => { const { - getCurrentPostId, getCurrentPostType, - getEditorSettings: getSettings, + getCurrentPostId, + getEditorSettings, + __experimentalGetTemplateInfo: getTemplateInfo, } = select( editorStore ); - const back = getSettings().goBack; + const { getEditedEntityRecord, getIsResolving } = select( coreStore ); + const _postType = getCurrentPostType(); + const _postId = getCurrentPostId(); + const { goBack: _goBack } = getEditorSettings(); + const _document = getEditedEntityRecord( + 'postType', + _postType, + _postId + ); + const _templateInfo = getTemplateInfo( _document ); return { - postType: getCurrentPostType(), - postId: getCurrentPostId(), - goBack: typeof back === 'function' ? back : undefined, - getEditorSettings: getSettings, + postType: _postType, + goBack: typeof _goBack === 'function' ? _goBack : undefined, + document: _document, + isResolving: getIsResolving( + 'getEditedEntityRecord', + 'postType', + _postType, + _postId + ), + templateIcon: _templateInfo.icon, + templateTitle: _templateInfo.title, }; }, [] ); - const handleOnBack = () => { - if ( goBack ) { - goBack(); - } - }; - - return ( - - ); -} - -function BaseDocumentActions( { postType, postId, onBack } ) { const { open: openCommandCenter } = useDispatch( commandsStore ); - const { editedRecord: doc, isResolving } = useEntityRecord( - 'postType', - postType, - postId - ); - const { templateIcon, templateTitle } = useSelect( ( select ) => { - const { __experimentalGetTemplateInfo: getTemplateInfo } = - select( editorStore ); - const templateInfo = getTemplateInfo( doc ); - return { - templateIcon: templateInfo.icon, - templateTitle: templateInfo.title, - }; - } ); - const isNotFound = ! doc && ! isResolving; - const icon = icons[ postType ] ?? pageIcon; - const [ isAnimated, setIsAnimated ] = useState( false ); - const isMounting = useRef( true ); - const isTemplate = [ 'wp_template', 'wp_template_part' ].includes( - postType - ); - const isGlobalEntity = [ - 'wp_template', - 'wp_navigation', - 'wp_template_part', - 'wp_block', - ].includes( postType ); - useEffect( () => { - if ( ! isMounting.current ) { - setIsAnimated( true ); - } - isMounting.current = false; - }, [ postType, postId ] ); + const isNotFound = ! document && ! isResolving; + const icon = ICONS[ postType ] ?? pageIcon; + const isTemplate = TEMPLATE_POST_TYPES.includes( postType ); + const isGlobalEntity = GLOBAL_POST_TYPES.includes( postType ); + const hasBackButton = !! goBack; + const title = isTemplate ? templateTitle : document.title; - const title = isTemplate ? templateTitle : doc.title; + const mounted = useRef( false ); + useEffect( () => { + mounted.current = true; + }, [] ); return (
- { onBack && ( - - ) } - { isNotFound && { __( 'Document not found' ) } } - { ! isNotFound && ( + + { hasBackButton && ( + { + event.stopPropagation(); + goBack(); + } } + size="compact" + initial={ + mounted.current + ? { opacity: 0, transform: 'translateX(15%)' } + : false // Don't show entry animation when DocumentBar mounts. + } + animate={ { opacity: 1, transform: 'translateX(0%)' } } + exit={ { opacity: 0, transform: 'translateX(15%)' } } + > + { __( 'Back' ) } + + ) } + + { isNotFound ? ( + { __( 'Document not found' ) } + ) : ( + ) } + { isNotFound && { __( 'Document not found' ) } } + { ! isNotFound && (