Getting basic styles to apply in the admin area

sage
,
1

When editing a post/page in the admin, none of the styles from editor.css are being applied to the main area, only the editor sidebar. If I remove the theme.json options from bud, then the basic WP styles are applied. However, I owant to use theme.json. So, what is going on and how do I fix it?

I looked at this thread, but it seems outdated when using Sage 10.5. Styling with Tailwind in admin area

bud config:

/**
 * Build configuration
 *
 * @see {@link https://roots.io/docs/sage/ sage documentation}
 * @see {@link https://bud.js.org/guides/configure/ bud.js configuration guide}
 *
 * @typedef {import('@roots/bud').Bud} Bud
 * @param {Bud} app
 */
export default async (app) => {
  /**
   * Application entrypoints
   * @see {@link https://bud.js.org/docs/bud.entry/}
   */
  app
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * Directory contents to be included in the compilation
     * @see {@link https://bud.js.org/docs/bud.assets/}
     */
    .assets(['images'])

    /**
     * Matched files trigger a page reload when modified
     * @see {@link https://bud.js.org/docs/bud.watch/}
     */
    .watch(['resources/views', 'app'])

    /**
     * Proxy origin (`WP_HOME`)
     * @see {@link https://bud.js.org/docs/bud.proxy/}
     */
    .proxy('https://sandbox.local')

    /**
     * Development origin
     * @see {@link https://bud.js.org/docs/bud.serve/}
     */
    .serve('http://localhost:3000')

    /**
     * URI of the `public` directory
     * @see {@link https://bud.js.org/docs/bud.setPublicPath/}
     */
    .setPublicPath('/wp-content/themes/sage/public/')

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     *
     * @see {@link https://bud.js.org/extensions/sage/theme.json/}
     * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/}
     */
    .wpjson.settings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};

Screenshot 2023-04-18 at 4.53.47 PM
Screenshot 2023-04-18 at 4.53.47 PM3200×1750 75.2 KB

2

Are those styles editor-specific, should those styles modify the editor UI itself, not the content (frontend styles)?

You write the “main area”, do you mean the actual contents in the editor?
Those styles have to be added as editor styles:

3

Looking at theme.json more, this issue doesn’t seem to be Sage-specific. It seems when you opt into using theme.json, you’re basically clearing out all the default main area editor styles. Any styles defined in theme.json will be brought into the admin editor.

By contrast, this is what the main area looks like when you don’t include a theme.json file in your theme. Notice how there’s a max-inline-size on the content (maybe it’s a media query), and it use a sans-serif font.

Screenshot 2023-04-18 at 6.26.40 PM
Screenshot 2023-04-18 at 6.26.40 PM3200×1750 73.9 KB

4

Using this by example, should get you back to the default appearance. Then somehow work Tailwind into the mix via Bud to autogenerate the theme.json.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"slug": "system-fonts",
					"name": "System Fonts"
				}
			]
		},
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"typography": {
			"fontSize": "var(--wp--preset--font-size--medium)",
			"fontFamily": "var(--wp--preset--font-family--system-fonts)",
			"lineHeight": "1.7"
		}
	}
}
5

So the default (from Sage) theme.json overrides styles on its own, that would not be overridden just by the frontend styles?

6

editor.css is an empty stylesheet that’s ready for you to use to customize the editor. If you’re wanting to customize the main editor area, then you need to be using a prefix in your styles that targets that part of the editor…

8

To clarify my own statement, I wanted to change the blocks’ appearance to be more in line with what you get out of the box with Wordpress when no theme.json is present.

As soon as you add theme.json to your theme, it appears Wordpress doesn’t include a particular stylesheet which gives it that appearance. Maybe?

You can compare how theme.json affects the block editor simply by removing it.

Sage provides a nice clean slate by removing the majority of Wordpress opinionated theme.json options. However, it ends up looking too unstyled as shown in my first screenshot.

I just wanted to give the editor just enough styling based on my second screenshot. That’s why I provided some basic theme.json tokens.

Although, maybe that’s not the best place either since Wordpress adds corresponding css custom props to the body of the public-facing site. Therefore, adding these styles to editor.css might be better suited. It all depends.

9

Or using editor.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

body .editor-styles-wrapper {
@apply mx-auto w-full max-w-3xl font-sans text-lg leading-relaxed;
}