-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Style nested <ul>
s with circles instead of normal bullets
#10358
Style nested <ul>
s with circles instead of normal bullets
#10358
Conversation
(As it so often is, the Travis failure seems unrelated.) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This makes a lot more sense to me code-wise. The editor styles specifically :not()
targeting a single block's styles rather than that block managing it seems hacky/inelegant. I like this solution way more.
I haven't tested this locally but I prefer this approach. 👍 on the code aspect.
Thanks @tofumatt! I'll still wait for an "OK" from a design person before merging since this is technically a visual change :) |
@jasmussen Sorry to ping just want to see if I can get a visual OK on this so I can get it in today :) |
Apologies for missing this. I think this is good to go. No strong opinion, but also no objections. 👍 👍 |
Thanks @jasmussen and no worries for missing it! ^__^ |
Matches new Gutenberg 4.0rc1 editor styling, and default browser styles. See WordPress/gutenberg#10358.
Discovered while working on #10303 that we style nested unordered lists with a normal bullet, instead of
circle
which is more typical of user agent stylesheets (aka default browser styles).In the Chrome user agent styles, for instance, you can see the default is overridden:
This adds a rule to the editor stylesheets to handle nested styles.
Here's the before:
And here's the after:
One small implementation note: I've removed a
:not()
selector that was previously ensuring the<ul>
CSS rule did not apply to.wp-block-gallery
and instead placed an override in the gallery block's editor stylesheet.I expect this to be slightly controversial, but this is intentional to avoid a selector specificity issue. Basically,
ul:not(.wp-block-gallery)
is more specific thanol ul
. We would have had to do something likeol:not(.wp-block-gallery) ul
or whatever to increase the specificity which is kind of annoying and unnecessary. To me, this feels like a case where the gallery should manage its own overrides.