// This targets the editor. It is the closest equivalent to .wp-block-post-content, // since the editor does not output that class. .is-root-container { padding-left: var(--wp--custom--post-content--padding--left); padding-right: var(--wp--custom--post-content--padding--right); } .block-editor-block-list__layout.is-root-container>.wp-block[data-align=full], .wp-block-post-content > .alignfull { margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important; margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important; width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important; } .site-header, .post-header, .page-content, [data-align="full"] p, .alignfull p { padding-left: var(--wp--custom--post-content--padding--left); padding-right: var(--wp--custom--post-content--padding--right); } @include break-mobile { // limit size of any element that is aligned left/right .wp-block[data-align="left"], // This is for the editor .wp-block[data-align="right"], // This is for the editor .wp-site-blocks .alignleft, .wp-site-blocks .alignright { max-width: var(--wp--custom--alignment--aligned-max-width); } } // When content is aligned left/right (particularly inside of a container) it is floated left/right // and needs something to ensure that the content follows the block rather than nestling up beside the floated element. // The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299 .wp-block-group:not(.site-header) { overflow: auto; } // This was added for the 'site-logo' block which centers with an 'align:center' attribute // instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center // class which would do this for us. I'm not sure why but this centers things appropriately. .aligncenter { text-align: center; }