Stop pinning transform:none on blocks after their entrance animation - #256
Open
amjadr360 wants to merge 1 commit into
Open
Stop pinning transform:none on blocks after their entrance animation#256amjadr360 wants to merge 1 commit into
amjadr360 wants to merge 1 commit into
Conversation
The post-animation cleanup rule (.ext-animate[data-ext-animated]) pinned
transform: none !important forever. Its specificity (0,2,0) beats the
(0,1,0) that WP core gives block custom CSS — core wraps style.css in
:root :where(.wp-custom-css-<hash>) — so any user transform (a tilted
heading via the Agent's custom-CSS escape hatch, or the block editor's
Additional CSS panel) previews fine, saves fine, then silently renders
untransformed on every reload of an animated block.
The transform line was redundant: animation: none !important already
removes the keyframe-supplied transforms, and the interactivity JS's
inline transform reset (setType('none') path) is non-important, so it
still yields to a user's !important custom rule. opacity stays pinned
because .ext-animate's opacity: 0 base would otherwise re-hide the
element.
Found live-testing the extendify-sdk schema-based block-updating branch:
"tilt this heading slightly" on a launched site (entrance animations on
by default) lost the tilt after reload.
amjadr360
force-pushed
the
fix/animation-cleanup-clobbers-custom-transforms
branch
from
August 3, 2026 07:03
f99ea83 to
4f357ec
Compare
amjadr360
marked this pull request as ready for review
August 3, 2026 07:04
Member
|
Ideally we would be able to remove all of these. This is fine for now but we need to refactor this to do animations and leave the dom in a clean state after |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When a block finished its entrance animation, the theme locked it flat. Any tilt, skew, or rotation added afterwards — including one the AI Agent adds for you — looked right while you were editing and then vanished on the next page load. The lock turned out to be unnecessary, so it's gone. Entrance animations behave exactly as before.
:where()), deliberately not in this PR.How to test
On a site with animations turned on, give an animated block a rotation through custom CSS — in the block editor's Additional CSS panel, or by asking the Agent to tilt a heading — then reload the page. The tilt should still be there, and the block should still fade in on scroll.
Closes extendify/company-product#2278