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:
+ '\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-medium-posts',
+ title: 'Image at left',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-small-posts',
+ title: 'Small image and title',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-grid-posts',
+ title: 'Grid',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-large-title-posts',
+ title: 'Large title',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-offset-posts',
+ title: 'Offset',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/social-links-shared-background-color',
+ title: 'Social links with a shared background color',
+ content:
+ '\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t',
+ viewportWidth: 500,
+ categories: [ 'test' ],
+ blockTypes: [ 'core/social-links' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-large-title-posts-2',
+ title: 'Large title 2',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t',
+ categories: [ 'test' ],
+ blockTypes: [ 'core/query' ],
+ source: 'core',
+ },
+ {
+ name: 'core/query-offset-posts-2',
+ title: 'Offset 2',
+ content:
+ '\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t',
+ 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:
+ '\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t',
+ 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 */