Changeset 61145

Timestamp:

11/06/2025 06:22:27 PM (5 weeks ago)

Author:

jorgefilipecosta

Message:

Block editor: Make fit text work with the interactivity API.

Fit text did not work after navigating to a page using the Interactivity API router. When users navigated to a post via client-side navigation (e.g., in a Query block with pagination), fit text blocks would not recalculate their font sizes, appearing either too large or too small.
This occurred because the fit text initialization only ran on the window.load event, which doesn't fire during client-side navigation.
We refactored fit text front end to be an interactivity api first implementation, using an interactivity api init event instead of a window load event.
This commit adds the required PHP changes.

Props jorgefilipecosta, mukesh27, luisherranz.
Fixes #64210.

File:

• trunk/src/wp-includes/block-supports/typography.php (modified) (1 diff)

trunk/src/wp-includes/block-supports/typography.php

@@ -309 +309 @@
     if ( ! empty( $block['attrs']['fitText'] ) && ! is_admin() ) {
         wp_enqueue_script_module( '@wordpress/block-editor/utils/fit-text-frontend' );
+
+        // Add Interactivity API directives for fit text to work with client-side navigation.
+        if ( ! empty( $block_content ) ) {
+            $processor = new WP_HTML_Tag_Processor( $block_content );
+            if ( $processor->next_tag() ) {
+                if ( ! $processor->get_attribute( 'data-wp-interactive' ) ) {
+                    $processor->set_attribute( 'data-wp-interactive', true );
+                }
+                $processor->set_attribute( 'data-wp-context---core-fit-text', 'core/fit-text::{"fontSize":""}' );
+                $processor->set_attribute( 'data-wp-init---core-fit-text', 'core/fit-text::callbacks.init' );
+                $processor->set_attribute( 'data-wp-style--font-size', 'core/fit-text::context.fontSize' );
+                $block_content = $processor->get_updated_html();
+            }
+        }
     }
     if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {