-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Describe the bug
The default selector for setting .wp-block-quote styles in editor-blocks.css is:
.wp-block-quote:not(.is-large):not(.is-style-large)This means that the selector has the specificity of 3 classes which seems quite high for a default block. It is also logically very strange and goes against CSS orthodoxy that the default value essentially blacklists the core style variations for the block. The default should have the lowest specificity!
The same issue then continues with the cite styles:
.wp-block-quote:not(.is-large):not(.is-style-large) .wp-block-quote__citationThe same thing (but slightly better) impacts the pullquote block:
.wp-block-pullquote:not(.is-style-solid-color)Expected behavior
When providing my own block editor styles, I would expect to write them more or less like this:
.editor-styles-wrapper .wp-block-quote {}
.editor-styles-wrapper .wp-block-quote.is-large,
.editor-styles-wrapper .wp-block-quote.is-style-large {}This is the minimum specificity allowed by the editor style convention that includes the .editor-styles-wrapper.
Because of the higher specificity, it's extremely hard to write automated styles that work on both the front and back end where the structural markup is different.
I would hope to be able to do something like this:
_blocks.scss:
.wp-block-quote {}block-styles.scss:
.editor-styles-wrapper { @import blocks; }My current workaround is to use the repeating class "hack", but this can have a cascading effect of increasing the specificity of many other selectors:
.wp-block-quote.wp-block-quote.wp-block-quote.wp-block-quote /* specificity = 4 classes */Additional context
WordPress 5.2.2