Skip to content

Embed: Add minimum width and height support - #83903

Merged
ramonjd merged 1 commit into
trunkfrom
add/embed-dimensions-support
Oct 6, 2026
Merged

Embed: Add minimum width and height support#83903
ramonjd merged 1 commit into
trunkfrom
add/embed-dimensions-support

Conversation

@aaronrobertshaw

@aaronrobertshaw aaronrobertshaw commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Related: #43241

What?

Adds minimum width and minimum height support to the Embed block.

Why?

The Embed block supports margin, but has no dimensions controls. This brings it in line with other blocks as part of the design tools consistency work.

A minimum keeps an embed from collapsing to a sliver in a narrow column, and gives a site one place to set a floor for every embed through Global Styles.

Width, height and aspect ratio are deliberately left out and handled later in this process.

How?

Adds dimensions.minHeight and dimensions.minWidth to the block's block.json supports. The block saves its wrapper through useBlockProps.save(), so the supports serialize with no PHP change.

The block's stylesheet already sets two minimums on .wp-block-embed, and both beat a Global Styles value on specificity:

  • .wp-block-cover .wp-block-embed sets min-width: 320px and min-height: 240px so an embed does not collapse inside a Cover.
  • .wp-block-group.is-layout-flex .wp-block-embed sets min-width: 0 so an embed can shrink inside a Row or Stack.

Both are wrapped in :root :where(), matching Global Styles specificity, so a user value now wins on source order. The values are unchanged and stay the default. flex: 1 1 0% stays on the original selector, so flex behaviour is untouched. This follows the same approach as #83609 for Verse.

The tradeoff: min-width: 0 stops an embed blowing out a Row or Stack. With it lowered, a Global Styles minimum width larger than the space available pushes the embed past the row, as testing step 7 shows. That is intended, a user value should win, but it is a change in what a site can break.

The core blocks reference and the block's README.md are regenerated to list dimensions (minHeight, minWidth).

In the screenshots the tinted card with a hairline edge, the 200px content column and the outlined paragraph are a capture aid, not part of the change. The block gains no background or border. The YouTube embed is responsive, so the video fills the card and its 4:3 height is usually taller than the minimum height; the minimum height shows as the tinted strip under the video in the block mobile state.

Testing Instructions

Setup: a post with a YouTube Embed block, followed by a plain paragraph.

  1. No styles: the Embed block renders as before.
  2. Global Styles > Blocks > Embed > Dimensions: minimum width 300px, minimum height 140px.
    • The embed is at least 300px wide in the editor and on the front end.
  3. Global Styles, Mobile state: minimum width 250px, minimum height 100px.
    • Editor: View > Responsive styles > Mobile.
    • Front end: a mobile width, under 480px.
    • The smaller mobile value shows. Desktop keeps step 2.
  4. Block inspector > Dimensions: minimum width 560px, minimum height 340px.
    • The block value wins at every width, mobile included: a block value has no mobile state of its own and still outranks Global Styles, so the Global Styles mobile value from step 3 no longer shows.
  5. Block inspector, Mobile selected: minimum width 300px, minimum height 240px.
    • The block mobile value wins at a mobile width, in the editor and on the front end. The embed is taller than its video, so the minimum height is visible.

Cover and Row cases, before and after this change:

  1. Clear the block values. Put an Embed inside a narrow Cover and set Global Styles > Embed minimum width 200px, minimum height 120px.
    • On trunk the embed stays at 320 by 240 and overflows the Cover.
    • With this change the Global Styles value wins and the embed fits.
    • With no Global Styles value the embed keeps the 320 by 240 floor, as before.
  2. Put an Embed and a short paragraph in a Row, and set Global Styles > Embed minimum width wider than the Row allows.
    • On trunk the embed shrinks to share the row.
    • With this change the embed holds the minimum and pushes the paragraph past the edge of the Row.
    • With no Global Styles value the embed shrinks as before.

Screenshots or screencast

composite

Use of AI Tools

Implemented, built and screenshotted by a Claude Code agent from a predefined task.

@aaronrobertshaw aaronrobertshaw added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement. [Package] Block library /packages/block-library Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Block] Embed Affects the Embed Block labels Oct 1, 2026
@aaronrobertshaw aaronrobertshaw self-assigned this Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +104 B (0%)

Total Size: 8.29 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 367 kB +10 B (0%)
build/styles/block-library/embed/style-rtl.css 1.41 kB +15 B (+1.08%)
build/styles/block-library/embed/style-rtl.min.css 464 B +16 B (+3.57%)
build/styles/block-library/embed/style.css 1.41 kB +15 B (+1.08%)
build/styles/block-library/embed/style.min.css 464 B +16 B (+3.57%)
build/styles/block-library/style-rtl.css 22.7 kB +6 B (+0.03%)
build/styles/block-library/style-rtl.min.css 19.3 kB +9 B (+0.05%)
build/styles/block-library/style.css 22.8 kB +7 B (+0.03%)
build/styles/block-library/style.min.css 19.2 kB +10 B (+0.05%)

