Skip to content

Commit

Permalink
Update fixed block toolbar (#52123)
Browse files Browse the repository at this point in the history 
* update the icons for expanding and collapsing the fixed block toolbar

* hide the tools selector item in document tools for fixed toolbar preference

* reveal undo, redo and list view buttons

* tweaks for show icon labels and hide zoom out for top toolbar option

* improve the responsiveness of the fixed block toolbar

* remove the overflow rule - bad experiment

* update top toolbar test with the new label for buttons

* update the toolbar tests to account for moving the collapse button
  • Loading branch information
@draganescu
draganescu committed Jul 5, 2023
1 parent d3c8dd8 commit 38247ce
Show file tree
Hide file tree
Showing 7 changed files with 107 additions and 75 deletions.
15 changes: 4 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 @@ -15,7 +15,7 @@ import {
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { levelUp } from '@wordpress/icons';
import { next, previous } from '@wordpress/icons';
import { useViewportMatch } from '@wordpress/compose';

/**
Expand All @@ -24,7 +24,6 @@ import { useViewportMatch } from '@wordpress/compose';
import NavigableToolbar from '../navigable-toolbar';
import BlockToolbar from '../block-toolbar';
import { store as blockEditorStore } from '../../store';
import BlockIcon from '../block-icon';
import { unlock } from '../../lock-unlock';

function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
Expand Down Expand Up @@ -94,6 +93,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
aria-label={ __( 'Block tools' ) }
{ ...props }
>
{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
{ isFixed && isLargeViewport && blockType && (
<ToolbarGroup
className={
Expand All @@ -105,26 +105,19 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
<ToolbarItem
as={ ToolbarButton }
ref={ toolbarButtonRef }
icon={
isCollapsed ? (
<BlockIcon icon={ blockType.icon } />
) : (
levelUp
)
}
icon={ isCollapsed ? next : previous }
onClick={ () => {
setIsCollapsed( ( collapsed ) => ! collapsed );
toolbarButtonRef.current.focus();
} }
label={
isCollapsed
? __( 'Show block tools' )
: __( 'Show document tools' )
: __( 'Hide block tools' )
}
/>
</ToolbarGroup>
) }
{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
</NavigableToolbar>
);
}
Expand Down
95 changes: 69 additions & 26 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,11 @@
@include break-medium() {
&.is-fixed {

// leave room for block inserter
margin-left: $grid-unit-80;
// leave room for block inserter, undo and redo, list view
margin-left: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
// position on top of interface header
position: fixed;
top: $admin-bar-height + $grid-unit;
top: $admin-bar-height + $grid-unit - $border-width;
// Don't fill up when empty
min-height: initial;
// remove the border
Expand All @@ -145,39 +145,85 @@

&.is-collapsed {
width: initial;
margin-left: $grid-unit-80 * 3 + $grid-unit-30;
}

.is-fullscreen-mode & {
// leave room for block inserter
margin-left: $grid-unit-80 + $grid-unit-70;
top: $grid-unit;
// 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;
&.is-collapsed {
width: initial;
margin-left: $grid-unit-80 * 4 + $grid-unit-30;
}
}

& > .block-editor-block-toolbar.is-showing-movers {
flex-grow: initial;
width: initial;

// Add a border as separator in the block toolbar.
&::before {
content: "";
width: $border-width;
height: 3 * $grid-unit;
margin-top: $grid-unit + $grid-unit-05;
margin-right: 0;
background-color: $gray-300;
position: relative;
left: math.div(-$grid-unit-05, 2);
top: -1px;
}
}

& > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
border: none;

.show-icon-labels & {
.components-button.has-icon {
// Hide the button icons when labels are set to display...
svg {
display: none;
}
// ... and display labels.
&::after {
content: attr(aria-label);
font-size: $helptext-font-size;
}
}
}

// Add a border as separator in the block toolbar.
&::after {
&::before {
content: "";
width: $border-width;
height: 24px;
height: 3 * $grid-unit;
margin-top: $grid-unit + $grid-unit-05;
margin-bottom: $grid-unit + $grid-unit-05;
margin-right: $grid-unit-10;
background-color: $gray-300;
position: absolute;
left: 44px;
position: relative;
left: 0;
top: -1px;
}
}

& > .block-editor-block-toolbar__group-expand-fixed-toolbar {
border: none;

.show-icon-labels & {
width: $grid-unit-80 * 4;
.components-button.has-icon {
// Hide the button icons when labels are set to display...
svg {
display: none;
}
// ... and display labels.
&::after {
content: attr(aria-label);
font-size: $helptext-font-size;
}
}
}

// Add a border as separator in the block toolbar.
&::before {
content: "";
Expand All @@ -186,27 +232,20 @@
margin-bottom: $grid-unit + $grid-unit-05;
background-color: $gray-300;
position: relative;
left: -12px; //the padding of buttons
height: 24px;
left: -8px;
height: 3 * $grid-unit;
top: -1px;
}
}

.show-icon-labels & {

margin-left: $grid-unit-80;

&.is-collapsed {
margin-left: $grid-unit-80 * 6;
}
margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin ;

.is-fullscreen-mode & {
margin-left: $grid-unit-80 + $grid-unit-80;
&.is-collapsed {
margin-left: $grid-unit-80 * 7;
}
margin-left: $grid-unit * 18; // site hub, inserter and margin
}


.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
left: 0;
}
Expand Down Expand Up @@ -234,12 +273,14 @@
}

&.is-fixed .block-editor-block-parent-selector {

.block-editor-block-parent-selector__button {
position: relative;
top: -1px;
border: 0;
padding-right: 6px;
padding-left: 6px;

&::after {
content: "\00B7";
font-size: 16px;
Expand Down Expand Up @@ -281,7 +322,9 @@
// for the block inserter the publish button
@include break-large() {
&.is-fixed {
width: initial;
// the combined with of the tools at the right of the header and the margin left
// of the toolbar which includes four buttons
width: calc(100% - 240px - #{4 * $grid-unit-80});
}
}

Expand Down
5 changes: 4 additions & 1 deletion packages/edit-post/src/components/header/header-toolbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Button, ToolbarItem } from '@wordpress/components';
import { listView, plus } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
Expand All @@ -36,6 +37,8 @@ function HeaderToolbar() {
const inserterButton = useRef();
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editPostStore );
const { get: getPreference } = useSelect( preferencesStore );
const hasFixedToolbar = getPreference( 'core/edit-post', 'fixedToolbar' );
const {
isInserterEnabled,
isInserterOpened,
Expand Down Expand Up @@ -147,7 +150,7 @@ function HeaderToolbar() {
/>
{ ( isWideViewport || ! showIconLabels ) && (
<>
{ isLargeViewport && (
{ isLargeViewport && ! hasFixedToolbar && (
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
Expand Down
8 changes: 8 additions & 0 deletions packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@
color: currentColor;
background: $gray-200;
}

@include break-medium() {
width: 50%;
}

@include break-large() {
width: min(100%, 450px);
}
}

.edit-site-document-actions__command {
Expand Down
26 changes: 17 additions & 9 deletions packages/edit-site/src/components/header-edit-mode/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,9 @@ export default function HeaderEditMode() {
};
}, [] );

const { get: getPreference } = useSelect( preferencesStore );
const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );

const {
__experimentalSetPreviewDeviceType: setPreviewDeviceType,
setIsInserterOpened,
Expand Down Expand Up @@ -213,14 +216,18 @@ export default function HeaderEditMode() {
) }
{ isLargeViewport && (
<>
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
variant={
showIconLabels ? 'tertiary' : undefined
}
disabled={ ! isVisualMode }
/>
{ ! hasFixedToolbar && (
<ToolbarItem
as={ ToolSelector }
showTooltip={ ! showIconLabels }
variant={
showIconLabels
? 'tertiary'
: undefined
}
disabled={ ! isVisualMode }
/>
) }
<ToolbarItem
as={ UndoButton }
showTooltip={ ! showIconLabels }
Expand Down Expand Up @@ -257,7 +264,8 @@ export default function HeaderEditMode() {
/>
) }
{ isZoomedOutViewExperimentEnabled &&
! isDistractionFree && (
! isDistractionFree &&
! hasFixedToolbar && (
<ToolbarItem
as={ Button }
className="edit-site-header-edit-mode__zoom-out-view-toggle"
Expand Down
11 changes: 0 additions & 11 deletions packages/edit-site/src/components/layout/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,6 @@
color: $gray-400;
display: flex;
flex-direction: column;

// Expand the fixed block toolbar to cover the document title control.
.block-editor-block-contextual-toolbar {
@include break-medium() {
&.is-fixed {
// the combined with of the tools at the right of the header and the margin left
width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
}
}
}

}

.edit-site-layout__hub {
Expand Down
22 changes: 5 additions & 17 deletions test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await editor.insertBlock( { name: 'core/paragraph' } );
await toolbarUtils.moveToToolbarShortcut();
await expect(
toolbarUtils.blockToolbarShowDocumentButton
toolbarUtils.blockToolbarParagraphButton
).toBeFocused();
await expect(
toolbarUtils.documentToolbarTooltip
).not.toBeVisible();

// Test: Focus the block toolbar from paragraph block with content
await editor.insertBlock( { name: 'core/paragraph' } );
Expand All @@ -113,11 +110,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
);
await toolbarUtils.moveToToolbarShortcut();
await expect(
toolbarUtils.blockToolbarShowDocumentButton
toolbarUtils.blockToolbarParagraphButton
).toBeFocused();
await expect(
toolbarUtils.documentToolbarTooltip
).not.toBeVisible();
} );

test( 'Focuses the correct toolbar in select mode', async ( {
Expand All @@ -135,11 +129,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await toolbarUtils.useSelectMode();
await toolbarUtils.moveToToolbarShortcut();
await expect(
toolbarUtils.blockToolbarShowDocumentButton
toolbarUtils.blockToolbarParagraphButton
).toBeFocused();
await expect(
toolbarUtils.documentToolbarTooltip
).not.toBeVisible();

// Test: Focus the block toolbar from paragraph in select mode
await editor.insertBlock( { name: 'core/paragraph' } );
Expand All @@ -149,11 +140,8 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
await toolbarUtils.useSelectMode();
await toolbarUtils.moveToToolbarShortcut();
await expect(
toolbarUtils.blockToolbarShowDocumentButton
toolbarUtils.blockToolbarParagraphButton
).toBeFocused();
await expect(
toolbarUtils.documentToolbarTooltip
).not.toBeVisible();
} );
} );

Expand Down Expand Up @@ -254,7 +242,7 @@ class ToolbarUtils {
exact: true,
} );
this.blockToolbarShowDocumentButton = this.page.getByRole( 'button', {
name: 'Show document tools',
name: 'Hide block tools',
exact: true,
} );
}
Expand Down

0 comments on commit 38247ce

Please sign in to comment.