Support className and style blockProps on block wrapper

block-hydration-experiments.php

@@ -50,19 +50,28 @@ function bhe_block_wrapper( $block_content, $block, $instance ) {
 		}
 	}
 
+	$previous_block_to_render = WP_Block_Supports::$block_to_render;
+	// TODO: The following is a bit hacky. If we stick with this technique, we might
+	// want to change apply_block_supports() to accepts a block as its argument.
+	WP_Block_Supports::$block_to_render = $block;
+	$block_supports_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
+	WP_Block_Supports::$block_to_render = $previous_block_to_render;
+
 	$block_wrapper = sprintf(
 		'<gutenberg-interactive-block ' .
 		'data-gutenberg-block-type="%1$s" ' .
 		'data-gutenberg-uses-block-context="%2$s" ' .
 		'data-gutenberg-provides-block-context="%3$s" ' .
 		'data-gutenberg-attributes="%4$s" ' .
 		'data-gutenberg-sourced-attributes="%5$s" ' .
+		'data-gutenberg-block-props="%6$s" ' .
 		'data-gutenberg-hydrate="idle">',
 		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( $sourced_attributes ) ),
+		esc_attr( json_encode( $block_supports_attributes ) )
 	) . '%1$s</gutenberg-interactive-block>';
 
 	$template_wrapper = '<template class="gutenberg-inner-blocks">%1$s</template>';

src/blocks/block-hydration-experiments-parent/block.json

@@ -25,7 +25,8 @@
 			"text": true
 		},
 		"typography": {
-			"fontSize": true
+			"fontSize": true,
+			"__experimentalFontWeight": true
 		},
 		"html": true
 	},

src/blocks/block-hydration-experiments-parent/frontend/index.js

@@ -5,16 +5,26 @@ import Button from '../shared/button';
 import Title from '../shared/title';
 
 const Frontend = ({
-	blockProps,
+	blockProps: {
+		className,
+		style: { fontWeight, ...otherStyle },
+	},
 	attributes: { counter: initialCounter, message },
 	children,
 }) => {
 	const [show, setShow] = useState(true);
 	const [counter, setCounter] = useState(initialCounter);
+
 	return (
 		<Counter.Provider value={counter}>
 			<Theme.Provider value="cool theme">
-				<div {...blockProps}>
+				<div
+					className={`${className} ${show ? 'show' : 'hide'}`}
+					style={{
+						...otherStyle,
+						fontWeight: show ? 1000 : fontWeight,
+					}}
+				>
 					<Title message={message} />
 					<Button handler={() => setShow(!show)} />
 					<button onClick={() => setCounter(counter + 1)}>

src/gutenberg-packages/frontend.js

@@ -86,10 +86,13 @@ class GutenbergBlock extends HTMLElement {
 			// Get the block type, block props, inner blocks, frontend component and
 			// options.
 			const blockType = this.getAttribute('data-gutenberg-block-type');
-			const blockProps = {
-				className: this.children[0].className,
-				style: this.children[0].style,
-			};
+			const { class: className, style: styleString } = JSON.parse(
+				this.getAttribute('data-gutenberg-block-props')
+			);
+
+			const temporaryElement = document.createElement('div');
+			temporaryElement.style.cssText = styleString;
+
 			const innerBlocks = this.querySelector('gutenberg-inner-blocks');
 			const { Component, options } = blockTypes.get(blockType);
 
@@ -137,7 +140,10 @@ class GutenbergBlock extends HTMLElement {
 					<Wrappers wrappers={Providers}>
 						<Component
 							attributes={attributes}
-							blockProps={blockProps}
+							blockProps={{
+								className,
+								style: temporaryElement.style,
+							}}
 							context={blockContext}
 						>
 							{/* Update the value each time one of the React Contexts changes */}