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 dfde4c7. * Ignore warnings on TemplateParts block * Fix styles * Use ToolbarGroup on TemplateParts * Remove unnecessary styles
WordPress · Sep 24, 2020 · a3c50d6 · a3c50d6
1 parent f5c32f8
commit a3c50d6
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 23 deletions.
diff --git 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
@@ -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 (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
+			toggleProps={ toggleProps }
 			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (

diff --git 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 (
 			<BlockWrapper>
 				<BlockControls>
-					<div className="wp-block-template-part__block-control-group">
+					<ToolbarGroup className="wp-block-template-part__block-control-group">
 						<TemplatePartNamePanel
 							postId={ postId }
 							setAttributes={ setAttributes }
@@ -98,7 +98,7 @@ export default function TemplatePartEdit( {
 								/>
 							) }
 						/>
-					</div>
+					</ToolbarGroup>
 				</BlockControls>
 				<TemplatePartInnerBlocks
 					postId={ postId }

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -64,7 +64,6 @@
 	display: flex;
 
 	.wp-block-template-part__name-panel {
-		background-color: $white;
 		outline: 1px solid transparent;
 		padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
 
@@ -79,10 +78,6 @@
 			margin-right: 8px;
 		}
 	}
-
-	.wp-block-template-part__preview-dropdown-button {
-		border-right: $border-width solid $gray-900;
-	}
 }
 
 .is-navigate-mode .is-selected .wp-block-template-part__name-panel {

diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
@@ -21,11 +21,16 @@
 	min-height: $block-toolbar-height;
 	margin: 0;
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
 	background-color: $white;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
+
+	// Unset for nested toolbars. Increase specificity.
+	& .components-toolbar.components-toolbar {
+		border-width: 0;
+		margin: 0;
+	}
 }
 
 div.components-toolbar {

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -125,6 +125,11 @@ describe( 'Multi-entity save flow', () => {
 				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
@@ -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'
+			);
 		} );
 	} );
 } );