Editor Styles

editor-styles.scss

/* 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%;
	}
}