Topic: Show css styles in wordpress editor

Stefanie
April 24, 2024 at 12:21 am
I have always used a certain php-code, which ensures that all css specifications made in the style.css of the childtheme are also displayed in the editor. This has always worked very well so far.
```
add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';
    return $editor_styles;
} );
```
Now this suddenly doesn’t work anymore 🙁
It looks good in the frontend, but the block-editor no longer adopts the styles.

Could this have something to do with the new version?

Thank you
Alvind
April 24, 2024 at 12:29 am

Hi there,

What WP version do you use?

There some changes in WP 6.5 mess with the way styles loaded in the editor. We are aware of this and currently looking at possible fixes.
Stefanie
April 24, 2024 at 12:34 am

Hi Alvind,

thank you for feedback!
Puuh, does it have to do with the WP version? Yes, I’m using 6.5.2.
All my pages are broken in the editor now 🙁
Alvind
April 24, 2024 at 12:54 am
Yes, this issue affects WordPress versions 6.5 and above.

As a workaround for now, you can move your child theme styles to the Customizer’s Additional CSS and use this PHP snippet to load the customizer’s CSS into the editor:
```
add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );
```
Stefanie
April 24, 2024 at 1:11 am

Thank you for your feedback.

I also know the code you mentioned.
I have already tried it, but unfortunately that doesn’t work either!
Alvind
April 24, 2024 at 1:50 am

My apologies for that! I was testing on one of my local test sites, and it turns out the site is running WP version 6.4.3. It seems that the snippet is also not working anymore on WP 6.5.
Stefanie
April 26, 2024 at 4:43 am

Hello again,

I have now posted this question in the WP Support forum, because a correct appearance in the editor is very important to me. Since I format a lot via style.css, it now looks like a mess in my editor 😕

This is the answer I got: https://prnt.sc/ioESw7nv8OHJ

Can you help? Thank you very much!
David
April 26, 2024 at 5:49 am

Hi there,

can i see the site you’re having the issue with ?
For reference WP 6.5 introduced some changes to how editor styles are parsed and prefixed.
The issue could be either a “bad” character in the CSS and WP rejects it, or its loading but WP is no longer prefixing it.
Stefanie
April 26, 2024 at 8:41 am

Hi David,

thank you for your reply.
The actual site I’m working on is local, but I’ll send you the link to a test installation where you can see the whole thing. I have the same css running on the test installation

It used to work very well with the php-snippet, but not anymore.
My editor view now looks like this: https://prnt.sc/5Nq6x6DiPHg2

I have defined the paddings of the containers via style.css, and also the buttons. But all this is no longer displayed in the editor.
David
April 26, 2024 at 8:49 am

If you open the editor, and Right Click > Inspect the editor window to open the Browser developers tools.
In the Console tab are there any Errors or Warnings ?
Stefanie
April 26, 2024 at 9:01 am

OMG, it could be so easy! Yes, there was that error message:
https://prnt.sc/jiRBpCsxhctM

I fixed the error, the editor is now completely fine again 🙂

When I open the console now, this message still appears: https://prnt.sc/Rc8sOXlW7AWu

but the display in the editor is saved 🙂🙂🙂

Thank you very much !!!
David
April 27, 2024 at 1:55 am

The other warning can be safely ignored.
Glad to hear that you got it working

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Show css styles in wordpress editor