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

Quote block: CSS regarding "is-style-big" from WordPress 6.0 breaks existing styles. #41219

Closed
ddryo opened this issue May 23, 2022 · 3 comments
Labels
[Block] Quote Affects the Quote Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed

Comments

@ddryo
Copy link
Contributor

ddryo commented May 23, 2022

Description

With WordPress 6.0, the level of detail in the CSS regarding .wp-block-quote.is-style-large is too strong.

It is changing from .wp-block-quote.is-style-large to .wp-block-quote.is-style-large:not(.is-style-plain).

Specifically, the following CSS.

.wp-block-quote.is-style-large:not(.is-style-plain), .wp-block-quote.is-large:not(.is-style-plain) {
    margin-bottom: 1em;
    padding: 0 1em;
}
.wp-block-quote.is-style-large:not(.is-style-plain) p, .wp-block-quote.is-large:not(.is-style-plain) p {
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.6;
}
.wp-block-quote.is-style-large:not(.is-style-plain) p, .wp-block-quote.is-large:not(.is-style-plain) p {
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.6;
}

I understand that the change is due to Large style being removed in 37580, but the impact on existing styles is too strong.

As one example, the theme I am developing will be affected as follows.

Before
スクリーンショット 2022-05-23 12 08 44

After
スクリーンショット 2022-05-23 12 09 48

Previously, we could simply prepare CSS with the same level of detail in .wp-block-quote.is-style-large and load it later than the core style, but starting with 6.0, you need to write it as .wp-block-quote.is-style-large.is-style-large.

As discussed at #40163, it would be better to use :where.

Step-by-step reproduction instructions

.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@ddryo
Copy link
Contributor Author

ddryo commented May 23, 2022

I understand that we can make the selector stronger and adjust it on the theme side.

However, if that is really the only way to do it, I think it would be better to remove the is-style-large CSS altogether.

That way, the amount of CSS can be reduced without changing the amount of work on the part of the theme developer.

@markhowellsmead
Copy link

markhowellsmead commented May 23, 2022

See also #40159, #36135, #35840, #34047, #29705, #17511 and #39971.

@justintadlock justintadlock added [Block] Quote Affects the Quote Block CSS Styling Related to editor and front end styles, CSS-specific issues. labels May 23, 2022
@carolinan
Copy link
Contributor

I will close this as a duplicate of #40163.

@carolinan carolinan closed this as not planned Won't fix, can't repro, duplicate, stale Aug 3, 2022
@carolinan carolinan added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Aug 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Quote Affects the Quote Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed
Projects
None yet
Development

No branches or pull requests

4 participants