From a3c50d60998db8e1eaba1019e217524c23767d57 Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 24 Sep 2020 15:03:29 -0300 Subject: [PATCH] Fix keyboard navigation on the Image block toolbar (#25127) * Fix keyboard navigation on the Image block toolbar * Add toggleProps prop to AspectMenu component * Use ToolbarItem on TemplateParts * Revert "Use ToolbarItem on TemplateParts" This reverts commit dfde4c750251e1ff6fe9fda66212d1589a96970c. * Ignore warnings on TemplateParts block * Fix styles * Use ToolbarGroup on TemplateParts * Remove unnecessary styles --- .../src/components/navigable-toolbar/index.js | 14 +------------- packages/block-library/src/image/image-editor.js | 9 ++++++++- .../block-library/src/template-part/edit/index.js | 6 +++--- .../block-library/src/template-part/editor.scss | 5 ----- packages/components/src/toolbar-group/style.scss | 7 ++++++- .../specs/experiments/multi-entity-saving.test.js | 5 +++++ .../specs/experiments/template-part.test.js | 10 ++++++++++ 7 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js index 931932b7ab6da7..5b3fad6e09138e 100644 --- a/packages/block-editor/src/components/navigable-toolbar/index.js +++ b/packages/block-editor/src/components/navigable-toolbar/index.js @@ -13,16 +13,6 @@ import deprecated from '@wordpress/deprecated'; import { focus } from '@wordpress/dom'; import { useShortcut } from '@wordpress/keyboard-shortcuts'; -function useUpdateLayoutEffect( effect, deps ) { - const mounted = useRef( false ); - useLayoutEffect( () => { - if ( mounted.current ) { - return effect(); - } - mounted.current = true; - }, deps ); -} - function hasOnlyToolbarItem( elements ) { const dataProp = 'toolbarItem'; return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) ); @@ -71,9 +61,7 @@ function useIsAccessibleToolbar( ref ) { setIsAccessibleToolbar( onlyToolbarItem ); }, [] ); - useLayoutEffect( determineIsAccessibleToolbar, [] ); - - useUpdateLayoutEffect( () => { + useLayoutEffect( () => { // Toolbar buttons may be rendered asynchronously, so we use // MutationObserver to check if the toolbar subtree has been modified const observer = new window.MutationObserver( diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js index 194ed83ad53f99..a3401132390fb3 100644 --- a/packages/block-library/src/image/image-editor.js +++ b/packages/block-library/src/image/image-editor.js @@ -60,12 +60,19 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { ); } -function AspectMenu( { isDisabled, onClick, value, defaultValue } ) { +function AspectMenu( { + toggleProps, + isDisabled, + onClick, + value, + defaultValue, +} ) { return ( { ( { onClose } ) => ( diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index c6936a83c5e56e..649c82539d9f93 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -7,7 +7,7 @@ import { BlockControls, __experimentalBlock as Block, } from '@wordpress/block-editor'; -import { Dropdown, ToolbarButton } from '@wordpress/components'; +import { Dropdown, ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { chevronUp, chevronDown } from '@wordpress/icons'; @@ -71,7 +71,7 @@ export default function TemplatePartEdit( { return ( -
+ ) } /> -
+ { await page.keyboard.type( 'some words...' ); await assertMultiSaveEnabled(); + + // TODO: Remove when toolbar supports text fields + expect( console ).toHaveWarnedWith( + 'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols' + ); } ); it( 'Should only have save panel a11y button active after child entities edited', async () => { diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 835ea93a0a7c06..f18f13e3e87249 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -116,6 +116,11 @@ describe( 'Template Part', () => { await page.keyboard.type( testContent ); await page.click( savePostSelector ); await page.click( entitiesSaveSelector ); + + // TODO: Remove when toolbar supports text fields + expect( console ).toHaveWarnedWith( + 'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols' + ); } ); it( 'Should preview newly added template part', async () => { @@ -138,6 +143,11 @@ describe( 'Template Part', () => { testContentSelector ); expect( templatePartContent ).toBeTruthy(); + + // TODO: Remove when toolbar supports text fields + expect( console ).toHaveWarnedWith( + 'Using custom components as toolbar controls is deprecated. Please use ToolbarItem or ToolbarButton components instead. See: https://developer.wordpress.org/block-editor/components/toolbar-button/#inside-blockcontrols' + ); } ); } ); } );