⚛️ Get rid of the <wp-block> wrapper

block-hydration-experiments.php

@@ -92,38 +92,42 @@ function bhe_block_wrapper($block_content, $block, $instance)
 	$block_props = WP_Block_Supports::get_instance()->apply_block_supports();
 	WP_Block_Supports::$block_to_render = $previous_block_to_render;
 
-	$block_wrapper =
+	// Generate all required wrapper attributes.
+	$block_wrapper_attributes =
 		sprintf(
-			'<wp-block ' .
-				'data-wp-block-type="%1$s" ' .
-				'data-wp-block-uses-block-context="%2$s" ' .
-				'data-wp-block-provides-block-context="%3$s" ' .
-				'data-wp-block-attributes="%4$s" ' .
-				'data-wp-block-sourced-attributes="%5$s" ' .
-				'data-wp-block-props="%6$s" ' .
-				'data-wp-block-hydration="%7$s">',
+			'data-wp-block-type="%1$s" ' .
+			'data-wp-block-uses-block-context="%2$s" ' .
+			'data-wp-block-provides-block-context="%3$s" ' .
+			'data-wp-block-attributes="%4$s" ' .
+			'data-wp-block-sourced-attributes="%5$s" ' .
+			'data-wp-block-props="%6$s" ' .
+			'data-wp-block-hydration="%7$s"',
 			esc_attr($block['blockName']),
 			esc_attr(json_encode($block_type->uses_context)),
 			esc_attr(json_encode($block_type->provides_context)),
 			esc_attr(json_encode($attributes)),
 			esc_attr(json_encode($sourced_attributes)),
 			esc_attr(json_encode($block_props)),
 			esc_attr($hydration_technique)
-		) . '%1$s</wp-block>';
-
-	$template_wrapper = '<template class="wp-inner-blocks">%1$s</template>';
-
-	$empty_template = sprintf($template_wrapper, '');
-	$template = sprintf(
-		$template_wrapper,
-		sprintf($block_wrapper, $block_content . $empty_template)
-	);
+		);
 
 	// The block content comes between two line breaks that seem to be included during block
 	// serialization, corresponding to those between the block markup and the block content.
 	//
 	// They need to be removed here; otherwise, the preact hydration fails.
-	return sprintf($block_wrapper, substr($block_content, 1, -1));
+	$block_content = substr($block_content, 1, -1);
+
+	// Append all wp block attributes after the class attribute containing the block class name.
+	// Elements with that class name are supposed to be those with the wrapper attributes.
+	// Note that $class_pattern could not cover some edge cases.
+	//
+	// We could use `WP_HTML_Walker` (see https://github.com/WordPress/gutenberg/pull/42485) in the
+	// future if that PR is finally merged.
+	$class_pattern     = '/class="[\w\s-]*wp-block-[\w-]+[\w\s-]*"/';
+	$class_replacement = '$0 ' . $block_wrapper_attributes;
+	$block_content     = preg_replace( $class_pattern, $class_replacement, $block_content, 1 );
+
+	return $block_content;
 }
 
 add_filter('render_block', 'bhe_block_wrapper', 10, 3);

src/directives/wp-block-context.js

@@ -71,15 +71,14 @@ const withBlockContext = (Comp, { uses }) => {
 
 directive('providesBlockContext', (props) => {
 	const { providesBlockContext: provides, attributes } = props.wpBlock;
-	const [block] = props.children;
 
 	// The property `provides` can be null...
 	if (!provides || !Object.keys(provides).length) return;
 
-	block.props.children = h(
+	props.children = h(
 		BlockContextProvider,
 		{ provides, attributes },
-		block.props.children
+		props.children
 	);
 });
 
@@ -88,6 +87,5 @@ directive('usesBlockContext', (props) => {
 
 	if (!uses.length) return;
 
-	const [block] = props.children;
-	block.type = withBlockContext(block.type, { uses });
+	props.tag = withBlockContext(props.tag, { uses });
 });

src/directives/wp-block.js

@@ -19,7 +19,12 @@ directive('type', (props) => {
 
 	const { Component } = blockViews.get(type);
 
-	props.children = [
-		h(Component, { context, attributes, blockProps, children }),
-	];
+	// The `tag` prop is used as the new component.
+	props.tag = Component;
+
+	// Set component properties.
+	props.context = context;
+	props.attributes = attributes;
+	props.blockProps = blockProps;
+	props.children = children;
 });

src/gutenberg-packages/to-vdom.js

@@ -47,7 +47,7 @@ export default function toVdom(n) {
 	const children = [].map.call(n.childNodes, toVdom).filter(exists);
 
 	// Add inner blocks.
-	if (type === 'wp-block' && innerBlocksFound) {
+	if (wpBlock.type && innerBlocksFound) {
 		wpBlock.innerBlocks = innerBlocksFound;
 		innerBlocksFound = null;