Use case or problem
I would like to add context-aware styling to my preview styles, for example:
h5 + h6 {
margin-top: -0.9444444444rem;
}
This would allow utilizing CSS typography frameworks like https://matejlatin.github.io/Gutenberg/
Proposed solution
I could see two approaches to enabling this.
- Don’t wrap preview elements in div tags
- Apply a class to the div tags indicating what the child element is. For example
div.h1
,div.table
, etc…
Current workaround (optional)
I attempted to apply the classes myself using a plugin, but it looks like the preview pane is virtualized, so I can’t access all the elements when the preview loads.