Skip to content

Editor: Add the rotate block support - #14707

Draft
draganescu wants to merge 1 commit into
WordPress:trunkfrom
draganescu:add/rotate-block-support
Draft

draganescu wants to merge 1 commit into
WordPress:trunkfrom
draganescu:add/rotate-block-support

Conversation

@draganescu

Copy link
Copy Markdown

Backports the rotate block support from Gutenberg (#84505), where it is still behind the "Block rotation" experiment. Opened as a draft so the Gutenberg PR has its backport changelog entry; it isn't ready to commit until the support leaves the experiment.

  • src/wp-includes/block-supports/rotate.php: block types support rotation unless they opt out with supports.rotate: false, and get a style attribute for it. The angle is stored in style.rotate, with viewport overrides in style['@tablet'].rotate and style['@mobile'].rotate, where 0 undoes the default rotation. Stored values are treated as untrusted: only numbers and decimal numeric strings are read, rounded to two decimals and wrapped into (-180, 180]. wp_render_rotate_support() adds the rules to the block supports stylesheet under a class generated from them, using the CSS rotate property so it combines with any transform, with viewport overrides in the theme's viewport media queries. Saved markup doesn't change.
  • src/wp-includes/kses.php: adds rotate to the safe CSS properties, since the style engine filters every declaration through safecss_filter_attr().
  • Tests ported from Gutenberg's phpunit/block-supports/rotate-test.php. They pass against 7.2-alpha with the ported file loaded.

The supports.rotate: false opt-outs for blocks without a wrapper of their own (Classic, Custom HTML, Missing, More, Page Break, Pattern, Shortcode and synced patterns) are in the blocks' block.json files, which arrive with the package update.

Trac ticket:

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Porting the Gutenberg block support and its tests to Core naming, and writing this description. The support itself was written in Gutenberg with the same tool and reviewed by me.


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

🤖 Generated with Claude Code

Backports the rotate block support from Gutenberg: block types support rotation
unless they opt out with `supports.rotate: false`. The angle is stored in
`style.rotate`, with viewport overrides in `style['@tablet'].rotate` and
`style['@mobile'].rotate`, and rendered with the CSS `rotate` property under a
generated class in the block supports stylesheet. Adds `rotate` to the safe CSS
properties so the style engine keeps the declaration.

Synced from WordPress/gutenberg#84505.

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

Copy link
Copy Markdown

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant