From f60aec17aef3296be0743c4b3ff67a336d7b35f2 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 26 Jul 2024 14:56:35 -0700 Subject: [PATCH 1/3] =?UTF-8?q?Fix=20empty=20space=20in=20Post=20editor?= =?UTF-8?q?=E2=80=99s=20header=20with=20DFM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../editor/src/components/header/index.js | 38 +++++++++------- .../editor/src/components/header/style.scss | 44 ++++++++++++------- 2 files changed, 52 insertions(+), 30 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 2a604229596005..1c07bac4516f64 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -49,7 +49,7 @@ function Header( { icon, } ) { const isWideViewport = useViewportMatch( 'large' ); - const isLargeViewport = useViewportMatch( 'medium' ); + const isLessThanMediumViewport = useViewportMatch( 'medium', '<' ); const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' ); const { isTextEditor, @@ -58,6 +58,7 @@ function Header( { hasFixedToolbar, isNestedEntity, isZoomedOutView, + isDistractionFree, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { @@ -75,12 +76,15 @@ function Header( { isNestedEntity: !! getEditorSettings().onNavigateToPreviousEntityRecord, isZoomedOutView: __unstableGetEditorMode() === 'zoom-out', + isDistractionFree: getPreference( 'core', 'distractionFree' ), }; }, [] ); const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = useState( true ); + const hasDocumentOrCollapsedBlockToolbars = + ! isDistractionFree || ! isLessThanMediumViewport; const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar; const hasBackButton = useHasBackButton(); @@ -97,21 +101,25 @@ function Header( { ) } - - - { hasFixedToolbar && isLargeViewport && ( - + - ) } - + { hasFixedToolbar && ! isLessThanMediumViewport && ( + + ) } + + ) } { hasCenter && ( :first-child:not(.editor-header__back-button) { + margin-inline-start: $grid-unit-20; +} + +// At less than mobile the header’s `gap` is zero and whatever element follows the back button +// needs a margin to keep the space between it and the back button. The margin is applied to a +// child to allow the parent to collapse completely i.e. occupy no space. +@media (max-width: #{$break-mobile - 1}) { + .editor-header__back-button + * > :first-child { + margin-inline-start: $grid-unit-20; + } +} + .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. - > :first-child { - margin-inline: $grid-unit-20 0; - } // 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; - } - } } display: flex; // Make narrowing to less than content width possible. Block toolbar will hide overflow and allow scrolling on fixed toolbar. @@ -73,6 +75,15 @@ .editor-header__center { grid-column: 3 / 4; + .editor-header__back-button + & { + grid-column-start: 2; + } + // This is the first child when in Distraction Free mode, without a back button and at less + // than medium breakpoint. Currently its applicable in the Post editor. + &:first-child { + grid-column-start: 1; + justify-content: start; + } display: flex; justify-content: center; align-items: center; @@ -80,10 +91,13 @@ min-width: 0; // Clip the box while leaving room for focus rings. clip-path: inset(-2px); - // At less than mobile the header’s `gap` is zero so margins are added to create a smaller - // gap around the center’s contents. + // At less than mobile the header’s `gap` is zero so margins are added to keep a smaller + // space around __center’s contents. Applying the margin on children instead of the __center + // itself allows __center to collapse completely, i.e. to occupy no space. @media (max-width: #{$break-mobile - 1}) { - > :first-child { + // The start side should only apply when the __center follows __toolbar. A case where it + // doesn’t is in the Post Editor with Distraction Free mode on. + .editor-header__toolbar + & > :first-child { margin-inline-start: $grid-unit; } > :last-child { From 808f515a93ad9ecfea0d57bf8f8a2a78d42cec6c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 26 Jul 2024 17:12:01 -0700 Subject: [PATCH 2/3] Reduce unnecessary changes --- packages/editor/src/components/header/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 1c07bac4516f64..86c7205a7ed6f1 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -49,7 +49,7 @@ function Header( { icon, } ) { const isWideViewport = useViewportMatch( 'large' ); - const isLessThanMediumViewport = useViewportMatch( 'medium', '<' ); + const isLargeViewport = useViewportMatch( 'medium' ); const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' ); const { isTextEditor, @@ -84,7 +84,7 @@ function Header( { useState( true ); const hasDocumentOrCollapsedBlockToolbars = - ! isDistractionFree || ! isLessThanMediumViewport; + ! isDistractionFree || isLargeViewport; const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar; const hasBackButton = useHasBackButton(); @@ -112,7 +112,7 @@ function Header( { forceDisableBlockTools || isTextEditor } /> - { hasFixedToolbar && ! isLessThanMediumViewport && ( + { hasFixedToolbar && isLargeViewport && ( Date: Fri, 26 Jul 2024 18:39:09 -0700 Subject: [PATCH 3/3] Amend comment --- packages/editor/src/components/header/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index 33103be134afc7..c3573f5d439ece 100644 --- a/packages/editor/src/components/header/style.scss +++ b/packages/editor/src/components/header/style.scss @@ -96,7 +96,7 @@ // itself allows __center to collapse completely, i.e. to occupy no space. @media (max-width: #{$break-mobile - 1}) { // The start side should only apply when the __center follows __toolbar. A case where it - // doesn’t is in the Post Editor with Distraction Free mode on. + // doesn’t is in the Post Editor with Distraction Free mode on at less than medium breakpoint. .editor-header__toolbar + & > :first-child { margin-inline-start: $grid-unit; }