Gutenberg Starter Theme

Sign up or sign in to Gitpod and click the link below.

Open in Gitpod

This theme is intended to be a reference for developing Gutenberg compatible themes. It shouldn't be used in production environments.

The theme works well with a Drupal's standard installation profile when enabled.

On this project you'll find comprehensive and commented code examples for the many features delivered by Drupal Gutenberg editor.

Tooling on this project is kept to its minimal. Only esbuild is used to compile JSX files to ES6 files and only necessary if writing React components. Check scripts/build.js and the example at js/register-filters.jsx. Extensions like SASS or PostCSS aren't used for CSS. Just regular CSS.

This theme was generated from starterkit_theme. Additional information on generating themes can be found in the Starterkit documentation.

Demonstrated Features

• Gutenberg configuration file (gutenberg_starter.gutenberg.yml)
  • Register client libraries on editor and frontend
  • Toggle custom blocks availability from the content type edit form
  • Setup editor configuration
    • Add frontend styles to the editor
    • Add patterns
    • Limit color palette
• Templates and field mapping.
• Register block variations (js/register-variations.js)
• Apply filters to blocks upon block registration (js/register-filters.jsx)
• Register block styles (js/register-styles.js)

This theme should be used with Gutenberg's module versions 3+.