block editor - Default Gutenberg CSS on frontend

I want to know how to include default Gutenberg CSS (the one I can see in the editor when no custom editor style is applied) on frontend. I want my the_content() to look 1:1 like in the editor (font, margins, paddings, everything).

I need it to actually know what I'm fighting when I'm trying to style whatever on that piece of...editor.

add_theme_support( 'wp-block-styles' ); is not the answer, so don't you bother.

I'm sorry for sounding arrogant, so far I've received so many irrelevant answers on that on various forums that I'm considering ditching WordPress altogether

I want to know how to include default Gutenberg CSS (the one I can see in the editor when no custom editor style is applied) on frontend. I want my the_content() to look 1:1 like in the editor (font, margins, paddings, everything).

I need it to actually know what I'm fighting when I'm trying to style whatever on that piece of...editor.

add_theme_support( 'wp-block-styles' ); is not the answer, so don't you bother.

I'm sorry for sounding arrogant, so far I've received so many irrelevant answers on that on various forums that I'm considering ditching WordPress altogether

• css
• block-editor

Share Improve this question asked Nov 29, 2019 at 11:21 polish bastardpolish bastard 3722 silver badges55 bronze badges 1

• I feel Wordpress is intending to get rid of developers like us, who understand and actively use CSS. For example, in themes 2023 and 2024, they intentionally avoid the file styles.css to be queued, Nevertheless, you can force it, or even easier, you can use customize.php. – DavidTaubmann Commented Dec 15, 2023 at 4:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can't. There's no stylesheet that exists that can be loaded on the front-end to make it match the editor exactly.

Any such stylesheet would need to be created independently of the styles used in the actual editor, because the styles that are used in the editor are written to share scope with the default wp-admin/ styles, which wouldn't exist on the front-end. This is because the block editor is not inside an iframe, like TinyMCE.

Additionally, any such stylesheet would be useless with all existing themes, because it would not be possible to create a stylesheet that would reliably reproduce the editor styles when loaded alongside theme styles. So such a stylesheet would only be usable as a starting point for new themes. If one were created for that purpose, it would be of little use since themes would need to override those styles anyway, unless they were all going to look the same. So all it would do is complicate development.