fix: WP 6.9 Compatibility (#3654)

* fix flickering stretchy paragraph

* fix block toolbar not showing when text block is set as default block

Author: kaeizen

src/block-components/typography/attributes.js

@@ -85,6 +85,13 @@ export const addAttributes = ( attrObject, selector = '.stk-content', options =
 					multiline,
 					default: defaultText,
 					__unstableMultilineWrapperTags,
+					/**
+					 * Starting from WP 6.9, the toolbar gets hidden when the text block is set as the default block.
+					 * Setting the role to 'content' will prevent the toolbar from being hidden.
+					 * see https://github.com/WordPress/gutenberg/pull/70897
+					 */
+					role: 'content',
+					__experimentalRole: 'content',
 				},
 			} : {} ),
 			...( hasTextTag ? {

src/styles/block-transitions.scss

@@ -40,6 +40,13 @@ body.stk--anim-init {
 	#{$stk-anim-selectors-pseudo} {
 		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.
 	}
+
+	// WP 6.9 Compatibility: Remove the transition for Core Stretchy Paragraph blocks inside Stackable blocks
+	// This is to prevent the text from flickering.
+	.stk-block .has-fit-text {
+		transition: font-size 0s;
+	}
+
 	:where(#{$stk-anim-selectors}),
 	#{$stk-anim-selectors-pseudo} {
 		border-width: 1px;

src/styles/editor-block-transitions.scss

@@ -36,6 +36,13 @@ $stk-anim-selectors-pseudo:
 	#{$stk-anim-selectors-pseudo} { // Tabs block
 		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.
 	}
+
+	// WP 6.9 Compatibility: Remove the transition for Core Stretchy Paragraph blocks inside Stackable blocks
+	// This is to prevent the text from flickering.
+	.stk-block .has-fit-text {
+		transition: font-size 0s;
+	}
+
 	:where(#{$stk-anim-selectors}),
 	#{$stk-anim-selectors-pseudo} {
 		border-width: 1px;