Register the pattern utility classes as block styles by MaggieCabrera · Pull Request #180 · WordPress/ipsum

MaggieCabrera · 2026-10-28T11:43:03Z

Description

Part of #75.

Turns three utility classes from the patterns into block styles, so they show up in the Styles panel and the REST API:

Pinned to Bottom (sticky-bottom) on Template Part
Row Hover (hover-together) on Post Template
Dot Separator (dot-before) on Comment Edit Link and Comment Reply Link

The pinned search bar's outlined button also becomes its own style, Outline, on Search, so pinning another part doesn't change its Search block. Nothing changes visually.

Dot Separator is a JSON file in styles/blocks/, so its CSS can be edited in Global Styles. The others use inline_style, following what Twenty Twenty-Four and Twenty Twenty-Five do.

Testing Instructions

Check that the search bar still sticks to the bottom with its outlined button, archive and search rows still hover together, and the comment meta row still shows its dots.
In the Site Editor, check that each block's Styles panel lists its style, including Outline on Search.
Repeat with a dark variation such as Evening.

Turn sticky-bottom, hover-together and dot-before into registered block styles (Pinned to Bottom, Row Hover and Dot Separator), so the editor's Styles panel and the block types REST endpoint list them instead of the behaviour hiding in pattern class names. Part of #75. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Pinned to Bottom, Row Hover and Dot Separator now carry their CSS in register_block_style(), as Twenty Twenty-Four and Twenty Twenty-Five do, instead of in style.css. The REST API returns it with each style. Selectors gain the block class, and Dot Separator is registered per block so each one prints only its own rule. Part of #75. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

github-actions · 2026-10-30T09:32:00Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

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: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>

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

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

@propsbot add <username> to give props to a GitHub user. Requires write access.
@propsbot remove <username> to leave a user out of the props. Requires write access.
@propsbot refresh to refresh this list. Adding the props-bot label works too.

mikachan

This is a nice step for #75 ✨ The three classes now show up per block in the Styles panel and the REST API. I've had Claude take a look at this and I've left some inline comments.

mikachan · 2026-10-30T14:37:12Z

