Categories Block: Add iAPI directive for client-side routing (#64907)

Enable client-side navigation for the Categories block, when used within the Query Loop block. Co-authored-by: ockham <[email protected]> Co-authored-by: gziolo <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: luisherranz <[email protected]> Co-authored-by: dmsnell <[email protected]>
WordPress · Sep 4, 2024 · 04cf579 · 04cf579
1 parent 6accdd3
commit 04cf579
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
@@ -36,6 +36,7 @@
 			"default": true
 		}
 	},
+	"usesContext": [ "enhancedPagination" ],
 	"supports": {
 		"align": true,
 		"html": false,

diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
@@ -9,12 +9,15 @@
  * Renders the `core/categories` block on server.
  *
  * @since 5.0.0
+ * @since 6.7.0 Enable client-side rendering if enhancedPagination context is true.
  *
- * @param array $attributes The block attributes.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
  *
  * @return string Returns the categories list/dropdown markup.
  */
-function render_block_core_categories( $attributes ) {
+function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
@@ -54,6 +57,14 @@ function render_block_core_categories( $attributes ) {
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
+
+		if ( ! empty( $block->context['enhancedPagination'] ) ) {
+			$p = new WP_HTML_Tag_Processor( $items_markup );
+			while ( $p->next_tag( 'a' ) ) {
+				$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			}
+			$items_markup = $p->get_updated_html();
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => "wp-block-categories-{$type}" ) );