Support block support class names and inline styles on the block wrapper and make `blockProps` optional about block-interactivity-experiments

[luisherranz]

Thanks, Bernie 🙂

For reference, the difference between the two attempts was:

• First attempt: We picked the class and style attributes from the DOM during the hydration phase.
• Second attempt: We serialized the block supports output (class and style) dynamically in PHP using a data- attribute.

The component code didn't change, so this DX still applies. We haven't made blockProps optional yet, though.

[luisherranz]

So the solution here could be to pass a blockProps (or use the useBlockProps hook), but make it optional, only for the case where either the class name or the inline style of the block wrapper is going to be dynamically modified in the frontend.

A block that modifies the class name:

const View = ({ blockProps: { className } }) => {
  const [showBlock, setShowBlock] = useState(true);

  return (
    <div className={`${className} ${ showBlock ? "show" : "hide" }`}>
      ...
    </div>
  )
}

A block that modifies the inline style:

const View = ({ blockProps: { style } }) => {
  const [width, setWidth] = useState("100px");

  return (
    <div style={{ ...style, width }}>
      ...
    </div>
  )
}

A block that doesn't modify the class name nor the inline style:

const View = () => {
  return (
    <div>
      ...
    </div>
  )
}

---

Whether to use a blockProps prop or stick to the useBlockProps hook is something we could discuss later in the Gutenberg repo if we finally propose this.

[ockham]

@luisherranz and I had a pair-programming session earlier today, where we first tried to implement Luis' idea:

diff --git a/src/blocks/block-hydration-experiments-parent/frontend/index.js b/src/blocks/block-hydration-experiments-parent/frontend/index.js
index 1ab5647..5871eb5 100644
--- a/src/blocks/block-hydration-experiments-parent/frontend/index.js
+++ b/src/blocks/block-hydration-experiments-parent/frontend/index.js
@@ -3,13 +3,13 @@ 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 (
-               <div {...blockProps}>
+               <div className={`${className} ${ show ? "show" : "hide" }`}>
                        <Title message={message} />
                        <Button handler={() => setShow( !show )} />
                        <button onClick={() => setCounter( counter + 1 )}>{counter}</button>

However, this did not work: It would serialize the default value for the wrapping div's className (hide) and keep it around in the hydrated block, even when toggling show state. In other words, the className would always contain hide, even when showing the child block 🙃

So instead, we tried a different approach: #41