Address code reviews

Author: kevin940726

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)
 

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,11 +63,12 @@ export function FormToggle(
 				onChange={ onChange }
 				disabled={ disabled }
 				{ ...additionalProps }
+				ref={ ref }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
 		</span>
 	);
 }
 
-export default FormToggle;
+export default forwardRef( FormToggle );

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,

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 }
 				/>
 				<FlexBlock
 					as="label"
@@ -107,4 +112,4 @@ export function ToggleControl( {
 	);
 }
 
-export default ToggleControl;
+export default forwardRef( ToggleControl );

packages/patterns/src/api/index.js

@@ -15,6 +15,7 @@ export function isOverridableBlock( block ) {
 		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
 			block.name
 		) &&
+		!! block.attributes.metadata?.name &&
 		!! block.attributes.metadata?.bindings &&
 		Object.values( block.attributes.metadata.bindings ).some(
 			( binding ) => binding.source === 'core/pattern-overrides'

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 }
 						/>
 					) : (
 						<Button
 							className="pattern-overrides-control__allow-overrides-button"
 							variant="secondary"
-							onClick={ () => updateBindings( true ) }
+							onClick={ () => setShowAllowOverridesModal( true ) }
 						>
 							{ __( 'Allow overrides' ) }
 						</Button>
@@ -127,7 +124,10 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 				<AllowOverridesModal
 					onClose={ () => setShowAllowOverridesModal( false ) }
 					onSave={ ( newName ) => {
-						updateBindings( true, newName );
+						flushSync( () => {
+							updateBindings( true, newName );
+						} );
+						toggleRef.current?.focus();
 					} }
 				/>
 			) }

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: `<!-- wp:paragraph {"metadata":{"id":"${ paragraphId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
 <p>Editable</p>
 <!-- /wp:paragraph -->`,
 			status: 'publish',