Admin Styles

All stitches code should work fine within the Gutenberg Editor, however sometimes you might need to apply some hacks.

Subtheme#

You can override colours for Gutenberg, which is useful when you've got a site with a dark background and predominantly white text.

The starter theme comes with something like this:

export const subthemes = {
  editor: createTheme("block-editor-page", {
    colors: {
      background: "white",
      foreground: "black",
      highlight: "$russet",
      reverse: "black",
    },
  }),
}

You can override your base theme colours here, and they'll be automatically applied inside the Gutenberg editor.

This works because Gutenberg wraps everything in <div class="block-editor-page">.

Global Editor Styles#

The starter theme also has:

export const editorGlobalStyles = globalCss({
  ".wp-block": {
    a: {
      color: "inherit",
    },
  },
  ".interface-complementary-area": {
    width: "400px",
  },
})

Any styles you put in here will be applied globally.

Blocks#

At the block level, you can style based on the wp-block class, which Gutenberg wraps every block in. This class is only present in the editor, and is never present in the frontend.

It's almost always a hack, but so is Gutenberg.

export const MyBlock = styled('div', {
  width: "100vw",
  ".wp-block &": {
    // Hack for Gutenberg, since 100vw doesn't make sense here
    width: "100%"
  }
})