Merge pull request #8 from DAreRodz/support-initially-hidden-inner-bl…

…ocks

Support initially hidden inner blocks

Readme.md

@@ -26,7 +26,7 @@ Feel free to inspect the code, open issues, submit PRs, ask questions...
 - [x] Make sure Frontend components are automatically rehydrated if they appear in the DOM at any point (not only on page load).
 - [ ] Make sure Frontend components are automatically hydrated even if their component is registered after the connectedCallback execution.
 - [x] Support partial hydration with Inner blocks (children raw HTML).
-  - [ ] Support initially hidden Inner blocks.
+  - [x] Support initially hidden Inner blocks: https://github.com/luisherranz/block-hydration-experiments/pull/8
 - [x] Use `children` instead of `<InnerBlocks.Content />` in Save component to be able to reuse the same component in the Frontend.
 - [x] Serialize attributes and pass them down to the Frontend component.
 - [ ] Support definition of public frontend attributes and only serialize those.

src/frontend/index.js

@@ -3,7 +3,7 @@ import Title from "../shared/title";
 import Button from "./button";
 
 const Block = ({ blockProps, attributes, children }) => {
-  const [show, setShow] = useState(true);
+  const [show, setShow] = useState(false);
   const [counter, setCounter] = useState(0);
 
   return (

src/gutenberg-packages/frontend.js

@@ -27,7 +27,7 @@ class GutenbergBlock extends HTMLElement {
       const blockProps = JSON.parse(
         this.getAttribute("data-gutenberg-block-props"),
       );
-      const innerBlocks = this.querySelector("gutenberg-inner-blocks");
+      const innerBlocks = this.querySelector("template.gutenberg-inner-blocks");
       const Comp = blockTypes.get(blockType);
       hydrate(
         <EnvContext.Provider value="frontend">
@@ -41,6 +41,10 @@ class GutenbergBlock extends HTMLElement {
               suppressHydrationWarning={true}
             />
           </Comp>
+          <template
+            className="gutenberg-inner-blocks"
+            suppressHydrationWarning={true}
+          />
         </EnvContext.Provider>,
         this,
       );

src/gutenberg-packages/wordpress-blocks.js

@@ -15,6 +15,11 @@ const save = (name, Comp) =>
             <InnerBlocks.Content />
           </gutenberg-inner-blocks>
         </Comp>
+        {/* Render InnerBlocks inside a template, to avoid losing them
+            if Comp doesn't render them. */}
+        <template class="gutenberg-inner-blocks">
+          <InnerBlocks.Content />
+        </template>
       </gutenberg-interactive-block>
     );
   };