Styling the frontend without it affecting the Gutenberg background layout.
I use style.css or the customizer to add CSS to adjust the look of the frontend of a site. With Gutenberg the new Core Editor in WordPress I also need to style the backend.
I added the following code to the child theme functions.php file:
add_editor_style( 'style.css' );By adding style.css I am telling the editor that I am styling the frontend and backend using the same stylesheet. This has an advantage and disadvantage.
The advantage – there is one stylesheet.
The disadvantage – some styling for the frontend can create a negative effect on the backend. That is also why editor styles exist. It is there to make sure that we have the option to add specific styles that only affect the backend Gutenberg layout and not the frontend of the site.
A new editor stylesheet
I will create a new stylesheet and call it editor-styles.css. CSS styles only meant for the backend.
/* Editor styles for the backend Gutenberg layout. */
/* https://getblocklab.com/how-to-change-the-content-width-of-the-gutenberg-editor/
* Main column width
* This changes it from the default 980px to 860px
*/
.wp-block {
max-width: 860px !important;
}
/*
* Width of "wide" blocks
* This changes it from the default 1080px to 1280px
*/
.wp-block[data-align="wide"] {
max-width: 1280px;
}The following CSS I use in the style.css and editor-styles.css.
/* In style.css and in editor-styles.css
Default code blocks for the Gridd theme have a black background and white text.
I am changing it to a yellow background, black text and a grey border. */
.wp-block-code {
--bg: #000 !important;
--cl: #fee861 !important;
font-family: Menlo,Consolas,monaco,monospace;
font-size: .875em;
padding: .8em 1em;
border: 1px solid #ccc;
}Resources:
https://developer.wordpress.org/block-editor/developers/themes/theme-support/#editor-styles
https://getblocklab.com/how-to-change-the-content-width-of-the-gutenberg-editor/
https://richtabor.com/add-wordpress-theme-styles-to-gutenberg/
https://www.billerickson.net/block-styles-in-gutenberg/
https://robinroelofsen.com/editor-styling-gutenberg
https://jasonyingling.me/enqueueing-scripts-and-styles-for-gutenberg-blocks/
