From e0ff9c7749931a1d7f09d3d38dba56971467b71d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 29 Sep 2022 20:08:50 +1000 Subject: [PATCH 1/5] Button: Adopt remaining border support features --- packages/block-library/src/button/block.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index cc9921953abf66..f2d41a42e6dc2e 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -92,10 +92,16 @@ } }, "__experimentalBorder": { + "color": true, "radius": true, + "style": true, + "width": true, "__experimentalSkipSerialization": true, "__experimentalDefaultControls": { - "radius": true + "color": true, + "radius": true, + "style": true, + "width": true } }, "__experimentalSelector": ".wp-block-button .wp-block-button__link" From 58e488cce34d20aabd6cab1aed463f0ec055f790 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 29 Sep 2022 20:54:56 +1000 Subject: [PATCH 2/5] Override core theme.json's button element style The border-width: 0; set by the button element through the Elements API interferes with the UX of adding a border. It means we are back to the situation needing to set multiple fields before a border shows if we don't override it. --- packages/block-library/src/button/editor.scss | 37 ++++++++++++++++++ packages/block-library/src/button/style.scss | 38 ++++++++++++++++++- 2 files changed, 74 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 05c404a5d295f0..679078d920121f 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -79,3 +79,40 @@ div[data-type="core/button"] { .editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link { text-decoration: inherit; } + +.editor-styles-wrapper .wp-block-button .wp-block-button__link { + // The following styles smooth out the experience editing borders for individual + // buttons. They override the `button-width: 0;` applied by core's theme.json + // via the Elements API button. + &:where(.has-border-color) { + border-width: initial; + } + &:where([style*="border-top-color"]) { + border-top-width: initial; + } + &:where([style*="border-right-color"]) { + border-right-width: initial; + } + &:where([style*="border-bottom-color"]) { + border-bottom-width: initial; + } + &:where([style*="border-left-color"]) { + border-left-width: initial; + } + + &:where([style*="border-style"]) { + border-width: initial; + } + &:where([style*="border-top-style"]) { + border-top-width: initial; + } + &:where([style*="border-right-style"]) { + border-right-width: initial; + } + &:where([style*="border-bottom-style"]) { + border-bottom-width: initial; + } + &:where([style*="border-left-style"]) { + border-left-width: initial; + } +} diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index b4fa27709696ea..d9efc928c5b1c7 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -92,7 +92,6 @@ $blocks-block__margin: 0.5em; border-radius: 0; } - // the first selector is required for old buttons markup .wp-block-button.no-border-radius, .wp-block-button__link.no-border-radius { @@ -116,3 +115,40 @@ $blocks-block__margin: 0.5em; // background-image is required to overwrite a gradient background background-image: none; } + +.wp-block-button .wp-block-button__link { + // The following styles ensure a default border is applied when the user + // selects only a border color or style. This overcomes the zero border + // width applied by core's theme.json via the elements API. + &:where(.has-border-color) { + border-width: initial; + } + &:where([style*="border-top-color"]) { + border-top-width: initial; + } + &:where([style*="border-right-color"]) { + border-right-width: initial; + } + &:where([style*="border-bottom-color"]) { + border-bottom-width: initial; + } + &:where([style*="border-left-color"]) { + border-left-width: initial; + } + + &:where([style*="border-style"]) { + border-width: initial; + } + &:where([style*="border-top-style"]) { + border-top-width: initial; + } + &:where([style*="border-right-style"]) { + border-right-width: initial; + } + &:where([style*="border-bottom-style"]) { + border-bottom-width: initial; + } + &:where([style*="border-left-style"]) { + border-left-width: initial; + } +} From 47bfcc077f4800921d3cdc3f9606e1513f1386b5 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 7 Feb 2023 16:11:39 +1000 Subject: [PATCH 3/5] Fix typo --- packages/block-library/src/button/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index 679078d920121f..a02c616b0fce08 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -82,7 +82,7 @@ div[data-type="core/button"] { .editor-styles-wrapper .wp-block-button .wp-block-button__link { // The following styles smooth out the experience editing borders for individual - // buttons. They override the `button-width: 0;` applied by core's theme.json + // buttons. They override the `border-width: 0;` applied by core's theme.json // via the Elements API button. &:where(.has-border-color) { border-width: initial; From 067f07fbc3133076f3c237c256da89765236268e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Feb 2023 09:27:41 +1300 Subject: [PATCH 4/5] Add additional detail to overrides comment --- packages/block-library/src/button/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index a02c616b0fce08..b82e7d02235d3b 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -83,7 +83,8 @@ div[data-type="core/button"] { .editor-styles-wrapper .wp-block-button .wp-block-button__link { // The following styles smooth out the experience editing borders for individual // buttons. They override the `border-width: 0;` applied by core's theme.json - // via the Elements API button. + // via the Elements API button. Without these overrides if a user selects a border + // color it won't show in the editor unless they also select a border width. &:where(.has-border-color) { border-width: initial; } From 4ca13f0250dd4f497638b53ec9f6bd1527bd26e0 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 8 Feb 2023 09:38:04 +1300 Subject: [PATCH 5/5] Simplify comment --- packages/block-library/src/button/editor.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss index b82e7d02235d3b..3c36586bbfabdf 100644 --- a/packages/block-library/src/button/editor.scss +++ b/packages/block-library/src/button/editor.scss @@ -81,10 +81,8 @@ div[data-type="core/button"] { } .editor-styles-wrapper .wp-block-button .wp-block-button__link { - // The following styles smooth out the experience editing borders for individual - // buttons. They override the `border-width: 0;` applied by core's theme.json - // via the Elements API button. Without these overrides if a user selects a border - // color it won't show in the editor unless they also select a border width. + // The following styles ensure a default border is applied when the user selects only a border color or style in the editor, + // but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button. &:where(.has-border-color) { border-width: initial; }