Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Editor Styles
/* Unfortunately, Gutenberg keeps iterating through and changing their class names
* As of Aug 13, 2020 the following code works in the latest version of the Gutenberg PLUGIN
* See below to find the code that works for the latest version of Gutenberg baked into the latest version of WordPress
*/
/* Gutenberg Plugin Version */
.block-editor-block-list__layout {
// Unfortunately, Gutenberg uses .block-editor-block-list__layout in all blocks too
// We only want to target the main container where all blocks are direct children
// Thus we need :first-of-type
// This is one of Gutenberg's newer iterations of HTML structure
&:first-of-type {
@include gridSection();
padding-left: 0;
padding-right: 0;
// Targets all the top level blocks in the editor
& > * {
@include regularContentMaxWidth();
width: 100%;
// Targets all the top level wide width blocks in the editor
&[data-align="wide"] {
@include wideContentMaxWidth();
}
// Targets all the top level full width blocks in the editor
&[data-align="full"] {
@include fullContentMaxWidth();
}
}
// Overrides Gutenberg max-width of 610px so we don't have lopsided layouts
.wp-block {
max-width: 100%;
}
}
}
/* WordPress Gutenberg (Don't have the Plugin activated) */
.is-root-container {
@include gridSection();
padding-left: 0;
padding-right: 0;
// Targets all the top level blocks in the editor
& > * {
@include regularContentMaxWidth();
width: 100%;
// Targets all the top level wide width blocks in the editor
&[data-align="wide"] {
@include wideContentMaxWidth();
}
// Targets all the top level full width blocks in the editor
&[data-align="full"] {
@include fullContentMaxWidth();
}
}
.wp-block {
max-width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment