instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_interactive_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { // When exiting tags, it removes the last namespace from the stack. if ( 'exit' === $mode ) { array_pop( $this->namespace_stack ); return; } // Tries to decode the `data-wp-interactive` attribute value. $attribute_value = $p->get_attribute( 'data-wp-interactive' ); /* * Pushes the newly defined namespace or the current one if the * `data-wp-interactive` definition was invalid or does not contain a * namespace. It does so because the function pops out the current namespace * from the stack whenever it finds a `data-wp-interactive`'s closing tag, * independently of whether the previous `data-wp-interactive` definition * contained a valid namespace. */ $new_namespace = null; if ( is_string( $attribute_value ) && ! empty( $attribute_value ) ) { $decoded_json = json_decode( $attribute_value, true ); if ( is_array( $decoded_json ) ) { $new_namespace = $decoded_json['namespace'] ?? null; } else { $new_namespace = $attribute_value; } } $this->namespace_stack[] = ( $new_namespace && 1 === preg_match( '/^([\w\-_\/]+)/', $new_namespace ) ) ? $new_namespace : end( $this->namespace_stack ); } /** * Processes the `data-wp-context` directive. * * It adds the context defined in the directive value to the stack so that * it's available for the nested interactivity elements. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_context_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { // When exiting tags, it removes the last context from the stack. if ( 'exit' === $mode ) { array_pop( $this->context_stack ); return; } $attribute_value = $p->get_attribute( 'data-wp-context' ); $namespace_value = end( $this->namespace_stack ); // Separates the namespace from the context JSON object. list( $namespace_value, $decoded_json ) = is_string( $attribute_value ) && ! empty( $attribute_value ) ? $this->extract_directive_value( $attribute_value, $namespace_value ) : array( $namespace_value, null ); /* * If there is a namespace, it adds a new context to the stack merging the * previous context with the new one. */ if ( is_string( $namespace_value ) ) { $this->context_stack[] = array_replace_recursive( end( $this->context_stack ) !== false ? end( $this->context_stack ) : array(), array( $namespace_value => is_array( $decoded_json ) ? $decoded_json : array() ) ); } else { /* * If there is no namespace, it pushes the current context to the stack. * It needs to do so because the function pops out the current context * from the stack whenever it finds a `data-wp-context`'s closing tag. */ $this->context_stack[] = end( $this->context_stack ); } } /** * Processes the `data-wp-bind` directive. * * It updates or removes the bound attributes based on the evaluation of its * associated reference. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_bind_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { if ( 'enter' === $mode ) { $all_bind_directives = $p->get_attribute_names_with_prefix( 'data-wp-bind--' ); foreach ( $all_bind_directives as $attribute_name ) { list( , $bound_attribute ) = $this->extract_prefix_and_suffix( $attribute_name ); if ( empty( $bound_attribute ) ) { return; } $attribute_value = $p->get_attribute( $attribute_name ); $result = $this->evaluate( $attribute_value ); if ( null !== $result && ( false !== $result || ( strlen( $bound_attribute ) > 5 && '-' === $bound_attribute[4] ) ) ) { /* * If the result of the evaluation is a boolean and the attribute is * `aria-` or `data-, convert it to a string "true" or "false". It * follows the exact same logic as Preact because it needs to * replicate what Preact will later do in the client: * https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136 */ if ( is_bool( $result ) && ( strlen( $bound_attribute ) > 5 && '-' === $bound_attribute[4] ) ) { $result = $result ? 'true' : 'false'; } $p->set_attribute( $bound_attribute, $result ); } else { $p->remove_attribute( $bound_attribute ); } } } } /** * Processes the `data-wp-class` directive. * * It adds or removes CSS classes in the current HTML element based on the * evaluation of its associated references. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_class_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { if ( 'enter' === $mode ) { $all_class_directives = $p->get_attribute_names_with_prefix( 'data-wp-class--' ); foreach ( $all_class_directives as $attribute_name ) { list( , $class_name ) = $this->extract_prefix_and_suffix( $attribute_name ); if ( empty( $class_name ) ) { return; } $attribute_value = $p->get_attribute( $attribute_name ); $result = $this->evaluate( $attribute_value ); if ( $result ) { $p->add_class( $class_name ); } else { $p->remove_class( $class_name ); } } } } /** * Processes the `data-wp-style` directive. * * It updates the style attribute value of the current HTML element based on * the evaluation of its associated references. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_style_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { if ( 'enter' === $mode ) { $all_style_attributes = $p->get_attribute_names_with_prefix( 'data-wp-style--' ); foreach ( $all_style_attributes as $attribute_name ) { list( , $style_property ) = $this->extract_prefix_and_suffix( $attribute_name ); if ( empty( $style_property ) ) { continue; } $directive_attribute_value = $p->get_attribute( $attribute_name ); $style_property_value = $this->evaluate( $directive_attribute_value ); $style_attribute_value = $p->get_attribute( 'style' ); $style_attribute_value = ( $style_attribute_value && ! is_bool( $style_attribute_value ) ) ? $style_attribute_value : ''; /* * Checks first if the style property is not falsy and the style * attribute value is not empty because if it is, it doesn't need to * update the attribute value. */ if ( $style_property_value || $style_attribute_value ) { $style_attribute_value = $this->merge_style_property( $style_attribute_value, $style_property, $style_property_value ); /* * If the style attribute value is not empty, it sets it. Otherwise, * it removes it. */ if ( ! empty( $style_attribute_value ) ) { $p->set_attribute( 'style', $style_attribute_value ); } else { $p->remove_attribute( 'style' ); } } } } } /** * Merges an individual style property in the `style` attribute of an HTML * element, updating or removing the property when necessary. * * If a property is modified, the old one is removed and the new one is added * at the end of the list. * * @since 6.5.0 * * Example: * * merge_style_property( 'color:green;', 'color', 'red' ) => 'color:red;' * merge_style_property( 'background:green;', 'color', 'red' ) => 'background:green;color:red;' * merge_style_property( 'color:green;', 'color', null ) => '' * * @param string $style_attribute_value The current style attribute value. * @param string $style_property_name The style property name to set. * @param string|false|null $style_property_value The value to set for the style property. With false, null or an * empty string, it removes the style property. * @return string The new style attribute value after the specified property has been added, updated or removed. */ private function merge_style_property( string $style_attribute_value, string $style_property_name, $style_property_value ): string { $style_assignments = explode( ';', $style_attribute_value ); $result = array(); $style_property_value = ! empty( $style_property_value ) ? rtrim( trim( $style_property_value ), ';' ) : null; $new_style_property = $style_property_value ? $style_property_name . ':' . $style_property_value . ';' : ''; // Generates an array with all the properties but the modified one. foreach ( $style_assignments as $style_assignment ) { if ( empty( trim( $style_assignment ) ) ) { continue; } list( $name, $value ) = explode( ':', $style_assignment ); if ( trim( $name ) !== $style_property_name ) { $result[] = trim( $name ) . ':' . trim( $value ) . ';'; } } // Adds the new/modified property at the end of the list. $result[] = $new_style_property; return implode( '', $result ); } /** * Processes the `data-wp-text` directive. * * It updates the inner content of the current HTML element based on the * evaluation of its associated reference. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_text_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { if ( 'enter' === $mode ) { $attribute_value = $p->get_attribute( 'data-wp-text' ); $result = $this->evaluate( $attribute_value ); /* * Follows the same logic as Preact in the client and only changes the * content if the value is a string or a number. Otherwise, it removes the * content. */ if ( is_string( $result ) || is_numeric( $result ) ) { $p->set_content_between_balanced_tags( esc_html( $result ) ); } else { $p->set_content_between_balanced_tags( '' ); } } } /** * Returns the CSS styles for animating the top loading bar in the router. * * @since 6.5.0 * * @return string The CSS styles for the router's top loading bar animation. */ private function get_router_animation_styles(): string { return <<print_router_markup(); } /** * Outputs markup for the @wordpress/interactivity-router script module. * * This method prints a div element representing a loading bar visible during * navigation. * * @since 6.7.0 */ public function print_router_markup() { echo << HTML; } /** * Processes the `data-wp-router-region` directive. * * It renders in the footer a set of HTML elements to notify users about * client-side navigations. More concretely, the elements added are 1) a * top loading bar to visually inform that a navigation is in progress * and 2) an `aria-live` region for accessible navigation announcements. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. */ private function data_wp_router_region_processor( WP_Interactivity_API_Directives_Processor $p, string $mode ) { if ( 'enter' === $mode && ! $this->has_processed_router_region ) { $this->has_processed_router_region = true; // Enqueues as an inline style. wp_register_style( 'wp-interactivity-router-animations', false ); wp_add_inline_style( 'wp-interactivity-router-animations', $this->get_router_animation_styles() ); wp_enqueue_style( 'wp-interactivity-router-animations' ); // Adds the necessary markup to the footer. add_action( 'wp_footer', array( $this, 'print_router_markup' ) ); } } /** * Processes the `data-wp-each` directive. * * This directive gets an array passed as reference and iterates over it * generating new content for each item based on the inner markup of the * `template` tag. * * @since 6.5.0 * * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance. * @param string $mode Whether the processing is entering or exiting the tag. * @param array $tag_stack The reference to the tag stack. */ private function data_wp_each_processor( WP_Interactivity_API_Directives_Processor $p, string $mode, array &$tag_stack ) { if ( 'enter' === $mode && 'TEMPLATE' === $p->get_tag() ) { $attribute_name = $p->get_attribute_names_with_prefix( 'data-wp-each' )[0]; $extracted_suffix = $this->extract_prefix_and_suffix( $attribute_name ); $item_name = isset( $extracted_suffix[1] ) ? $this->kebab_to_camel_case( $extracted_suffix[1] ) : 'item'; $attribute_value = $p->get_attribute( $attribute_name ); $result = $this->evaluate( $attribute_value ); // Gets the content between the template tags and leaves the cursor in the closer tag. $inner_content = $p->get_content_between_balanced_template_tags(); // Checks if there is a manual server-side directive processing. $template_end = 'data-wp-each: template end'; $p->set_bookmark( $template_end ); $p->next_tag(); $manual_sdp = $p->get_attribute( 'data-wp-each-child' ); $p->seek( $template_end ); // Rewinds to the template closer tag. $p->release_bookmark( $template_end ); /* * It doesn't process in these situations: * - Manual server-side directive processing. * - Empty or non-array values. * - Associative arrays because those are deserialized as objects in JS. * - Templates that contain top-level texts because those texts can't be * identified and removed in the client. */ if ( $manual_sdp || empty( $result ) || ! is_array( $result ) || ! array_is_list( $result ) || ! str_starts_with( trim( $inner_content ), '<' ) || ! str_ends_with( trim( $inner_content ), '>' ) ) { array_pop( $tag_stack ); return; } // Extracts the namespace from the directive attribute value. $namespace_value = end( $this->namespace_stack ); list( $namespace_value ) = is_string( $attribute_value ) && ! empty( $attribute_value ) ? $this->extract_directive_value( $attribute_value, $namespace_value ) : array( $namespace_value, null ); // Processes the inner content for each item of the array. $processed_content = ''; foreach ( $result as $item ) { // Creates a new context that includes the current item of the array. $this->context_stack[] = array_replace_recursive( end( $this->context_stack ) !== false ? end( $this->context_stack ) : array(), array( $namespace_value => array( $item_name => $item ) ) ); // Processes the inner content with the new context. $processed_item = $this->_process_directives( $inner_content ); if ( null === $processed_item ) { // If the HTML is unbalanced, stop processing it. array_pop( $this->context_stack ); return; } // Adds the `data-wp-each-child` to each top-level tag. $i = new WP_Interactivity_API_Directives_Processor( $processed_item ); while ( $i->next_tag() ) { $i->set_attribute( 'data-wp-each-child', true ); $i->next_balanced_tag_closer_tag(); } $processed_content .= $i->get_updated_html(); // Removes the current context from the stack. array_pop( $this->context_stack ); } // Appends the processed content after the tag closer of the template. $p->append_content_after_template_tag_closer( $processed_content ); // Pops the last tag because it skipped the closing tag of the template tag. array_pop( $tag_stack ); } } }