From 4d9750602c1aee0ec2682ade66357cd66553e8bd Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 18 Jun 2024 09:02:26 -0700 Subject: [PATCH 01/14] Revise header for resilient centering --- .../collapsible-block-toolbar/index.js | 13 ----- .../collapsible-block-toolbar/style.scss | 7 +-- .../src/components/document-bar/style.scss | 6 +-- .../src/components/document-tools/style.scss | 8 ++-- .../editor/src/components/header/index.js | 48 ++++++++++++------- .../editor/src/components/header/style.scss | 48 +++++++++---------- 6 files changed, 64 insertions(+), 66 deletions(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js index 87d9b6473d8b61..a883be45ce5d4f 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/index.js +++ b/packages/editor/src/components/collapsible-block-toolbar/index.js @@ -9,7 +9,6 @@ import clsx from 'clsx'; import { BlockToolbar, store as blockEditorStore, - privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import { Button, Popover } from '@wordpress/components'; @@ -17,13 +16,6 @@ import { __ } from '@wordpress/i18n'; import { next, previous } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { useHasBlockToolbar } = unlock( blockEditorPrivateApis ); - function CollapsableBlockToolbar( { isCollapsed, onToggle } ) { const { blockSelectionStart } = useSelect( ( select ) => { return { @@ -31,7 +23,6 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) { select( blockEditorStore ).getBlockSelectionStart(), }; }, [] ); - const hasBlockToolbar = useHasBlockToolbar(); const hasBlockSelection = !! blockSelectionStart; @@ -42,10 +33,6 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) { } }, [ blockSelectionStart, onToggle ] ); - if ( ! hasBlockToolbar ) { - return null; - } - return ( <>
.editor-document-tools__inserter-toggle.has-icon { diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 4cf28748b2d7a2..be9caf19b02c5c 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -12,7 +12,10 @@ import { __unstableMotion as motion } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; import { useState } from '@wordpress/element'; import { PinnedItems } from '@wordpress/interface'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +import { + store as blockEditorStore, + privateApis as blockEditorPrivateApis, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -28,6 +31,9 @@ import PostSavedState from '../post-saved-state'; import PostViewLink from '../post-view-link'; import PreviewDropdown from '../preview-dropdown'; import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +const { useHasBlockToolbar } = unlock( blockEditorPrivateApis ); const toolbarVariations = { distractionFreeDisabled: { y: '-50px' }, @@ -82,15 +88,27 @@ function Header( { }; }, [] ); - const hasTopToolbar = isLargeViewport && hasFixedToolbar; - const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = useState( true ); + const blockToolbar = + useHasBlockToolbar() && hasFixedToolbar && isLargeViewport ? ( + + ) : null; + + const showDocumentBar = ! blockToolbar || isBlockToolsCollapsed; + // The edit-post-header classname is only kept for backward compatibilty // as some plugins might be relying on its presence. return ( -
+
- { hasTopToolbar && ( - - ) } -
+ { ( title || showDocumentBar ) && ( + -
- + + ) } Date: Sat, 15 Jun 2024 18:51:14 -0700 Subject: [PATCH 02/14] Better match existing responsiveness --- .../editor/src/components/header/index.js | 5 ++-- .../editor/src/components/header/style.scss | 27 ++++++++++++++++--- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index be9caf19b02c5c..cf3cc351494621 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -61,6 +61,7 @@ function Header( { } ) { const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); + const isMobileViewport = useViewportMatch( 'mobile' ); const { isTextEditor, isPublishSidebarOpened, @@ -106,7 +107,7 @@ function Header( { return (
{ blockToolbar } - { ( title || showDocumentBar ) && ( + { isMobileViewport && ( title || showDocumentBar ) && ( :first-child { + margin-inline: $grid-unit-20 0; + } + @include break-mobile { + clip-path: none; + + & > :first-child { + margin-inline: 0; + } + } .table-of-contents { display: none; From e4720f5170527071aca63253500a16a06edbf63e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 18 Jun 2024 09:04:08 -0700 Subject: [PATCH 03/14] Fix naming typo --- .../editor/src/components/collapsible-block-toolbar/index.js | 4 +--- packages/editor/src/components/header/index.js | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js index a883be45ce5d4f..4731b3c292fb9a 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/index.js +++ b/packages/editor/src/components/collapsible-block-toolbar/index.js @@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n'; import { next, previous } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; -function CollapsableBlockToolbar( { isCollapsed, onToggle } ) { +export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) { const { blockSelectionStart } = useSelect( ( select ) => { return { blockSelectionStart: @@ -60,5 +60,3 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) { ); } - -export default CollapsableBlockToolbar; diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index cf3cc351494621..386219f75f7fd9 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -21,7 +21,7 @@ import { * Internal dependencies */ import BackButton from './back-button'; -import CollapsableBlockToolbar from '../collapsible-block-toolbar'; +import CollapsibleBlockToolbar from '../collapsible-block-toolbar'; import DocumentBar from '../document-bar'; import DocumentTools from '../document-tools'; import MoreMenu from '../more-menu'; @@ -94,7 +94,7 @@ function Header( { const blockToolbar = useHasBlockToolbar() && hasFixedToolbar && isLargeViewport ? ( - From ac6aca858ae2c8186121b15b170e15356cfbecb9 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 18 Jun 2024 11:43:42 -0700 Subject: [PATCH 04/14] Remove padding from header center to make just a bit more room --- packages/editor/src/components/header/style.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 8e94a8e20d2338..66c704521e6b1b 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -60,12 +60,10 @@ display: flex; justify-content: center; align-items: center; - // Grid items will, by default, refuse to shrink below a minimum intrinsic - // width. To enable shrinking and thereby truncate child text, hide the - // overflow. - overflow: hidden; - // Make room for the focus ring. - padding: 2px; + // To enable shrinking and truncating of child text, apply an explicit min-width. + min-width: 0; + // Clip the box while leaving room for focus rings. + clip-path: inset(-2px); } /** From 3399512fbfd343789942f369b99c6bac1941a6de Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 18 Jun 2024 17:32:53 -0700 Subject: [PATCH 05/14] Revise style to add space before collapsible block toolbar --- .../src/components/collapsible-block-toolbar/style.scss | 4 ---- packages/editor/src/components/header/style.scss | 9 +++++++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss index 923f7645b1eb6a..f559e1a055cdcd 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/style.scss +++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss @@ -74,10 +74,6 @@ &.is-collapsed { display: none; - - ~ .editor-collapsible-block-toolbar__toggle { - margin-left: $grid-unit-10; - } } } diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 66c704521e6b1b..0c45d6242f4168 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -53,6 +53,15 @@ display: block; } } + + // Add a gap before the block toolbar or its toggle button when collapsed. + .editor-collapsible-block-toolbar { + margin-inline: $grid-unit 0; + + &.is-collapsed ~ .editor-collapsible-block-toolbar__toggle { + margin-inline: $grid-unit 0; + } + } } .editor-header__center { From cb5927b0bbb0694f4b64f753f0303f9ebe1e69fc Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 19 Jun 2024 17:28:16 -0700 Subject: [PATCH 06/14] Account for potential lack of a back button --- .../src/components/header/back-button.js | 12 ++++----- .../editor/src/components/header/index.js | 18 +++++++------ .../editor/src/components/header/style.scss | 25 ++++++++++++------- 3 files changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/components/header/back-button.js b/packages/editor/src/components/header/back-button.js index 3ac689c8415264..a3d682f92970ed 100644 --- a/packages/editor/src/components/header/back-button.js +++ b/packages/editor/src/components/header/back-button.js @@ -9,16 +9,16 @@ import { // Keeping an old name for backward compatibility. const slotName = '__experimentalMainDashboardButton'; +export const useHasBackButton = () => { + const fills = useSlotFills( slotName ); + return Boolean( fills && fills.length ); +}; + const { Fill, Slot } = createSlotFill( slotName ); const BackButton = Fill; -const BackButtonSlot = ( { children } ) => { +const BackButtonSlot = () => { const fills = useSlotFills( slotName ); - const hasFills = Boolean( fills && fills.length ); - - if ( ! hasFills ) { - return children; - } return ( - - - + { hasBackButton && ( + + + + ) } :first-child { + margin-inline: $grid-unit-20 0; + } + + .has-back-button.editor-header & { + grid-column: 2 / 3; + + @include break-mobile { + > :first-child { + margin-inline: 0; + } + } + } display: flex; // Make narrowing to less than content width possible. Block toolbar will hide overflow and allow scrolling on fixed toolbar. min-width: 0; align-items: center; // Clip the box while leaving room for focus rings. clip-path: inset(-2px); - - & > :first-child { - margin-inline: $grid-unit-20 0; - } @include break-mobile { clip-path: none; - - & > :first-child { - margin-inline: 0; - } } .table-of-contents { From 80d05311a826a3b991028fc276e6d8106d0df7c6 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 19 Jun 2024 17:30:53 -0700 Subject: [PATCH 07/14] Post editor: Leave out the back button instead of hiding it --- .../back-button/fullscreen-mode-close.js | 14 +++----------- .../src/components/back-button/style.scss | 4 ---- packages/edit-post/src/components/layout/index.js | 9 ++++++++- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/edit-post/src/components/back-button/fullscreen-mode-close.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js index 59694de16cb925..02eaceb3a35e50 100644 --- a/packages/edit-post/src/components/back-button/fullscreen-mode-close.js +++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js @@ -19,23 +19,16 @@ import { store as editorStore } from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; import { useReducedMotion } from '@wordpress/compose'; -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../store'; - function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) { - const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect( + const { isRequestingSiteIcon, postType, siteIconUrl } = useSelect( ( select ) => { const { getCurrentPostType } = select( editorStore ); - const { isFeatureActive } = select( editPostStore ); const { getEntityRecord, getPostType, isResolving } = select( coreStore ); const siteData = getEntityRecord( 'root', '__unstableBase', undefined ) || {}; const _postType = initialPost?.type || getCurrentPostType(); return { - isActive: isFeatureActive( 'fullscreenMode' ), isRequestingSiteIcon: isResolving( 'getEntityRecord', [ 'root', '__unstableBase', @@ -50,7 +43,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) { const disableMotion = useReducedMotion(); - if ( ! isActive || ! postType ) { + if ( ! postType ) { return null; } @@ -83,8 +76,7 @@ function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) { buttonIcon = ; } - const classes = clsx( { - 'edit-post-fullscreen-mode-close': true, + const classes = clsx( 'edit-post-fullscreen-mode-close', { 'has-icon': siteIconUrl, } ); diff --git a/packages/edit-post/src/components/back-button/style.scss b/packages/edit-post/src/components/back-button/style.scss index d6455c707fb1d9..8ffae89e31e054 100644 --- a/packages/edit-post/src/components/back-button/style.scss +++ b/packages/edit-post/src/components/back-button/style.scss @@ -2,10 +2,6 @@ // They need to be updated in both places. .edit-post-fullscreen-mode-close.components-button { - // Do not show the toolbar icon on small screens, - // when Fullscreen Mode is not an option in the "More" menu. - display: none; - @include break-medium() { display: flex; align-items: center; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b6ab4629b9e213..9266cbbb10a557 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -37,6 +37,7 @@ import { addQueryArgs } from '@wordpress/url'; import { decodeEntities } from '@wordpress/html-entities'; import { store as coreStore } from '@wordpress/core-data'; import { SlotFillProvider } from '@wordpress/components'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -327,6 +328,12 @@ function Layout( { id: initialPostId, }; }, [ initialPostType, initialPostId ] ); + + const backButton = + useViewportMatch( 'medium' ) && isFullscreenActive ? ( + + ) : null; + return ( @@ -373,7 +380,7 @@ function Layout( { - + { backButton } From 2cf9145464a556ae3145836eaf1324a051e7d549 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 24 Jun 2024 12:55:36 -0700 Subject: [PATCH 08/14] Hide post preview button at less than small breakpoint --- packages/editor/src/components/header/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index cc22992e763414..06cc6a8ce6da82 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -218,8 +218,9 @@ } .editor-header__post-preview-button { + display: none; @include break-small { - display: none; + display: initial; } } From 276089e4b7ceaeb10bed17830cd9059df9529d42 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 24 Jun 2024 13:19:22 -0700 Subject: [PATCH 09/14] Try keeping the Document Bar visible at less than mobile breakpoints --- packages/editor/src/components/header/index.js | 12 +++++++----- packages/editor/src/components/header/style.scss | 5 +++++ 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 1bfcc23a10ff92..1f74aeea2e20e2 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -7,7 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useViewportMatch } from '@wordpress/compose'; +import { useMediaQuery, useViewportMatch } from '@wordpress/compose'; import { __unstableMotion as motion } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; import { useState } from '@wordpress/element'; @@ -61,7 +61,7 @@ function Header( { } ) { const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); - const isMobileViewport = useViewportMatch( 'mobile' ); + const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 382px)' ); const { isTextEditor, isPublishSidebarOpened, @@ -100,7 +100,9 @@ function Header( { /> ) : null; - const showDocumentBar = ! blockToolbar || isBlockToolsCollapsed; + const showDocumentBar = + ( ! blockToolbar || isBlockToolsCollapsed ) && + ! isTooNarrowForDocumentBar; const hasBackButton = useHasBackButton(); // The edit-post-header classname is only kept for backward compatibilty @@ -109,7 +111,7 @@ function Header( {
{ hasBackButton && ( @@ -130,7 +132,7 @@ function Header( { /> { blockToolbar } - { isMobileViewport && ( title || showDocumentBar ) && ( + { ( title || showDocumentBar ) && ( Date: Tue, 25 Jun 2024 08:45:55 -0700 Subject: [PATCH 10/14] Revert change to display of post preview button --- packages/editor/src/components/header/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 5c779cfd85c2f4..d7ad9a4e5810d9 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -223,9 +223,8 @@ } .editor-header__post-preview-button { - display: none; @include break-small { - display: initial; + display: none; } } From ba4e943d2f40bdb13eff8799b81d78b25b349a9b Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 25 Jun 2024 08:47:52 -0700 Subject: [PATCH 11/14] Revise mobile display of Document Bar --- packages/editor/src/components/header/index.js | 2 +- packages/editor/src/components/header/style.scss | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 1f74aeea2e20e2..30845090d422c8 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -61,7 +61,7 @@ function Header( { } ) { const isWideViewport = useViewportMatch( 'large' ); const isLargeViewport = useViewportMatch( 'medium' ); - const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 382px)' ); + const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' ); const { isTextEditor, isPublishSidebarOpened, diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index d7ad9a4e5810d9..022b5124cf2796 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -83,7 +83,12 @@ // At less than mobile the header’s `gap` is zero so margins are added to create a smaller // gap around the center’s contents. @media (max-width: #{$break-mobile - 1}) { - padding-inline: $grid-unit; + > :first-child { + margin-inline-start: $grid-unit; + } + > :last-child { + margin-inline-end: $grid-unit; + } } } From d4ce22bbc162fc142aa8e88deedd7c964b659390 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 3 Jul 2024 20:24:03 -0700 Subject: [PATCH 12/14] Revert conditional rendering changes --- .../collapsible-block-toolbar/index.js | 13 ++++++++ .../editor/src/components/header/index.js | 31 ++++++------------- .../editor/src/components/header/style.scss | 2 -- 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js index 4731b3c292fb9a..cafbfecb72516c 100644 --- a/packages/editor/src/components/collapsible-block-toolbar/index.js +++ b/packages/editor/src/components/collapsible-block-toolbar/index.js @@ -9,6 +9,7 @@ import clsx from 'clsx'; import { BlockToolbar, store as blockEditorStore, + privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import { Button, Popover } from '@wordpress/components'; @@ -16,6 +17,13 @@ import { __ } from '@wordpress/i18n'; import { next, previous } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useHasBlockToolbar } = unlock( blockEditorPrivateApis ); + export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) { const { blockSelectionStart } = useSelect( ( select ) => { return { @@ -23,6 +31,7 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) { select( blockEditorStore ).getBlockSelectionStart(), }; }, [] ); + const hasBlockToolbar = useHasBlockToolbar(); const hasBlockSelection = !! blockSelectionStart; @@ -33,6 +42,10 @@ export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) { } }, [ blockSelectionStart, onToggle ] ); + if ( ! hasBlockToolbar ) { + return null; + } + return ( <>
- ) : null; - - const showDocumentBar = - ( ! blockToolbar || isBlockToolsCollapsed ) && - ! isTooNarrowForDocumentBar; + const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar; const hasBackButton = useHasBackButton(); // The edit-post-header classname is only kept for backward compatibilty @@ -111,7 +95,7 @@ function Header( {
{ hasBackButton && ( @@ -130,9 +114,14 @@ function Header( { - { blockToolbar } + { hasFixedToolbar && isLargeViewport && ( + + ) } - { ( title || showDocumentBar ) && ( + { hasCenter && ( Date: Tue, 16 Jul 2024 18:41:17 -0700 Subject: [PATCH 13/14] Remove has-back-button class name --- packages/editor/src/components/header/index.js | 2 +- packages/editor/src/components/header/style.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 96bc9256ea6476..e5c1eac1b779c9 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -94,12 +94,12 @@ function Header( { return (
{ hasBackButton && ( diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 86289c482aae8e..b0e95e1d3424b0 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -27,15 +27,17 @@ .editor-header__toolbar { grid-column: 1 / 3; // When there is no back button or the viewport is <= mobile the margin keeps the content off - // the starting edge. Otherwise, it’s overriden to and the parent’s `gap` does the job instead. + // the starting edge. > :first-child { margin-inline: $grid-unit-20 0; } - .has-back-button.editor-header & { + // This is the typical case, the back button takes up the first column. + .editor-header__back-button + & { grid-column: 2 / 3; @include break-mobile { + // Clears the margin; at this breakpoint the parent’s `gap` takes its place. > :first-child { margin-inline: 0; } From 884c534862dfb78a21f20f235bf49c9a38a79d75 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 16 Jul 2024 18:49:03 -0700 Subject: [PATCH 14/14] Remove has-center class name --- packages/editor/src/components/header/index.js | 11 +---------- packages/editor/src/components/header/style.scss | 4 ++-- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index e5c1eac1b779c9..2a604229596005 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - /** * WordPress dependencies */ @@ -92,11 +87,7 @@ function Header( { // The edit-post-header classname is only kept for backward compatibilty // as some plugins might be relying on its presence. return ( -
+
{ hasBackButton && ( .editor-header__center) { grid-template: auto / $header-height min-content 1fr min-content $header-height; @include break-medium { grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) $header-height; @@ -98,7 +98,7 @@ .editor-header__settings { grid-column: 3 / -1; - .has-center & { + .editor-header:has(> .editor-header__center) & { grid-column: 4 / -1; } justify-self: end;