diff --git a/Readme.md b/Readme.md
index 3ea75dc2..d07ac091 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 `` 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.
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",
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(
@@ -41,6 +41,10 @@ class GutenbergBlock extends HTMLElement {
suppressHydrationWarning={true}
/>
+
,
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) =>
+ {/* Render InnerBlocks inside a template, to avoid losing them
+ if Comp doesn't render them. */}
+
+
+
);
};