Gutenberg Playground

This is an Exploration to see how an interactive sandbox to explain Gutenberg concepts with live editor access could look. The hot module reloading currently works very well for changing something inside the JSX returned from the edit.js file. It is no where near perfect and the initial load of the editor is very slow but as a proof of concept this hopefully shows how this could work.

The editor itself is persistent through localstorage. Ideal it should get cleared when the sandbox is manually refreshed.

import { useBlockProps, RichText } from "@wordpress/block-editor";

export function BlockEdit(props) {
  const { attributes, setAttributes } = props;
  const { content } = attributes;

  const blockProps = useBlockProps();
  return (
    <div {...blockProps}>
      <RichText
        tagName="h1"
        onChange={(value) => setAttributes({ content: value })}
        value={content}
        placeholder="Hello World!"
      />
    </div>
  );
}
    

How does this work?

• At the heart of this is the <Sandpack /> package from codesandbox.
• A custom wrapping react component is used to always add in a headless gutenberg instance simmilar to the playground used in the Gutenberg Repo.
• To make it nicer to write documentation the component is then used in a MDX file so it can live alongside the documentation.
• This is heavily inspired by the new https://beta.reactjs.org website which does something simmilar in their docs.

Source:

You can view the source of this site including the GutenbergSandbox component here: https://github.com/fabiankaegy/gutenberg-playground