From e7afd86cb4aadccc5b18b814c3b2ee6516e98815 Mon Sep 17 00:00:00 2001 From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com> Date: Mon, 12 Feb 2024 20:46:45 +0100 Subject: [PATCH] Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` 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 Co-authored-by: c4rl0sbr4v0 --- packages/block-library/src/file/index.php | 2 +- packages/block-library/src/image/index.php | 4 ++-- .../block-library/src/navigation/index.php | 12 +++++------ packages/block-library/src/query/index.php | 2 +- packages/block-library/src/search/index.php | 20 +++++++++++++------ phpunit/blocks/render-query-test.php | 2 +- 6 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php index b2e7f86dcc7a3..ba0343ae6b25c 100644 --- 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 index ab22133398c58..0b75bf95a7d4c 100644 --- 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 << 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 `
  • `. - $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 index 1a536dd3dcd98..b6c34eb71d070 100644 --- 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 index 6623a9a8481bc..5688e2871a246 100644 --- 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( '', $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 index a121c490d747c..a68bd2c7adcba 100644 --- 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' ) );