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 #47277

Closed
wants to merge 19 commits into from
Closed

Updates the behavior of the top toolbar fixed setting #47277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
06c473a
Updates the behavior of the top toolbar fixed setting:
draganescu Jan 19, 2023
5337f72
disables auto toggling to top toolbar in DFM and removes superfluous …
draganescu Feb 2, 2023
878a582
Show block toolbar for multi-block selections
aaronrobertshaw Feb 3, 2023
d6f7a22
try maing the inserter always visible
draganescu Feb 3, 2023
eab6de9
visually hide the toolbars when they should be hidden
draganescu Mar 8, 2023
0525e11
add the roving behavior back to the block tools
draganescu Mar 8, 2023
8d44b77
potential solution for keyboard navigation
draganescu Mar 16, 2023
ae24bc1
keep the inserter button around when switching editor toolbars
draganescu Mar 16, 2023
58c7b2c
modify the parent selector UI for when the block toolbar is fixed
draganescu Mar 16, 2023
23e5d16
hide the block tools inserter when the document tools are focused
draganescu Mar 28, 2023
f7e6ffc
adds toggling between toolbars, fixes navigation mode phantom buttons
draganescu Mar 28, 2023
79f03fc
adds block icon to the block tools toggle
draganescu Mar 28, 2023
cfad384
- fixes regression on inserter size and margin
draganescu Mar 29, 2023
e09aed2
fixes bogus toolbar on tabbing
draganescu Mar 29, 2023
30f3f3c
tweak document toolbar margins
draganescu Mar 29, 2023
89d77f3
corrects separators
draganescu Mar 29, 2023
47e236d
css tweaks to grid and also hiding toggles on tabbiing through
draganescu Mar 29, 2023
0988ac3
tweak to stop accidental tabbing into block tools
draganescu Mar 29, 2023
161eb93
attempt to solve both ARIA toolbar access and tab stop to document tools
draganescu Apr 4, 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
5 changes: 2 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 @@ -120,13 +120,12 @@ const BlockToolbar = ( { hideDragHandle } ) => {
const classes = classnames( 'block-editor-block-toolbar', {
'is-showing-movers': shouldShowMovers,
'is-synced': isSynced,
'is-fixed': hasFixedToolbar,
} );

return (
<div className={ classes }>
{ ! isMultiToolbar &&
! displayHeaderToolbar &&
! isContentLocked && <BlockParentSelector /> }
{ ! isMultiToolbar && ! isContentLocked && <BlockParentSelector /> }
<div ref={ nodeRef } { ...showMoversGestures }>
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
! isContentLocked && (
Expand Down
41 changes: 27 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 @@ -20,6 +20,33 @@
overflow: inherit;
}

&.is-fixed > .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
border: 0;
&::after {
content: "\00B7";
font-size: 16px;
line-height: $grid-unit-40 + $grid-unit-10;
position: absolute;
left: $grid-unit-40 + $grid-unit-15 + 2px;
bottom: $grid-unit-05;
}
}

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

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

// Borders around toolbar segments.
.components-toolbar-group,
.components-toolbar {
Expand Down Expand Up @@ -64,20 +91,6 @@
}
}

.block-editor-block-parent-selector {
position: absolute;
top: -$border-width;
left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});

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

