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

Remove invalid buttons block CSS property #33793

Merged

Conversation

mukeshpanchal27
Copy link
Member

This will fix for #32434

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Thanks for working on this @mukeshpanchal27.

Would you be able to give the PR a proper title like "Fix invalid CSS". The PR titles appear in the changelog, so it's great if there's a readable description.

Comment on lines 40 to 49
&:not(
.is-content-justification-space-between,
.is-content-justification-right,
.is-content-justification-left,
.is-content-justification-center
) .wp-block[data-align="center"] {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is an interesting one, because this is valid CSS and supported by browsers, but the spec this is part of is technically a working draft, which is why the validator has flagged it.

The 'note' part here mentions it:
https://drafts.csswg.org/selectors/#negation

Copy link
Contributor

@peterwilsoncc peterwilsoncc Aug 2, 2021

Choose a reason for hiding this comment

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

The way :not() contributes to specificity is a little strange: the specificity is consistently the value of the most specific selector in the list.

For the existing code, this results in the :not() selector contributing one class to the specificity. Bringing the specificity of the generated selector to 0, 0, 4, 0.

In the proposed code, each instance of the :not() selector contributes one class. Bringing the specificity of the generated selector to 0, 0, 7, 0.

Given the code works in all browsers WP and Gutenberg supports, I'd suggest keeping the code as currently published. The reported validator issue isn't a practical issue.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think I agree with leaving this one as is.

@mukeshpanchal27 Do you agree, and are you able to update this PR to address this?

Copy link
Contributor

Choose a reason for hiding this comment

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

@mukeshpanchal27 Checking if you're able to add this back to the PR branch.

Copy link
Member Author

Choose a reason for hiding this comment

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

@desrosj PR updated as requested.

packages/block-library/src/separator/style.scss Outdated Show resolved Hide resolved
@talldan talldan added [Type] Code Quality Issues or PRs that relate to code quality CSS Styling Related to editor and front end styles, CSS-specific issues. labels Aug 2, 2021
@desrosj desrosj changed the title Fix #32434 Remove invalid buttons block CSS property Nov 2, 2021
@desrosj desrosj merged commit 1876833 into WordPress:trunk Nov 2, 2021
@github-actions github-actions bot added this to the Gutenberg 11.9 milestone Nov 2, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants