An in-depth framework for working with Gutenberg is largely beyond the scope of Sage, but it does ship with
/resources/scripts/editor.js which can be used to register, modify, etc, Gutenberg block styles.
Included in that file is a simple example to get you on the right track.
# 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 the Tailwind config (
theme.json documentation (opens new window) for the full specification.
Due to Sage including a
theme.json file, this means trying to use
add_theme_support() to configure the editor (opens new window) will not work.
In Sage's Bud config (
bud.config.mjs), there a section for generating
theme.json. This is where you'll want to make any changes to your
# Default color palette
Rather than manually defining the the editor colors (opens new window) in your Sage-based WordPress themes by adding them to
theme.json, your color palette as defined by your Tailwind config will be used by default for the WordPress editor.
Tailwind’s default color palette (opens new window) is a good starting point for sites that don’t already have color/branding guidelines to follow.
# Sizes and font families
In addition to including Tailwind’s color palette for the WordPress editor, Sage will also configure the editor with Tailwind’s font families and font sizes.
Be sure to take a look at Bud’s documentation on this feature (opens new window) for further information.