Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button: Adopt support for border color, style, and width #44574

Merged
merged 5 commits into from
Feb 7, 2023
Merged

Button: Adopt support for border color, style, and width #44574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0ff9c7
Button: Adopt remaining border support features
aaronrobertshaw Sep 29, 2022
58e488c
Override core theme.json's button element style
aaronrobertshaw Sep 29, 2022
47bfcc0
Fix typo
aaronrobertshaw Feb 7, 2023
067f07f
Add additional detail to overrides comment
glendaviesnz Feb 7, 2023
4ca13f0
Simplify comment
glendaviesnz Feb 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/block-library/src/button/block.json
View file
Open in desktop
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
View file
Open in desktop
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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not a huge fan of having to add this much CSS to provide defaults that can overcome styles in core. If anyone has any ideas on a better approach, I'd be happy to evolve this one.

Without these tweaks the user has to set multiple fields before a border shows up. Even now the default border color is currentColor so when the background is white and the button text is white, the border isn't really visible.

Copy link
Contributor

@glendaviesnz glendaviesnz Feb 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

It doesn't seem like we need to replicate this in editor.scss and styles.scss - if I removed this section from here the CSS from styles.scss seemed to be applied in the editor and the frontend? I did a fresh build and a hard reload to make sure it wasn't just a case of the editor styles being cached.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We do need to add this CSS to overcome core's theme.json button element styles which reset border-width to 0.

The theme.json styles get the .editor-styles-wrapper class prefixed to their selectors in the editor. As a result, those styles override the styles in the frontend style.scss.

Without these styles, a user needs to adjust the border width before they can see any border.

To witness this behaviour:

  1. Delete or disable the styles here in the editor.scss file
  2. Make sure you don't have any core/button styles in your theme.json
  3. Edit a post and add a button
  4. Select the button and select only a border color
  5. Note that there is no visible border due to the core theme.json border width reset for button elements.
Screen.Recording.2023-02-07.at.3.13.43.pm.mp4

Copy link
Contributor

@glendaviesnz glendaviesnz Feb 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Thanks for the extra detail - I was adding the border width and then the color so wasn't picking this up - if I had read back through the old comments I would have picked all that up - sorry for wasting your time here!

I have modified the comment to specify this detail like the one in style.scss does.

// 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
View file
Open in desktop
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;
}
}