Rotatile

Descripción

Rotatile adds a Rotation panel to the block inspector. Pick an angle, watch the block tilt in the editor, and that is the whole feature. There is no settings page, no account, no dashboard notice and no outgoing request.

Out of the box the panel is offered on the Image block and nothing else. That restriction is the point rather than an oversight: a tilted paragraph is a paragraph people have to tilt their head to read. If your design needs another block type, one filter opens it up.

What it does not touch

The angle is kept in the block comment, not in the saved markup. Your post content stays byte for byte what the block itself produced, and the transform is added while the page is being built. Two things follow from that:

• Deactivating the plugin does not invalidate a single block. The tilt stops, the content is intact, and the editor raises no «this block contains unexpected content» warning.
• Nothing is written twice. The rotation exists in one place and is applied once, on the server.

Things worth knowing before you tilt something

A CSS transform has consequences that have nothing to do with this plugin, and they are worth saying out loud:

• A rotated element still occupies its original, unrotated layout box. The visible corners stick out of it and can overlap whatever sits next to the block. Give the block some breathing room rather than expecting the page to make room for it.
• A transform creates a containing block and a stacking context. A descendant with position: fixed stops being fixed to the viewport, and z-index inside the block is measured against the block instead of the page.
• A block sitting inside the normal content width does not push the page sideways, even at 45 degrees. A block set to full-width alignment at a large angle does, and that is worth avoiding: a page that scrolls both up and down and left to right is hard to use and fails an accessibility requirement. Keep rotation for blocks inside the content width, or keep the angle small on a block that spans the whole viewport.

Front end

No JavaScript. One small stylesheet, requested only on pages that actually contain a rotated block, carrying a transform origin and a transition. The transition switches itself off for anyone whose system asks for reduced motion.

Filters

Everything is configured in code. rotatile_supported_blocks sets the block types, rotatile_min_angle and rotatile_max_angle set the range, rotatile_step sets the increment, rotatile_default_angle sets the starting value, and rotatile_transition_duration sets or removes the transition. The development README documents each one with an example.

Source code and build

The editor script shipped in build/ is compiled from src/editor.js. The uncompiled source, the build configuration and the full history live in the public repository:

https://github.com/Fyrins/rotatile

The toolchain is @wordpress/scripts, the build tool maintained by the WordPress project, and nothing else. To reproduce the shipped file:

git clone https://github.com/Fyrins/rotatile.git
cd rotatile
npm install
npm run build

The front-end stylesheet is not compiled: assets/css/rotatile.css is written by hand and shipped as it reads.