Repository navigation
Blocks: Fill fixed-size cells in manual placement grids - #84504
Draft
draganescu wants to merge 23 commits into
Draft
draganescu wants to merge 23 commits into
draganescu wants to merge 23 commits into
Conversation
Behind the grid interactivity experiment, images in a manual placement grid whose cells take their size from its width cover their cells, below any caption. The cover rules follow the grid's aspect ratio exactly: a grid with a minimum column width sizes its rows by their content, where an image taking its height from the row would collapse, so its images keep their own height, and a viewport that adds a minimum column width puts images back to their own height. In the editor, images in such a grid leave out their default inline `height: auto` so the layout can size them; a linked image otherwise keeps its natural height inside its link. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The cover rule matched any image in a grid's Image block, including inline images in its caption, which then shared the cell's height with the main image and could collapse it. It now targets only the block's own image, linked or not. A viewport that stops covering also resets the image's width, so small images are no longer stretched there. The Image block's flag becomes `hasHeightFromGrid`, which says what it means. Tests cover a grid with a minimum column width whose viewport changes the column count, and the reset inside a rendered block's media query. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
🤖 PR meta 🤖🏷️ LabelsThis pull request needs exactly one label indicating its type, and has 0.
Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you. 📦 Bundle sizeSize Change: +3.06 kB (+0.03%) Total Size: 9.07 MB 📦 View Changed
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome 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. Backspace in
|
github-actions
Bot
added
[Package] Block library
draganescu
changed the title
# Conflicts: # packages/block-editor/CHANGELOG.md
This was referenced Oct 10, 2026
Blocks now fill fixed-size cells from their own styles, reading the grid's `--wp--style--grid-cells` signal, so the layout no longer needs to know about the Image block, and the Image block no longer needs to repeat the grid's conditions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Image, Cover, Video, Media & Text and Post Featured Image fill their cell when a manual placement grid sets `--wp--style--grid-cells: fixed`. Each block reads it with a container style query in its own stylesheet and decides how to fill: media blocks crop with `object-fit: cover`, Cover and Media & Text drop their minimum height. The cell wins over sizes set on the block. Embeds, galleries and text blocks are left alone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
draganescu
changed the title
A private block-editor hook, useIsInFixedGridCell, tells a block whether its parent grid has fixed-size cells in the viewport whose styles are being edited, reading the parent's viewport layout through getStyleForState. It shares hasFixedGridCells with the grid layout's own CSS, so the editor and the styles agree on which cells are fixed. Image and Post Featured Image hide their dimension controls in such cells, and Cover hides its minimum height control, resize handle and full height toggle, since the cell decides their size. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts: # packages/block-library/CHANGELOG.md
…peScript Trunk converted the grid layout and its tests to TypeScript, so `hasFixedGridCells` and the experiment flag saved in its tests need types. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
New files in block-editor must be TypeScript. Types the registry select, the parent block's layout and style attributes, and the test setup; the runtime logic is unchanged. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
In a grid cell with a fixed size, the cell decides a block's size. The block editor's dimensions hook now turns off the minimum height and aspect ratio block-support controls there, so Cover, Media & Text and Video hide them the same way. Cover still hides its own minimum height control, resize handle and full height toggle, which aren't block supports. Image and Post Featured Image no longer hide their whole size panel. They keep Scale, and Image keeps its focal point, which needs Scale: picking a focal point sets the scale to cover, which the cell already uses. `DimensionsTool` shows Scale whenever it is the only tool. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
25 tasks
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Behind the
gutenberg-grid-interactivityexperiment, blocks fill their cell in a manual placement grid whose cells have a fixed size: Image, Cover, Video, Media & Text and Post Featured Image. Filling is not optional: wherever it makes sense for a block, the cell decides the block's size.This PR targets the branch of #84499 (same-size cells for manual placement grids),
add/grid-equal-cells, and uses the signal it adds. Split out of #84340.Why?
With #84499, a manual placement grid has same-size cells whose size comes from the grid's width, and content never makes them bigger. Any block with a size of its own then either leaves empty space in its cell or overflows it: an image keeps its natural aspect ratio, and a Cover keeps its 430px minimum height, so it overflows every cell shorter than that.
An earlier version of this PR made only images cover their cells, with
.wp-block-imagerules written into the grid layout (editor and PHP) and the Image block repeating the grid's conditions to drop its inlineheight: auto. That tied a generic layout to one block, and every other block that needed the same treatment would have needed edits in both layout files. This version splits the job: the grid says whether its cells are fixed, and each block decides how to fill a cell.How?
--wp--style--grid-cells: fixedon a manual grid wherever its cells take their size from its width,autoin a viewport that sizes rows by content again, and resets it toautofor grids nested inside.style.scsswith a container style query,@container style(--wp--style--grid-cells: fixed), on.is-layout-grid > .wp-block-*. A style query looks at the element's parent, and the child combinator keeps it to blocks placed directly in the grid. A block inside a Group inside a cell is left alone.object-fit: cover). Images inside the caption are left alone.videoelement.!importantwhere a block writes inline styles: an image's width and height, the Cover's and Media & Text's minimum height, the Cover's aspect ratio. A user-set scale (for example "contain") and focal point still apply, since they only position the media inside the cell.height: autofor grids: the!importantrule wins over it. Nothing inimage/edit.jsxorimage/image.jsxchanges, and nothing in the layout names a block.useIsInFixedGridCell( clientId ), reads the parent grid's layout for the viewport whose styles are being edited (getStyleStateViewport()plus the parent'sstyle[ viewport ].layout) and checks it withhasFixedGridCells(), the same function the grid layout uses for its CSS, so the editor UI and the styles agree on which cells are fixed. Values set before the block was moved into the grid are kept, and the controls come back when it leaves the grid or in a viewport where its cells are not fixed.Known limitations:
Testing Instructions
Testing Instructions for Keyboard
No new controls or interactions; nothing changes for keyboard use.
Screenshots or screencast
To add.
Use of AI Tools
Reworked with Claude Code (Claude Opus 5.5) after a review of the earlier, image-only version with the PR author, who chose to make filling the default and only behavior and to move the signal into #84499. The rules were checked in WebKit against a static page using the built block styles and the layout's new output: fixed cells, a viewport reset to
auto, a nested auto grid, and the experiment off.🤖 Generated with Claude Code