Skip to content

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

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

Merged
ciampo 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 1 commit
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
Prev Previous commit
Next Next commit
BlockLockModal: restore focus to first focusable item when unlocking … 
…block from toolbar button
  • Loading branch information
@ciampo
ciampo committed Jun 26, 2023
commit af51379fbed18551d8896b01550048afb59d4708
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/block-lock/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function getTemplateLockValue( lock ) {
return false;
}

export default function BlockLockModal( { clientId, onClose } ) {
export default function BlockLockModal( { clientId, onClose, onFocusReturn } ) {
const [ lock, setLock ] = useState( { move: false, remove: false } );
const { canEdit, canMove, canRemove } = useBlockLock( clientId );
const { allowsEditLocking, templateLock, hasTemplateLock } = useSelect(
Expand Down Expand Up @@ -89,6 +89,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
) }
overlayClassName="block-editor-block-lock-modal"
onRequestClose={ onClose }
onFocusReturn={ onFocusReturn }
>
<p>
{ __(
Expand Down
35 changes: 32 additions & 3 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 } from '@wordpress/element';
import { lock } from '@wordpress/icons';

/**
Expand All @@ -12,14 +13,16 @@ 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
);

const lockButtonRef = useRef( null );

if ( ! canLock ) {
return null;
}
Expand All @@ -35,10 +38,36 @@ export default function BlockLockToolbar( { clientId } ) {
icon={ lock }
label={ __( 'Unlock' ) }
onClick={ toggleModal }
ref={ lockButtonRef }
/>
</ToolbarGroup>
{ isModalOpen && (
<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
<BlockLockModal
clientId={ clientId }
onClose={ toggleModal }
onFocusReturn={ ( defaultFocusReturnElement ) => {
if ( defaultFocusReturnElement ) {
defaultFocusReturnElement.focus();
}

if (
defaultFocusReturnElement.ownerDocument
.activeElement !== defaultFocusReturnElement &&
wrapperRef.current
) {
focus.focusable
.find( wrapperRef.current, {
sequential: false,
} )
.find(
( element ) =>
element.tagName === 'BUTTON' &&
element !== lockButtonRef.current
)
?.focus();
}
} }
/>
) }
</>
);
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