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.

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

Reduce specificity of block library styles conflicting with block supports #59457

Merged
merged 1 commit into from Mar 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/theme.scss
Expand Up @@ -2,6 +2,6 @@
@include caption-style-theme();
}

.wp-block-audio {
:where(.wp-block-audio) {
margin: 0 0 1em 0;
}
8 changes: 6 additions & 2 deletions packages/block-library/src/cover/style.scss
@@ -1,12 +1,16 @@
// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
:where(.wp-block-cover-image, .wp-block-cover) {
min-height: 430px;
padding: 1em;
}

.wp-block-cover-image,
.wp-block-cover {
position: relative;
background-position: center center;
min-height: 430px;
display: flex;
justify-content: center;
align-items: center;
padding: 1em;
// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/embed/theme.scss
Expand Up @@ -2,6 +2,6 @@
@include caption-style-theme();
}

.wp-block-embed {
:where(.wp-block-embed) {
margin: 0 0 1em 0;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/image/theme.scss
Expand Up @@ -2,6 +2,6 @@
@include caption-style-theme();
}

.wp-block-image {
:where(.wp-block-image) {
Copy link
Member

Choose a reason for hiding this comment

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

This caused a regression: there's a default block style that is now being applied to the image block:

html :where(.wp-block) {

margin: 0 0 1em 0;
}
4 changes: 3 additions & 1 deletion packages/block-library/src/pullquote/theme.scss
@@ -1,9 +1,11 @@
.wp-block-pullquote {
:where(.wp-block-pullquote) {
border-top: 4px solid currentColor;
border-bottom: 4px solid currentColor;
margin-bottom: 1.75em;
color: currentColor;
}

.wp-block-pullquote {
cite,
footer,
&__citation {
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/quote/theme.scss
@@ -1,8 +1,7 @@
.wp-block-quote {
:where(.wp-block-quote) {
border-left: 0.25em solid currentColor;
margin: 0 0 1.75em 0;
padding-left: 1em;

cite,
footer {
color: currentColor;
Expand Down
7 changes: 0 additions & 7 deletions packages/block-library/src/social-links/editor.scss
Expand Up @@ -4,13 +4,6 @@
display: inline-block;
margin-left: $grid-unit-10;
}

// Unset background colors that can be inherited from Global Styles.
// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
// The rule can be removed if editor styles get lowered in specificity.
&.wp-block-social-links {
background: none;
}
}

// Prevent toolbar from jumping when selecting / hovering a link.
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/table/theme.scss
@@ -1,6 +1,4 @@
.wp-block-table {
margin: 0 0 1em 0;

td,
th {
word-break: normal;
Expand All @@ -10,3 +8,7 @@
@include caption-style-theme();
}
}

:where(.wp-block-table) {
margin: 0 0 1em 0;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/template-part/theme.scss
@@ -1,5 +1,5 @@
// Same as the group block styles.
.wp-block-template-part {
:where(.wp-block-template-part) {
&.has-background {
// Matches paragraph Block padding
padding: $block-bg-padding--v $block-bg-padding--h;
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/video/theme.scss
Expand Up @@ -2,6 +2,6 @@
@include caption-style-theme();
}

.wp-block-video {
:where(.wp-block-video) {
margin: 0 0 1em 0;
}