diff --git a/lib/experimental/interactivity-api/class-wp-directive-processor.php b/lib/experimental/interactivity-api/class-wp-directive-processor.php
index cf55a048bb9fa5..bb70068aa9482b 100644
--- a/lib/experimental/interactivity-api/class-wp-directive-processor.php
+++ b/lib/experimental/interactivity-api/class-wp-directive-processor.php
@@ -13,47 +13,42 @@
/**
* This processor is built on top of the HTML Tag Processor and augments its
* capabilities to process the Interactivity API directives.
- *
- * IMPORTANT DISCLAIMER: This code is highly experimental and its only purpose
- * is to provide a way to test the server-side rendering of the Interactivity
- * API. Most of this code will be discarded once the HTML Processor is
- * available. Please restrain from investing unnecessary time and effort trying
- * to improve this code.
*/
class WP_Directive_Processor extends Gutenberg_HTML_Tag_Processor_6_5 {
+ /**
+ * String containing the current root block.
+ *
+ * @var string
+ */
+ public static $root_block = null;
/**
- * An array of root blocks.
+ * Array containing the direct children of interactive blocks.
*
* @var array
*/
- public static $root_block = null;
+ public static $children_of_interactive_block = array();
/**
- * Add a root block to the variable.
+ * Sets the current root block.
*
* @param array $block The block to add.
- *
- * @return void
*/
public static function mark_root_block( $block ) {
self::$root_block = md5( serialize( $block ) );
}
/**
- * Remove a root block to the variable.
- *
- * @return void
+ * Resets the root block.
*/
public static function unmark_root_block() {
self::$root_block = null;
}
/**
- * Check if block is a root block.
+ * Checks if block is a root block.
*
* @param array $block The block to check.
- *
* @return bool True if block is a root block, false otherwise.
*/
public static function is_marked_as_root_block( $block ) {
@@ -61,17 +56,36 @@ public static function is_marked_as_root_block( $block ) {
}
/**
- * Check if a root block has already been defined.
+ * Checks if a root block has already been defined.
*
- * @return bool True if block is a root block, false otherwise.
+ * @return bool True if there is a root block, false otherwise.
*/
public static function has_root_block() {
return isset( self::$root_block );
}
+ /**
+ * Stores a reference to a direct children of an interactive block to be able
+ * to identify it later.
+ *
+ * @param array $block The block to add.
+ */
+ public static function mark_children_of_interactive_block( $block ) {
+ self::$children_of_interactive_block[] = md5( serialize( $block ) );
+ }
/**
- * Find the matching closing tag for an opening tag.
+ * Checks if block is marked as children of an interactive block.
+ *
+ * @param array $block The block to check.
+ * @return bool True if block is a children of an interactive block, false otherwise.
+ */
+ public static function is_marked_as_children_of_interactive_block( $block ) {
+ return in_array( md5( serialize( $block ) ), self::$children_of_interactive_block, true );
+ }
+
+ /**
+ * Finds the matching closing tag for an opening tag.
*
* When called while on an open tag, traverse the HTML until we find the
* matching closing tag, respecting any in-between content, including nested
@@ -111,76 +125,7 @@ public function next_balanced_closer() {
}
/**
- * Traverses the HTML searching for Interactivity API directives and processing
- * them.
- *
- * @param WP_Directive_Processor $tags An instance of the WP_Directive_Processor.
- * @param string $prefix Attribute prefix.
- * @param string[] $directives Directives.
- *
- * @return WP_Directive_Processor The modified instance of the
- * WP_Directive_Processor.
- */
- public function process_rendered_html( $tags, $prefix, $directives ) {
- $context = new WP_Directive_Context();
- $tag_stack = array();
-
- while ( $tags->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
- $tag_name = $tags->get_tag();
-
- // Is this a tag that closes the latest opening tag?
- if ( $tags->is_tag_closer() ) {
- if ( 0 === count( $tag_stack ) ) {
- continue;
- }
-
- list( $latest_opening_tag_name, $attributes ) = end( $tag_stack );
- if ( $latest_opening_tag_name === $tag_name ) {
- array_pop( $tag_stack );
-
- // If the matching opening tag didn't have any directives, we move on.
- if ( 0 === count( $attributes ) ) {
- continue;
- }
- }
- } else {
- $attributes = array();
- foreach ( $tags->get_attribute_names_with_prefix( $prefix ) as $name ) {
- /*
- * Removes the part after the double hyphen before looking for
- * the directive processor inside `$directives`, e.g., "wp-bind"
- * from "wp-bind--src" and "wp-context" from "wp-context" etc...
- */
- list( $type ) = WP_Directive_Processor::parse_attribute_name( $name );
- if ( array_key_exists( $type, $directives ) ) {
- $attributes[] = $type;
- }
- }
-
- /*
- * If this is an open tag, and if it either has directives, or if
- * we're inside a tag that does, take note of this tag and its
- * directives so we can call its directive processor once we
- * encounter the matching closing tag.
- */
- if (
- ! WP_Directive_Processor::is_html_void_element( $tags->get_tag() ) &&
- ( 0 !== count( $attributes ) || 0 !== count( $tag_stack ) )
- ) {
- $tag_stack[] = array( $tag_name, $attributes );
- }
- }
-
- foreach ( $attributes as $attribute ) {
- call_user_func( $directives[ $attribute ], $tags, $context );
- }
- }
-
- return $tags;
- }
-
- /**
- * Return the content between two balanced tags.
+ * Returns the content between two balanced tags.
*
* When called on an opening tag, return the HTML content found between that
* opening tag and its matching closing tag.
@@ -206,14 +151,13 @@ public function get_inner_html() {
}
/**
- * Set the content between two balanced tags.
+ * Sets the content between two balanced tags.
*
* When called on an opening tag, set the HTML content found between that
* opening tag and its matching closing tag.
*
* @param string $new_html The string to replace the content between the
* matching tags with.
- *
* @return bool Whether the content was successfully replaced.
*/
public function set_inner_html( $new_html ) {
@@ -237,7 +181,7 @@ public function set_inner_html( $new_html ) {
}
/**
- * Return a pair of bookmarks for the current opening tag and the matching
+ * Returns a pair of bookmarks for the current opening tag and the matching
* closing tag.
*
* @return array|false A pair of bookmarks, or false if there's no matching
@@ -267,12 +211,12 @@ public function get_balanced_tag_bookmarks() {
}
/**
- * Whether a given HTML element is void (e.g. ).
+ * Checks whether a given HTML element is void (e.g. ).
+ *
+ * @see https://html.spec.whatwg.org/#elements-2
*
* @param string $tag_name The element in question.
* @return bool True if the element is void.
- *
- * @see https://html.spec.whatwg.org/#elements-2
*/
public static function is_html_void_element( $tag_name ) {
switch ( $tag_name ) {
@@ -297,7 +241,7 @@ public static function is_html_void_element( $tag_name ) {
}
/**
- * Extract and return the directive type and the the part after the double
+ * Extracts and return the directive type and the the part after the double
* hyphen from an attribute name (if present), in an array format.
*
* Examples:
@@ -307,7 +251,7 @@ public static function is_html_void_element( $tag_name ) {
* 'wp-thing--and--thang' => array( 'wp-thing', 'and--thang' )
*
* @param string $name The attribute name.
- * @return array The resulting array
+ * @return array The resulting array.
*/
public static function parse_attribute_name( $name ) {
return explode( '--', $name, 2 );
diff --git a/lib/experimental/interactivity-api/directive-processing.php b/lib/experimental/interactivity-api/directive-processing.php
index 064fc8ea62cbb2..075d31d577634c 100644
--- a/lib/experimental/interactivity-api/directive-processing.php
+++ b/lib/experimental/interactivity-api/directive-processing.php
@@ -1,16 +1,16 @@
'gutenberg_interactivity_process_wp_bind',
- 'data-wp-context' => 'gutenberg_interactivity_process_wp_context',
- 'data-wp-class' => 'gutenberg_interactivity_process_wp_class',
- 'data-wp-style' => 'gutenberg_interactivity_process_wp_style',
- 'data-wp-text' => 'gutenberg_interactivity_process_wp_text',
- );
- $tags = new WP_Directive_Processor( $block_content );
- $tags = $tags->process_rendered_html( $tags, 'data-wp-', $directives );
- return $tags->get_updated_html();
+ // Parse our own block delimiters for interactive and non-interactive blocks.
+ $parsed_blocks = parse_blocks( $block_content );
+ $context = new WP_Directive_Context();
+ $processed_content = '';
+
+ foreach ( $parsed_blocks as $parsed_block ) {
+ if ( 'core/interactivity-wrapper' === $parsed_block['blockName'] ) {
+ $processed_content .= gutenberg_process_interactive_block( $parsed_block, $context );
+ } elseif ( 'core/non-interactivity-wrapper' === $parsed_block['blockName'] ) {
+ $processed_content .= gutenberg_process_non_interactive_block( $parsed_block, $context );
+ } else {
+ $processed_content .= $parsed_block['innerHTML'];
+ }
+ }
+ return $processed_content;
+ }
+
+ return $block_content;
+}
+add_filter( 'render_block', 'gutenberg_process_directives_in_root_blocks', 20, 2 );
+/**
+ * Marks the block as a children of an interactive block.
+ *
+ * @param array $parsed_block The parsed block.
+ * @param array $source_block The source block.
+ * @param WP_Block $parent_block The parent block.
+ */
+function gutenberg_mark_chidren_of_interactive_block( $parsed_block, $source_block, $parent_block ) {
+ if (
+ isset( $parent_block ) &&
+ isset( $parent_block->block_type->supports['interactivity'] ) &&
+ $parent_block->block_type->supports['interactivity']
+ ) {
+ WP_Directive_Processor::mark_children_of_interactive_block( $source_block );
}
+ return $parsed_block;
+}
+add_filter( 'render_block_data', 'gutenberg_mark_chidren_of_interactive_block', 100, 3 );
+/**
+ * Adds a comment delimiter to mark if the block is interactive or not.
+ *
+ * @param string $block_content The block content.
+ * @param array $block The full block, including name and attributes.
+ * @param WP_Block $block_instance The block instance.
+ */
+function gutenberg_mark_block_interactivity( $block_content, $block, $block_instance ) {
+ if (
+ isset( $block_instance->block_type->supports['interactivity'] ) &&
+ $block_instance->block_type->supports['interactivity']
+ ) {
+ // Wraps the interactive block with a comment delimiter to be able to
+ // process it later.
+ return get_comment_delimited_block_content(
+ 'core/interactivity-wrapper',
+ array(),
+ $block_content
+ );
+ } elseif ( WP_Directive_Processor::is_marked_as_children_of_interactive_block( $block ) ) {
+ // Wraps the non-interactive block with a comment delimiter to be able to
+ // skip it later.
+ return get_comment_delimited_block_content(
+ 'core/non-interactivity-wrapper',
+ array(),
+ $block_content
+ );
+ }
return $block_content;
}
-add_filter( 'render_block', 'gutenberg_process_directives_in_root_blocks', 10, 2 );
+add_filter( 'render_block', 'gutenberg_mark_block_interactivity', 10, 3 );
+
+/**
+ * Traverses the HTML of an interactive block, searching for Interactivity API
+ * directives and processing them. For the inner blocks, it calls the
+ * corresponding function depending on the wrapper type.
+ *
+ * @param array $interactive_block The interactive block to process.
+ * @param WP_Directive_Context $context The context to use when processing.
+ *
+ * @return string The processed HTML.
+ */
+function gutenberg_process_interactive_block( $interactive_block, $context ) {
+ $block_index = 0;
+ $content = '';
+ $interactive_inner_blocks = array();
+
+ foreach ( $interactive_block['innerContent'] as $inner_content ) {
+ if ( is_string( $inner_content ) ) {
+ $content .= $inner_content;
+ } else {
+ // This is an inner block. It may be an interactive block or a
+ // non-interactive block.
+ $content .= '';
+ $interactive_inner_blocks[] = $interactive_block['innerBlocks'][ $block_index++ ];
+ }
+ }
+
+ return gutenberg_process_interactive_html( $content, $context, $interactive_inner_blocks );
+}
+
+/**
+ * Returns the HTML of a non-interactive block without processing the
+ * directives. For the inner blocks, it calls the corresponding function
+ * depending on the wrapper type.
+ *
+ * @param array $non_interactive_block The non-interactive block to process.
+ * @param WP_Directive_Context $context The context to use when processing.
+ *
+ * @return string The processed HTML.
+ */
+function gutenberg_process_non_interactive_block( $non_interactive_block, $context ) {
+ $block_index = 0;
+ $content = '';
+ foreach ( $non_interactive_block['innerContent'] as $inner_content ) {
+ if ( is_string( $inner_content ) ) {
+ // This content belongs to a non interactive block and therefore it cannot
+ // contain directives. We add the HTML directly to the final output.
+ $content .= $inner_content;
+ } else {
+ // This is an inner block. It may be an interactive block or a
+ // non-interactive block.
+ $inner_block = $non_interactive_block['innerBlocks'][ $block_index++ ];
+
+ if ( 'core/interactivity-wrapper' === $inner_block['blockName'] ) {
+ $content .= gutenberg_process_interactive_block( $inner_block, $context );
+ } elseif ( 'core/non-interactivity-wrapper' === $inner_block['blockName'] ) {
+ $content .= gutenberg_process_non_interactive_block( $inner_block, $context );
+ }
+ }
+ }
+ return $content;
+}
+
+/**
+ * Processes interactive HTML by applying directives to the HTML tags.
+ *
+ * It uses the WP_Directive_Processor class to parse the HTML and apply the
+ * directives. If a tag contains a 'WP-INNER-BLOCKS' string and there are inner
+ * blocks to process, the function processes these inner blocks and replaces the
+ * 'WP-INNER-BLOCKS' tag in the HTML with those blocks.
+ *
+ * @param string $html The HTML to process.
+ * @param mixed $context The context to use when processing.
+ * @param array $inner_blocks The inner blocks to process.
+ *
+ * @return string The processed HTML.
+ */
+function gutenberg_process_interactive_html( $html, $context, $inner_blocks = array() ) {
+ static $directives = array(
+ 'data-wp-context' => 'gutenberg_interactivity_process_wp_context',
+ 'data-wp-bind' => 'gutenberg_interactivity_process_wp_bind',
+ 'data-wp-class' => 'gutenberg_interactivity_process_wp_class',
+ 'data-wp-style' => 'gutenberg_interactivity_process_wp_style',
+ 'data-wp-text' => 'gutenberg_interactivity_process_wp_text',
+ );
+
+ $tags = new WP_Directive_Processor( $html );
+ $prefix = 'data-wp-';
+ $tag_stack = array();
+ $inner_processed_blocks = array();
+ $inner_blocks_index = 0;
+ while ( $tags->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+ $tag_name = $tags->get_tag();
+
+ // Processes the inner blocks.
+ if ( str_contains( $tag_name, 'WP-INNER-BLOCKS' ) && ! empty( $inner_blocks ) && ! $tags->is_tag_closer() ) {
+ if ( 'core/interactivity-wrapper' === $inner_blocks[ $inner_blocks_index ]['blockName'] ) {
+ $inner_processed_blocks[ strtolower( $tag_name ) ] = gutenberg_process_interactive_block( $inner_blocks[ $inner_blocks_index++ ], $context );
+ } elseif ( 'core/non-interactivity-wrapper' === $inner_blocks[ $inner_blocks_index ]['blockName'] ) {
+ $inner_processed_blocks[ strtolower( $tag_name ) ] = gutenberg_process_non_interactive_block( $inner_blocks[ $inner_blocks_index++ ], $context );
+ }
+ }
+ if ( $tags->is_tag_closer() ) {
+ if ( 0 === count( $tag_stack ) ) {
+ continue;
+ }
+ list( $latest_opening_tag_name, $attributes ) = end( $tag_stack );
+ if ( $latest_opening_tag_name === $tag_name ) {
+ array_pop( $tag_stack );
+ // If the matching opening tag didn't have any directives, we move on.
+ if ( 0 === count( $attributes ) ) {
+ continue;
+ }
+ }
+ } else {
+ $attributes = array();
+ foreach ( $tags->get_attribute_names_with_prefix( $prefix ) as $name ) {
+ /*
+ * Removes the part after the double hyphen before looking for
+ * the directive processor inside `$directives`, e.g., "wp-bind"
+ * from "wp-bind--src" and "wp-context" from "wp-context" etc...
+ */
+ list( $type ) = $tags::parse_attribute_name( $name );
+ if ( array_key_exists( $type, $directives ) ) {
+ $attributes[] = $type;
+ }
+ }
+
+ /*
+ * If this is an open tag, and if it either has directives, or if
+ * we're inside a tag that does, take note of this tag and its
+ * directives so we can call its directive processor once we
+ * encounter the matching closing tag.
+ */
+ if (
+ ! $tags::is_html_void_element( $tag_name ) &&
+ ( 0 !== count( $attributes ) || 0 !== count( $tag_stack ) )
+ ) {
+ $tag_stack[] = array( $tag_name, $attributes );
+ }
+ }
+
+ // Extract all directive names. They'll be used later on.
+ $directive_names = array_keys( $directives );
+ $directive_names_rev = array_reverse( $directive_names );
+
+ /*
+ * Sort attributes by the order they appear in the `$directives`
+ * argument, considering it as the priority order in which
+ * directives should be processed. Note that the order is reversed
+ * for tag closers.
+ */
+ $sorted_attrs = array_intersect(
+ $tags->is_tag_closer()
+ ? $directive_names_rev
+ : $directive_names,
+ $attributes
+ );
+
+ foreach ( $sorted_attrs as $attribute ) {
+ call_user_func( $directives[ $attribute ], $tags, $context );
+ }
+ }
+
+ $processed_html = $tags->get_updated_html();
+
+ // Replaces the inner block tags with the content of each inner block
+ // processed.
+ if ( ! empty( $inner_processed_blocks ) ) {
+ foreach ( $inner_processed_blocks as $inner_block_tag => $inner_block_content ) {
+ if ( str_contains( $processed_html, $inner_block_tag ) ) {
+ $processed_html = str_replace( '<' . $inner_block_tag . '>', $inner_block_content, $processed_html );
+ }
+ }
+ }
+ return $processed_html;
+}
/**
- * Resolve the reference using the store and the context from the provided path.
+ * Resolves the reference using the store and the context from the provided
+ * path.
*
* @param string $path Path.
* @param array $context Context data.
@@ -71,15 +304,14 @@ function gutenberg_interactivity_evaluate_reference( $path, array $context = arr
);
/*
- * Check first if the directive path is preceded by a negator operator (!),
+ * Checks first if the directive path is preceded by a negator operator (!),
* indicating that the value obtained from the Interactivity Store (or the
* passed context) using the subsequent path should be negated.
*/
$should_negate_value = '!' === $path[0];
-
- $path = $should_negate_value ? substr( $path, 1 ) : $path;
- $path_segments = explode( '.', $path );
- $current = $store;
+ $path = $should_negate_value ? substr( $path, 1 ) : $path;
+ $path_segments = explode( '.', $path );
+ $current = $store;
foreach ( $path_segments as $p ) {
if ( isset( $current[ $p ] ) ) {
$current = $current[ $p ];
@@ -89,7 +321,7 @@ function gutenberg_interactivity_evaluate_reference( $path, array $context = arr
}
/*
- * Check if $current is an anonymous function or an arrow function, and if
+ * Checks if $current is an anonymous function or an arrow function, and if
* so, call it passing the store. Other types of callables are ignored on
* purpose, as arbitrary strings or arrays could be wrongly evaluated as
* "callables".
@@ -100,6 +332,6 @@ function gutenberg_interactivity_evaluate_reference( $path, array $context = arr
$current = call_user_func( $current, $store );
}
- // Return the opposite if it has a negator operator (!).
+ // Returns the opposite if it has a negator operator (!).
return $should_negate_value ? ! $current : $current;
}
diff --git a/lib/experimental/interactivity-api/directives/wp-style.php b/lib/experimental/interactivity-api/directives/wp-style.php
index 9c37f9082c2c0b..e5d7b269ace7cf 100644
--- a/lib/experimental/interactivity-api/directives/wp-style.php
+++ b/lib/experimental/interactivity-api/directives/wp-style.php
@@ -28,7 +28,7 @@ function gutenberg_interactivity_process_wp_style( $tags, $context ) {
$expr = $tags->get_attribute( $attr );
$style_value = gutenberg_interactivity_evaluate_reference( $expr, $context->get_context() );
if ( $style_value ) {
- $style_attr = $tags->get_attribute( 'style' );
+ $style_attr = $tags->get_attribute( 'style' ) ?? '';
$style_attr = gutenberg_interactivity_set_style( $style_attr, $style_name, $style_value );
$tags->set_attribute( 'style', $style_attr );
} else {
diff --git a/phpunit/experimental/interactivity-api/directive-processing-test.php b/phpunit/experimental/interactivity-api/directive-processing-test.php
index 46ef0284df15d9..99218f69a8fb79 100644
--- a/phpunit/experimental/interactivity-api/directive-processing-test.php
+++ b/phpunit/experimental/interactivity-api/directive-processing-test.php
@@ -4,81 +4,97 @@
*
* @package Gutenberg
* @subpackage Interactivity API
- *
- * @phpcs:disable Generic.Files.OneObjectStructurePerFile.MultipleFound
*/
+class Tests_Process_Directives extends WP_UnitTestCase {
+ public function set_up() {
+ parent::set_up();
-class Helper_Class {
- // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
- public function process_foo_test( $tags, $context ) {
- }
-
- public function increment( $store ) {
- return $store['state']['count'] + $store['context']['count'];
- }
-
- public static function static_increment( $store ) {
- return $store['state']['count'] + $store['context']['count'];
- }
-}
+ register_block_type(
+ 'test/context-level-1',
+ array(
+ 'render_callback' => function ( $attributes, $content ) {
+ return '