Editor: Page the patterns in the "Choose a pattern" modal by MaggieCabrera · Pull Request #85233 · WordPress/gutenberg

MaggieCabrera · 2026-10-20T20:11:21Z

What?

See #84507. The "Choose a pattern" modal for new pages now shows its patterns 20 at a time, with the same pagination as the pattern explorer.

Why?

The modal rendered a preview of every starter pattern at once, and each preview is its own iframe. While testing #84507 on a site with hundreds of themes installed, the modal's 44 starter patterns took about 265 MB of JS heap and 4 s of main-thread time.

With 60 starter patterns, opening the modal now mounts 21 iframes instead of 61, takes 0.73 s of main-thread time instead of 1.23 s, and uses 90 MB of JS heap instead of 137 MB (Playwright with CDP Performance.getMetrics, median of 5 runs, emptytheme).

How?

Reuses the inserter's usePatternsPaging and BlockPatternsPaging, exposed through block-editor's private APIs.
Switching category or searching goes back to the first page.
Like the pattern explorer, the modal shows the pattern count ("12 items") below the grid, even when everything fits on one page.

Testing Instructions

Activate the "Gutenberg Test Many Starter Page Patterns" plugin from packages/e2e-tests/plugins. It registers 60 starter page patterns.
Go to Pages > Add new. The modal shows 20 patterns, "60 items" and "1 of 3".
Use the page buttons. Each page shows the next 20 patterns.
On page 2, pick "Test Portfolio". You're back on page 1 of 2. Go to page 2 and search: you're back on page 1.
Pick a pattern from a later page. The page gets its content.

Testing Instructions for Keyboard

In the modal, Tab past the patterns to the page buttons and press Enter on "Next page". Focus stays on the button.
Shift+Tab back into the patterns. Focus lands on the first pattern of the new page, the arrow keys move between patterns, and Enter picks one.

Use of AI Tools

Claude Code (Claude Opus 5.5) wrote the change, the e2e test and the measurements.

🤖 Generated with Claude Code

The modal for new pages rendered a preview iframe for every starter pattern at once. Show them 20 at a time with the paging the pattern explorer uses, exposed through block-editor's private APIs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions · 2026-10-20T20:11:35Z

🤖 PR meta 🤖

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

Required: any label starting with [Type].
Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +119 B (0%)

