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