Add media hydration

Author: cbravobernal

src/gutenberg-packages/frontend.js

@@ -29,8 +29,12 @@ class GutenbergBlock extends HTMLElement {
       );
       const innerBlocks = this.querySelector("gutenberg-inner-blocks");
       const Comp = blockTypes.get(blockType);
-      const hydrationTechnique = this.getAttribute("data-gutenberg-hydrate");
-
+      const technique = this.getAttribute("data-gutenberg-hydrate");
+      const media = this.getAttribute("data-gutenberg-media");
+      const hydrationOptions = {
+        technique,
+        media,
+      };
       hydrate(
         <EnvContext.Provider value="frontend">
           <Comp
@@ -45,7 +49,7 @@ class GutenbergBlock extends HTMLElement {
           </Comp>
         </EnvContext.Provider>,
         this,
-        hydrationTechnique
+        hydrationOptions
       );
     });
   }

src/gutenberg-packages/wordpress-blocks.js

@@ -10,7 +10,7 @@ const save =
         data-gutenberg-block-type={name}
         data-gutenberg-attributes={JSON.stringify(attributes)}
         data-gutenberg-block-props={JSON.stringify(blockProps)}
-        data-gutenberg-hydrate="view"
+        data-gutenberg-hydrate="idle"
       >
         <Comp blockProps={blockProps} attributes={attributes}>
           <gutenberg-inner-blocks>

src/gutenberg-packages/wordpress-element.js

@@ -35,8 +35,22 @@ export const useState = (init) =>
 export const useEffect = (...args) =>
   useBlockEnvironment() !== "save" ? useReactEffect(...args) : noop;
 
-export const hydrate = (container, element, technique) => {
+export const hydrate = (container, element, hydrationOptions) => {
+  const { technique, media } = hydrationOptions || {};
+  const cb = () => {
+    ReactHydrate(container, element);
+  };
   switch (technique) {
+    case "media":
+      if (media) {
+        const mql = matchMedia(media);
+        if (mql.matches) {
+          cb();
+        } else {
+          mql.addEventListener("change", cb, { once: true });
+        }
+      }
+      break;
     // Hydrate the element when is visible in the viewport.
     // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
     case "view":
@@ -45,7 +59,7 @@ export const hydrate = (container, element, technique) => {
           if (!entry.isIntersecting) continue;
           // As soon as we hydrate, disconnect this IntersectionObserver.
           io.disconnect();
-          ReactHydrate(container, element);
+          cb();
           break; // break loop on first match
         }
       });
@@ -54,14 +68,13 @@ export const hydrate = (container, element, technique) => {
     case "idle":
       // Safari does not support requestIdleCalback, we use a timeout instead. https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
       if ("requestIdleCallback" in window) {
-        window.requestIdleCallback(() => {
-          ReactHydrate(container, element);
-        });
+        window.requestIdleCallback(cb);
       } else {
-        setTimeout(ReactHydrate(container, element), 200);
+        setTimeout(cb, 200);
       }
       break;
+    // Hydrate this component immediately.
     default:
-      ReactHydrate(container, element);
+      cb();
   }
 };