From 35c46da7f00ab7aa070748833c4d9bea573ad495 Mon Sep 17 00:00:00 2001 From: Haz Date: Mon, 7 Sep 2020 20:35:43 -0300 Subject: [PATCH 1/8] Fix keyboard navigation on the Image block toolbar --- .../src/components/navigable-toolbar/index.js | 14 +------------- 1 file changed, 1 insertion(+), 13 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( From 191e2284c36c98dcbc5b38d727e916800af8947c Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 10 Sep 2020 11:11:19 -0300 Subject: [PATCH 2/8] Add toggleProps prop to AspectMenu component --- packages/block-library/src/image/image-editor.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js index ecd1329cfbf485..dfb20d0a0872f4 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 } ) => ( From dfde4c750251e1ff6fe9fda66212d1589a96970c Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 10 Sep 2020 12:01:00 -0300 Subject: [PATCH 3/8] Use ToolbarItem on TemplateParts --- .../src/template-part/edit/index.js | 4 ++- .../src/template-part/edit/name-panel.js | 14 ++++++++-- packages/components/src/text-control/index.js | 27 ++++++++++++------- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 64aaeaac2f9d1f..46c874ae3da4e4 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -3,6 +3,7 @@ */ import { useRef, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; +import { ToolbarItem } from '@wordpress/components'; import { BlockControls, __experimentalBlock as Block, @@ -67,7 +68,8 @@ export default function TemplatePartEdit( { return ( - diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js index e5a6eee52ebbca..ba7ba2966f9f37 100644 --- a/packages/block-library/src/template-part/edit/name-panel.js +++ b/packages/block-library/src/template-part/edit/name-panel.js @@ -1,12 +1,13 @@ /** * WordPress dependencies */ +import { forwardRef } from '@wordpress/element'; import { useEntityProp } from '@wordpress/core-data'; import { TextControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { cleanForSlug } from '@wordpress/url'; -export default function TemplatePartNamePanel( { postId, setAttributes } ) { +function TemplatePartNamePanel( { postId, setAttributes, ...props }, ref ) { const [ title, setTitle ] = useEntityProp( 'postType', 'wp_template_part', @@ -22,6 +23,8 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) { return (
{ @@ -30,8 +33,15 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) { setSlug( newSlug ); setAttributes( { slug: newSlug, postId } ); } } - onFocus={ ( event ) => event.target.select() } + onFocus={ ( event ) => { + if ( props.onFocus ) { + props.onFocus( event ); + } + event.target.select(); + } } />
); } + +export default forwardRef( TemplatePartNamePanel ); diff --git a/packages/components/src/text-control/index.js b/packages/components/src/text-control/index.js index a172eed483e50a..feae7a898387ac 100644 --- a/packages/components/src/text-control/index.js +++ b/packages/components/src/text-control/index.js @@ -2,22 +2,26 @@ * WordPress dependencies */ import { useInstanceId } from '@wordpress/compose'; +import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ import BaseControl from '../base-control'; -export default function TextControl( { - label, - hideLabelFromVision, - value, - help, - className, - onChange, - type = 'text', - ...props -} ) { +function TextControl( + { + label, + hideLabelFromVision, + value, + help, + className, + onChange, + type = 'text', + ...props + }, + ref +) { const instanceId = useInstanceId( TextControl ); const id = `inspector-text-control-${ instanceId }`; const onChangeValue = ( event ) => onChange( event.target.value ); @@ -37,8 +41,11 @@ export default function TextControl( { value={ value } onChange={ onChangeValue } aria-describedby={ !! help ? id + '__help' : undefined } + ref={ ref } { ...props } /> ); } + +export default forwardRef( TextControl ); From 734d3a98991ba7a93d743b701b5e90aaa688229b Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 10 Sep 2020 12:09:50 -0300 Subject: [PATCH 4/8] Revert "Use ToolbarItem on TemplateParts" This reverts commit dfde4c750251e1ff6fe9fda66212d1589a96970c. --- .../src/template-part/edit/index.js | 4 +-- .../src/template-part/edit/name-panel.js | 14 ++-------- packages/components/src/text-control/index.js | 27 +++++++------------ 3 files changed, 13 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 46c874ae3da4e4..64aaeaac2f9d1f 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -3,7 +3,6 @@ */ import { useRef, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { ToolbarItem } from '@wordpress/components'; import { BlockControls, __experimentalBlock as Block, @@ -68,8 +67,7 @@ export default function TemplatePartEdit( { return ( - diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js index ba7ba2966f9f37..e5a6eee52ebbca 100644 --- a/packages/block-library/src/template-part/edit/name-panel.js +++ b/packages/block-library/src/template-part/edit/name-panel.js @@ -1,13 +1,12 @@ /** * WordPress dependencies */ -import { forwardRef } from '@wordpress/element'; import { useEntityProp } from '@wordpress/core-data'; import { TextControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { cleanForSlug } from '@wordpress/url'; -function TemplatePartNamePanel( { postId, setAttributes, ...props }, ref ) { +export default function TemplatePartNamePanel( { postId, setAttributes } ) { const [ title, setTitle ] = useEntityProp( 'postType', 'wp_template_part', @@ -23,8 +22,6 @@ function TemplatePartNamePanel( { postId, setAttributes, ...props }, ref ) { return (
{ @@ -33,15 +30,8 @@ function TemplatePartNamePanel( { postId, setAttributes, ...props }, ref ) { setSlug( newSlug ); setAttributes( { slug: newSlug, postId } ); } } - onFocus={ ( event ) => { - if ( props.onFocus ) { - props.onFocus( event ); - } - event.target.select(); - } } + onFocus={ ( event ) => event.target.select() } />
); } - -export default forwardRef( TemplatePartNamePanel ); diff --git a/packages/components/src/text-control/index.js b/packages/components/src/text-control/index.js index feae7a898387ac..a172eed483e50a 100644 --- a/packages/components/src/text-control/index.js +++ b/packages/components/src/text-control/index.js @@ -2,26 +2,22 @@ * WordPress dependencies */ import { useInstanceId } from '@wordpress/compose'; -import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ import BaseControl from '../base-control'; -function TextControl( - { - label, - hideLabelFromVision, - value, - help, - className, - onChange, - type = 'text', - ...props - }, - ref -) { +export default function TextControl( { + label, + hideLabelFromVision, + value, + help, + className, + onChange, + type = 'text', + ...props +} ) { const instanceId = useInstanceId( TextControl ); const id = `inspector-text-control-${ instanceId }`; const onChangeValue = ( event ) => onChange( event.target.value ); @@ -41,11 +37,8 @@ function TextControl( value={ value } onChange={ onChangeValue } aria-describedby={ !! help ? id + '__help' : undefined } - ref={ ref } { ...props } /> ); } - -export default forwardRef( TextControl ); From cdafb0e22e7ae2172e83b1bfc0ef1aacd81fd83c Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 10 Sep 2020 12:22:36 -0300 Subject: [PATCH 5/8] Ignore warnings on TemplateParts block --- .../specs/experiments/multi-entity-saving.test.js | 5 +++++ .../e2e-tests/specs/experiments/template-part.test.js | 10 ++++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index 4acdae098a2264..bbdc071cdcb52a 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -124,6 +124,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 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' + ); } ); } ); } ); From 0daa4ba3b1ea71e0ccc110760798d73b591b5941 Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 17 Sep 2020 10:02:06 -0300 Subject: [PATCH 6/8] Fix styles --- packages/block-library/src/template-part/editor.scss | 4 ++++ packages/components/src/toolbar-group/style.scss | 7 ++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index d379c7f655a4f8..64f5fc9b4dfedd 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -80,6 +80,10 @@ } } + .components-toolbar__control.has-icon { + height: $block-toolbar-height; + } + .wp-block-template-part__preview-dropdown-button { border-right: $border-width solid $gray-900; } diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index 68602ba472629b..230155b4ca98cd 100644 --- 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 { From d261eb304fb9a34d32de4ee8bbbd0ce510c06c31 Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 17 Sep 2020 10:15:19 -0300 Subject: [PATCH 7/8] Use ToolbarGroup on TemplateParts --- packages/block-library/src/template-part/edit/index.js | 6 +++--- packages/block-library/src/template-part/editor.scss | 5 ----- 2 files changed, 3 insertions(+), 8 deletions(-) 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 ( -
+ ) } /> -
+ Date: Thu, 17 Sep 2020 10:33:54 -0300 Subject: [PATCH 8/8] Remove unnecessary styles --- packages/block-library/src/template-part/editor.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 80615d43140b28..d4852e34dba61d 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -78,10 +78,6 @@ margin-right: 8px; } } - - .components-toolbar__control.has-icon { - height: $block-toolbar-height; - } } .is-navigate-mode .is-selected .wp-block-template-part__name-panel {