Skip to content

Commit 0d281a0

Browse files
committed
fix flickering stretchy paragraph
1 parent 7d01e08 commit 0d281a0

File tree

2 files changed

+14
-0
lines changed

2 files changed

+14
-0
lines changed

src/styles/block-transitions.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ body.stk--anim-init {
4040
#{$stk-anim-selectors-pseudo} {
4141
transition: var(--stk-transition-default, all var(--stk-transition-duration, 0.12s) cubic-bezier(0.45, 0.05, 0.55, 0.95), flex 0s, max-width 0s, visibility 0s); // Don't include flex & max-width since column widths would animate.
4242
}
43+
44+
// WP 6.9 Compatibility: Remove the transition for Core Stretchy Paragraph blocks inside Stackable blocks
45+
// This is to prevent the text from flickering.
46+
.stk-block .has-fit-text {
47+
transition: font-size 0s;
48+
}
49+
4350
:where(#{$stk-anim-selectors}),
4451
#{$stk-anim-selectors-pseudo} {
4552
border-width: 1px;

src/styles/editor-block-transitions.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ $stk-anim-selectors-pseudo:
3636
#{$stk-anim-selectors-pseudo} { // Tabs block
3737
transition: all var(--stk-transition-duration, 0.12s) cubic-bezier(0.45, 0.05, 0.55, 0.95), margin 0s, flex 0s, max-width 0s, visibility 0s; // Don't include flex & max-width since column widths would animate.
3838
}
39+
40+
// WP 6.9 Compatibility: Remove the transition for Core Stretchy Paragraph blocks inside Stackable blocks
41+
// This is to prevent the text from flickering.
42+
.stk-block .has-fit-text {
43+
transition: font-size 0s;
44+
}
45+
3946
:where(#{$stk-anim-selectors}),
4047
#{$stk-anim-selectors-pseudo} {
4148
border-width: 1px;

0 commit comments

Comments
 (0)