Skip to content
Roots
  • Home page
Sage
v11.0.1
  • Sage page

Block Editor (Gutenberg)

Sage includes two assets that are enqueued when working with the WordPress block editor, also known as Gutenberg:

  • resources/js/editor.js
  • resources/css/editor.css

Any styles added to editor.css will only be applied to the block editor.

All blocks must have version 3 support

Sage's editor.css expects the block editor to be iframed. If you have any blocks that don't support version 3, then the block editor won't be iframed.

(Reference)

theme.json generator

Sage includes a theme.json file for configuring the WordPress editor. It's generated during asset builds automatically and accounts for settings from your Tailwind setup.

theme.json spec

Reference the theme.json documentation for the full specification.

Due to Sage including a theme.json file, this means trying to use add_theme_support() to configure the editor will not work.

Tailwind CSS colors, font families, and sizes are generated on the theme build for theme.json. See the Sage docs on Tailwind CSS for more information. This can be disabled in vite.config.js.

Last updated

Help us improve this page.

Contributors

alwaysblank
ben
joshf
Log1x
strarsis

Support Roots

Help us continue to build and maintain our open source projects. We’re a small team of independent developers and every little bit helps.

Sponsor Roots on GitHub

Getting Started

The Basics

Digging Deeper

Guides