prep build 01/14

docs/getting-started/devenv/README.md

@@ -30,7 +30,7 @@ Node.js and its accompanying development tools allow you to:
 
 The list goes on. While modern JavaScript development can be challenging, WordPress provides several tools, like [`wp-scripts`](/docs/getting-started/devenv/get-started-with-wp-scripts.md) and [`create-block`](/docs/getting-started/devenv/get-started-with-create-block.md), that streamline the process and are made possible by Node.js development tools.
 
-**The recommended Node.js version for block development is [Active LTS](https://nodejs.dev/en/about/releases/) (Long Term Support)**. However, there are times when you need to use different versions. A Node.js version manager tool like `nvm` is strongly recommended and allows you to easily change your `node` version when required. You will also need Node Package Manager (`npm`) and the Node Package eXecute (`npx`) to work with some WordPress packages. Both are installed automatically with Node.js.
+**The recommended Node.js version for block development is [Active LTS](https://nodejs.org/en/about/previous-releases) (Long Term Support)**. However, there are times when you need to use different versions. A Node.js version manager tool like `nvm` is strongly recommended and allows you to easily change your `node` version when required. You will also need Node Package Manager (`npm`) and the Node Package eXecute (`npx`) to work with some WordPress packages. Both are installed automatically with Node.js.
 
 To be able to use the Node.js tools and [packages provided by WordPress](https://github.com/WordPress/gutenberg/tree/trunk/packages) for block development, you'll need to set a proper Node.js runtime environment on your machine. To learn more about how to do this, refer to the links below.
 

docs/getting-started/devenv/nodejs-development-environment.md

@@ -22,7 +22,7 @@ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
 ```
 
 2. Quit and restart the terminal.
-3. Run `nvm install --lts` in the terminal to install the latest [LTS](https://nodejs.dev/en/about/releases/) (Long Term Support) version of Node.js.
+3. Run `nvm install --lts` in the terminal to install the latest [LTS](https://nodejs.org/en/about/previous-releases) (Long Term Support) version of Node.js.
 4. Run `node -v` and `npm -v` in the terminal to verify the installed `node` and `npm` versions.
 
 If needed, you can also install specific versions of `node`. For example, install version 18 by running `nvm install 18`, and switch between different versions by running `nvm use [version-number]`. See the `nvm` [usage guide](https://github.com/nvm-sh/nvm#usage) for more details.

packages/components/CHANGELOG.md

@@ -19,6 +19,7 @@
 -   `DuotonePicker`: Remove top margin when no duotone options ([#57489](https://github.com/WordPress/gutenberg/pull/57489)).
 -   `Snackbar`: Fix icon positioning ([#57377](https://github.com/WordPress/gutenberg/pull/57377)).
 -   `GradientPicker`: Use slug while iterating over gradient entries to avoid React "duplicated key" warning ([#57361](https://github.com/WordPress/gutenberg/pull/57361)).
+-   `ToggleGroupControl`: Improve controlled value detection ([#57770](https://github.com/WordPress/gutenberg/pull/57770)).
 -   `NavigatorProvider`: Exclude `size` value from `contain` CSS rule ([#57498](https://github.com/WordPress/gutenberg/pull/57498)).
 
 ### Enhancements

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -240,7 +240,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-8"
+        id="toggle-group-control-as-radio-group-10"
         role="radiogroup"
       >
         <div
@@ -254,7 +254,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-8-20"
+            id="toggle-group-control-as-radio-group-10-24"
             role="radio"
             type="button"
             value="uppercase"
@@ -292,7 +292,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-8-21"
+            id="toggle-group-control-as-radio-group-10-25"
             role="radio"
             type="button"
             value="lowercase"
@@ -488,7 +488,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-7"
+        id="toggle-group-control-as-radio-group-9"
         role="radiogroup"
       >
         <div
@@ -501,7 +501,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-7-18"
+            id="toggle-group-control-as-radio-group-9-22"
             role="radio"
             type="button"
             value="rigas"
@@ -523,7 +523,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-7-19"
+            id="toggle-group-control-as-radio-group-9-23"
             role="radio"
             type="button"
             value="jack"

packages/components/src/toggle-group-control/test/index.tsx

@@ -117,6 +117,22 @@ describe.each( [
 			expect( container ).toMatchSnapshot();
 		} );
 	} );
+	it( 'should render with the correct option initially selected when `value` is defined', () => {
+		render(
+			<Component value="jack" label="Test Toggle Group Control">
+				{ options }
+			</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+	} );
+	it( 'should render without a selected option when `value` is `undefined`', () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).not.toBeChecked();
+	} );
 	it( 'should call onChange with proper value', async () => {
 		const mockOnChange = jest.fn();
 
@@ -193,7 +209,7 @@ describe.each( [
 	} );
 
 	if ( mode === 'controlled' ) {
-		it( 'should reset values correctly', async () => {
+		it( 'should reset values correctly when default value is undefined', async () => {
 			render(
 				<Component label="Test Toggle Group Control">
 					{ options }
@@ -208,56 +224,77 @@ describe.each( [
 			expect( jackOption ).not.toBeChecked();
 			expect( rigasOption ).toBeChecked();
 
-			await press.ArrowRight();
-
-			expect( rigasOption ).not.toBeChecked();
-			expect( jackOption ).toBeChecked();
-
 			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( rigasOption ).not.toBeChecked();
 			expect( jackOption ).not.toBeChecked();
 		} );
 
-		it( 'should update correctly when triggered by external updates', async () => {
+		it( 'should reset values correctly when default value is defined', async () => {
 			render(
-				<Component
-					value="rigas"
-					label="Test Toggle Group Control"
-					extraButtonOptions={ [
-						{ name: 'Rigas', value: 'rigas' },
-						{ name: 'Jack', value: 'jack' },
-					] }
-				>
+				<Component label="Test Toggle Group Control" value="rigas">
 					{ options }
 				</Component>
 			);
 
-			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
-
-			await click( screen.getByRole( 'button', { name: 'Jack' } ) );
-			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'R' } )
-			).not.toBeChecked();
+			const rigasOption = screen.getByRole( 'radio', {
+				name: 'R',
+			} );
+			const jackOption = screen.getByRole( 'radio', {
+				name: 'J',
+			} );
 
-			await click( screen.getByRole( 'button', { name: 'Rigas' } ) );
-			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
+			expect( rigasOption ).toBeChecked();
+			expect( jackOption ).not.toBeChecked();
 
 			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
-			expect(
-				screen.getByRole( 'radio', { name: 'R' } )
-			).not.toBeChecked();
-			expect(
-				screen.getByRole( 'radio', { name: 'J' } )
-			).not.toBeChecked();
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).not.toBeChecked();
 		} );
+
+		describe.each( [
+			[ 'undefined', undefined ],
+			[ 'defined', 'rigas' ],
+		] )(
+			'should update correctly when triggered by external updates',
+			( defaultValueType, defaultValue ) => {
+				it( `when default value is ${ defaultValueType }`, async () => {
+					render(
+						<Component
+							value={ defaultValue }
+							label="Test Toggle Group Control"
+							extraButtonOptions={ [
+								{ name: 'Rigas', value: 'rigas' },
+								{ name: 'Jack', value: 'jack' },
+							] }
+						>
+							{ options }
+						</Component>
+					);
+
+					await click(
+						screen.getByRole( 'button', { name: 'Jack' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).not.toBeChecked();
+
+					await click(
+						screen.getByRole( 'button', { name: 'Rigas' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).not.toBeChecked();
+				} );
+			}
+		);
 	}
 
 	describe( 'isDeselectable', () => {

packages/components/src/toggle-group-control/toggle-group-control/utils.ts

@@ -21,16 +21,21 @@ type ValueProp = ToggleGroupControlProps[ 'value' ];
 export function useComputeControlledOrUncontrolledValue(
 	valueProp: ValueProp
 ): { value: ValueProp; defaultValue: ValueProp } {
+	const isInitialRender = useRef( true );
 	const prevValueProp = usePrevious( valueProp );
 	const prevIsControlled = useRef( false );
 
+	useEffect( () => {
+		if ( isInitialRender.current ) {
+			isInitialRender.current = false;
+		}
+	}, [] );
+
 	// Assume the component is being used in controlled mode on the first re-render
 	// that has a different `valueProp` from the previous render.
 	const isControlled =
 		prevIsControlled.current ||
-		( prevValueProp !== undefined &&
-			valueProp !== undefined &&
-			prevValueProp !== valueProp );
+		( ! isInitialRender.current && prevValueProp !== valueProp );
 	useEffect( () => {
 		prevIsControlled.current = isControlled;
 	}, [ isControlled ] );

test/performance/config/performance-reporter.ts

@@ -32,6 +32,7 @@ export interface WPRawPerformanceResults {
 	inserterOpen: number[];
 	inserterSearch: number[];
 	inserterHover: number[];
+	loadPatterns: number[];
 	listViewOpen: number[];
 	navigate: number[];
 }
@@ -65,6 +66,7 @@ export interface WPPerformanceResults {
 	inserterHover?: number;
 	minInserterHover?: number;
 	maxInserterHover?: number;
+	loadPatterns?: number;
 	listViewOpen?: number;
 	minListViewOpen?: number;
 	maxListViewOpen?: number;
@@ -110,6 +112,7 @@ export function curateResults(
 		inserterHover: average( results.inserterHover ),
 		minInserterHover: minimum( results.inserterHover ),
 		maxInserterHover: maximum( results.inserterHover ),
+		loadPatterns: average( results.loadPatterns ),
 		listViewOpen: average( results.listViewOpen ),
 		minListViewOpen: minimum( results.listViewOpen ),
 		maxListViewOpen: maximum( results.listViewOpen ),

test/performance/fixtures/perf-utils.ts

@@ -30,13 +30,14 @@ export class PerfUtils {
 	 * Returns the locator for the editor canvas element. This supports both the
 	 * legacy and the iframed canvas.
 	 *
+	 * @param canvasLocator
 	 * @return Locator for the editor canvas element.
 	 */
-	async getCanvas() {
-		const canvasLocator = this.page.locator(
+	async getCanvas(
+		canvasLocator = this.page.locator(
 			'.wp-block-post-content, iframe[name=editor-canvas]'
-		);
-
+		)
+	) {
 		const isFramed = await canvasLocator.evaluate(
 			( node ) => node.tagName === 'IFRAME'
 		);