From 0d1f0a1c6f07e2fb0bec29f45fdd9224c377d22e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 10 Apr 2024 17:33:26 +0800 Subject: [PATCH] Address code reviews --- packages/components/CHANGELOG.md | 2 ++ packages/components/src/form-toggle/index.tsx | 12 +++++++-- .../src/form-toggle/stories/index.story.tsx | 2 +- .../components/src/toggle-control/index.tsx | 27 +++++++++++-------- packages/patterns/src/api/index.js | 1 + .../components/pattern-overrides-controls.js | 16 +++++------ .../editor/various/pattern-overrides.spec.js | 4 +-- 7 files changed, 40 insertions(+), 24 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 84cd741f5eb749..7b0e52188178c2 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,6 +7,8 @@ - `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)). - `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)). - `Text`: Add `text-wrap: pretty;` to improve wrapping. ([#60164](https://github.com/WordPress/gutenberg/pull/60164)). +- `FormToggle`: Allows ref forwarding. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). +- `ToggleControl`: Allows ref forwarding. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)). ## 27.3.0 (2024-04-03) diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx index 19cb828023ad89..372f646b846a6b 100644 --- a/packages/components/src/form-toggle/index.tsx +++ b/packages/components/src/form-toggle/index.tsx @@ -2,6 +2,12 @@ * External dependencies */ import classnames from 'classnames'; +import type { ForwardedRef } from 'react'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; /** * Internal dependencies @@ -31,7 +37,8 @@ export const noop = () => {}; * ``` */ export function FormToggle( - props: WordPressComponentProps< FormToggleProps, 'input', false > + props: WordPressComponentProps< FormToggleProps, 'input', false >, + ref: ForwardedRef< HTMLInputElement > ) { const { className, @@ -56,6 +63,7 @@ export function FormToggle( onChange={ onChange } disabled={ disabled } { ...additionalProps } + ref={ ref } /> @@ -63,4 +71,4 @@ export function FormToggle( ); } -export default FormToggle; +export default forwardRef( FormToggle ); diff --git a/packages/components/src/form-toggle/stories/index.story.tsx b/packages/components/src/form-toggle/stories/index.story.tsx index 0958b94c342c4a..d987860955bdf9 100644 --- a/packages/components/src/form-toggle/stories/index.story.tsx +++ b/packages/components/src/form-toggle/stories/index.story.tsx @@ -11,7 +11,7 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { FormToggle } from '..'; +import FormToggle from '..'; const meta: Meta< typeof FormToggle > = { component: FormToggle, diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx index c991953d53e4bf..ed62aea7755cd9 100644 --- a/packages/components/src/toggle-control/index.tsx +++ b/packages/components/src/toggle-control/index.tsx @@ -1,12 +1,13 @@ /** * External dependencies */ -import type { ChangeEvent } from 'react'; +import type { ChangeEvent, ForwardedRef } from 'react'; import { css } from '@emotion/react'; /** * WordPress dependencies */ +import { forwardRef } from '@wordpress/element'; import { useInstanceId } from '@wordpress/compose'; /** @@ -41,15 +42,18 @@ import { space } from '../utils/space'; * }; * ``` */ -export function ToggleControl( { - __nextHasNoMarginBottom, - label, - checked, - help, - className, - onChange, - disabled, -}: WordPressComponentProps< ToggleControlProps, 'input', false > ) { +export function ToggleControl( + { + __nextHasNoMarginBottom, + label, + checked, + help, + className, + onChange, + disabled, + }: WordPressComponentProps< ToggleControlProps, 'input', false >, + ref: ForwardedRef< HTMLInputElement > +) { function onChangeToggle( event: ChangeEvent< HTMLInputElement > ) { onChange( event.target.checked ); } @@ -94,6 +98,7 @@ export function ToggleControl( { onChange={ onChangeToggle } aria-describedby={ describedBy } disabled={ disabled } + ref={ ref } /> binding.source === 'core/pattern-overrides' diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js index ff3c4aa5f84ee4..c55bcb8b2d7f80 100644 --- a/packages/patterns/src/components/pattern-overrides-controls.js +++ b/packages/patterns/src/components/pattern-overrides-controls.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useId } from '@wordpress/element'; +import { useState, useId, useRef, flushSync } from '@wordpress/element'; import { InspectorControls } from '@wordpress/block-editor'; import { ToggleControl, BaseControl, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -47,6 +47,7 @@ function addBindings( bindings, syncedAttributes ) { function PatternOverridesControls( { attributes, name, setAttributes } ) { const controlId = useId(); + const toggleRef = useRef(); const [ showAllowOverridesModal, setShowAllowOverridesModal ] = useState( false ); @@ -60,11 +61,6 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) { ); function updateBindings( isChecked, customName ) { - if ( isChecked && ! attributes.metadata?.name && ! customName ) { - setShowAllowOverridesModal( true ); - return; - } - const prevBindings = attributes?.metadata?.bindings; const updatedBindings = isChecked ? addBindings( prevBindings, syncedAttributes ) @@ -110,12 +106,13 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) { onChange={ ( isChecked ) => { updateBindings( isChecked ); } } + ref={ toggleRef } /> ) : ( @@ -127,7 +124,10 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) { setShowAllowOverridesModal( false ) } onSave={ ( newName ) => { - updateBindings( true, newName ); + flushSync( () => { + updateBindings( true, newName ); + } ); + toggleRef.current?.focus(); } } /> ) } diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 3aa5f8e5e766af..e5a07e79f6c2fc 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -223,10 +223,10 @@ test.describe( 'Pattern Overrides', () => { requestUtils, editor, } ) => { - const paragraphId = 'paragraph-id'; + const paragraphName = 'paragraph-name'; const { id } = await requestUtils.createBlock( { title: 'Pattern', - content: ` + content: `

Editable

`, status: 'publish',