Use data_wp_context helper in core blocks and remove `data-wp-inter…

…active` object (#58943) * Update file block * Update image block * Update navigation block * Update query block * WIP: Update form block * Use boolean instead of string in `$open_by_default` variable * Don't use `data-wp-interactive` object in search block * Remove unnecessary quotes * Adapt query block unit test Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org>
WordPress · Feb 13, 2024 · e5ef537 · e5ef537
1 parent 2d18588
commit e5ef537
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
@@ -53,7 +53,7 @@ static function ( $matches ) {
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
+		$processor->set_attribute( 'data-wp-interactive', 'core/file' );
 		$processor->next_tag( 'object' );
 		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
 		$processor->set_attribute( 'hidden', true );

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -159,7 +159,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$figure_class_names = $p->get_attribute( 'class' );
 	$figure_styles      = $p->get_attribute( 'style' );
 	$p->add_class( 'wp-lightbox-container' );
-	$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );
+	$p->set_attribute( 'data-wp-interactive', 'core/image' );
 	$p->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
@@ -240,7 +240,7 @@ function block_core_image_print_lightbox_overlay() {
 	echo <<<HTML
 		<div 
 			class="wp-lightbox-overlay zoom"
-			data-wp-interactive='{"namespace":"core/image"}'
+			data-wp-interactive="core/image"
 			data-wp-context='{}'
 			data-wp-bind--role="state.roleAttribute"
 			data-wp-bind--aria-label="state.currentImage.ariaLabel"

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -557,19 +557,17 @@ private static function get_nav_element_directives( $is_interactive, $attributes
 			return '';
 		}
 		// When adding to this array be mindful of security concerns.
-		$nav_element_context    = wp_json_encode(
+		$nav_element_context    = data_wp_context(
 			array(
 				'overlayOpenedBy' => array(),
 				'type'            => 'overlay',
 				'roleAttribute'   => '',
 				'ariaLabel'       => __( 'Menu' ),
-			),
-			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
+			)
 		);
 		$nav_element_directives = '
-			data-wp-interactive=\'{"namespace":"core/navigation"}\'
-			data-wp-context=\'' . $nav_element_context . '\'
-		';
+		 data-wp-interactive="core/navigation"'
+		. $nav_element_context;
 
 		/*
 		* When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript
@@ -780,7 +778,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		)
 	) ) {
 		// Add directives to the parent `<li>`.
-		$tags->set_attribute( 'data-wp-interactive', '{ "namespace": "core/navigation" }' );
+		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": {}, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
 		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );

diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
@@ -49,7 +49,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
 			// Add the necessary directives.
-			$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
+			$p->set_attribute( 'data-wp-interactive', 'core/query' );
 			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
 			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			$p->set_attribute( 'data-wp-context', '{}' );

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -47,7 +47,7 @@ function render_block_core_search( $attributes ) {
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 	// This variable is a constant and its value is always false at this moment.
 	// It is defined this way because some values depend on it, in case it changes in the future.
-	$open_by_default = 'false';
+	$open_by_default = false;
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
@@ -179,12 +179,20 @@ function render_block_core_search( $attributes ) {
 	if ( $is_expandable_searchfield ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
+		$form_context         = data_wp_context(
+			array(
+				'isSearchInputVisible' => $open_by_default,
+				'inputId'              => $input_id,
+				'ariaLabelExpanded'    => $aria_label_expanded,
+				'ariaLabelCollapsed'   => $aria_label_collapsed,
+			)
+		);
 		$form_directives      = '
-			data-wp-interactive=\'{ "namespace": "core/search" }\'
-			data-wp-context=\'{ "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" }\'
-			data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
-			data-wp-on--keydown="actions.handleSearchKeydown"
-			data-wp-on--focusout="actions.handleSearchFocusout"
+		 data-wp-interactive=\'"core/search"\''
+		. $form_context .
+		'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
+		 data-wp-on--keydown="actions.handleSearchKeydown"
+		 data-wp-on--focusout="actions.handleSearchFocusout"
 		';
 	}
 

diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php
@@ -86,7 +86,7 @@ public function test_rendering_query_with_enhanced_pagination() {
 		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
 		$this->assertSame( '{}', $p->get_attribute( 'data-wp-context' ) );
 		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
-		$this->assertSame( '{"namespace":"core/query"}', $p->get_attribute( 'data-wp-interactive' ) );
+		$this->assertSame( 'core/query', $p->get_attribute( 'data-wp-interactive' ) );
 
 		$p->next_tag( array( 'class_name' => 'wp-block-post' ) );
 		$this->assertSame( 'post-template-item-' . self::$posts[1], $p->get_attribute( 'data-wp-key' ) );