+					margin-inline-start: auto;
+				}
+
+				.wp-block-template-part.is-style-sticky-bottom .wp-block-search__button.wp-element-button:not(:hover):not(:focus):not(:active) {


Now that Pinned to Bottom is a general style for any template part, this search button rule (and the width: fit-content / margin-inline-start: auto above) comes along with it. If someone pins a different part that contains a Search block, they get the outlined button, and the part shrinks and moves to the right. Should we keep the button rule separate from the pinning, or make the comment/label say it's designed for the search bar?

mikachan · 2026-10-30T14:37:12Z

+		 * Adds a decorative "·" before the block, so the separator only shows
+		 * when the block does (the Edit link is only there for editors).


This could be a JSON variation like styles/blocks/quote-mark.json, which would also make it editable in Global Styles. What do you think?

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

MaggieCabrera · 2026-10-30T15:08:41Z

This PR needs to make it before string freeze

…JSON Pinned to Bottom no longer restyles a Search block inside the part. The outlined button is now an Outline style on core/search, which the Search Bar pattern opts into. Dot Separator moves to styles/blocks/, so Global Styles shows its CSS. A JSON file can't hold a comment, so the reason goes here: the dot is a ::before so it comes and goes with its block (the Edit link is only there for editors), and its padding carries the spacing, because literal spaces in generated content can collapse. The block styles docblock now gives its reason for Row Hover only, the one style whose CSS doesn't fit in a theme.json css string. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

juanfra

Thanks for working on this, and addressing everything Maggie! Looks good to me. One thing I found is that hovering the variation for the post template is giving a "This block has encountered an error and cannot be previewed", looks like a gutenberg issue so I'll report there.

mikachan

This looks ready to bring in to me!

@juanfra I can't reproduce the issue you're seeing, but I see it's tracked in WordPress/gutenberg#86371. Thanks!

juanfra · 2026-11-06T10:05:20Z

Thanks Sarah and Maggie! Great work, I'm merging this ✨

Pinned to Bottom, Row Hover and Dot Separator, which the patterns used as utility classes, are now block styles, so they show up in the Styles panel and the REST API. The pinned Search Bar's outlined button becomes the Outline style on Search. Nothing changes visually. Synced from WordPress/ipsum#180. See #66352. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Pinned to Bottom, Row Hover and Dot Separator, which the patterns used as utility classes, are now block styles, so they show up in the Styles panel and the REST API. The pinned Search Bar's outlined button becomes the Outline style on Search. Nothing changes visually. Synced from WordPress/ipsum#180. See #66631. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Trunk changed style.css in WordPress#180 and WordPress#198 after this branch was last rebuilt, so the CI check failed on the merge with trunk. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* Provide style.min.css for production Using the same pattern as the TT5 theme - https://themes.trac.wordpress.org/browser/twentytwentyfive/1.5/package.json - this change adds a `style.min.css` and the tooling around it to build it. The `style.css` file would still be used any time that `SCRIPT_DEBUG` is true - which is the case for the `wp-env` setup used by Ipsum. Production setups would get the benefit of using the smaller `style.min.css` file. For sizes, `style.min.css` comes in at 3,354 bytes. Down from the 9,380 bytes of `style.css`. Here are a few quick compression numbers: - `gzip -5 style.min.css` : 1,134 bytes - `brotli -5 style.min.css` : 996 bytes - `zstd -8 style.min.css` : 1,142 bytes The original `style.css` compressed at the same rates is still larger: - `gzip -5 style.css` : 3,727 bytes - `brotli -5 style.css` : 3,426 bytes - `zstd -8 style.css` : 3,701 bytes This is an improvement across the board, and doesn't change the ability to run the theme without having to touch a build system. * Use style.css if it is newer than style.min.css * Bump to the latest versions of cssnano and postcss-cli This is possible now that #33 has been merged * Skip the generated style.min.css in Stylelint The minified stylesheet can't follow the WordPress CSS Coding Standards, so `npm run lint:css` would fail on it. The pre-commit hook passes staged files to Stylelint by name, so it also needs --allow-empty-input for a commit that only rebuilds style.min.css. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Rebuild style.min.css after rebasing onto trunk style.css changed on trunk since style.min.css was built, including the palette rename in #179, so the old minified file pointed at color slugs that no longer exist. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Document the style.min.css build step for agents AGENTS.md still said there is no build step, and that style.css loads on the front end. CONTRIBUTING.md called style.css the only stylesheet, which stopped being true when assets/css/editor-style.css landed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Fail CI when style.min.css is out of date style.min.css is committed, so nothing stopped a pull request from changing style.css without rebuilding it. The CSS job now rebuilds it and fails if the result differs from the committed copy. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Rebuild style.min.css in the pre-commit hook Contributors no longer need to remember npm run build when they change style.css, and the CI check should rarely fail. Stylelint isn't repeated in the new task because the *.css task already runs it on style.css. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Rebuild style.min.css for trunk's latest style.css Trunk changed style.css in #180 and #198 after this branch was last rebuilt, so the CI check failed on the merge with trunk. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: josephscott <josephscott@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org>

This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch. A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af - theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187) - Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198) - Register the pattern utility classes as block styles (WordPress/ipsum#180) - Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171) - Provide style.min.css for production (WordPress/ipsum#61) - Use the border radius shorthand in the patterns (WordPress/ipsum#206) - Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181) - Move what theme.json can express out of the block css strings (WordPress/ipsum#185) - Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204) - Add DESIGN.md with the theme's design model (WordPress/ipsum#186) - Inline the theme stylesheet (WordPress/ipsum#63) - Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192) This commit also includes changes that only exist in core: - Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored. - The theme's `node_modules` directory is ignored, and left out of core's build. - The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. - A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum. - Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup. Follow-up to r60934, r64677, r64678, r64679, r65224. Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo. Fixes #66631. See #66352. git-svn-id: https://develop.svn.wordpress.org/trunk@65366 602fd350-edb4-49c9-b593-d223f7449a82

This updates Ipsum from `17a7ada71378a21c36670d67725b3ca632845a9f` to `bc2e5af700e28980f251d97f58cf80c72ee50a13` on its `trunk` branch. A full list of changes included in this commit can be found on GitHub: WordPress/ipsum@17a7ada...bc2e5af - theme.json: Give negative outline offset for Button's focus styles (WordPress/ipsum#187) - Fix view transitions ignoring prefers-reduced-motion (WordPress/ipsum#198) - Register the pattern utility classes as block styles (WordPress/ipsum#180) - Fix the PHPStan level 10 errors that core reports (WordPress/ipsum#171) - Provide style.min.css for production (WordPress/ipsum#61) - Use the border radius shorthand in the patterns (WordPress/ipsum#206) - Describe every pattern and offer the format patterns as starter patterns (WordPress/ipsum#181) - Move what theme.json can express out of the block css strings (WordPress/ipsum#185) - Clean up editor-only attributes and serialization in the patterns (WordPress/ipsum#204) - Add DESIGN.md with the theme's design model (WordPress/ipsum#186) - Inline the theme stylesheet (WordPress/ipsum#63) - Design guide: Return all theme patterns after the registry has read them (WordPress/ipsum#192) This commit also includes changes that only exist in core: - Ipsum is added to the `cssmin:themes` Grunt task, so the build makes the `style.min.css` that the theme now enqueues. The built file is ignored. - The theme's `node_modules` directory is ignored, and left out of core's build. - The theme gets its own stylesheet build process, with `build` and `watch` commands that minify `style.css` into `style.min.css`, set up through a new `package.json`, `package-lock.json` and `.nvmrc`. - A new `contributing.txt` documents the build process and the `test-and-zip-default-themes` workflow now tests and runs that build for Ipsum. - Regression tests for the design guide ability are added in core, with a child theme fixture, because Ipsum's repository has no PHPUnit setup. Follow-up to r60934, r64677, r64678, r64679, r65224. Props yashjawale, shailu25, onemaggie, westonruter, josephscott, juanfra, mehtadev, mikachan, ravipatel, wildworks, courane01, poena, gziolo. Fixes #66631. See #66352. Built from https://develop.svn.wordpress.org/trunk@65366 git-svn-id: http://core.svn.wordpress.org/trunk@64505 1a063a9b-81f0-0310-95a4-ce76da25c4cd

MaggieCabrera mentioned this pull request Oct 28, 2026

Add DESIGN.md with the theme's design model #186

Merged

Base automatically changed from update/palette-role-names to trunk October 29, 2026 10:28

github-actions Bot added the documentation Improvements or additions to documentation label Oct 29, 2026

MaggieCabrera and others added 2 commits October 29, 2026 11:53

MaggieCabrera force-pushed the update/utility-block-styles branch from df9e902 to cd8a475 Compare October 29, 2026 10:56

github-actions Bot removed the documentation Improvements or additions to documentation label Oct 29, 2026

Shorten the block style comments

21725a9

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

MaggieCabrera marked this pull request as ready for review October 30, 2026 09:31

MaggieCabrera requested review from juanfra and mikachan October 30, 2026 09:32

mikachan reviewed Oct 30, 2026

View reviewed changes

MaggieCabrera and others added 3 commits October 30, 2026 15:53

Update assets/css/editor-style.css

afaf19d

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

Update functions.php

ee712c0

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

Update functions.php

5f7d8cf

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

juanfra added the [Priority] High Used to indicate top priority items that need quick attention label Nov 2, 2026

juanfra approved these changes Nov 5, 2026

View reviewed changes

juanfra requested a review from mikachan November 5, 2026 10:26

Merge branch 'trunk' into update/utility-block-styles

d3b247c

juanfra mentioned this pull request Nov 5, 2026

Block style preview crashes for Post Template: “This block has encountered an error and cannot be previewed” WordPress/gutenberg#86371

Closed

mikachan approved these changes Nov 5, 2026

View reviewed changes

juanfra merged commit 8d9675e into trunk Nov 6, 2026
6 checks passed

juanfra deleted the update/utility-block-styles branch November 6, 2026 10:06

MaggieCabrera mentioned this pull request Nov 9, 2026

Bundled Themes: Update Ipsum for 7.2 Beta 5 WordPress/wordpress-develop#15845

Closed

Navigation Menu

Repository navigation

Register the pattern utility classes as block styles - #180

Register the pattern utility classes as block styles#180
juanfra merged 8 commits into
trunkfrom
update/utility-block-styles

MaggieCabrera commented Oct 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 30, 2026 •

edited

Loading

Uh oh!

mikachan left a comment

Uh oh!

Uh oh!

Uh oh!

mikachan Oct 30, 2026

Uh oh!

mikachan Oct 30, 2026

Uh oh!

Uh oh!

MaggieCabrera commented Oct 30, 2026

Uh oh!

juanfra left a comment

Uh oh!

mikachan left a comment

Uh oh!

juanfra commented Nov 6, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		* Adds a decorative "·" before the block, so the separator only shows
		* when the block does (the Edit link is only there for editors).

Conversation

MaggieCabrera commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

mikachan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mikachan Oct 30, 2026

Choose a reason for hiding this comment

Uh oh!

mikachan Oct 30, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

MaggieCabrera commented Oct 30, 2026

Uh oh!

juanfra left a comment

Choose a reason for hiding this comment

Uh oh!

mikachan left a comment

Choose a reason for hiding this comment

Uh oh!

juanfra commented Nov 6, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MaggieCabrera commented Oct 28, 2026 •

edited

Loading

github-actions Bot commented Oct 30, 2026 •

edited

Loading