From 0c2571f3c9bf85a8d7d370a8089568fc2525bd59 Mon Sep 17 00:00:00 2001 From: Maggie Date: Fri, 20 Aug 2021 15:42:29 +0200 Subject: [PATCH 1/3] removed margin rules from nested containers --- blockbase/assets/ponyfill.css | 2 -- blockbase/sass/base/_alignment.scss | 2 -- 2 files changed, 4 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index c363d6e6fd..3551df47c9 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -61,9 +61,7 @@ img { 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 { margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important; margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important; diff --git a/blockbase/sass/base/_alignment.scss b/blockbase/sass/base/_alignment.scss index 827de38cc1..00227d22e8 100644 --- a/blockbase/sass/base/_alignment.scss +++ b/blockbase/sass/base/_alignment.scss @@ -5,8 +5,6 @@ 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 > .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; From 5d499f66055fca9435a40e4159b41ab4484b3ade Mon Sep 17 00:00:00 2001 From: Maggie Date: Mon, 23 Aug 2021 15:52:32 +0200 Subject: [PATCH 2/3] remove padding from nested containers --- blockbase/assets/ponyfill.css | 6 ++++++ blockbase/sass/base/_alignment.scss | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index 3551df47c9..a18c8f8189 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -61,6 +61,12 @@ img { padding-right: var(--wp--custom--post-content--padding--right); } +.wp-block-group.alignfull [class*="wp-container-"], +*[class*="wp-container-"] [class*="wp-container-"] { + padding-left: unset; + padding-right: unset; +} + .wp-block-group.alignfull > .alignfull, *[class*="wp-container-"] > .alignfull { margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important; diff --git a/blockbase/sass/base/_alignment.scss b/blockbase/sass/base/_alignment.scss index 00227d22e8..fa8da2568e 100644 --- a/blockbase/sass/base/_alignment.scss +++ b/blockbase/sass/base/_alignment.scss @@ -5,6 +5,12 @@ 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; From 097d1ba548040823ee4a04eda54956fb5067edd3 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 24 Aug 2021 09:51:11 +0200 Subject: [PATCH 3/3] simplify alignments --- blockbase/assets/ponyfill.css | 38 +++++++++++++++++++++-------- blockbase/sass/base/_alignment.scss | 17 ++++++++++++- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index a18c8f8189..ddda3b7a8c 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -55,23 +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); -} -.wp-block-group.alignfull [class*="wp-container-"], -*[class*="wp-container-"] [class*="wp-container-"] { - padding-left: unset; - padding-right: unset; + //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 > .alignfull, -*[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 fa8da2568e..5c5d0c5a8a 100644 --- a/blockbase/sass/base/_alignment.scss +++ b/blockbase/sass/base/_alignment.scss @@ -1,4 +1,4 @@ -.wp-block-group.alignfull, +/*.wp-block-group.alignfull, *[class*="wp-container-"] //Anything that inherits layout (container) { //give it some padding @@ -17,6 +17,21 @@ 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 {