Skip to content

Commit

Permalink
Button: Adopt support for border color, style, and width (#44574)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw authored Feb 7, 2023
1 parent 53fab10 commit 3f7e7f9
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 2 deletions.
8 changes: 7 additions & 1 deletion packages/block-library/src/button/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
36 changes: 36 additions & 0 deletions packages/block-library/src/button/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,39 @@ 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 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;
}
&: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;
}
}
38 changes: 37 additions & 1 deletion packages/block-library/src/button/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
}

1 comment on commit 3f7e7f9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 3f7e7f9.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4119186263
📝 Reported issues:

Please sign in to comment.