Reuse the same RichText component across the different environments (Edit, Save and Frontend)

src/edit.js

@@ -1,15 +1,21 @@
-import { TextControl } from "@wordpress/components";
+// This import is needed to ensure that the `wp.blockEditor` global is available
+// by the time this component gets loaded. The `Title` component consumes the
+// global but cannot import it because it shouldn't be loaded on the frontend of
+// the site.
+import "@wordpress/block-editor";
+
 import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import Title from "./frontend/title";
 
 export default function Edit({ attributes, setAttributes }) {
   const blockProps = useBlockProps();
   return (
     <>
       <div {...blockProps}>
-        <TextControl
-          placeholder="Enter the title"
+        <Title
           value={attributes.message}
           onChange={(val) => setAttributes({ message: val })}
+          placeholder="Enter the Title"
         />
         <InnerBlocks />
       </div>

src/framework/view.js

@@ -1,4 +1,4 @@
-import { hydrate } from "./wordpress-element";
+import { hydrate, EnvContext } from "./wordpress-element";
 
 const blockTypes = new Map();
 
@@ -30,16 +30,18 @@ class GutenbergBlock extends HTMLElement {
       const innerBlocks = this.querySelector("gutenberg-inner-blocks");
       const Comp = blockTypes.get(blockType);
       hydrate(
-        <Comp
-          attributes={attributes}
-          blockProps={blockProps}
-          suppressHydrationWarning={true}
-        >
-          <Children
-            value={innerBlocks && innerBlocks.innerHTML}
+        <EnvContext.Provider value="frontend">
+          <Comp
+            attributes={attributes}
+            blockProps={blockProps}
             suppressHydrationWarning={true}
-          />
-        </Comp>,
+          >
+            <Children
+              value={innerBlocks && innerBlocks.innerHTML}
+              suppressHydrationWarning={true}
+            />
+          </Comp>
+        </EnvContext.Provider>,
         this
       );
     });

src/framework/wordpress-blockeditor.js

@@ -0,0 +1,9 @@
+import { useBlockEnvironment } from "./wordpress-element";
+
+export const RichText = ({ tagName: Tag, children, ...props }) => {
+  return useBlockEnvironment() === "edit" ? (
+    <window.wp.blockEditor.RichText value={children} tagName={Tag} {...props} />
+  ) : (
+    <Tag {...props}>{children}</Tag>
+  );
+};

src/framework/wordpress-element.js

@@ -1,14 +1,36 @@
 import {
   useState as useReactState,
   useEffect as useReactEffect,
+  useContext as useReactContext,
+  createContext,
 } from "@wordpress/element";
 export { hydrate } from "react-dom";
 
-// Dirty dirty trick
-export const isView = !window.wp.blockEditor;
+export const EnvContext = createContext(null);
+
+/**
+ * A React hook that returns the name of the environment.
+ *
+ * This is still a bit hacky. Ideally, Save components should support React
+ * hooks and all the environments (Edit, Save and Frontend) should populate a
+ * normal context. Also, more environments could be added in the future.
+ *
+ * @returns {"edit" | "save" | "frontend"}
+ */
+export const useBlockEnvironment = () => {
+  try {
+    const env = useReactContext(EnvContext);
+    if (env === "frontend") return "frontend";
+    return "edit";
+  } catch (e) {
+    return "save";
+  }
+};
 
 const noop = () => {};
 
-export const useState = (init) => (isView ? useReactState(init) : [init, noop]);
+export const useState = (init) =>
+  useBlockEnvironment() !== "save" ? useReactState(init) : [init, noop];
 
-export const useEffect = (...args) => (isView ? useReactEffect(...args) : noop);
+export const useEffect = (...args) =>
+  useBlockEnvironment() !== "save" ? useReactEffect(...args) : noop;

src/frontend/title.js

@@ -1,3 +1,9 @@
-const Title = ({ message }) => <h2 className="title">{message}</h2>;
+import { RichText } from "../framework/wordpress-blockeditor";
+
+const Title = ({ message, ...props }) => (
+  <RichText tagName="h2" className="title" {...props}>
+    {message}
+  </RichText>
+);
 
 export default Title;