bc2958e Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric ff1e57c trunk % Change
timeToFirstByte 56.45 ms +10.01% -2.92% 55.25 ms +10.41% -2.08% 2.17%
largestContentfulPaint 94 ms +6.38% -6.38% 94 ms +2.13% -4.26% 0%
lcpMinusTtfb 34 ms +13.68% -2.65% 36.75 ms +14.01% -9.8% -7.48%
wpBeforeTemplate 27.68 ms +12.54% -1.19% 27.44 ms +13.67% -0.91% 0.87%
wpTemplate 24.22 ms +7.64% -3.47% 23.96 ms +4.09% -2.88% 1.09%
wpTotal 52.82 ms +10.03% -3.43% 51.68 ms +10.68% -2.23% 2.21%
wpMemoryUsage 7.63 MB +0% -0% 7.60 MB +0% -0% 0.46%
wpDbQueries 17 +0% -0% 17 +0% -0% 0%

front-end-classic-theme

Metric ff1e57c trunk % Change
timeToFirstByte 47.05 ms +7.01% -1.59% 46.5 ms +4.19% -1.08% 1.18%
largestContentfulPaint 100 ms +4% -0% 100 ms +4% -0% 0%
lcpMinusTtfb 53.7 ms +3.07% -1.3% 54 ms +1.67% -1.11% -0.56%
wpBeforeTemplate 26.31 ms +7.72% -2.17% 25.97 ms +2.5% -1.54% 1.31%
wpTemplate 17.76 ms +2.25% -1.58% 17.65 ms +1.59% -0.68% 0.62%
wpTotal 44.24 ms +7.19% -1.63% 43.65 ms +4.12% -1.05% 1.35%
wpMemoryUsage 6.26 MB +0% -0% 6.21 MB +0% -0% 0.71%
wpDbQueries 14 +0% -0% 14 +0% -0% 0%

media-processing

Metric ff1e57c trunk % Change
mediaProcessingJpeg 395.13 ms +1.3% -0.47% 397.85 ms +1.63% -0.69% -0.68%
mediaProcessingAvif 6056.59 ms +0.36% -0.02% 6070.04 ms +0.28% -0.17% -0.22%
mediaProcessingJpegToAvif 4169.08 ms +0.21% -0.37% 4190.57 ms +0.18% -0.54% -0.51%

media-upload

Metric ff1e57c trunk % Change
jpegUploadProcessing 1423.95 ms +34.86% -1.28% 1418.08 ms +0.61% -0.5% 0.41%
pngUploadProcessing 173.4 ms +7.19% -2.89% 204.03 ms +8.07% -10.05% -15.01%
largeJpegUploadProcessing 1402.45 ms +0.21% -0.26% 1419.65 ms +0.83% -1.45% -1.21%
multipleImageUploadProcessing 1589.31 ms +8.89% -1.9% 1599.44 ms +9.17% -2.54% -0.63%

post-editor

Metric ff1e57c trunk % Change
serverResponse 527.9 ms +2.16% -2.98% 503.92 ms +5.57% -3.53% 4.76%
firstPaint 230.54 ms +2.72% -12.68% 245.95 ms +30.48% -3.64% -6.27%
domContentLoaded 1133.32 ms +2.4% -2.54% 1138.03 ms +1.77% -2.26% -0.41%
loaded 1134.8 ms +2.38% -2.56% 1139.39 ms +1.76% -2.28% -0.4%
firstContentfulPaint 470.99 ms +2.99% -3.52% 469.87 ms +3.3% -1.89% 0.24%
firstBlock 3371.33 ms +0.85% -0.88% 3383.24 ms +0.62% -0.41% -0.35%
type 18.03 ms +4.49% -5.1% 17.26 ms +2.09% -4.92% 4.46%
typeWithoutInspector 17.51 ms +3.37% -4.91% 17.47 ms +7.5% -5.67% 0.23%
typeWithTopToolbar 23.04 ms +7.81% -2.82% 21.89 ms +2.1% -10.83% 5.25%
typeContainer 8.36 ms +7.3% -5.38% 8.94 ms +11.07% -11.86% -6.49%
focus 75.38 ms +8.4% -4.22% 71.07 ms +10.58% -3.5% 6.06%
firstFocus 229.11 ms +0% -0% 202.12 ms +0% -0% 13.35%
selectAll 543.12 ms +1.76% -3.23% 545.93 ms +3.33% -1.49% -0.51%
listViewOpen 67.97 ms +4.41% -3.65% 61.87 ms +10.72% -4.09% 9.86%
inserterOpen 22.38 ms +2.28% -10.19% 23.02 ms +11.9% -13.08% -2.78%
inserterHover 2.17 ms +10.6% -8.76% 2.18 ms +12.39% -12.39% -0.46%
inserterSearch 7.96 ms +17.59% -13.19% 7.7 ms +10.52% -6.1% 3.38%
loadPatterns 664.43 ms +1.94% -1.77% 651.19 ms +2.4% -2.47% 2.03%
wpTotal 517.91 ms +2.29% -3.12% 492.73 ms +5.9% -3.28% 5.11%
wpMemoryUsage 13.18 MB +0% -0% 13.15 MB +0% -0% 0.29%
wpDbQueries 54 +0% -1.85% 54 +0% -1.85% 0%

