From 170d97c07818adc174ec24cdd74455b08987c2ad Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 10 Aug 2023 15:10:54 +0300 Subject: [PATCH 1/5] fix the top toolbar size in the space remaining after plugin items are pinned --- .../src/components/block-tools/index.js | 49 ++++++++++++++++++- .../src/components/block-tools/style.scss | 7 +++ 2 files changed, 55 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 8e3b240838fd0..697a0d138618b 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useViewportMatch } from '@wordpress/compose'; import { Popover } from '@wordpress/components'; import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts'; -import { useRef } from '@wordpress/element'; +import { useLayoutEffect, useRef } from '@wordpress/element'; /** * Internal dependencies @@ -64,6 +64,53 @@ export default function BlockTools( { moveBlocksDown, } = useDispatch( blockEditorStore ); + useLayoutEffect( () => { + // don't do anything if not fixed toolbar + if ( ! hasFixedToolbar ) { + return; + } + + const blockToolbar = document.querySelector( + '.block-editor-block-contextual-toolbar' + ); + + if ( ! blockToolbar ) { + return; + } + + // get the width of the pinned items in the post editor + const pinnedItems = document.querySelector( + '.edit-post-header__settings' + ); + + // get the width of the left header in the site editor + const leftHeader = document.querySelector( + '.edit-site-header-edit-mode__end' + ); + + const computedToolbarStyle = window.getComputedStyle( blockToolbar ); + const computedPinnedItemsStyle = pinnedItems + ? window.getComputedStyle( pinnedItems ) + : false; + const computedLeftHeaderStyle = leftHeader + ? window.getComputedStyle( leftHeader ) + : false; + + const marginLeft = parseFloat( computedToolbarStyle.marginLeft ); + const pinnedItemsWidth = computedPinnedItemsStyle + ? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding + : 0; + const leftHeaderWidth = computedLeftHeaderStyle + ? parseFloat( computedLeftHeaderStyle.width ) + : 0; + // set the new witdth of the toolbar + document.querySelector( + '.block-editor-block-contextual-toolbar' + ).style.width = `calc(100% - ${ + leftHeaderWidth + pinnedItemsWidth + marginLeft + }px)`; + }, [ hasFixedToolbar ] ); + function onKeyDown( event ) { if ( event.defaultPrevented ) return; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 87481c2bc09d4..32ce41cbdfb04 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -110,6 +110,13 @@ z-index: z-index(".block-editor-block-popover"); display: block; width: 100%; + overflow: hidden; + + .block-editor-block-toolbar { + overflow-y: hidden; + overflow-x: scroll; + scrollbar-gutter: stable; + } border: none; border-bottom: $border-width solid $gray-200; From a26b10f676bbe421208decb6276aee575746ee33 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 11 Aug 2023 14:38:29 +0300 Subject: [PATCH 2/5] only resize above the tablet breakpoint --- packages/block-editor/src/components/block-tools/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 697a0d138618b..e0ffba4d196c9 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -64,9 +64,11 @@ export default function BlockTools( { moveBlocksDown, } = useDispatch( blockEditorStore ); + const isLargerThanTabletViewport = useViewportMatch( 'medium', '>' ); + useLayoutEffect( () => { // don't do anything if not fixed toolbar - if ( ! hasFixedToolbar ) { + if ( ! hasFixedToolbar || ! isLargerThanTabletViewport ) { return; } @@ -109,7 +111,7 @@ export default function BlockTools( { ).style.width = `calc(100% - ${ leftHeaderWidth + pinnedItemsWidth + marginLeft }px)`; - }, [ hasFixedToolbar ] ); + }, [ hasFixedToolbar, isLargerThanTabletViewport ] ); function onKeyDown( event ) { if ( event.defaultPrevented ) return; From 4ef5552a1bf80505857111f3c693c14f75271c9b Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Mon, 14 Aug 2023 14:31:44 +0300 Subject: [PATCH 3/5] fix fixed block toolbar collapse button when icon labels are shown --- .../src/components/block-toolbar/style.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 0b49c9299212f..eef1678e2dfab 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -252,6 +252,16 @@ flex-shrink: 1; } + @include break-medium() { + .block-editor-block-contextual-toolbar.is-fixed { + .components-toolbar, + .components-toolbar-group { + flex-shrink: 0; + } + } + } + + .block-editor-rich-text__inline-format-toolbar-group { .components-button + .components-button { margin-left: 6px; From 4c3b6121ebd5bedef061fc867409138adbbdb4a4 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 15 Aug 2023 08:46:47 +0200 Subject: [PATCH 4/5] Update height and scroll behavior --- .../src/components/block-tools/style.scss | 16 ++++++++++------ 1 file changed, 10 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 32ce41cbdfb04..7b7dfdfad1f0d 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -113,9 +113,8 @@ overflow: hidden; .block-editor-block-toolbar { + overflow: auto; overflow-y: hidden; - overflow-x: scroll; - scrollbar-gutter: stable; } border: none; @@ -140,11 +139,11 @@ // on desktop and tablet viewports the toolbar is fixed // on top of interface header + $toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05; @include break-medium() { &.is-fixed { - // leave room for block inserter, undo and redo, list view - margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05; + margin-left: $toolbar-margin; // position on top of interface header position: fixed; top: $admin-bar-height + $grid-unit - $border-width; @@ -163,7 +162,12 @@ // leave room for block inserter, undo and redo, list view // and some margin left margin-left: $grid-unit-80 * 4 - 2 * $grid-unit; - top: $grid-unit - $border-width; + + // Mimic the height of the parent, vertically align center, and provide a max-height. + top: 0; + height: $header-height; + align-items: center; + &.is-collapsed { width: initial; } @@ -325,7 +329,7 @@ // except for the inserter on the left @include break-medium() { &.is-fixed { - width: 100%; + width: calc(100% - #{$toolbar-margin}); } } From 1536fa419d48c74e894babb44abb7039ddddd44a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 15 Aug 2023 15:20:35 +0300 Subject: [PATCH 5/5] move the layout effect to the affected component, fixes for fullscreen, no block selected, icon labels height --- .../block-tools/block-contextual-toolbar.js | 78 ++++++++++++++++++- .../src/components/block-tools/index.js | 51 +----------- .../src/components/block-tools/style.scss | 27 +++++-- 3 files changed, 100 insertions(+), 56 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 18adf2c1262f7..51ee35ce51662 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,7 +7,12 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useEffect, useRef, useState } from '@wordpress/element'; +import { + useLayoutEffect, + useEffect, + useRef, + useState, +} from '@wordpress/element'; import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; import { @@ -77,6 +82,77 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) { setIsCollapsed( false ); }, [ selectedBlockClientId ] ); + const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' ); + const isFullscreen = + document.body.classList.contains( 'is-fullscreen-mode' ); + + useLayoutEffect( () => { + // don't do anything if not fixed toolbar + if ( ! isFixed || ! blockType ) { + return; + } + + const blockToolbar = document.querySelector( + '.block-editor-block-contextual-toolbar' + ); + + if ( ! blockToolbar ) { + return; + } + + if ( ! isLargerThanTabletViewport ) { + // set the width of the toolbar to auto + blockToolbar.style = {}; + return; + } + + if ( isCollapsed ) { + // set the width of the toolbar to auto + blockToolbar.style.width = 'auto'; + return; + } + + // get the width of the pinned items in the post editor + const pinnedItems = document.querySelector( + '.edit-post-header__settings' + ); + + // get the width of the left header in the site editor + const leftHeader = document.querySelector( + '.edit-site-header-edit-mode__end' + ); + + const computedToolbarStyle = window.getComputedStyle( blockToolbar ); + const computedPinnedItemsStyle = pinnedItems + ? window.getComputedStyle( pinnedItems ) + : false; + const computedLeftHeaderStyle = leftHeader + ? window.getComputedStyle( leftHeader ) + : false; + + const marginLeft = parseFloat( computedToolbarStyle.marginLeft ); + const pinnedItemsWidth = computedPinnedItemsStyle + ? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding + : 0; + const leftHeaderWidth = computedLeftHeaderStyle + ? parseFloat( computedLeftHeaderStyle.width ) + : 0; + + // set the new witdth of the toolbar + blockToolbar.style.width = `calc(100% - ${ + leftHeaderWidth + + pinnedItemsWidth + + marginLeft + + ( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded + }px)`; + }, [ + isFixed, + isLargerThanTabletViewport, + isCollapsed, + isFullscreen, + blockType, + ] ); + const isToolbarEnabled = ! blockType || hasBlockSupport( blockType, '__experimentalToolbar', true ); diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index e0ffba4d196c9..8e3b240838fd0 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useViewportMatch } from '@wordpress/compose'; import { Popover } from '@wordpress/components'; import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts'; -import { useLayoutEffect, useRef } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies @@ -64,55 +64,6 @@ export default function BlockTools( { moveBlocksDown, } = useDispatch( blockEditorStore ); - const isLargerThanTabletViewport = useViewportMatch( 'medium', '>' ); - - useLayoutEffect( () => { - // don't do anything if not fixed toolbar - if ( ! hasFixedToolbar || ! isLargerThanTabletViewport ) { - return; - } - - const blockToolbar = document.querySelector( - '.block-editor-block-contextual-toolbar' - ); - - if ( ! blockToolbar ) { - return; - } - - // get the width of the pinned items in the post editor - const pinnedItems = document.querySelector( - '.edit-post-header__settings' - ); - - // get the width of the left header in the site editor - const leftHeader = document.querySelector( - '.edit-site-header-edit-mode__end' - ); - - const computedToolbarStyle = window.getComputedStyle( blockToolbar ); - const computedPinnedItemsStyle = pinnedItems - ? window.getComputedStyle( pinnedItems ) - : false; - const computedLeftHeaderStyle = leftHeader - ? window.getComputedStyle( leftHeader ) - : false; - - const marginLeft = parseFloat( computedToolbarStyle.marginLeft ); - const pinnedItemsWidth = computedPinnedItemsStyle - ? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding - : 0; - const leftHeaderWidth = computedLeftHeaderStyle - ? parseFloat( computedLeftHeaderStyle.width ) - : 0; - // set the new witdth of the toolbar - document.querySelector( - '.block-editor-block-contextual-toolbar' - ).style.width = `calc(100% - ${ - leftHeaderWidth + pinnedItemsWidth + marginLeft - }px)`; - }, [ hasFixedToolbar, isLargerThanTabletViewport ] ); - function onKeyDown( event ) { if ( event.defaultPrevented ) return; diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 7b7dfdfad1f0d..a6b7d636f491b 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -146,7 +146,7 @@ margin-left: $toolbar-margin; // position on top of interface header position: fixed; - top: $admin-bar-height + $grid-unit - $border-width; + top: $admin-bar-height; // Don't fill up when empty min-height: initial; // remove the border @@ -154,23 +154,32 @@ // has to be flex for collapse button to fit display: flex; + // Mimic the height of the parent, vertically align center, and provide a max-height. + height: $header-height; + align-items: center; + &.is-collapsed { width: initial; } + &:empty { + width: initial; + } + .is-fullscreen-mode & { // leave room for block inserter, undo and redo, list view // and some margin left margin-left: $grid-unit-80 * 4 - 2 * $grid-unit; - // Mimic the height of the parent, vertically align center, and provide a max-height. top: 0; - height: $header-height; - align-items: center; &.is-collapsed { width: initial; } + + &:empty { + width: initial; + } } & > .block-editor-block-toolbar { @@ -256,7 +265,7 @@ .show-icon-labels & { - margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ; + margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin .is-fullscreen-mode & { margin-left: $grid-unit * 18; // site hub, inserter and margin @@ -330,6 +339,11 @@ @include break-medium() { &.is-fixed { width: calc(100% - #{$toolbar-margin}); + + .show-icon-labels & { + width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons + } + } } @@ -339,6 +353,9 @@ @include break-large() { &.is-fixed { width: auto; + .show-icon-labels & { + width: auto; //there are no undo, redo and list view buttons + } } .is-fullscreen-mode &.is-fixed { // in full screen mode we need to account for