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

Jump to bottom

BlockLockModal: restore focus on fallback toolbar button when original button is not rendered #51666

Merged
merged 6 commits into from
Jun 26, 2023
Merged

BlockLockModal: restore focus on fallback toolbar button when original button is not rendered #51666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
35b0ba0
useFocusReturn: pass focus restoration default target to the onFocusR…
ciampo Jun 19, 2023
ac099f4
Modal: pass onFocusReturn callback
ciampo Jun 19, 2023
af51379
BlockLockModal: restore focus to first focusable item when unlocking …
ciampo Jun 19, 2023
22acfe2
Add comments
ciampo Jun 20, 2023
cff16b3
Revert changes to `useFocusReturn` and `Modal` component, just add lo…
ciampo Jun 26, 2023
24e0904
Comment
ciampo Jun 26, 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
40 changes: 34 additions & 6 deletions packages/block-editor/src/components/block-lock/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
*/
import { __ } from '@wordpress/i18n';
import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { useReducer } from '@wordpress/element';
import { focus } from '@wordpress/dom';
import { useReducer, useRef, useEffect } from '@wordpress/element';
import { lock } from '@wordpress/icons';

/**
Expand All @@ -12,19 +13,45 @@ import { lock } from '@wordpress/icons';
import BlockLockModal from './modal';
import useBlockLock from './use-block-lock';

export default function BlockLockToolbar( { clientId } ) {
export default function BlockLockToolbar( { clientId, wrapperRef } ) {
const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );

const [ isModalOpen, toggleModal ] = useReducer(
( isActive ) => ! isActive,
false
);

if ( ! canLock ) {
return null;
}
const lockButtonRef = useRef( null );
const isFirstRender = useRef( true );

const shouldHideBlockLockUI =
! canLock || ( canEdit && canMove && canRemove );

// Restore focus manually on the first focusable element in the toolbar
// when the block lock modal is closed and the block is not locked anymore.
// See https://github.com/WordPress/gutenberg/issues/51447
useEffect( () => {
if ( isFirstRender.current ) {
isFirstRender.current = false;
return;
}

if ( ! isModalOpen && shouldHideBlockLockUI ) {
focus.focusable
.find( wrapperRef.current, {
sequential: false,
} )
.find(
( element ) =>
element.tagName === 'BUTTON' &&
element !== lockButtonRef.current
)
?.focus();
}
// wrapperRef is a reference object and should be stable
}, [ isModalOpen, shouldHideBlockLockUI, wrapperRef ] );

if ( canEdit && canMove && canRemove ) {
if ( shouldHideBlockLockUI ) {
return null;
}

Expand All @@ -35,6 +62,7 @@ export default function BlockLockToolbar( { clientId } ) {
icon={ lock }
label={ __( 'Unlock' ) }
onClick={ toggleModal }
ref={ lockButtonRef }
/>
</ToolbarGroup>
{ isModalOpen && (
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -78,6 +78,8 @@ const BlockToolbar = ( { hideDragHandle } ) => {
};
}, [] );

const toolbarWrapperRef = useRef( null );

// Handles highlighting the current block outline on hover or focus of the
// block type toolbar area.
const { toggleBlockHighlight } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -123,7 +125,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
} );

return (
<div className={ classes }>
<div className={ classes } ref={ toolbarWrapperRef }>
{ ! isMultiToolbar &&
isLargeViewport &&
blockEditingMode === 'default' && <BlockParentSelector /> }
Expand All @@ -135,6 +137,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
{ ! isMultiToolbar && (
<BlockLockToolbar
clientId={ blockClientIds[ 0 ] }
wrapperRef={ toolbarWrapperRef }
/>
) }
<BlockMover
Expand Down