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

Updates the behavior of the top toolbar fixed setting #49634

Merged
merged 27 commits into from
Apr 19, 2023
Merged

Updates the behavior of the top toolbar fixed setting #49634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
1aafff5
move fixed toolbar on desktop on top of interface header
draganescu Apr 6, 2023
1d879fc
add the parent selector to the fixed toolbar on desktop
draganescu Apr 6, 2023
68ed98d
fix for parent selector position
draganescu Apr 6, 2023
70ce488
hide block toolbar when focus is within interface header
draganescu Apr 6, 2023
8d982e4
adds collapsed and expanded states to block toolbar, manages focus
draganescu Apr 6, 2023
7be2148
label the toggle buttons
draganescu Apr 6, 2023
0a9d48e
fix the focus loss when toggling top toolbar on
draganescu Apr 6, 2023
8d29ac5
fixes positioning glitches in windowed post editor, fixes focus withi…
draganescu Apr 6, 2023
4890094
fix rounded border on collapse/expand buttons
draganescu Apr 6, 2023
38013a8
adjusts padding for parent selector and collapse buttons
draganescu Apr 7, 2023
9e649f9
use preference store to look for top toolbar pref in site editor
draganescu Apr 7, 2023
71c55c9
replace button with toolbarbutton to avoid the need to reuse componen…
draganescu Apr 11, 2023
a1a9ae6
remove component-* class referencing
draganescu Apr 11, 2023
70e9e92
respect design on separator size
draganescu Apr 11, 2023
13ed3c3
adds breakpoint covering behavior
draganescu Apr 11, 2023
fc8f230
fix buton labels pref toolbar height, fix capitalisation
draganescu Apr 12, 2023
b8c3072
always expand on block selection change
draganescu Apr 12, 2023
2ec1da6
updates the labels
draganescu Apr 12, 2023
7ba6116
fixes a separator height and show icon labels positioning for non ful…
draganescu Apr 12, 2023
ec2ebb9
fix reference error
draganescu Apr 12, 2023
6104db2
Update e2e test for alt+f10 shortcut to match desired behavior in uni…
jeryj Apr 12, 2023
918db14
Update test names to more accurately match what it's testing
jeryj Apr 12, 2023
d1d560b
Corrected typo: prefferences -> preferences
jeryj Apr 12, 2023
aee6460
move the toolbar over on large viewports
scruffian Apr 18, 2023
da57ec0
fix positioning for all wp admin sidebar full screen not full screen …
draganescu Apr 18, 2023
5356b0a
tweak the position of the top toolbar for when icon labels are on
draganescu Apr 18, 2023
6fd07af
change the condition under which we display the block parent selector…
scruffian Apr 19, 2023
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
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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 }
Comment on lines +31 to +32
Copy link
Contributor

Choose a reason for hiding this comment

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

Out of curiosity, have you tried using ToolbarButton directly (instead of using the as prop) ?

Suggested change
<ToolbarItem
as={ ToolbarButton }
<ToolbarButton

This suggestion would apply for the other instances of ToolbarItem in this file too

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Of course not, I am a robot doing things as instructed 😂 that was as Button, suggested use ToolbarButton so I did. 🤦🏻

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
Loading