Add the interactive block attributes during server-side rendering

[ockham]

Aims to fix #33. See there for details 🙂

TODO (?)

• blockProps
• innerBlockProps (Not needed I believe)
• Filter attributes by frontend === true

[ockham]

During our pair programming session today, @luisherranz and I were experimenting with how to best rehydrate blockProps.

It might be a bit harder to extract them (reliably) on the server side; it might be possible by basically invoking server-side block-supports functionality, but we're not 100% sure if this covers all client-side block props (especially if added by 3rd party plugins).

We thus tried to extract block props from the DOM. We know that they only affect className and style, and are typically applied to the outermost DOM element. We thus tried something like

diff --git a/src/gutenberg-packages/frontend.js b/src/gutenberg-packages/frontend.js
index 4446742..787519e 100644
--- a/src/gutenberg-packages/frontend.js
+++ b/src/gutenberg-packages/frontend.js
@@ -78,9 +78,11 @@ class GutenbergBlock extends HTMLElement {
                        const context = pickKeys( event.detail.context, usesContext );
 
                        const blockType = this.getAttribute( 'data-gutenberg-block-type' );
-                       const blockProps = JSON.parse(
-                               this.getAttribute( 'data-gutenberg-block-props' ),
-                       );
+                       const blockProps = {
+                               className: this.children[0].className,
+                               style: this.children[0].style?.cssText
+                       };
+
                        const innerBlocks = this.querySelector(
                                'template.gutenberg-inner-blocks',
                        );

This needs a bit more tweaking: React expects a style object (with attributes in camelCase) rather than a string (as returned by .cssText).

I'll continue to tweak this to get it to work; I might also still try the server-side approach.

---

Finally, note that block authors might choose to apply block props to another element (instead of the outermost wrapper), in which case the above won't work. However, re-hydration of block props is fortunately only really needed if those can be changed interactively. Since it only affects className and style, this might not be a very large group of use cases.

[ockham]

Pushed some fixes; the counter is broken, so rehydration still isn't quite working.

[ockham]

Should be ready for review, I think.

[luisherranz]

Oh, so React style prop accepts a CSSStyleDeclaration object. That's excellent news 😄

I've submitted a quick fix for an error due to a change in the context-provided that now returns null instead of {} when not present. And this could be improved in the future to avoid serializing unnecessary attributes (like data-gutenberg-context-used="[]" and so on), but it's perfectly fine for now.

I've also added fontSize to the child block so we can easily test the inline styles.

I'm going to merge this now. Thanks, Bernie! 👏

[ockham]

Thanks Luis! 😄