Gutenberg good practice

sage
1

Hello,

I’m building my first site using Gutenberg.
I’m using bedrock + sage 10 with Tailwind.

My first question is how to have the same front/back rendering ?

In my editor.css, i added :

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

Then, Tailwind is working in the editor.

First problem, the font-family.
font-sans isn’t applied in the editor.

I added this and it’s OK :

.block-editor-block-list__layout {
  @apply font-sans;
}

But, it is the good solution ?

Other thing :

Tailwind, in base.css removes default font-weight for hn.
So, when I’m trying to define default font-weight for my h2, the style generated by base.css is read first.

"styles": {
		"elements": {
			"h2": {
				"typography": {
					"fontSize": "var(--wp-preset-font-size--3xl)",
					"fontWeight": "600"
				}
			}
		}
	}

I have same problem with margins for example.

I have the impression that it’s not so easy to make tailwind and gutenberg coexist. Lots of little things to deal with.

I don’t know if other people have the problem. If so, it would be cool if we could share tips.

Thanks

1 Like
2

This would be a CSS selector specificity issue then. Wrap your frontend styles (that should override) with extra selectors (html or html body) then. Those would are also automatically changed to .editor-styles-wrapper, if you use these frontend styles as editor styles.

html {
  (my tailwind styles)
}

html h1 would be more specific than just h1, hence override it.

To be honest, I had to even use !important in frontend styles to override some of the Gutenberg-injected styles because those are either inline or !important.

3

Then, the solution is to declare the default style for my H2 in a css file and not in theme.json ?

4

The theme.json is primarily used for the editor (backend/admin).
Often you will have to declare your own frontend styles.
So you still use the theme.json as much as possible,
and then use normal CSS frontend styles (which you can also add as editor styles to override in the backend) to fix what is wrong by the theme.json-generated styles.

I also use a editor.css for overriding editor-specific styles.

Edit: This is how I currently enqueue editor-only/-specific styles and scripts in Sage 10:

add_action('admin_enqueue_scripts', function ($hook) {
    if ('post.php' !== $hook) {
        return;
    }

    bundle('editor')->enqueue();
});

When $hook equals post.php, it is the editor page.

1 Like
5

Thanks for response.

You’re not using enqueue_block_editor_assets to enqueue editor assets ?

And for fonts ?
I have the impression that it works but I still have 404 in the console (in editor).

I have font.css file :

@layer base {
  @font-face {
    font-family: 'Assistant';
    src: url('@fonts/Assistant/Assistant-ExtraBold.eot');
    src: url('@fonts/Assistant/Assistant-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('@fonts/Assistant/Assistant-ExtraBold.woff2') format('woff2'),
    url('@fonts/Assistant/Assistant-ExtraBold.woff') format('woff'),
    url('@fonts/Assistant/Assistant-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
}

My tailwind.config.js :

fontFamily: {
    'sans': ['Assistant', ...defaultTheme.fontFamily.sans],
},

In front it’s perfect.
In back, i have this :

example.lndo.site/fonts/Assistant-Light.ttf 404 Not found
6

I was having this issue. I added publicPath to the entrypoint schema in bud.config.js and then the fonts loaded again.

.entry({
      app: {
        import: ['@scripts/app', '@styles/app'],
        publicPath: "/wp-content/themes/mytheme/public/",
      },
      editor: {
        import: ['@scripts/editor', '@styles/editor'],
        publicPath: "/wp-content/themes/mytheme/public/",
      }
    })

In the fonts.css file I just kept the paths as relative though, like this:

@font-face {
    font-family: "FSSplitSans";
    src: url(../fonts/FSSplitSansWeb-Regular.woff) format('woff');
    font-display: auto;
    font-style: normal;
}

Maybe that will help?

2 Likes