Global CSS not working inside Gutenberg

wholebiz
(@wholebiz)

3 years, 3 months ago
Hi,

I installed Editor Plus today on the latest version of the WordPress Twenty Twenty Three theme because I wanted to apply global styles inside of Gutenberg.

Here is the style I added today:

li:not(:last-child) {margin-bottom: .5rem;}

It works fine in the public facing pages, but is not getting applied inside of Gutenberg.

I tried with the Enqueue switch off and on, and also cleared caches.

What do you think?

I read your article about enqueuing from a child theme, and it looks like that would be too problematic as you noted.

Thanks!
- This topic was modified 3 years, 3 months ago by wholebiz.
The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Munir Kamal
(@munirkamal)

3 years, 3 months ago

Hey @wholebiz

Yes, that currently only works on the front end. That is, however, on my list of todos. Keep an eye on the upcoming updates for this.

Thanks

Thread Starter wholebiz
(@wholebiz)

3 years, 3 months ago

Thank you.

I’m just using the Twenty Twenty Three theme, and could set up the functions in this article: https://gutenberghub.com/how-to-apply-custom-css-to-any-gutenberg-block/

It seems the main issue is to be sure that CSS intended for the blocks in Gutenberg and the front end don’t affect elements farther up the dom in Gutenberg.

Do you have any thoughts on that?

I’m in the midst of a project and would love to handle this asap. I don’t want to do much styling, but it is disappointing that Gutenberg won’t honor front end styling via the customizer.

I have to used Elementor in the past, and it honors front end CSS. For this site I’m going minimalist. Aside from this issue, I’m enjoying rapidly assembling pages in Gutenberg.

Thread Starter wholebiz
(@wholebiz)

3 years, 3 months ago

I resolved the issue for myself using a child theme in Twenty Twenty-Three as follows:

Properly enqueue child CSS:
https://wordpress.org/support/topic/child-theme-not-loading-style-css/

Edit components in Gutenberg:
https://rudrastyh.com/gutenberg/css.html

For example, I wanted to add some space between list items:

External CSS:
main li:not(:last-child) {margin-bottom: .5rem;}

Gutenberg CSS:
.wp-block .wp-block-list-item:not(:last-child) {margin-bottom: .5rem}

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Global CSS not working inside Gutenberg’ is closed to new replies.