site-editor

Metric ff1e57c trunk % Change
serverResponse 491.67 ms +5.82% -4.68% 508.45 ms +2.6% -6.49% -3.3%
firstPaint 282.99 ms +27.3% -22.76% 232.97 ms +30.09% -7.41% 21.47%
domContentLoaded 1206.73 ms +1.21% -2.21% 1178.8 ms +1.64% -1.09% 2.37%
loaded 1207.97 ms +1.22% -2.21% 1180.08 ms +1.64% -1.05% 2.36%
firstContentfulPaint 487.08 ms +4.97% -3.77% 476.49 ms +2.83% -1.45% 2.22%
firstBlock 4345.05 ms +1.92% -0.88% 4315.75 ms +0.63% -2.76% 0.68%
type 18.66 ms +11.74% -1.18% 17.67 ms +9.11% -3.28% 5.6%
navigate 122.57 ms +8.25% -8.7% 108.5 ms +6.35% -6.74% 12.97%
loadPatterns 1442.72 ms +4.32% -2.31% 1385.44 ms +4.72% -2.93% 4.13%
loadPages 1079.75 ms +2.02% -2.83% 1039.95 ms +4.76% -0.8% 3.83%
wpTotal 481.52 ms +6.02% -4.68% 498.72 ms +2.59% -6.69% -3.45%
wpMemoryUsage 12.15 MB +0% -0% 12.13 MB +0% -0% 0.14%
wpDbQueries 43 +2.33% -0% 43 +2.33% -0% 0%

bc2958e 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.

sort patterns (Site Editor v2) in /test/e2e/specs/site-editor/patterns.spec.js, passed after 1 failed attempt. 
Error: apiRequestContext.fetch: socket hang up
Call log:
  - → POST http://localhost:8889/wp-json/wp/v2/blocks
    - user-agent: Playwright/1.63.0 (x64; ubuntu 24.04) node/24.18 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: a1627c6cb6
    - content-type: application/json
    - content-length: 137
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1791420852%7CoCySq2U2WG62jG7CiB5J1Z2cqpXvFsqHT8CkIJci5VW%7C6e87490b3563832565232274d81eb8033b80d5ce03c3f081af8f5355d665cddf; wp-settings-time-1=1791248347

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.createRecord (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/records.ts:20:14)
    at RequestUtils.createBlock (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts:54:14)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/patterns.spec.js:247:17

bc2958e Run

@aaronrobertshaw
aaronrobertshaw force-pushed the add/embed-dimensions-support branch from febed13 to 0b3b294 Compare October 1, 2026 08:00
@aaronrobertshaw
aaronrobertshaw marked this pull request as ready for review October 1, 2026 10:48
@aaronrobertshaw aaronrobertshaw mentioned this pull request Oct 1, 2026
Open
@aaronrobertshaw
aaronrobertshaw force-pushed the add/embed-dimensions-support branch from 0b3b294 to bc2958e Compare October 6, 2026 00:48
ramonjd
ramonjd approved these changes Oct 6, 2026
View reviewed changes

@ramonjd ramonjd left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

Min height/width LGTM on blocks/global styles/responsive.

Also checked embed within Row and Cover.

@ramonjd
ramonjd merged commit 72084dc into trunk Oct 6, 2026
82 checks passed
@ramonjd
ramonjd deleted the add/embed-dimensions-support branch October 6, 2026 06:06
@github-actions github-actions Bot added this to the Gutenberg 24.2 milestone Oct 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ramonjd ramonjd ramonjd approved these changes
@andrewserong andrewserong Awaiting requested review from andrewserong
@talldan talldan Awaiting requested review from talldan
@tellthemachines tellthemachines Awaiting requested review from tellthemachines
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner
@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

Assignees

@aaronrobertshaw aaronrobertshaw

Labels

[Block] Embed Affects the Embed Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 24.2

Development

Successfully merging this pull request may close these issues.

2 participants

@aaronrobertshaw @ramonjd