Total Size: 9.05 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-editor/index.min.js`	603 kB	+21 B (0%)
`build/scripts/editor/index.min.js`	616 kB	+105 B (+0.02%)
`build/styles/editor/style-rtl.css`	31.3 kB	-1 B (0%)
`build/styles/editor/style-rtl.min.css`	26.8 kB	-2 B (-0.01%)
`build/styles/editor/style.css`	31.4 kB	-1 B (0%)
`build/styles/editor/style.min.css`	26.7 kB	-3 B (-0.01%)

_{b679604 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	`8b57a8b`	trunk	% Change
timeToFirstByte	38 ms +14.74% -5.92%	35.55 ms +15.33% -4.78%	6.89%
largestContentfulPaint	68 ms +8.82% -8.82%	64 ms +6.25% -9.38%	6.25%
lcpMinusTtfb	28.1 ms +17.62% -11.21%	25.5 ms +16.47% -10.59%	10.2%
wpBeforeTemplate	19.6 ms +18.32% -4.03%	18.29 ms +22.25% -2.84%	7.16%
wpTemplate	14.76 ms +3.25% -6.37%	13.5 ms +4.59% -3.48%	9.33%
wpTotal	34.73 ms +14.77% -6.02%	32.54 ms +14.23% -4.76%	6.73%
wpMemoryUsage	7.65 MB +0% -0%	7.61 MB +0% -0%	0.46%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	`8b57a8b`	trunk	% Change
timeToFirstByte	30.9 ms +11.65% -6.15%	29.5 ms +7.8% -1.19%	4.75%
largestContentfulPaint	72 ms +2.78% -5.56%	66 ms +3.03% -3.03%	9.09%
lcpMinusTtfb	39.35 ms +4.45% -2.8%	35.55 ms +6.47% -2.39%	10.69%
wpBeforeTemplate	16.93 ms +17.31% -3.31%	16.07 ms +5.72% -0.87%	5.35%
wpTemplate	11.08 ms +2.53% -8.75%	10.48 ms +3.63% -5.34%	5.73%
wpTotal	28.2 ms +12.8% -6.6%	26.84 ms +8.46% -1.04%	5.07%
wpMemoryUsage	6.34 MB +0% -0%	6.30 MB +0% -0%	0.57%
wpDbQueries	13 +0% -0%	13 +0% -0%	0%

media-processing

Metric	`8b57a8b`	trunk	% Change
mediaProcessingJpeg	232.58 ms +1.94% -1.17%	220.34 ms +1.22% -2.08%	5.56%
mediaProcessingAvif	3785.75 ms +0.73% -0.87%	3580.81 ms +1.26% -0.7%	5.72%
mediaProcessingJpegToAvif	2633.76 ms +1.27% -0.81%	2493.19 ms +1.69% -0.37%	5.64%

media-upload

Metric	`8b57a8b`	trunk	% Change
jpegUploadProcessing	1416.83 ms +0.68% -0.6%	1404.01 ms +2.4% -0.4%	0.91%
pngUploadProcessing	178.31 ms +6.04% -3.85%	181.28 ms +10.06% -4.88%	-1.64%
largeJpegUploadProcessing	1409.26 ms +0.55% -0.53%	1413.49 ms +0.46% -0.69%	-0.3%
multipleImageUploadProcessing	1484.33 ms +1.89% -0.97%	1500.69 ms +0.37% -1.93%	-1.09%

post-editor

Metric	`8b57a8b`	trunk	% Change
serverResponse	352.04 ms +5.56% -9.45%	317.99 ms +10.68% -6.57%	10.71%
firstPaint	329.19 ms +30.34% -38.43%	352.87 ms +18.66% -50.13%	-6.71%
domContentLoaded	1020.33 ms +2.56% -4.57%	923.84 ms +1.13% -1.4%	10.44%
loaded	1021.36 ms +2.56% -4.56%	924.86 ms +1.12% -1.4%	10.43%
firstContentfulPaint	441.6 ms +4.45% -4.04%	408.07 ms +3.52% -6.34%	8.22%
firstBlock	3049.2 ms +1.15% -3.99%	2755.45 ms +1.88% -2.7%	10.66%
type	16.53 ms +5.57% -2.48%	15.33 ms +5.35% -3.2%	7.83%
typeWithoutInspector	17.05 ms +3.11% -1.58%	16.48 ms +5.95% -2.79%	3.46%
typeWithTopToolbar	22.31 ms +4.35% -1.12%	21.71 ms +6.86% -2.16%	2.76%
typeContainer	7.17 ms +6% -3.91%	6.85 ms +10.8% -1.31%	4.67%
focus	99.8 ms +3.63% -3.15%	95.01 ms +1.39% -6.07%	5.04%
firstFocus	253.91 ms +0% -0%	238.94 ms +0% -0%	6.27%
selectAll	491.47 ms +0.22% -0.82%	456.31 ms +0.93% -2.2%	7.71%
listViewOpen	63.88 ms +2.41% -2.27%	61.44 ms +6.84% -3.53%	3.97%
inserterOpen	34.84 ms +4.68% -1.92%	33.84 ms +4.05% -10.28%	2.96%
inserterHover	9.34 ms +10.39% -4.5%	10.05 ms +9.45% -6.57%	-7.06%
inserterSearch	7.41 ms +6.88% -9.31%	7.76 ms +5.67% -9.66%	-4.51%
loadPatterns	516.09 ms +4.28% -1.79%	515.91 ms +3.4% -4.83%	0.03%
wpTotal	342.96 ms +5.34% -9.71%	309.07 ms +10.51% -6.84%	10.97%
wpMemoryUsage	14.69 MB +0% -0%	14.65 MB +0% -0%	0.26%
wpDbQueries	54.5 +0.92% -0.92%	55 +0% -0%	-0.91%

site-editor

Metric	`8b57a8b`	trunk	% Change
serverResponse	522.46 ms +5.08% -4.25%	531.97 ms +1.73% -6.82%	-1.79%
firstPaint	315.3 ms +5.95% -14.69%	282.04 ms +7.74% -8.04%	11.79%
domContentLoaded	1311.07 ms +2.06% -1.65%	1305.53 ms +0.83% -0.41%	0.42%
loaded	1312.34 ms +2.06% -1.67%	1306.88 ms +0.84% -0.41%	0.42%
firstContentfulPaint	539.11 ms +3.61% -2.93%	529.06 ms +2.96% -1.35%	1.9%
firstBlock	4977.84 ms +0.57% -1.49%	4981.98 ms +0.54% -1.8%	-0.08%
type	20.39 ms +6.33% -9.12%	19.5 ms +4% -1.33%	4.56%
navigate	138.01 ms +6.29% -3.31%	136.44 ms +19.01% -5.17%	1.15%
loadPatterns	1413.79 ms +5.47% -1.44%	1295.69 ms +5.01% -1.97%	9.11%
loadPages	1041.08 ms +2.4% -3.78%	1033.78 ms +1.3% -2.01%	0.71%
wpTotal	512.68 ms +5.08% -4.42%	522 ms +1.73% -6.98%	-1.79%
wpMemoryUsage	12.70 MB +0% -0%	12.67 MB +0% -0%	0.29%
wpDbQueries	44 +2.27% -0%	44 +2.27% -0%	0%

_{b679604 Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt.

Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35

drags a multi-selection from anywhere inside it in /test/e2e/specs/editor/various/draggable-blocks.spec.js, passed after 1 failed attempt.

TypeError: Cannot read properties of null (reading 'y')
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:824:57
    at dragSelectionBelowLanding (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:823:3)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:844:3

refuses the drop and uploads nothing in /test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js, passed after 1 failed attempt.

Error: expect(received).toHaveLength(expected)

Expected length: 0
Received length: 2
Received array:  [{"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=198"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/198", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-198", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-21T08:25:16", "date_gmt": "2026-10-21T08:25:16", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png"}, "id": 198, "link": "http://localhost:8889/10x10_e2e_test_image_z9t8jk-2/", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-21T08:25:16", "modified_gmt": "2026-10-21T08:25:16", "ping_status": "closed", "post": null, "slug": "10x10_e2e_test_image_z9t8jk-2", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}, {"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=194"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/194", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-194", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-21T08:25:04", "date_gmt": "2026-10-21T08:25:04", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png"}, "id": 194, "link": "http://localhost:8889/10x10_e2e_test_image_z9t8jk/", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-21T08:25:04", "modified_gmt": "2026-10-21T08:25:04", "ping_status": "closed", "post": null, "slug": "10x10_e2e_test_image_z9t8jk", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45

_{b679604 Run}

…a52e

MaggieCabrera and others added 2 commits October 20, 2026 20:33

Add the PR link to the changelog entry

c8a2e4c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

github-actions Bot added [Package] Editor /packages/editor [Package] Block editor /packages/block-editor [Package] E2E Tests /packages/e2e-tests labels Oct 20, 2026

Merge remote-tracking branch 'origin/trunk' into claude/bold-ellis-9c…

b679604

…a52e

MaggieCabrera mentioned this pull request Oct 21, 2026

Patterns: Use patterns from other installed themes #84507

Draft

Navigation Menu

Repository navigation

Editor: Page the patterns in the "Choose a pattern" modal - #85233

Editor: Page the patterns in the "Choose a pattern" modal#85233
MaggieCabrera wants to merge 3 commits into
trunkfrom
claude/bold-ellis-9ca52e

MaggieCabrera commented Oct 20, 2026

Uh oh!

github-actions Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

MaggieCabrera commented Oct 20, 2026

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Use of AI Tools

Uh oh!

github-actions Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 PR meta 🤖

🏷️ Labels

📦 Bundle size

⚡ Performance

🏁 Flaky tests

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions Bot commented Oct 20, 2026 •

edited

Loading