If a new style variation is added by the theme, it needs its own CSS to create the desired effect on both the front end and the back end. This is done using plain CSS, targeting a custom class defined by the variation.
- [Instructor] The new lede style variation we just added…into the theme works exactly the same way…all the other style variations…we've talked about previously worked.…If we apply the lede style variation…to this paragraph up here, then publish to post,…and jump to the front end, you'll see,…well, right now everything looks exactly the same.…But if we inspect the code, this paragraph…now has the class is-style-lede applied to it.…Looking back at the code we created,…you'll see that this is-style-lede actually takes…this name property from the registerBlockStyle method…and applies it to the end of the class.…
So is-style, dash, and then…whatever the name you apply here.…That means if we want to style this particular new block,…all we have to do is target is-style-lede in our CSS,…and we can create a whole new style…for that particular style variation,…which is what I've done here.…Normally, you just target is-style-lede…or whatever name you apply to your style variation,…but because of the idiosyncrasies of the theme…
Released
1/22/2019- Declaring support for default block styles
- Adding support and styles for wide alignment
- Supporting theme-specific colors and fonts
- Extending block styles
- Adding new style variations
Share this video
Embed this video
Video: Add styles to style variations