From 1aafff53fb9212a074747da155740d59db99eb4f Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 12:05:58 +0300 Subject: [PATCH 01/27] move fixed toolbar on desktop on top of interface header --- .../src/components/block-tools/style.scss | 24 ++++++++++++++++--- .../src/components/layout/style.scss | 12 ++++++++++ 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 099bf14987dcb..22c9f2d39ac74 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -104,11 +104,10 @@ &.is-fixed { position: sticky; top: 0; - width: 100%; + left: 0; z-index: z-index(".block-editor-block-popover"); - // Fill up when empty - min-height: $block-toolbar-height; display: block; + width: 100%; border: none; border-bottom: $border-width solid $gray-200; @@ -119,6 +118,25 @@ border-right-color: $gray-200; } } + + // on mobile viewports the toolbar is fixed below header + @include break-medium() { + &.is-fixed { + // position on top of interface header + position: fixed; + top: $grid-unit; + // leave room for block inserter + left: $grid-unit-80 + $grid-unit-70; + // Don't fill up when empty + min-height: initial; + // Don't fill the whole header, minimize area + width: initial; + // remove the border + border-bottom: none; + } + } + + } /** diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 229ab58a4e14b..56b735c4fded0 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -99,3 +99,15 @@ .edit-post-layout .entities-saved-states__panel-header { height: $header-height + $border-width; } + +.edit-post-layout.has-fixed-toolbar { + // making the header be lower than the content + // so the fixed toolbar can be positioned on top of it + // but only on desktop + @include break-medium() { + .interface-interface-skeleton__header { + z-index: 19; + } + } + +} From 1d879fc6688d4a7dae7682f66dc855bae8622128 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 12:22:32 +0300 Subject: [PATCH 02/27] add the parent selector to the fixed toolbar on desktop --- .../src/components/block-toolbar/index.js | 7 +++-- .../src/components/block-toolbar/style.scss | 15 ---------- .../src/components/block-tools/style.scss | 30 ++++++++++++++++++- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 6727851e1647b..91757c2dc9f19 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -99,6 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { // header area and not contextually to the block. const displayHeaderToolbar = useViewportMatch( 'medium', '<' ) || hasFixedToolbar; + const isLargeViewport = useViewportMatch( 'medium' ); if ( blockType ) { if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) { @@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => { return (
- { ! isMultiToolbar && - ! displayHeaderToolbar && - ! isContentLocked && } + { ! isMultiToolbar && isLargeViewport && ! isContentLocked && ( + + ) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) && ! isContentLocked && ( diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 554c5d96d65db..56a3fcf6a65ea 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -64,21 +64,6 @@ } } -.block-editor-block-parent-selector { - position: absolute; - top: -$border-width; - left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width}); - - .show-icon-labels & { - position: relative; - left: auto; - top: auto; - margin-top: -$border-width; - margin-left: -$border-width; - margin-bottom: -$border-width; - } -} - // Block controls. .block-editor-block-toolbar__block-controls { // Switcher. diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 22c9f2d39ac74..466c7bd6cb82d 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -119,7 +119,8 @@ } } - // on mobile viewports the toolbar is fixed below header + // on desktop viewports the toolbar is fixed + // on top of interface header @include break-medium() { &.is-fixed { // position on top of interface header @@ -134,6 +135,33 @@ // remove the border border-bottom: none; } + + &.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button { + border: 0; + &::after { + content: "\00B7"; + font-size: 16px; + line-height: $grid-unit-40 + $grid-unit-10; + position: absolute; + left: $grid-unit-40 + $grid-unit-15 + 2px; + bottom: $grid-unit-05; + } + } + + &:not(.is-fixed) .block-editor-block-parent-selector { + position: absolute; + top: -$border-width; + left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width}); + + .show-icon-labels & { + position: relative; + left: auto; + top: auto; + margin-top: -$border-width; + margin-left: -$border-width; + margin-bottom: -$border-width; + } + } } From 68ed98d41375e41c07d9a86db8292b9305e6978b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 12:37:03 +0300 Subject: [PATCH 03/27] fix for parent selector position --- .../src/components/block-tools/style.scss | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 466c7bd6cb82d..892692360c7bc 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -136,15 +136,19 @@ border-bottom: none; } - &.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button { - border: 0; - &::after { - content: "\00B7"; - font-size: 16px; - line-height: $grid-unit-40 + $grid-unit-10; - position: absolute; - left: $grid-unit-40 + $grid-unit-15 + 2px; - bottom: $grid-unit-05; + &.is-fixed .block-editor-block-parent-selector { + .block-editor-block-parent-selector__button { + position: relative; + top: -1px; + border: 0; + &::after { + content: "\00B7"; + font-size: 16px; + line-height: $grid-unit-40 + $grid-unit-10; + position: absolute; + left: $grid-unit-40 + $grid-unit-15 + 2px; + bottom: $grid-unit-05; + } } } From 70ce488f6299b93fc4e9c9c0c53cff50dfb06d49 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 12:44:08 +0300 Subject: [PATCH 04/27] hide block toolbar when focus is within interface header --- packages/edit-post/src/components/layout/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 56b735c4fded0..3fdb90dea8555 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -105,7 +105,7 @@ // so the fixed toolbar can be positioned on top of it // but only on desktop @include break-medium() { - .interface-interface-skeleton__header { + .interface-interface-skeleton__header:not(:focus-within) { z-index: 19; } } From 8d982e43d5850282df7d0ed160fc67ec9d7cb3c0 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 15:01:53 +0300 Subject: [PATCH 05/27] adds collapsed and expanded states to block toolbar, manages focus --- .../block-tools/block-contextual-toolbar.js | 64 ++++++++++++++++++- .../src/components/block-tools/style.scss | 19 ++++++ packages/icons/src/index.js | 1 + packages/icons/src/library/level-up.js | 12 ++++ 4 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 packages/icons/src/library/level-up.js diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index ba31043ada2dd..2b1febc8a12b2 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -7,8 +7,12 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { forwardRef, useEffect, useRef, useState } from '@wordpress/element'; import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; +import { ToolbarItem, Button } from '@wordpress/components'; +import { levelUp } from '@wordpress/icons'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -16,8 +20,47 @@ import { useSelect } from '@wordpress/data'; import NavigableToolbar from '../navigable-toolbar'; import BlockToolbar from '../block-toolbar'; import { store as blockEditorStore } from '../../store'; +import BlockIcon from '../block-icon'; + +const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => { + return ( + + ); +} ); + +const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { + return ( + } + onClick={ onClick } + ref={ ref } + /> + ); +} ); function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { + // When the toolbar is fixed it can be collapsed + const [ isCollapsed, setIsCollapsed ] = useState( null ); + const expandFixedToolbarButtonRef = useRef(); + const collapseFixedToolbarButtonRef = useRef(); + + useEffect( () => { + if ( isCollapsed && expandFixedToolbarButtonRef.current ) { + expandFixedToolbarButtonRef.current.focus(); + } + if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) { + collapseFixedToolbarButtonRef.current.focus(); + } + }, [ isCollapsed ] ); + const { blockType, hasParents, showParentSelector } = useSelect( ( select ) => { const { @@ -55,6 +98,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { [] ); + const isLargeViewport = useViewportMatch( 'medium' ); + if ( blockType ) { if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) { return null; @@ -65,6 +110,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { const classes = classnames( 'block-editor-block-contextual-toolbar', { 'has-parent': hasParents && showParentSelector, 'is-fixed': isFixed, + 'is-collapsed': isCollapsed, } ); return ( @@ -75,7 +121,23 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { aria-label={ __( 'Block tools' ) } { ...props } > - + { isFixed && isLargeViewport && blockType && ( + <> + { isCollapsed ? ( + setIsCollapsed( false ) } + icon={ blockType.icon } + ref={ expandFixedToolbarButtonRef } + /> + ) : ( + setIsCollapsed( true ) } + ref={ collapseFixedToolbarButtonRef } + /> + ) } + + ) } + { ! isCollapsed && } ); } diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 892692360c7bc..bfcd20c65306a 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -134,6 +134,25 @@ width: initial; // remove the border border-bottom: none; + // has to be flex for collapse button to fit + display: flex; + + &.is-collapsed { + left: $grid-unit-10 * 35; + } + + & > button.components-button.has-icon { + + &.block-editor-block-toolbar__collapse-fixed-toolbar { + // Add a border as separator in the block toolbar. + border-right: $border-width solid $gray-300; + } + + &.block-editor-block-toolbar__expand-fixed-toolbar { + // Add a border as separator in the block toolbar. + border-left: $border-width solid $gray-300; + } + } } &.is-fixed .block-editor-block-parent-selector { diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index ba9d28ee266f1..c3f0380728e55 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -120,6 +120,7 @@ export { default as key } from './library/key'; export { default as keyboardClose } from './library/keyboard-close'; export { default as keyboardReturn } from './library/keyboard-return'; export { default as layout } from './library/layout'; +export { default as levelUp } from './library/level-up'; export { default as lifesaver } from './library/lifesaver'; export { default as lineDashed } from './library/line-dashed'; export { default as lineDotted } from './library/line-dotted'; diff --git a/packages/icons/src/library/level-up.js b/packages/icons/src/library/level-up.js new file mode 100644 index 0000000000000..fc992c8dbada5 --- /dev/null +++ b/packages/icons/src/library/level-up.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const levelUp = ( + + + +); + +export default levelUp; From 7be2148fbbc5738b8e95838777490a33f553cd1a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 15:24:46 +0300 Subject: [PATCH 06/27] label the toggle buttons --- .../src/components/block-tools/block-contextual-toolbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 2b1febc8a12b2..37298f930a66d 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -30,6 +30,7 @@ const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => { icon={ levelUp } onClick={ onClick } ref={ ref } + label={ __( 'Collapse Block Tools' ) } /> ); } ); @@ -42,6 +43,7 @@ const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { icon={ } onClick={ onClick } ref={ ref } + label={ __( 'Expand Block Tools' ) } /> ); } ); From 0a9d48e9318c681856dbf7c05fddffa85566c7fd Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 16:52:50 +0300 Subject: [PATCH 07/27] fix the focus loss when toggling top toolbar on --- .../components/block-tools/block-contextual-toolbar.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 37298f930a66d..69d46bab44462 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -50,11 +50,17 @@ const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { // When the toolbar is fixed it can be collapsed - const [ isCollapsed, setIsCollapsed ] = useState( null ); + const [ isCollapsed, setIsCollapsed ] = useState( false ); const expandFixedToolbarButtonRef = useRef(); const collapseFixedToolbarButtonRef = useRef(); + // Don't focus the block toolbar just because it mounts + const initialRender = useRef( true ); useEffect( () => { + if ( initialRender.current ) { + initialRender.current = false; + return; + } if ( isCollapsed && expandFixedToolbarButtonRef.current ) { expandFixedToolbarButtonRef.current.focus(); } From 8d29ac5fbb20d8528b13f5c95effc56bb25c6706 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 18:03:56 +0300 Subject: [PATCH 08/27] fixes positioning glitches in windowed post editor, fixes focus within in site editor --- .../src/components/block-tools/style.scss | 16 +++++++++++++--- .../edit-site/src/components/layout/index.js | 11 ++++++----- .../edit-site/src/components/layout/style.scss | 15 +++++++++++++++ 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index bfcd20c65306a..e04b9a17beebc 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -123,11 +123,12 @@ // on top of interface header @include break-medium() { &.is-fixed { + // position on top of interface header position: fixed; - top: $grid-unit; + top: $grid-unit-50 - 2; // leave room for block inserter - left: $grid-unit-80 + $grid-unit-70; + left: $grid-unit-80 + $grid-unit-40; // Don't fill up when empty min-height: initial; // Don't fill the whole header, minimize area @@ -138,7 +139,16 @@ display: flex; &.is-collapsed { - left: $grid-unit-10 * 35; + left: $grid-unit-10 * 32; + } + + .is-fullscreen-mode & { + top: $grid-unit - 2; + // leave room for block inserter + left: $grid-unit-80 + $grid-unit-70; + &.is-collapsed { + left: $grid-unit-10 * 35; + } } & > button.components-button.has-icon { diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 7ea454da4f150..e408d4b3dcd65 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -68,8 +68,8 @@ export default function Layout() { const { params } = useLocation(); const isListPage = getIsListPage( params ); const isEditorPage = ! isListPage; - const { canvasMode, previousShortcut, nextShortcut } = useSelect( - ( select ) => { + const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } = + useSelect( ( select ) => { const { getAllShortcutKeyCombinations } = select( keyboardShortcutsStore ); @@ -82,10 +82,10 @@ export default function Layout() { nextShortcut: getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), + hasFixedToolbar: + select( editSiteStore ).isFeatureActive( 'fixedToolbar' ), }; - }, - [] - ); + }, [] ); const navigateRegionsProps = useNavigateRegions( { previous: previousShortcut, next: nextShortcut, @@ -139,6 +139,7 @@ export default function Layout() { { 'is-full-canvas': isFullCanvas, 'is-edit-mode': canvasMode === 'edit', + 'has-fixed-toolbar': hasFixedToolbar, } ) } > diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 03c206eaf7f5e..c069c471a361e 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -221,3 +221,18 @@ border-left: $border-width solid $gray-300; } } + +.edit-site-layout.has-fixed-toolbar { + // making the header be lower than the content + // so the fixed toolbar can be positioned on top of it + // but only on desktop + @include break-medium() { + .edit-site-site-hub { + z-index: 4; + } + .edit-site-layout__header:focus-within { + z-index: 3; + } + } + +} From 4890094070b97ccb85d970d75ff35454972ec0f6 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 6 Apr 2023 18:16:18 +0300 Subject: [PATCH 09/27] fix rounded border on collapse/expand buttons --- packages/block-editor/src/components/block-tools/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index e04b9a17beebc..a64519cd28418 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -153,6 +153,8 @@ & > button.components-button.has-icon { + border-radius: 0; + &.block-editor-block-toolbar__collapse-fixed-toolbar { // Add a border as separator in the block toolbar. border-right: $border-width solid $gray-300; From 38013a8415fec44ff0ff385e8f6b8684bfeed8ad Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 7 Apr 2023 14:24:36 +0300 Subject: [PATCH 10/27] adjusts padding for parent selector and collapse buttons --- packages/block-editor/src/components/block-tools/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index a64519cd28418..7003e074c14df 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -158,11 +158,15 @@ &.block-editor-block-toolbar__collapse-fixed-toolbar { // Add a border as separator in the block toolbar. border-right: $border-width solid $gray-300; + padding-right: 6px; + padding-left: 6px; } &.block-editor-block-toolbar__expand-fixed-toolbar { // Add a border as separator in the block toolbar. border-left: $border-width solid $gray-300; + padding-right: 6px; + padding-left: 6px; } } } @@ -172,6 +176,8 @@ position: relative; top: -1px; border: 0; + padding-right: 6px; + padding-left: 6px; &::after { content: "\00B7"; font-size: 16px; From 9e649f908e71f93359ae7080b3dc37c37ae8ec35 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 7 Apr 2023 15:48:29 +0300 Subject: [PATCH 11/27] use preference store to look for top toolbar pref in site editor --- packages/edit-site/src/components/layout/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index e408d4b3dcd65..fb8100efcb46c 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -23,6 +23,7 @@ import { useState, useRef } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { CommandMenu } from '@wordpress/commands'; +import { store as prefferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -83,7 +84,7 @@ export default function Layout() { 'core/edit-site/next-region' ), hasFixedToolbar: - select( editSiteStore ).isFeatureActive( 'fixedToolbar' ), + select( prefferencesStore ).get( 'fixedToolbar' ), }; }, [] ); const navigateRegionsProps = useNavigateRegions( { From 71c55c9f5df352638563febca171cf64511b5980 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 11 Apr 2023 13:22:15 +0300 Subject: [PATCH 12/27] replace button with toolbarbutton to avoid the need to reuse component private classes --- .../components/block-tools/block-contextual-toolbar.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 69d46bab44462..204503415c89b 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { forwardRef, useEffect, useRef, useState } from '@wordpress/element'; import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { ToolbarItem, Button } from '@wordpress/components'; +import { ToolbarItem, ToolbarButton } from '@wordpress/components'; import { levelUp } from '@wordpress/icons'; import { useViewportMatch } from '@wordpress/compose'; @@ -25,8 +25,8 @@ import BlockIcon from '../block-icon'; const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => { return ( { const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { return ( } onClick={ onClick } ref={ ref } From a1a9ae6133844a6c57728d40102e300fd0232ce4 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 11 Apr 2023 22:17:18 +0300 Subject: [PATCH 13/27] remove component-* class referencing --- .../src/components/block-tools/style.scss | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 7003e074c14df..2c8f0cc22a1ae 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -151,23 +151,20 @@ } } - & > button.components-button.has-icon { - + & > .block-editor-block-toolbar__collapse-fixed-toolbar { border-radius: 0; + // Add a border as separator in the block toolbar. + border-right: $border-width solid $gray-300; + padding-right: 6px; + padding-left: 6px; + } - &.block-editor-block-toolbar__collapse-fixed-toolbar { - // Add a border as separator in the block toolbar. - border-right: $border-width solid $gray-300; - padding-right: 6px; - padding-left: 6px; - } - - &.block-editor-block-toolbar__expand-fixed-toolbar { - // Add a border as separator in the block toolbar. - border-left: $border-width solid $gray-300; - padding-right: 6px; - padding-left: 6px; - } + & > .block-editor-block-toolbar__expand-fixed-toolbar { + border-radius: 0; + // Add a border as separator in the block toolbar. + border-left: $border-width solid $gray-300; + padding-right: 6px; + padding-left: 6px; } } From 70e9e92a2811cef9e8e10c002ae0550d45b5af3f Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 11 Apr 2023 23:34:14 +0300 Subject: [PATCH 14/27] respect design on separator size --- .../src/components/block-toolbar/style.scss | 35 +++++++++++++++++++ .../block-tools/block-contextual-toolbar.js | 16 +++++++-- .../src/components/block-tools/style.scss | 32 +++++++++++------ 3 files changed, 70 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 56a3fcf6a65ea..fa838928ba7b9 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -56,6 +56,41 @@ } } +// on desktop browsers the fixed toolbar has tweaked borders +@include break-medium() { + .block-editor-block-contextual-toolbar.is-fixed { + .block-editor-block-toolbar { + .components-toolbar-group, + .components-toolbar { + border-right: none; + + &::after { + content: ""; + width: $border-width; + margin-top: $grid-unit + $grid-unit-05; + margin-bottom: $grid-unit + $grid-unit-05; + background-color: $gray-300; + margin-left: $grid-unit; + } + + & .components-toolbar-group.components-toolbar-group { + &::after { + display: none; + } + } + } + + > :last-child, + > :last-child .components-toolbar-group, + > :last-child .components-toolbar { + &::after { + display: none; + } + } + } + } +} + .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) { margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10}); diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 204503415c89b..df0bec515432b 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -10,7 +10,11 @@ import { __ } from '@wordpress/i18n'; import { forwardRef, useEffect, useRef, useState } from '@wordpress/element'; import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { ToolbarItem, ToolbarButton } from '@wordpress/components'; +import { + ToolbarItem, + ToolbarButton, + ToolbarGroup, +} from '@wordpress/components'; import { levelUp } from '@wordpress/icons'; import { useViewportMatch } from '@wordpress/compose'; @@ -130,7 +134,13 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { { ...props } > { isFixed && isLargeViewport && blockType && ( - <> + { isCollapsed ? ( setIsCollapsed( false ) } @@ -143,7 +153,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { ref={ collapseFixedToolbarButtonRef } /> ) } - + ) } { ! isCollapsed && } diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 2c8f0cc22a1ae..209705e611bec 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -151,20 +151,32 @@ } } - & > .block-editor-block-toolbar__collapse-fixed-toolbar { - border-radius: 0; + & > .block-editor-block-toolbar__group-collapse-fixed-toolbar { + border: none; + // Add a border as separator in the block toolbar. - border-right: $border-width solid $gray-300; - padding-right: 6px; - padding-left: 6px; + &::after { + content: ""; + width: $border-width; + margin-top: $grid-unit + $grid-unit-05; + margin-bottom: $grid-unit + $grid-unit-05; + background-color: $gray-300; + } } - & > .block-editor-block-toolbar__expand-fixed-toolbar { - border-radius: 0; + & > .block-editor-block-toolbar__group-expand-fixed-toolbar { + border: none; + // Add a border as separator in the block toolbar. - border-left: $border-width solid $gray-300; - padding-right: 6px; - padding-left: 6px; + &::before { + content: ""; + width: $border-width; + margin-top: $grid-unit + $grid-unit-05; + margin-bottom: $grid-unit + $grid-unit-05; + background-color: $gray-300; + position: relative; + left: -12px; //the padding of buttons + } } } From 13ed3c3f0ba0cf21208122f96f56c6d6dd27ed59 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 00:26:34 +0300 Subject: [PATCH 15/27] adds breakpoint covering behavior --- .../src/components/block-tools/style.scss | 37 +++++++++++++++++-- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 209705e611bec..4beaf21ee0506 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -119,7 +119,7 @@ } } - // on desktop viewports the toolbar is fixed + // on desktop and tablet viewports the toolbar is fixed // on top of interface header @include break-medium() { &.is-fixed { @@ -131,8 +131,6 @@ left: $grid-unit-80 + $grid-unit-40; // Don't fill up when empty min-height: initial; - // Don't fill the whole header, minimize area - width: initial; // remove the border border-bottom: none; // has to be flex for collapse button to fit @@ -214,6 +212,39 @@ } } + // on tablet vewports the toolbar is fixed + // on top of interface header and covers the whole header + // except for the inserter on the left + @include break-medium() { + &.is-fixed { + width: calc(100% - #{$grid-unit-80 + $grid-unit-40}); + &.is-collapsed { + // when collapsed minimize area + width: initial; + } + .is-fullscreen-mode & { + width: calc(100% - #{$grid-unit-80 + $grid-unit-70}); + &.is-collapsed { + // when collapsed minimize area + width: initial; + } + } + } + } + + // on desktop viewports the toolbar is fixed + // on top of interface header and leaves room + // for the block inserter the publish button + @include break-large() { + &.is-fixed { + // Don't fill the whole header, minimize area + width: initial; + .is-fullscreen-mode & { + // Don't fill the whole header, minimize area + width: initial; + } + } + } } From fc8f230ecc9fcaac4daad11383fee475ed198c78 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 14:37:35 +0300 Subject: [PATCH 16/27] fix buton labels pref toolbar height, fix capitalisation --- .../block-tools/block-contextual-toolbar.js | 4 ++-- .../src/components/block-tools/style.scss | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index df0bec515432b..5a2f1cd2ac879 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -34,7 +34,7 @@ const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => { icon={ levelUp } onClick={ onClick } ref={ ref } - label={ __( 'Collapse Block Tools' ) } + label={ __( 'Collapse block tools' ) } /> ); } ); @@ -47,7 +47,7 @@ const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { icon={ } onClick={ onClick } ref={ ref } - label={ __( 'Expand Block Tools' ) } + label={ __( 'Expand block tools' ) } /> ); } ); diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 4beaf21ee0506..f59039ea67ca1 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -156,9 +156,13 @@ &::after { content: ""; width: $border-width; + height: 30px; margin-top: $grid-unit + $grid-unit-05; margin-bottom: $grid-unit + $grid-unit-05; background-color: $gray-300; + position: absolute; + left: 44px; + top: -1px; } } @@ -176,6 +180,14 @@ left: -12px; //the padding of buttons } } + + .show-icon-labels & { + left: $grid-unit-80 + $grid-unit-80; + + &.is-collapsed { + left: $grid-unit-10 * 56; + } + } } &.is-fixed .block-editor-block-parent-selector { From b8c307201e0eb9184de5ecd9e35dc74c2c97668b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 14:52:05 +0300 Subject: [PATCH 17/27] always expand on block selection change --- .../block-tools/block-contextual-toolbar.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 5a2f1cd2ac879..c18212d1e8e83 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -73,8 +73,8 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { } }, [ isCollapsed ] ); - const { blockType, hasParents, showParentSelector } = useSelect( - ( select ) => { + const { blockType, hasParents, showParentSelector, selectedBlockClientId } = + useSelect( ( select ) => { const { getBlockName, getBlockParents, @@ -83,16 +83,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { } = select( blockEditorStore ); const { getBlockType } = select( blocksStore ); const selectedBlockClientIds = getSelectedBlockClientIds(); - const selectedBlockClientId = selectedBlockClientIds[ 0 ]; - const parents = getBlockParents( selectedBlockClientId ); + const _selectedBlockClientId = selectedBlockClientIds[ 0 ]; + const parents = getBlockParents( _selectedBlockClientId ); const firstParentClientId = parents[ parents.length - 1 ]; const parentBlockName = getBlockName( firstParentClientId ); const parentBlockType = getBlockType( parentBlockName ); return { + selectedBlockClientId: _selectedBlockClientId, blockType: - selectedBlockClientId && - getBlockType( getBlockName( selectedBlockClientId ) ), + _selectedBlockClientId && + getBlockType( getBlockName( _selectedBlockClientId ) ), hasParents: parents.length, showParentSelector: parentBlockType && @@ -106,9 +107,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { selectedBlockClientId ), }; - }, - [] - ); + }, [] ); + + useEffect( () => { + setIsCollapsed( false ); + }, [ selectedBlockClientId ] ); const isLargeViewport = useViewportMatch( 'medium' ); From 2ec1da6d275970120c395c27a25c326e560e183e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 16:05:34 +0300 Subject: [PATCH 18/27] updates the labels --- .../src/components/block-tools/block-contextual-toolbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index c18212d1e8e83..5d61ea7323728 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -34,7 +34,7 @@ const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => { icon={ levelUp } onClick={ onClick } ref={ ref } - label={ __( 'Collapse block tools' ) } + label={ __( 'Show document tools' ) } /> ); } ); @@ -47,7 +47,7 @@ const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { icon={ } onClick={ onClick } ref={ ref } - label={ __( 'Expand block tools' ) } + label={ __( 'Show block tools' ) } /> ); } ); From 7ba6116e9261f6aa997667df520d3256043885b8 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 17:40:34 +0300 Subject: [PATCH 19/27] fixes a separator height and show icon labels positioning for non full screen --- .../src/components/block-tools/style.scss | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index f59039ea67ca1..eeb534401bb31 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -156,7 +156,7 @@ &::after { content: ""; width: $border-width; - height: 30px; + height: 24px; margin-top: $grid-unit + $grid-unit-05; margin-bottom: $grid-unit + $grid-unit-05; background-color: $gray-300; @@ -178,15 +178,36 @@ background-color: $gray-300; position: relative; left: -12px; //the padding of buttons + height: 24px; } } .show-icon-labels & { - left: $grid-unit-80 + $grid-unit-80; + left: $grid-unit-80 + $grid-unit-50; &.is-collapsed { left: $grid-unit-10 * 56; } + + .is-fullscreen-mode & { + left: $grid-unit-80 + $grid-unit-80; + } + + .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after { + left: 0; + } + + .block-editor-block-toolbar__block-controls .block-editor-block-mover { + border-left: none; + &::before { + content: ""; + width: $border-width; + margin-top: $grid-unit + $grid-unit-05; + margin-bottom: $grid-unit + $grid-unit-05; + background-color: $gray-300; + position: relative; + } + } } } From ec2ebb917d3e691645fb92c78c5ffd3879de1758 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 12 Apr 2023 18:22:29 +0300 Subject: [PATCH 20/27] fix reference error --- .../src/components/block-tools/block-contextual-toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index 5d61ea7323728..c8eee6b48cbd4 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js @@ -104,7 +104,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { ) && selectedBlockClientIds.length <= 1 && ! __unstableGetContentLockingParent( - selectedBlockClientId + _selectedBlockClientId ), }; }, [] ); From 6104db22924915a53296cc156c146200ee2cc0e8 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Apr 2023 10:58:04 -0500 Subject: [PATCH 21/27] Update e2e test for alt+f10 shortcut to match desired behavior in unified toolbar --- .../editor/various/navigable-toolbar.test.js | 84 ++++++++++++------- 1 file changed, 55 insertions(+), 29 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js index ec93851707849..05099e12bd33b 100644 --- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js +++ b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js @@ -11,38 +11,12 @@ async function isInBlockToolbar() { } ); } -describe.each( [ - [ 'unified', true ], - [ 'contextual', false ], -] )( 'block toolbar (%s: %p)', ( label, isUnifiedToolbar ) => { +describe( 'Block Toolbar', () => { beforeEach( async () => { await createNewPost(); - - await page.evaluate( ( _isUnifiedToolbar ) => { - const { select, dispatch } = wp.data; - const isCurrentlyUnified = - select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ); - if ( isCurrentlyUnified !== _isUnifiedToolbar ) { - dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' ); - } - }, isUnifiedToolbar ); } ); - it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => { - // Assumes new post focus starts in title. Create first new - // block by Enter. - await page.keyboard.press( 'Enter' ); - - // [TEMPORARY]: A new paragraph is not technically a block yet - // until starting to type within it. - await page.keyboard.type( 'Example' ); - - // Upward. - await pressKeyWithModifier( 'alt', 'F10' ); - expect( await isInBlockToolbar() ).toBe( true ); - } ); - - if ( ! isUnifiedToolbar ) { + describe( 'Contextual Toolbar', () => { it( 'should not scroll page', async () => { while ( await page.evaluate( () => { @@ -74,5 +48,57 @@ describe.each( [ expect( scrollTopBefore ).toBe( scrollTopAfter ); } ); - } + + it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => { + // Assumes new post focus starts in title. Create first new + // block by Enter. + await page.keyboard.press( 'Enter' ); + + // [TEMPORARY]: A new paragraph is not technically a block yet + // until starting to type within it. + await page.keyboard.type( 'Example' ); + + // Upward. + await pressKeyWithModifier( 'alt', 'F10' ); + + expect( await isInBlockToolbar() ).toBe( true ); + } ); + } ); + + describe( 'Unified Toolbar', () => { + beforeEach( async () => { + // Enable unified toolbar + await page.evaluate( () => { + const { select, dispatch } = wp.data; + const isCurrentlyUnified = + select( 'core/edit-post' ).isFeatureActive( + 'fixedToolbar' + ); + if ( ! isCurrentlyUnified ) { + dispatch( 'core/edit-post' ).toggleFeature( + 'fixedToolbar' + ); + } + } ); + } ); + + it( 'navigates in and out of toolbar by keyboard (Alt+F10)', async () => { + // Assumes new post focus starts in title. Create first new + // block by Enter. + await page.keyboard.press( 'Enter' ); + + // [TEMPORARY]: A new paragraph is not technically a block yet + // until starting to type within it. + await page.keyboard.type( 'Example' ); + + // Upward. + await pressKeyWithModifier( 'alt', 'F10' ); + + expect( + await page.evaluate( () => { + return document.activeElement.getAttribute( 'aria-label' ); + } ) + ).toBe( 'Show document tools' ); + } ); + } ); } ); From 918db1467358b51b8a18987ef67b075059ac8fea Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Apr 2023 11:02:29 -0500 Subject: [PATCH 22/27] Update test names to more accurately match what it's testing --- .../e2e-tests/specs/editor/various/navigable-toolbar.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js index 05099e12bd33b..8fb2edf4f6768 100644 --- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js +++ b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js @@ -49,7 +49,7 @@ describe( 'Block Toolbar', () => { expect( scrollTopBefore ).toBe( scrollTopAfter ); } ); - it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => { + it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => { // Assumes new post focus starts in title. Create first new // block by Enter. await page.keyboard.press( 'Enter' ); @@ -82,7 +82,7 @@ describe( 'Block Toolbar', () => { } ); } ); - it( 'navigates in and out of toolbar by keyboard (Alt+F10)', async () => { + it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => { // Assumes new post focus starts in title. Create first new // block by Enter. await page.keyboard.press( 'Enter' ); From d1d560bda47f6ebbdc8359fbbeb2e3b9c856faa4 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Apr 2023 11:03:53 -0500 Subject: [PATCH 23/27] Corrected typo: prefferences -> preferences --- packages/edit-site/src/components/layout/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index fb8100efcb46c..609d677c07b3d 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -23,7 +23,7 @@ import { useState, useRef } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { CommandMenu } from '@wordpress/commands'; -import { store as prefferencesStore } from '@wordpress/preferences'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -84,7 +84,7 @@ export default function Layout() { 'core/edit-site/next-region' ), hasFixedToolbar: - select( prefferencesStore ).get( 'fixedToolbar' ), + select( preferencesStore ).get( 'fixedToolbar' ), }; }, [] ); const navigateRegionsProps = useNavigateRegions( { From aee64600e426c057ffa3d86b9fb2f612b65db501 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 18 Apr 2023 12:08:35 +0100 Subject: [PATCH 24/27] move the toolbar over on large viewports --- packages/block-editor/src/components/block-tools/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index eeb534401bb31..ae9e6d3a24511 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -270,6 +270,8 @@ // for the block inserter the publish button @include break-large() { &.is-fixed { + // leave room for block inserter and the dashboard navigation + left: $grid-unit-80 + $grid-unit-40 + ( $grid-unit-80 * 2 ); // Don't fill the whole header, minimize area width: initial; .is-fullscreen-mode & { From da57ec0d240c9d15a1007cd2ebbb79e20ab548de Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 18 Apr 2023 18:56:10 +0300 Subject: [PATCH 25/27] fix positioning for all wp admin sidebar full screen not full screen mobile desktop situations --- .../src/components/block-tools/style.scss | 61 +++++++++++++++++-- 1 file changed, 55 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index ae9e6d3a24511..6af4c7c12fb31 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -250,14 +250,31 @@ // except for the inserter on the left @include break-medium() { &.is-fixed { - width: calc(100% - #{$grid-unit-80 + $grid-unit-40}); + + left: 28 * $grid-unit; + width: calc(100% - #{28 * $grid-unit}); + &.is-collapsed { // when collapsed minimize area width: initial; + left: $grid-unit * 48; + } + + // collapsed wp admin sidebar when not in full screen mode + .auto-fold & { + left: $grid-unit-80 + $grid-unit-40; + width: calc(100% - #{$grid-unit-80 + $grid-unit-40}); + + &.is-collapsed { + left: $grid-unit * 32; + } } + .is-fullscreen-mode & { width: calc(100% - #{$grid-unit-80 + $grid-unit-70}); + left: $grid-unit-80 + $grid-unit-70; &.is-collapsed { + left: $grid-unit * 36; // when collapsed minimize area width: initial; } @@ -270,13 +287,45 @@ // for the block inserter the publish button @include break-large() { &.is-fixed { - // leave room for block inserter and the dashboard navigation - left: $grid-unit-80 + $grid-unit-40 + ( $grid-unit-80 * 2 ); - // Don't fill the whole header, minimize area - width: initial; - .is-fullscreen-mode & { + + .auto-fold & { // Don't fill the whole header, minimize area width: initial; + + // leave room for block inserter and the dashboard navigation + left: $grid-unit-80 + $grid-unit-40 + ( $grid-unit-80 * 2 ); + + &.is-collapsed { + // when collapsed minimize area + width: initial; + left: $grid-unit * 48; + } + + } + + // collapsed wp admin sidebar when not in full screen mode + .auto-fold.folded & { + width: initial; + left: $grid-unit-80 + $grid-unit-40; + + &.is-collapsed { + // when collapsed minimize area + width: initial; + left: $grid-unit * 32; + } + + } + + .auto-fold.is-fullscreen-mode & { + // Don't fill the whole header, minimize area + width: initial; + left: $grid-unit-80 + $grid-unit-70; + + &.is-collapsed { + // when collapsed minimize area + width: initial; + left: $grid-unit * 36; + } } } } From 5356b0a0d0136cf51ff701c78380bac66f708b6a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 18 Apr 2023 20:06:26 +0300 Subject: [PATCH 26/27] tweak the position of the top toolbar for when icon labels are on --- .../block-editor/src/components/block-tools/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 6af4c7c12fb31..9194935c616b2 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -327,6 +327,14 @@ left: $grid-unit * 36; } } + + .auto-fold.is-fullscreen-mode .show-icon-labels & { + left: $grid-unit-80 * 2; + &.is-collapsed { + left: $grid-unit * 48; + } + } + } } From 6fd07af32adba461fcdc82df8d0cadf686335585 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 19 Apr 2023 12:37:25 +0100 Subject: [PATCH 27/27] change the condition under which we display the block parent selector so that the tests pass --- packages/block-editor/src/components/block-toolbar/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 91757c2dc9f19..d9799849b1399 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -99,7 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => { // header area and not contextually to the block. const displayHeaderToolbar = useViewportMatch( 'medium', '<' ) || hasFixedToolbar; - const isLargeViewport = useViewportMatch( 'medium' ); + const isLargeViewport = ! useViewportMatch( 'medium', '<' ); if ( blockType ) { if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {