Refactor to populate context.isOpen on the server

packages/block-library/src/accordion-group/index.php

@@ -35,7 +35,8 @@ function render_block_core_accordion_group( $attributes, $content ) {
 
 	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 . ' }' );
+		$is_open = wp_json_encode( block_core_accordion_group_item_ids() );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen":' . $is_open . ' }' );
 
 		// Only modify content if directives have been set.
 		$content = $p->get_updated_html();
@@ -44,6 +45,18 @@ function render_block_core_accordion_group( $attributes, $content ) {
 	return $content;
 }
 
+function block_core_accordion_group_item_ids( $id = null ) {
+	static $ids = array();
+	if ( null === $id ) {
+		// Returns the ids and reset them for the next accordion group.
+		$current_ids = $ids;
+		$ids         = array();
+		return $current_ids;
+	}
+	// Adds the id to the current accordion group list.
+	$ids[] = $id;
+}
+
 /**
  * Registers the `core/accordion-group` block on server.
  *

packages/block-library/src/accordion-group/view.js

@@ -6,30 +6,24 @@ import { store, getContext } from '@wordpress/interactivity';
 const { state } = store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { id } = getContext();
-			return state.open.includes( id );
+			const { isOpen, id } = getContext();
+			return isOpen.includes( id );
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
 			const { id, autoclose } = context;
-			const itemIsOpen = state.open.includes( id );
 
 			if ( autoclose ) {
-				state.open = itemIsOpen ? [] : [ id ];
-			} else if ( itemIsOpen ) {
-				state.open = state.open.filter( ( item ) => item !== id );
+				context.isOpen = state.isOpen ? [] : [ id ];
+			} else if ( state.isOpen ) {
+				context.isOpen = context.isOpen.filter(
+					( item ) => item !== id
+				);
 			} else {
-				state.open.push( id );
+				context.isOpen.push( id );
 			}
 		},
 	},
-	callbacks: {
-		open: () => {
-			const context = getContext();
-			const { id } = context;
-			context.isOpen.push( id );
-		},
-	},
 } );

packages/block-library/src/accordion-item/index.php

@@ -16,18 +16,22 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		return $content;
 	}
 
-	$p               = new WP_HTML_Tag_Processor( $content );
-	$unique_id       = wp_unique_id( 'accordion-item-' );
-	$open_by_default = (bool) $attributes['openByDefault'];
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$unique_id = wp_unique_id( 'accordion-item-' );
+
+	// Adds the id to the current accordion group list.
+	if ( $attributes['openByDefault'] ) {
+		// phpcs:ignore Gutenberg.CodeAnalysis.ForbiddenFunctionsAndClasses.ForbiddenFunctionCall
+		gutenberg_block_core_accordion_group_item_ids( $unique_id );
+	}
 
-	$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()
-			),
+			'isOpen' => function () {
+				$context = wp_interactivity_get_context();
+				return in_array( $context['id'], $context['isOpen'], true );
+			},
 		)
 	);