Clean up tag processing and try to initialize state on the server.

WordPress · Aug 2, 2024 · 4c27428 · 4c27428
1 parent c11bfa2
commit 4c27428
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 37 deletions.
diff --git a/packages/block-library/src/accordion-group/index.php b/packages/block-library/src/accordion-group/index.php
@@ -31,16 +31,17 @@ function render_block_core_accordion_group( $attributes, $content ) {
 	}
 
 	$p         = new WP_HTML_Tag_Processor( $content );
-	$autoclose = $attributes['autoclose'];
+	$autoclose = (bool) $attributes['autoclose'];
 
-	while ( $p->next_tag() ) {
-		if ( $p->has_class( 'wp-block-accordion-group' ) ) {
-			$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
-			$p->set_attribute( 'data-wp-context', '{"isOpen":[],"autoclose":"' . $autoclose . '"}' );
-		}
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-group' ) ) ) {
+		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": "' . $autoclose . '" }' );
+
+		// Only modify content if directives have been set.
+		$content = $p->get_updated_html();
 	}
 
-	return $p->get_updated_html();
+	return $content;
 }
 
 /**

diff --git a/packages/block-library/src/accordion-group/view.js b/packages/block-library/src/accordion-group/view.js
@@ -3,24 +3,25 @@
  */
 import { store, getContext } from '@wordpress/interactivity';
 
-store( 'core/accordion', {
+const { state } = store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { isOpen, id } = getContext();
-			return isOpen.includes( id );
+			const { id } = getContext();
+			return state.open.includes( id );
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
-			const { id, isOpen, autoclose } = context;
-			const itemIsOpen = isOpen.includes( id );
+			const { id, autoclose } = context;
+			const itemIsOpen = state.open.includes( id );
+
 			if ( autoclose ) {
-				context.isOpen = itemIsOpen ? [] : [ id ];
+				state.open = itemIsOpen ? [] : [ id ];
 			} else if ( itemIsOpen ) {
-				context.isOpen = isOpen.filter( ( item ) => item !== id );
+				state.open = state.open.filter( ( item ) => item !== id );
 			} else {
-				context.isOpen = [ ...isOpen, id ];
+				state.open.push( id );
 			}
 		},
 	},

diff --git a/packages/block-library/src/accordion-item/index.php b/packages/block-library/src/accordion-item/index.php
@@ -16,41 +16,41 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		return $content;
 	}
 
-	$p         = new WP_HTML_Tag_Processor( $content );
-	$unique_id = wp_unique_id( 'accordion-item-' );
+	$p               = new WP_HTML_Tag_Processor( $content );
+	$unique_id       = wp_unique_id( 'accordion-item-' );
+	$open_by_default = (bool) $attributes['openByDefault'];
 
-	while ( $p->next_tag() ) {
-		if ( $p->has_class( 'wp-block-accordion-item' ) ) {
-            $p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '" }' );
-			$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
-			if ( $attributes['openByDefault'] ) {
-				$p->set_attribute( 'data-wp-init', 'callbacks.open' );
-			}
-		}
-	}
+	$state = wp_interactivity_state( 'core/accordion' );
+	wp_interactivity_state(
+		'core/accordion',
+		array(
+			'open' => array_merge(
+				isset( $state['open'] ) ? $state['open'] : array(),
+				$open_by_default ? array( $unique_id ) : array()
+			),
+		)
+	);
 
-	$content = $p->get_updated_html();
-	$p       = new WP_HTML_Tag_Processor( $content );
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-item' ) ) ) {
+		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '" }' );
+		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
 
-	while ( $p->next_tag() ) {
-		if ( $p->has_class( 'accordion-item__toggle' ) ) {
+		if ( $p->next_tag( array( 'class_name' => 'accordion-item__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );
 			$p->set_attribute( 'aria-controls', $unique_id );
 			$p->set_attribute( 'data-wp-bind--aria-expanded', 'state.isOpen' );
 		}
-	}
 
-	$content = $p->get_updated_html();
-	$p       = new WP_HTML_Tag_Processor( $content );
-
-	while ( $p->next_tag() ) {
-		if ( $p->has_class( 'wp-block-accordion-content' ) ) {
+		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-content' ) ) ) {
 			$p->set_attribute( 'aria-labelledby', $unique_id );
 			$p->set_attribute( 'data-wp-bind--aria-hidden', '!state.isOpen' );
+
+			// Only modify content if all directives have been set.
+			$content = $p->get_updated_html();
 		}
 	}
 
-	return $p->get_updated_html();
+	return $content;
 }
 
 /**