⚛️ Hydrate the blocks with Directives Hydration (using wp-block and wp-inner-blocks)
#66
Conversation
DAreRodz
changed the title
wp-block and wp-inner-blocks)
|
For context, using components from different entry points was failing because each entry point had its own instance of |
|
I consider this PR ready to review. There is a problem with hydration, though, that it is not working correctly (elements are being regenerated). We should investigate that. cc: @luisherranz |
src/gutenberg-packages/hydration.js
Outdated
| visitor.map = components; | ||
|
|
||
| const dom = document.querySelector('.wp-site-blocks'); | ||
| const vdom = toVdom(dom, visitor, createElement, {}).props.children; |
There was a problem hiding this comment.
Why do you need .props.children here?
There was a problem hiding this comment.
Because you run hydrate on the parent element (wp-site-blocks), but you pass the vdom of the content (wp-site-blocks works as a wrapper).
We can change this with a better approach in the future. 🙂
There was a problem hiding this comment.
Oh, I see. I'm using createRootFragment for that 🙂
| return text; | ||
| } | ||
| if (n.nodeType !== 1) return null; | ||
| let nodeName = String(n.nodeName).toLowerCase(); |
There was a problem hiding this comment.
Why is there a possibility that a node name is not in lowercase?
There was a problem hiding this comment.
If the node is an Element, it always return the uppercase name (e.g. DIV for <div>). 😅
There was a problem hiding this comment.
Ok. I was using node.localName 🙂
| // 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)); |
There was a problem hiding this comment.
I've left a note here explaining the fix for the Preact hydration.
There was a problem hiding this comment.
This should be fixed in Gutenberg itself.
luisherranz
changed the title
wp-block and wp-inner-blocks)wp-block and wp-inner-blocks)
luisherranz
changed the title
wp-block and wp-inner-blocks)wp-block and wp-inner-blocks)
Tracking issue: #64
This PR uses the
toVdom()function from preact-markup to hydrate blocks inside a single vDOM tree.It uses
<wp-block>and<wp-inner-blocks>tags to detect both block components and children.data-wp-block-propsdata-wp-block-attributesdata-wp-block-sourced-attributesI'm planning to implement these directives in a different PR, to test how it could be done with the preact option hooks API.
data-wp-block-provides-block-contextdata-wp-block-uses-block-context