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

Components: Add extra specific CSS #30205

Closed
wants to merge 5 commits into from
Closed

Components: Add extra specific CSS #30205

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
7aaffbe
Add extra specific CSS to component buttons so that themes don't over…
scruffian Mar 24, 2021
e642c0d
Address review feedback
youknowriad Apr 5, 2021
e7bfefd
Fix classic block toolbar
youknowriad Apr 5, 2021
49745ff
Increate the button styles specificity
youknowriad Apr 12, 2021
e7501e0
Add more specificity to button selectors
youknowriad Apr 12, 2021
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
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/block-variation-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
}
}


.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
display: flex;
justify-content: flex-start;
Expand All @@ -34,13 +35,18 @@
width: 75px;
text-align: center;

button {
button,
// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes.
.editor-styles-wrapper & button.components-button.components-button {
display: inline-flex;
margin-right: 0;
}
}

.block-editor-block-variation-picker__variation {

.block-editor-block-variation-picker__variation,
// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes.
.editor-styles-wrapper & .block-editor-block-variation-picker__variation.components-button.components-button {
padding: $grid-unit-10;
}

Expand Down
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/button-block-appender/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.block-editor-button-block-appender {
.block-editor-button-block-appender,
// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes.
.editor-styles-wrapper .block-editor-button-block-appender.components-button.components-button {
display: flex;
flex-direction: column;
align-items: center;
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/freeform/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,14 @@ div[data-type="core/freeform"] {

// mce global styles: the toolbars may get appended to <body>
.mce-toolbar-grp {
.mce-toolbar .mce-btn button {
all: revert;
border: none;
background: none;
padding: 2px 3px;
cursor: pointer;
}

// Not sure why this is necessary, there seems to be a skin file that
// overrides this upstream.
.mce-btn.mce-active button,
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,9 @@ $color-control-label-height: 20px;
}
}

.wp-block-navigation .block-editor-button-block-appender {
.wp-block-navigation .block-editor-button-block-appender,
// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes.
.editor-styles-wrapper .wp-block-navigation .block-editor-button-block-appender.components-button.components-button {
justify-content: flex-start;
}

Expand Down
48 changes: 36 additions & 12 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,45 @@
// These two first selectors shouldn't be needed ideally,
// but they are useful in case theme styles conflict with Button styles
// For example inside the image block placeholder.
.editor-styles-wrapper input.components-button.components-button,
.editor-styles-wrapper button.components-button.components-button,
.components-button {
align-items: center;
background: none;
border: 0;
border-radius: $radius-block-ui;
box-sizing: border-box;
box-shadow: revert;
color: $gray-900;
cursor: pointer;
display: inline-flex;
text-decoration: none;
font-weight: normal;
font-family: $default-font;
font-size: $default-font-size;
font-style: normal;
font-weight: normal;
height: $button-size;
letter-spacing: normal;
line-height: normal;
min-height: revert;
min-width: revert;
margin: 0;
border: 0;
cursor: pointer;
-webkit-appearance: none;
background: none;
max-height: revert;
max-width: revert;
opacity: 1;
padding: 6px 12px;
stroke: revert;
text-align: revert;
text-decoration: none;
text-indent: 0;
text-shadow: revert;
text-transform: revert;
transition: box-shadow 0.1s linear;
@include reduce-motion("transition");
height: $button-size;
align-items: center;
box-sizing: border-box;
padding: 6px 12px;
border-radius: $radius-block-ui;
color: $gray-900;
vertical-align: revert;
width: revert;
-webkit-appearance: none;
word-break: revert;
word-spacing: revert;
Copy link
Contributor

Choose a reason for hiding this comment

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

can we separate the "revert" styles from the styles that are actually useful to style the button and add a comment explaining why all the reverts are necessary?

Copy link
Contributor

@youknowriad youknowriad Mar 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I actually I feel we should remove the "revert" styles entirely from here and have them in the "reset.css" (I added them here #30176 ). I think if you combine these two PRs, these reverts are not needed anymore here.

Copy link
Contributor

Choose a reason for hiding this comment

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

(still hesitant on this, after landing #30176 we'll get more clarity)


&[aria-expanded="true"],
&:hover {
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,12 @@ $color-palette-circle-spacing: 12px;
background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
}

.components-circular-option-picker__option {

.components-circular-option-picker__option,
// This selector shouldn't be needed ideally,
// but because theme styles can conflict with Button styles
// the default button styles have higher specificity
.editor-styles-wrapper button.components-circular-option-picker__option.components-button.components-button {
display: inline-block;
vertical-align: top;
height: 100%;
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,11 @@
width: 50%;
}

.components-placeholder__fieldset .components-button {
.components-placeholder__fieldset button.components-button,
// This selector shouldn't be needed ideally,
// but they are useful in case theme styles conflict with Button styles
// For example inside the image block placeholder.
.editor-styles-wrapper .components-placeholder__fieldset button.components-button {
margin-right: $grid-unit-15;
margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.

Expand Down
15 changes: 0 additions & 15 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,5 @@
.edit-post-visual-editor {
position: relative;

// The button element easily inherits styles that are meant for the editor style.
// These rules enhance the specificity to reduce that inheritance.
// This is duplicated in edit-site.
& .components-button {
font-family: $default-font;
font-size: $default-font-size;
padding: 6px 12px;

&.is-tertiary,
&.has-icon {
padding: 6px;
}
}

flex: 1 1 auto;

// In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area.
Expand Down