Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix empty space in Post editor’s header with DFM #64010

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

Fix empty space in Post editor’s header with DFM #64010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f60aec1
Fix empty space in Post editor’s header with DFM
stokesman Jul 26, 2024
808f515
Reduce unnecessary changes
stokesman Jul 27, 2024
e770e58
Amend comment
stokesman Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 22 additions & 14 deletions packages/editor/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function Header( {
hasFixedToolbar,
isNestedEntity,
isZoomedOutView,
isDistractionFree,
} = useSelect( ( select ) => {
const { get: getPreference } = select( preferencesStore );
const {
Expand All @@ -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 || isLargeViewport;
const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar;
const hasBackButton = useHasBackButton();

Expand All @@ -97,21 +101,25 @@ function Header( {
<BackButton.Slot />
</motion.div>
) }
<motion.div
variants={ toolbarVariations }
className="editor-header__toolbar"
transition={ { type: 'tween' } }
>
<DocumentTools
disableBlockTools={ forceDisableBlockTools || isTextEditor }
/>
{ hasFixedToolbar && isLargeViewport && (
<CollapsibleBlockToolbar
isCollapsed={ isBlockToolsCollapsed }
onToggle={ setIsBlockToolsCollapsed }
{ hasDocumentOrCollapsedBlockToolbars && (
<motion.div
variants={ toolbarVariations }
className="editor-header__toolbar"
transition={ { type: 'tween' } }
>
<DocumentTools
disableBlockTools={
forceDisableBlockTools || isTextEditor
}
/>
) }
</motion.div>
{ hasFixedToolbar && isLargeViewport && (
<CollapsibleBlockToolbar
isCollapsed={ isBlockToolsCollapsed }
onToggle={ setIsBlockToolsCollapsed }
/>
) }
</motion.div>
) }
{ hasCenter && (
<motion.div
className="editor-header__center"
Expand Down
44 changes: 29 additions & 15 deletions packages/editor/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,26 @@
}
}

// When there is no back button keeps the first child off the starting edge.
.editor-header > :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.
Expand Down Expand Up @@ -73,17 +75,29 @@

.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;
// 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);
// 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 at less than medium breakpoint.
.editor-header__toolbar + & > :first-child {
margin-inline-start: $grid-unit;
}
> :last-child {
Expand Down
Loading