Skip to content

Commit

Permalink
Set top toolbar size dynamically (#53526)
Browse files Browse the repository at this point in the history 
* fix the top toolbar size in the space remaining after plugin items are pinned

* only resize above the tablet breakpoint

* fix fixed block toolbar collapse button when icon labels are shown

* Update height and scroll behavior

* move the layout effect to the affected component, fixes for fullscreen, no block selected, icon labels height

---------

Co-authored-by: jasmussen <[email protected]>
  • Loading branch information
@draganescu @jasmussen
draganescu and jasmussen committed Aug 15, 2023
1 parent fa552b5 commit 2bb2d55
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 7 deletions.
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
78 changes: 77 additions & 1 deletion packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 );
Expand Down
40 changes: 34 additions & 6 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,12 @@
z-index: z-index(".block-editor-block-popover");
display: block;
width: 100%;
overflow: hidden;

.block-editor-block-toolbar {
overflow: auto;
overflow-y: hidden;
}

border: none;
border-bottom: $border-width solid $gray-200;
Expand All @@ -133,33 +139,47 @@

// 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;
top: $admin-bar-height;
// Don't fill up when empty
min-height: initial;
// remove the border
border-bottom: none;
// 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;
top: $grid-unit - $border-width;

top: 0;

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}
}

& > .block-editor-block-toolbar {
Expand Down Expand Up @@ -245,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
Expand Down Expand Up @@ -318,7 +338,12 @@
// except for the inserter on the left
@include break-medium() {
&.is-fixed {
width: 100%;
width: calc(100% - #{$toolbar-margin});

.show-icon-labels & {
width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
}

}
}

Expand All @@ -328,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
Expand Down

1 comment on commit 2bb2d55

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 2bb2d55.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5867251079
📝 Reported issues:

Please sign in to comment.