From 85eb57cb16d6d023ed46fe7aac247a831ccb74fb Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Mon, 4 Jul 2022 21:13:54 +0200 Subject: [PATCH 1/5] Support className and style blockProps on block wrapper --- block-hydration-experiments.php | 11 ++++++++++- .../frontend/index.js | 8 ++++++-- src/gutenberg-packages/frontend.js | 10 +++++----- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/block-hydration-experiments.php b/block-hydration-experiments.php index 4ee9f5af..472cc12f 100644 --- a/block-hydration-experiments.php +++ b/block-hydration-experiments.php @@ -50,6 +50,13 @@ 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( '', 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'; $template_wrapper = ''; diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js index 1ab56476..1c9c9f83 100644 --- a/src/blocks/block-hydration-experiments-parent/frontend/index.js +++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js @@ -3,13 +3,17 @@ import Button from '../shared/button'; import Title from '../shared/title'; const Frontend = ( - { blockProps, attributes: { counter: initialCounter, message }, children }, + { + blockProps: { className }, + attributes: { counter: initialCounter, message }, + children, + }, ) => { const [ show, setShow ] = useState( false ); const [ counter, setCounter ] = useState( initialCounter ); return ( -
+
<Button handler={() => setShow( !show )} /> <button onClick={() => setCounter( counter + 1 )}>{counter}</button> diff --git a/src/gutenberg-packages/frontend.js b/src/gutenberg-packages/frontend.js index f2b19d2d..ff43eed1 100644 --- a/src/gutenberg-packages/frontend.js +++ b/src/gutenberg-packages/frontend.js @@ -76,10 +76,10 @@ class GutenbergBlock extends HTMLElement { const context = pickKeys( event.detail.context, usesContext ); const blockType = this.getAttribute( 'data-gutenberg-block-type' ); - const blockProps = { - className: this.children[0].className, - style: this.children[0].style, - }; + const blockProps = JSON.parse( + this.getAttribute( 'data-gutenberg-block-props' ), + ); + const { class: className, style } = blockProps; const innerBlocks = this.querySelector( 'template.gutenberg-inner-blocks', @@ -92,7 +92,7 @@ class GutenbergBlock extends HTMLElement { <EnvContext.Provider value='frontend'> <Comp attributes={attributes} - blockProps={blockProps} + blockProps={{ className, style }} suppressHydrationWarning={true} context={context} > From 18ef4e8bbe11d897ef9944f3ac8160bb7f13f26b Mon Sep 17 00:00:00 2001 From: Bernie Reiter <ockham@raz.or.at> Date: Wed, 20 Jul 2022 12:10:16 +0200 Subject: [PATCH 2/5] Try adding style --- .../block-hydration-experiments-parent/block.json | 3 ++- .../frontend/index.js | 13 ++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/blocks/block-hydration-experiments-parent/block.json b/src/blocks/block-hydration-experiments-parent/block.json index 7fd50445..ea90f1ad 100644 --- a/src/blocks/block-hydration-experiments-parent/block.json +++ b/src/blocks/block-hydration-experiments-parent/block.json @@ -25,7 +25,8 @@ "text": true }, "typography": { - "fontSize": true + "fontSize": true, + "__experimentalFontWeight": true }, "html": true }, diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js index 1c9c9f83..dbb86441 100644 --- a/src/blocks/block-hydration-experiments-parent/frontend/index.js +++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js @@ -4,7 +4,7 @@ import Title from '../shared/title'; const Frontend = ( { - blockProps: { className }, + blockProps: { className, style: styleString }, attributes: { counter: initialCounter, message }, children, }, @@ -12,10 +12,17 @@ const Frontend = ( const [ show, setShow ] = useState( false ); const [ counter, setCounter ] = useState( initialCounter ); + const temporaryElement = document.createElement( 'div' ); + temporaryElement.style.cssText = styleString; + + const style = show ? { fontWeight: 1000 } : temporaryElement.style; + return ( - <div className={`${className} ${show ? 'show' : 'hide'}`}> + <div className={`${className} ${show ? 'show' : 'hide'}`} style={style}> <Title message={message} /> - <Button handler={() => setShow( !show )} /> + <Button + handler={() => setShow( !show )} + /> <button onClick={() => setCounter( counter + 1 )}>{counter}</button> {show && children} </div> From 818cc1d96d88412f0bccf37b9ccd99c91c0a10d1 Mon Sep 17 00:00:00 2001 From: Bernie Reiter <ockham@raz.or.at> Date: Wed, 20 Jul 2022 12:27:09 +0200 Subject: [PATCH 3/5] Move to generic frontend logic --- .../block-hydration-experiments-parent/frontend/index.js | 7 +------ src/gutenberg-packages/frontend.js | 7 +++++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js index dbb86441..dc49ad12 100644 --- a/src/blocks/block-hydration-experiments-parent/frontend/index.js +++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js @@ -4,7 +4,7 @@ import Title from '../shared/title'; const Frontend = ( { - blockProps: { className, style: styleString }, + blockProps: { className, style }, attributes: { counter: initialCounter, message }, children, }, @@ -12,11 +12,6 @@ const Frontend = ( const [ show, setShow ] = useState( false ); const [ counter, setCounter ] = useState( initialCounter ); - const temporaryElement = document.createElement( 'div' ); - temporaryElement.style.cssText = styleString; - - const style = show ? { fontWeight: 1000 } : temporaryElement.style; - return ( <div className={`${className} ${show ? 'show' : 'hide'}`} style={style}> <Title message={message} /> diff --git a/src/gutenberg-packages/frontend.js b/src/gutenberg-packages/frontend.js index ff43eed1..2d21cb7f 100644 --- a/src/gutenberg-packages/frontend.js +++ b/src/gutenberg-packages/frontend.js @@ -79,7 +79,10 @@ class GutenbergBlock extends HTMLElement { const blockProps = JSON.parse( this.getAttribute( 'data-gutenberg-block-props' ), ); - const { class: className, style } = blockProps; + const { class: className, style: styleString } = blockProps; + + const temporaryElement = document.createElement( 'div' ); + temporaryElement.style.cssText = styleString; const innerBlocks = this.querySelector( 'template.gutenberg-inner-blocks', @@ -92,7 +95,7 @@ class GutenbergBlock extends HTMLElement { <EnvContext.Provider value='frontend'> <Comp attributes={attributes} - blockProps={{ className, style }} + blockProps={{ className, style: temporaryElement.style }} suppressHydrationWarning={true} context={context} > From 7840e9eeacd755b447279ffebad97b198baa9d12 Mon Sep 17 00:00:00 2001 From: Bernie Reiter <ockham@raz.or.at> Date: Mon, 25 Jul 2022 15:29:11 +0200 Subject: [PATCH 4/5] Set style conditionally --- .../block-hydration-experiments-parent/frontend/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js index a27942e8..a8d966a7 100644 --- a/src/blocks/block-hydration-experiments-parent/frontend/index.js +++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js @@ -5,12 +5,18 @@ import Button from '../shared/button'; import Title from '../shared/title'; const Frontend = ({ - blockProps: { className, style }, + blockProps: { className, style: originalStyle }, attributes: { counter: initialCounter, message }, children, }) => { const [show, setShow] = useState(true); const [counter, setCounter] = useState(initialCounter); + + const style = { + ...originalStyle, + ...(show && { fontWeight: 1000 }), + }; + return ( <Counter.Provider value={counter}> <Theme.Provider value="cool theme"> From 04ea51c7ea69e6c7cd8d2aff5866066184e00cda Mon Sep 17 00:00:00 2001 From: Bernie Reiter <ockham@raz.or.at> Date: Mon, 25 Jul 2022 15:37:13 +0200 Subject: [PATCH 5/5] Re-arrange a bit --- .../frontend/index.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js index a8d966a7..f48994e4 100644 --- a/src/blocks/block-hydration-experiments-parent/frontend/index.js +++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js @@ -5,24 +5,25 @@ import Button from '../shared/button'; import Title from '../shared/title'; const Frontend = ({ - blockProps: { className, style: originalStyle }, + blockProps: { + className, + style: { fontWeight, ...otherStyle }, + }, attributes: { counter: initialCounter, message }, children, }) => { const [show, setShow] = useState(true); const [counter, setCounter] = useState(initialCounter); - const style = { - ...originalStyle, - ...(show && { fontWeight: 1000 }), - }; - return ( <Counter.Provider value={counter}> <Theme.Provider value="cool theme"> <div className={`${className} ${show ? 'show' : 'hide'}`} - style={style} + style={{ + ...otherStyle, + fontWeight: show ? 1000 : fontWeight, + }} > <Title message={message} /> <Button handler={() => setShow(!show)} />