From fe7cfd3969682375d9ea4e3b46073cf18215477c Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Wed, 4 May 2022 12:17:49 +0200
Subject: [PATCH 1/3] Update package-lock

---
 package-lock.json | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index ef96b2f5..8b5db8d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
       "devDependencies": {
         "@wordpress/element": "^4.3.0",
         "@wordpress/env": "^4.4.0",
-        "@wordpress/scripts": "^22.3.0"
+        "@wordpress/scripts": "^22.3.0",
+        "dprint": "^0.24.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -6849,6 +6850,16 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dprint": {
+      "version": "0.24.4",
+      "resolved": "https://registry.npmjs.org/dprint/-/dprint-0.24.4.tgz",
+      "integrity": "sha512-Kt88R/6AeLIu/lIQS3VnWkzC8qdyiX3qxuFwLuF8nvfO06C9UAA8EUZ9n1yDhWLpafisdvyKE1ybeCmPsb2xPg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "dprint": "bin.js"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -22231,6 +22242,12 @@
         "domhandler": "^4.2.0"
       }
     },
+    "dprint": {
+      "version": "0.24.4",
+      "resolved": "https://registry.npmjs.org/dprint/-/dprint-0.24.4.tgz",
+      "integrity": "sha512-Kt88R/6AeLIu/lIQS3VnWkzC8qdyiX3qxuFwLuF8nvfO06C9UAA8EUZ9n1yDhWLpafisdvyKE1ybeCmPsb2xPg==",
+      "dev": true
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",

From 74ed0732b972ed1865fe8a16cb94a1cc5156528d Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Wed, 4 May 2022 12:20:11 +0200
Subject: [PATCH 2/3] Render template with InnerBlocks

---
 src/frontend/index.js                      | 2 +-
 src/gutenberg-packages/frontend.js         | 6 +++++-
 src/gutenberg-packages/wordpress-blocks.js | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/frontend/index.js b/src/frontend/index.js
index b52fc1bb..e1e69589 100644
--- a/src/frontend/index.js
+++ b/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 (
diff --git a/src/gutenberg-packages/frontend.js b/src/gutenberg-packages/frontend.js
index ddec25a5..9cd28116 100644
--- a/src/gutenberg-packages/frontend.js
+++ b/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,
       );
diff --git a/src/gutenberg-packages/wordpress-blocks.js b/src/gutenberg-packages/wordpress-blocks.js
index 358f2fc9..3a19ebbe 100644
--- a/src/gutenberg-packages/wordpress-blocks.js
+++ b/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>
     );
   };

From 11533bc72d4c7576ae35823bbad1c06badbd15c8 Mon Sep 17 00:00:00 2001
From: Luis Herranz <luisherranz@gmail.com>
Date: Wed, 4 May 2022 15:53:31 +0200
Subject: [PATCH 3/3] Update Readme

---
 Readme.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Readme.md b/Readme.md
index 4daec247..a24879b6 100644
--- a/Readme.md
+++ b/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.
@@ -51,4 +51,3 @@ Feel free to inspect the code, open issues, submit PRs, ask questions...
   - [ ] Media
 - [ ] Change hydration technique based on block attributes.
 - [ ] Experiment ways to not hydrate the entire block, only the "client components".
-