diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index c363d6e6fd..ddda3b7a8c 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -55,19 +55,41 @@ img { /** * These are default block editor widths in case the theme doesn't provide them. */ -.wp-block-group.alignfull, -*[class*="wp-container-"] { +/*.wp-block-group.alignfull, +*[class*="wp-container-"] //Anything that inherits layout (container) +{ + //give it some padding + padding-left: var(--wp--custom--post-content--padding--left); + padding-right: var(--wp--custom--post-content--padding--right); + + //nested containers don't need the extra padding + [class*="wp-container-"] { + padding-left: unset; + padding-right: unset; + } + + > .alignfull { // Any direct descendant that is alignfull + // bust out of the container's padding + 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; + } +}*/ +.wp-site-blocks { padding-left: var(--wp--custom--post-content--padding--left); padding-right: var(--wp--custom--post-content--padding--right); } -.wp-block-group.alignfull *[class*="wp-container-"], -.wp-block-group.alignfull > .alignfull, -*[class*="wp-container-"] *[class*="wp-container-"], -*[class*="wp-container-"] > .alignfull { +.wp-site-blocks .alignfull { + width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right)) !important; 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; +} + +.wp-site-blocks .alignfull .alignfull { + width: auto !important; + margin-left: auto !important; + margin-right: auto !important; } @media (min-width: 480px) { diff --git a/blockbase/sass/base/_alignment.scss b/blockbase/sass/base/_alignment.scss index 827de38cc1..5c5d0c5a8a 100644 --- a/blockbase/sass/base/_alignment.scss +++ b/blockbase/sass/base/_alignment.scss @@ -1,18 +1,37 @@ -.wp-block-group.alignfull, +/*.wp-block-group.alignfull, *[class*="wp-container-"] //Anything that inherits layout (container) { //give it some padding padding-left: var(--wp--custom--post-content--padding--left); padding-right: var(--wp--custom--post-content--padding--right); - //Any nested containers, and anything that is alignfull - *[class*="wp-container-"], // Any nested containers + //nested containers don't need the extra padding + [class*="wp-container-"] { + padding-left: unset; + padding-right: unset; + } + > .alignfull { // Any direct descendant that is alignfull // bust out of the container's padding 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; } +}*/ + +.wp-site-blocks { + padding-left: var(--wp--custom--post-content--padding--left); + padding-right: var(--wp--custom--post-content--padding--right); + .alignfull { + width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important; + margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important; + margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important; + .alignfull { + width: auto !important; + margin-left: auto !important; + margin-right: auto !important; + } + } } @include break-mobile {