Skip to content

Commit

Permalink
Updates the behavior of the top toolbar fixed setting (#49634)
Browse files Browse the repository at this point in the history 
* move fixed toolbar on desktop on top of interface header

* add the parent selector to the fixed toolbar on desktop

* fix for parent selector position

* hide block toolbar when focus is within interface header

* adds collapsed and expanded states to block toolbar, manages focus

* label the toggle buttons

* fix the focus loss when toggling top toolbar on

* fixes positioning glitches in windowed post editor, fixes focus within in site editor

* fix rounded border on collapse/expand buttons

* adjusts padding for parent selector and collapse buttons

* use preference store to look for top toolbar pref in site editor

* replace button with toolbarbutton to avoid the need to reuse component private classes

* remove component-* class referencing

* respect design on separator size

* adds breakpoint covering behavior

* fix buton labels pref toolbar height, fix capitalisation

* always expand on block selection change

* updates the labels

* fixes a separator height and show icon labels positioning for non full screen

* fix reference error

* Update e2e test for alt+f10 shortcut to match desired behavior in unified toolbar

* Update test names to more accurately match what it's testing

* Corrected typo: prefferences -> preferences

* move the toolbar over on large viewports

* fix positioning for all wp admin sidebar full screen not full screen mobile desktop situations

* tweak the position of the top toolbar for when icon labels are on

* change the condition under which we display the block parent selector so that the tests pass

---------

Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: scruffian <ben@scruffian.com>
  • Loading branch information
@draganescu @jeryj @scruffian
3 people committed Apr 19, 2023
1 parent 70efd45 commit fb92cc8
Show file tree
Hide file tree
Showing 10 changed files with 456 additions and 65 deletions.
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) {
Expand All @@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {

return (
<div className={ classes }>
{ ! isMultiToolbar &&
! displayHeaderToolbar &&
! isContentLocked && <BlockParentSelector /> }
{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
<BlockParentSelector />
) }
<div ref={ nodeRef } { ...showMoversGestures }>
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
! isContentLocked && (
Expand Down
48 changes: 34 additions & 14 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,26 +56,46 @@
}
}

.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
// 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;
}
}
}

.show-icon-labels & {
margin-left: 0;
> :last-child,
> :last-child .components-toolbar-group,
> :last-child .components-toolbar {
&::after {
display: none;
}
}
}
}
}

.block-editor-block-parent-selector {
position: absolute;
top: -$border-width;
left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});

.show-icon-labels & {
position: relative;
left: auto;
top: auto;
margin-top: -$border-width;
margin-left: -$border-width;
margin-bottom: -$border-width;
margin-left: 0;
}
}

Expand Down
105 changes: 94 additions & 11 deletions 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,19 +7,74 @@ 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,
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { levelUp } from '@wordpress/icons';
import { useViewportMatch } from '@wordpress/compose';

/**
* Internal dependencies
*/
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 (
<ToolbarItem
as={ ToolbarButton }
className="block-editor-block-toolbar__collapse-fixed-toolbar"
icon={ levelUp }
onClick={ onClick }
ref={ ref }
label={ __( 'Show document tools' ) }
/>
);
} );

const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
return (
<ToolbarItem
as={ ToolbarButton }
className="block-editor-block-toolbar__expand-fixed-toolbar"
icon={ <BlockIcon icon={ icon } /> }
onClick={ onClick }
ref={ ref }
label={ __( 'Show block tools' ) }
/>
);
} );

function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
const { blockType, hasParents, showParentSelector } = useSelect(
( select ) => {
// When the toolbar is fixed it can be collapsed
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();
}
if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
collapseFixedToolbarButtonRef.current.focus();
}
}, [ isCollapsed ] );

const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
useSelect( ( select ) => {
const {
getBlockName,
getBlockParents,
Expand All @@ -28,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 &&
Expand All @@ -48,12 +104,16 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
) &&
selectedBlockClientIds.length <= 1 &&
! __unstableGetContentLockingParent(
selectedBlockClientId
_selectedBlockClientId
),
};
},
[]
);
}, [] );

useEffect( () => {
setIsCollapsed( false );
}, [ selectedBlockClientId ] );

const isLargeViewport = useViewportMatch( 'medium' );

if ( blockType ) {
if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
Expand All @@ -65,6 +125,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 (
Expand All @@ -75,7 +136,29 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
aria-label={ __( 'Block tools' ) }
{ ...props }
>
<BlockToolbar hideDragHandle={ isFixed } />
{ isFixed && isLargeViewport && blockType && (
<ToolbarGroup
className={
isCollapsed
? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
}
>
{ isCollapsed ? (
<ExpandFixedToolbarButton
onClick={ () => setIsCollapsed( false ) }
icon={ blockType.icon }
ref={ expandFixedToolbarButtonRef }
/>
) : (
<CollapseFixedToolbarButton
onClick={ () => setIsCollapsed( true ) }
ref={ collapseFixedToolbarButtonRef }
/>
) }
</ToolbarGroup>
) }
{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
</NavigableToolbar>
);
}
Expand Down

1 comment on commit fb92cc8

@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 fb92cc8.
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/4743124322
📝 Reported issues:

Please sign in to comment.