// Block controls.
.block-editor-block-toolbar__block-controls {
Expand Down
12 changes: 4 additions & 8 deletions packages/block-editor/src/components/block-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,7 @@ export default function BlockTools( {
...props
} ) {
const isLargeViewport = useViewportMatch( 'medium' );
const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
selector,
[]
);
const { isZoomOutMode, isTyping } = useSelect( selector, [] );
const isMatch = useShortcutEventMatch();
const { getSelectedBlockClientIds, getBlockRootClientId } =
useSelect( blockEditorStore );
Expand Down Expand Up @@ -129,10 +126,9 @@ export default function BlockTools( {
__unstableContentRef={ __unstableContentRef }
/>
) }
{ ! isZoomOutMode &&
( hasFixedToolbar || ! isLargeViewport ) && (
<BlockContextualToolbar isFixed />
) }
{ ! isLargeViewport && ! isZoomOutMode && (
<BlockContextualToolbar isFixed />
) }
{ /* Even if the toolbar is fixed, the block popover is still
needed for navigation and zoom-out mode. */ }
<SelectedBlockPopover
Expand Down
84 changes: 16 additions & 68 deletions packages/edit-post/src/components/header/header-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,36 @@
*/
import { useViewportMatch } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { __, _x } from '@wordpress/i18n';
import {
NavigableToolbar,
ToolSelector,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
EditorHistoryRedo,
EditorHistoryUndo,
store as editorStore,
} from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
import { EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
import { Button, ToolbarItem } from '@wordpress/components';
import { listView, plus } from '@wordpress/icons';
import { useRef, useCallback } from '@wordpress/element';
import { listView } from '@wordpress/icons';
import { useCallback, forwardRef } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';
import InserterButton from '../inserter-button';

const preventDefault = ( event ) => {
event.preventDefault();
};

function HeaderToolbar() {
const inserterButton = useRef();
const { setIsInserterOpened, setIsListViewOpened } =
useDispatch( editPostStore );
function HeaderToolbar(
{ BlockToolbarToggle, hasSelectedBlocks },
inserterButtonRef
) {
const { setIsListViewOpened } = useDispatch( editPostStore );
const {
isInserterEnabled,
isInserterOpened,
isTextModeEnabled,
showIconLabels,
isListViewOpen,
listViewShortcut,
} = useSelect( ( select ) => {
const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
select( blockEditorStore );
const { getEditorSettings } = select( editorStore );
const { getEditorMode, isFeatureActive, isListViewOpened } =
select( editPostStore );
const { getShortcutRepresentation } = select( keyboardShortcutsStore );

return {
// This setting (richEditingEnabled) should not live in the block editor's setting.
isInserterEnabled:
getEditorMode() === 'visual' &&
getEditorSettings().richEditingEnabled &&
hasInserterItems(
getBlockRootClientId( getBlockSelectionEnd() )
),
isInserterOpened: select( editPostStore ).isInserterOpened(),
isTextModeEnabled: getEditorMode() === 'text',
showIconLabels: isFeatureActive( 'showIconLabels' ),
isListViewOpen: isListViewOpened(),
Expand Down Expand Up @@ -91,44 +68,14 @@ function HeaderToolbar() {
/>
</>
);
const toggleInserter = useCallback( () => {
if ( isInserterOpened ) {
// Focusing the inserter button should close the inserter popover.
// However, there are some cases it won't close when the focus is lost.
// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
inserterButton.current.focus();
setIsInserterOpened( false );
} else {
setIsInserterOpened( true );
}
}, [ isInserterOpened, setIsInserterOpened ] );

/* translators: button label text should, if possible, be under 16 characters. */
const longLabel = _x(
'Toggle block inserter',
'Generic label for block inserter button'
);
const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );

return (
<NavigableToolbar
className="edit-post-header-toolbar"
className="edit-post-header-document-toolbar"
aria-label={ toolbarAriaLabel }
>
<div className="edit-post-header-toolbar__left">
<ToolbarItem
ref={ inserterButton }
as={ Button }
className="edit-post-header-toolbar__inserter-toggle"
variant="primary"
isPressed={ isInserterOpened }
onMouseDown={ preventDefault }
onClick={ toggleInserter }
disabled={ ! isInserterEnabled }
icon={ plus }
label={ showIconLabels ? shortLabel : longLabel }
showTooltip={ ! showIconLabels }
/>
<div className="edit-post-header-document-toolbar__left">
<InserterButton ref={ inserterButtonRef } />
{ ( isWideViewport || ! showIconLabels ) && (
<>
{ isLargeViewport && (
Expand All @@ -152,11 +99,12 @@ function HeaderToolbar() {
variant={ showIconLabels ? 'tertiary' : undefined }
/>
{ overflowItems }
{ hasSelectedBlocks && <BlockToolbarToggle /> }
</>
) }
</div>
</NavigableToolbar>
);
}

export default HeaderToolbar;
export default forwardRef( HeaderToolbar );
Loading