Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Set editor mode on initialization to prevent initial text editor focus (#35701) 

* Set editor mode on initialization to prevent initial text editor focus

* Add changelog entry

* Check for editor set method to prevent breaks in tests with older versions of block store

* Update argument name for initialization
This commit is contained in:
Joshua T Flowers 2022-11-30 12:28:37 -08:00 committed by GitHub
parent e0450ebd1a
commit a6970f319c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-35697 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Set editor mode on initialization to prevent initial text editor focus

39
packages/js/components/src/rich-text-editor/editor-writing-flow.tsx
View File

@ -31,21 +31,38 @@ export const EditorWritingFlow = ( {
const isEmpty = ! blocks.length;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore This action is available in the block editor data store.
const { insertBlock, selectBlock } = useDispatch( blockEditorStore );
const { selectedBlockClientIds } = useSelect( ( select ) => {
const { insertBlock, selectBlock, __unstableSetEditorMode } =
useDispatch( blockEditorStore );
const { selectedBlockClientIds, editorMode } = useSelect( ( select ) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore This selector is available in the block editor data store.
const { getSelectedBlockClientIds } = select( blockEditorStore );
const { getSelectedBlockClientIds, __unstableGetEditorMode } =
select( blockEditorStore );
return {
editorMode: __unstableGetEditorMode(),
selectedBlockClientIds: getSelectedBlockClientIds(),
};
} );
// This is a workaround to prevent focusing the block on intialization.
// Changing to a mode other than "edit" ensures that no initial position
// is found and no element gets subsequently focused.
// See https://github.com/WordPress/gutenberg/blob/411b6eee8376e31bf9db4c15c92a80524ae38e9b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js#L42
const setEditorIsInitializing = ( isInitializing: boolean ) => {
if ( typeof __unstableSetEditorMode !== 'function' ) {
return;
}
__unstableSetEditorMode( isInitializing ? 'initialized' : 'edit' );
};
useEffect( () => {
if ( selectedBlockClientIds?.length || ! firstBlock ) {
return;
}
setEditorIsInitializing( true );
selectBlock( firstBlock.clientId );
}, [ firstBlock, selectedBlockClientIds ] );
@ -60,6 +77,13 @@ export const EditorWritingFlow = ( {
}
}, [ isEmpty ] );
const maybeSetEditMode = () => {
if ( editorMode === 'edit' ) {
return;
}
setEditorIsInitializing( false );
};
return (
/* Gutenberg handles the keyboard events when focusing the content editable area. */
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
@ -71,7 +95,12 @@ export const EditorWritingFlow = ( {
} }
>
<BlockTools>
<WritingFlow>
<WritingFlow
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore These are forwarded as props to the WritingFlow component.
onClick={ maybeSetEditMode }
onFocus={ maybeSetEditMode }
>
<ObserveTyping>
<BlockList />
</ObserveTyping>