[aaronrobertshaw]

Important

This builds on #15408 and should land after it. Only the last three commits are new for review. The earlier commits belong to #15408.

Backport of Gutenberg PR WordPress/gutenberg#86282

Trac ticket: https://core.trac.wordpress.org/ticket/66467

Adds X and Y offsets to the transform block support. It outputs the translate CSS property. So an offset combines with a rotation and with existing block transforms.

This PR backports:

• the translate feature in the transform block support,
• filling a block's missing offset axis when it is output: a state from the block's own value first, then Global Styles,
• keeping a valid offset in WP_Theme_JSON::remove_insecure_properties(), so users without unfiltered_html can save it,
• transform.translate in WP_Theme_JSON settings and styles, keeping only the x and y axes,
• the transform.translate style engine definition, with one length or percentage per axis,
• translate in safecss_filter_attr(), limited to one or two lengths or percentages,
• and the accompanying block supports, states, style engine, KSES and WP_Theme_JSON tests.

The block opt-ins, the transform.translate setting in Core's theme.json and the editor UI arrive later with the Gutenberg package update.

Testing instructions

No Core block opts in yet, so test through theme.json styles.

1. In the active theme's theme.json, add "transform": { "translate": { "x": "10px", "y": "-50%" } } under styles.blocks.core/group.
2. Also add "transform": { "translate": { "x": "5px" } } at the top level of styles.
3. View a page that contains a Group block.
4. Check the global-styles-inline-css style tag contains :root :where(.wp-block-group){translate: 10px -50%;}.
5. Check there is no translate: 5px rule. Root transforms are dropped.
6. Change the Group x value to calc(1px + 2px) and confirm the rule disappears.

Without this PR there is no translate rule at all.

A block that sets only one axis keeps the other from Global Styles. The tests cover this, since no Core block opts in yet.

Use of AI

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: The mechanical port, tests and this description; I reviewed and edited the PR.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.