From 29ae534a4c862296a6dea54872f64fcef6b0ba78 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 1 Apr 2022 13:45:02 +1000 Subject: [PATCH 1/5] Opt into border support for individual column blocks --- packages/block-library/src/column/block.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index 8aa305ef961f7e..d241fc199b10c4 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -41,6 +41,18 @@ "padding": true } }, + "__experimentalBorder": { + "color": true, + "radius": true, + "style": true, + "width": true, + "__experimentalDefaultControls": { + "color": true, + "radius": true, + "style": true, + "width": true + } + }, "__experimentalLayout": true } } From 2b554475f93644b4422e4adc3e481d8941caf240 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 1 Apr 2022 15:48:36 +1000 Subject: [PATCH 2/5] Attempt to clear border support styles on mobile --- packages/block-library/src/columns/style.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index eb7e7d18072044..1b1430eb863180 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -71,6 +71,20 @@ } } } + + &:where(:not(.is-not-stacked-on-mobile)) { + @media (max-width: #{ ($break-medium - 1) }) { + & > .wp-block-column[class*="has-border-"], // Clear when color defined. + & > .wp-block-column[style*="border-style"], // Clear when border style set. + & > .wp-block-column[style*="border-width"], + & > .wp-block-column[style*="border-top-width"], + & > .wp-block-column[style*="border-right-width"], + & > .wp-block-column[style*="border-bottom-width"], + & > .wp-block-column[style*="border-left-width"] { + border-width: 0 !important; + } + } + } } // Add low specificity default padding to columns blocks with backgrounds. From 1cf09028716064955a872bd52750aef8bb4efb15 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 7 Apr 2022 14:10:22 +1000 Subject: [PATCH 3/5] Hide individual left/right borders when stacked --- packages/block-library/src/columns/style.scss | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 1b1430eb863180..c135ba859f21e6 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -72,16 +72,21 @@ } } + // Hide individual left and right borders when the "stack on mobile" option + // is enabled and on the mobile viewport. This still allows for simple + // uniform flat border to retain its left/right borders. &:where(:not(.is-not-stacked-on-mobile)) { @media (max-width: #{ ($break-medium - 1) }) { - & > .wp-block-column[class*="has-border-"], // Clear when color defined. - & > .wp-block-column[style*="border-style"], // Clear when border style set. - & > .wp-block-column[style*="border-width"], - & > .wp-block-column[style*="border-top-width"], + & > .wp-block-column[style*="border-left-width"], + & > .wp-block-column[style*="border-left-style"], + & > .wp-block-column[class*="has-border-left-color"] { + border-left-width: 0 !important; + } + & > .wp-block-column[style*="border-right-width"], - & > .wp-block-column[style*="border-bottom-width"], - & > .wp-block-column[style*="border-left-width"] { - border-width: 0 !important; + & > .wp-block-column[class*="has-border-right-color"], + & > .wp-block-column[style*="border-right-style"] { + border-right-width: 0 !important; } } } From 41c5c5b7167846cacf63c2e33b07db4943191907 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 7 Apr 2022 17:04:46 +1000 Subject: [PATCH 4/5] Remove responsive handling of borders --- packages/block-library/src/columns/style.scss | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index c135ba859f21e6..eb7e7d18072044 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -71,25 +71,6 @@ } } } - - // Hide individual left and right borders when the "stack on mobile" option - // is enabled and on the mobile viewport. This still allows for simple - // uniform flat border to retain its left/right borders. - &:where(:not(.is-not-stacked-on-mobile)) { - @media (max-width: #{ ($break-medium - 1) }) { - & > .wp-block-column[style*="border-left-width"], - & > .wp-block-column[style*="border-left-style"], - & > .wp-block-column[class*="has-border-left-color"] { - border-left-width: 0 !important; - } - - & > .wp-block-column[style*="border-right-width"], - & > .wp-block-column[class*="has-border-right-color"], - & > .wp-block-column[style*="border-right-style"] { - border-right-width: 0 !important; - } - } - } } // Add low specificity default padding to columns blocks with backgrounds. From 2bc19bbfc3fc078e2b491e6647c3a9243295a11c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 7 Apr 2022 17:05:15 +1000 Subject: [PATCH 5/5] Remove border radius support from column blocks --- packages/block-library/src/column/block.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json index d241fc199b10c4..c12af2be6745ba 100644 --- a/packages/block-library/src/column/block.json +++ b/packages/block-library/src/column/block.json @@ -43,12 +43,10 @@ }, "__experimentalBorder": { "color": true, - "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, - "radius": true, "style": true, "width": true }