Add layout and block spacing support to Latest Posts block by tellthemachines · Pull Request #77989 · WordPress/gutenberg

tellthemachines · 2026-05-06T01:00:42Z

What?

Similar to #49050 and #77411.

Adds layout and block spacing support to Latest Posts to replace its custom list/grid styles.

Testing Instructions

In trunk, add a Latest Posts block and configure its columns;
Check out this branch and verify that the block looks the same as in trunk;
Use the new layout controls to adjust column number and minimum column width, enabling responsive behaviour for columns;
Check that setting minimum column width to 0 disables responsive columns altogether (column number shouldn't change with screen size).

Testing Instructions for Keyboard

Screenshots or screencast

(note that Layout panel is now in the Styles tab)

Before	After

Use of AI Tools

Written by GPT 5.5. ~~leaving as a draft until I've reviewed it properly.~~ this has now been human-reviewed.

github-actions · 2026-05-06T01:09:20Z

Size Change: +556 B (+0.01%)

Total Size: 8.46 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-library/index.min.js`	323 kB	+169 B (+0.05%)
`build/styles/block-library/latest-posts/style-rtl.css`	1.42 kB	+68 B (+5.01%)	🔍
`build/styles/block-library/latest-posts/style-rtl.min.css`	586 B	+66 B (+12.69%)	⚠️
`build/styles/block-library/latest-posts/style.css`	1.44 kB	+68 B (+4.96%)	🔍
`build/styles/block-library/latest-posts/style.min.css`	585 B	+65 B (+12.5%)	⚠️
`build/styles/block-library/style-rtl.css`	21.7 kB	+36 B (+0.17%)
`build/styles/block-library/style-rtl.min.css`	18.2 kB	+25 B (+0.14%)
`build/styles/block-library/style.css`	21.8 kB	+34 B (+0.16%)
`build/styles/block-library/style.min.css`	18.2 kB	+25 B (+0.14%)

_{compressed-size-action}

github-actions · 2026-05-06T01:41:53Z

Flaky tests detected in 5b9e7e1.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27254655582
📝 Reported issues:

[Flaky Test] should allow user to add and remove multiple local font files #78760 in /test/e2e/specs/admin/font-library.spec.js

tellthemachines · 2026-05-18T01:46:32Z

+		'string' !== typeof oldAttributes.categories
+	) {
+		return oldAttributes;
+	}


had to add this check because we need to run this before the layout migration, and if we don't check whether categories actually exists it just goes and adds an array of them anyway

tellthemachines · 2026-05-18T01:47:31Z

-								! postCount
-									? MAX_POSTS_COLUMNS
-									: Math.min( MAX_POSTS_COLUMNS, postCount )
-							}


Removing the old max here so it matches the Post Template controls.

tellthemachines · 2026-05-18T01:48:48Z

-			[ `columns-${ columns }` ]: postLayout === 'grid',
+			[ `columns-${ columnCount }` ]:
+				layoutType === 'grid' && columnCount,
+			'has-native-responsive-grid':


This block has the same responsive fallback as Post Template so we're adding the same back compat workaround.

github-actions · 2026-05-18T02:07:13Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: tellthemachines <isabel_brison@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.

ramonjd

It took me way too long to realize I had to click on the "grid" layout to test 🤦🏻

Question: does this make the existing postLayout and columns attributes in block.json deprecated? Do they stay there for any reason? (Assuming backwards compat)

ramonjd · 2026-05-20T05:15:08Z

+		...attributesWithoutLegacyLayout,
+		layout: {
+			type: postLayout === 'grid' ? 'grid' : 'default',
+			...( postLayout === 'grid' && columns && { columnCount: columns } ),


Does there need to be a default here, or does it flow down from block.json? (column: 3)

E.g., columnCount: columns ?? 3

It'll be whatever is set on the legacy block, which might be that default from block.json or something else if user has changed it.

ah actually I think we should ensure the legacy attribs are present in the deprecation, then they can be removed from the block.json

ramonjd · 2026-05-20T05:18:36Z

+		},
+		migrate: ( oldAttributes ) =>
+			migratePostLayout( migrateCategories( oldAttributes ) ),
+		isEligible: ( { postLayout } ) => postLayout,


Does the migration have to run just for 'grid' or all layouts?

all layouts because we're also converting the "list" layout to the "default" type.

ramonjd · 2026-05-20T05:37:13Z

+			html: false,
 		},
+		migrate: migrateCategories,
 		isEligible: ( { categories } ) =>


Apologies, I haven't had my nose in deprecations for a long time.

Does this deprecation see the original raw attributes or the already-migrated attributes?

Just wondering if this will run on the original attributes and replace the migration result from before. If so maybe a ! postLayout check would stop that?

I don't know! 😄

As I understand it the migrations always run in sequence, so if the block is eligible for the categories migration it'll run that, and if it's eligible for the layout one it'll run categories and then layout on whatever categories spat out. I tested this on blocks with legacy layouts and it seemed to work fine.

tellthemachines · 2026-05-20T05:56:01Z

It took me way too long to realize I had to click on the "grid" layout to test 🤦🏻

sorry, I didn't think to add that step explicitly 😅

Question: does this make the existing postLayout and columns attributes in block.json deprecated? Do they stay there for any reason? (Assuming backwards compat)

Oh I think they can be removed! Looking at #49050 as an example, we removed the displayLayout attrib from the Query block there.

tellthemachines self-assigned this May 6, 2026

tellthemachines added [Type] Enhancement A suggestion for improvement. [Block] Latest Posts Affects the Latest Posts Block [Feature] Layout Layout block support, its UI controls, and style output. labels May 6, 2026

github-actions Bot added the [Package] Block library /packages/block-library label May 6, 2026

tellthemachines force-pushed the add/latest-posts-layout-support branch from bb4677d to 92b61a7 Compare May 18, 2026 00:23

tellthemachines commented May 18, 2026

View reviewed changes

tellthemachines requested review from andrewserong, ramonjd and talldan May 18, 2026 02:06

tellthemachines marked this pull request as ready for review May 18, 2026 02:07

tellthemachines requested review from ajitbohra, fabiankaegy and juanmaguitar as code owners May 18, 2026 02:07

ramonjd reviewed May 20, 2026

View reviewed changes

tellthemachines added 5 commits June 10, 2026 14:55

Add layout and block spacing support to Latest Posts block

e226473

remove layout from migration

e116d8c

rename test file

71c5f0b

add legacy attribs to deprecation

f36c733

update fixtures

932a668

tellthemachines force-pushed the add/latest-posts-layout-support branch from 601548d to 932a668 Compare June 10, 2026 04:56

update docs

5b9e7e1

Conversation

tellthemachines commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Use of AI Tools

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

ramonjd left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tellthemachines commented May 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tellthemachines commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 18, 2026 •

edited

Loading