diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index 47113c84d78dac..b9acda48eab7fb 100644
--- a/docs/getting-started/devenv/README.md
+++ b/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.
 
diff --git a/docs/getting-started/devenv/nodejs-development-environment.md b/docs/getting-started/devenv/nodejs-development-environment.md
index 6e1d3638f5f03c..8eb72bd88268da 100644
--- a/docs/getting-started/devenv/nodejs-development-environment.md
+++ b/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.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index acf1ae3dd165ae..4152b3c654bab7 100644
--- a/packages/components/CHANGELOG.md
+++ b/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
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 990d8144ff33c8..bac30669f1851c 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/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"
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 99a2dd8a00421c..a8835bc66c58d4 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/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', () => {
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/utils.ts b/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
index 3f6d6e135a0df3..fe2b84c5b81231 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
+++ b/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 ] );
diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts
index 7b1f171230c59e..6f9229be866a03 100644
--- a/test/performance/config/performance-reporter.ts
+++ b/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 ),
diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts
index d17eec2c935b1b..83213a59520dd5 100644
--- a/test/performance/fixtures/perf-utils.ts
+++ b/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'
 		);
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index cf2610baa1f9e7..105a4bd9a80ca0 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -29,6 +29,7 @@ const results = {
 	inserterOpen: [],
 	inserterHover: [],
 	inserterSearch: [],
+	loadPatterns: [],
 };
 
 test.describe( 'Post Editor Performance', () => {
@@ -484,6 +485,178 @@ test.describe( 'Post Editor Performance', () => {
 			}
 		} );
 	} );
+
+	test.describe( 'Loading Patterns', () => {
+		test( 'Run the test', async ( { page, admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page.getByRole( 'button', {
+				name: 'Toggle block inserter',
+			} );
+
+			const testPatterns = [
+				{
+					name: 'core/query-standard-posts',
+					title: 'Standard',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:separator -->\n\t\t\t\t\t<hr class="wp-block-separator"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-medium-posts',
+					title: 'Image at left',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"33.33%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-small-posts',
+					title: 'Small image and title',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center"} -->\n\t\t\t\t\t<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-grid-posts',
+					title: 'Grid',
+					content:
+						'<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:post-date /--></div>\n\t\t\t\t\t<!-- /wp:group -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-large-title-posts',
+					title: 'Large title',
+					content:
+						'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-offset-posts',
+					title: 'Offset',
+					content:
+						'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/social-links-shared-background-color',
+					title: 'Social links with a shared background color',
+					content:
+						'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
+					viewportWidth: 500,
+					categories: [ 'test' ],
+					blockTypes: [ 'core/social-links' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-large-title-posts-2',
+					title: 'Large title 2',
+					content:
+						'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-offset-posts-2',
+					title: 'Offset 2',
+					content:
+						'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/social-links-shared-background-color-2',
+					title: 'Social links with a shared background color 2',
+					content:
+						'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
+					viewportWidth: 500,
+					categories: [ 'test' ],
+					blockTypes: [ 'core/social-links' ],
+					source: 'core',
+				},
+			];
+
+			await page.evaluate( ( _testPatterns ) => {
+				const settings = window.wp.data
+					.select( 'core/editor' )
+					.getEditorSettings();
+				window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+					...settings,
+					__experimentalAdditionalBlockPatternCategories: [
+						...settings.__experimentalAdditionalBlockPatternCategories,
+						{ name: 'test', label: 'Test' },
+					],
+					__experimentalAdditionalBlockPatterns: [
+						...settings.__experimentalAdditionalBlockPatterns,
+						..._testPatterns,
+					],
+				} );
+			}, testPatterns );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'true'
+				);
+				await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+
+				const startTime = performance.now();
+
+				await page.getByRole( 'button', { name: 'Test' } ).click();
+
+				await Promise.all(
+					testPatterns.map( async ( pattern ) => {
+						const canvas = await perfUtils.getCanvas(
+							page
+								.getByRole( 'option', {
+									name: pattern.title,
+									exact: true,
+								} )
+								.getByTitle( 'Editor canvas' )
+						);
+
+						// Wait for the first block.
+						await canvas.locator( '.wp-block' ).first().waitFor();
+					} )
+				);
+
+				const endTime = performance.now();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.loadPatterns.push( endTime - startTime );
+				}
+
+				// Close Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'false'
+				);
+			}
+		} );
+	} );
 } );
 
 /* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */