Builder Basics: Adding Custom CSS to Block Themes
Details
One major benefit of block themes is that they can be built with very little CSS. For example, the Twenty Twenty-Three theme has none. All block styles are defined in a theme.json file. While theme.json is getting more powerful with each WordPress release, you will likely need to add some custom CSS in most projects.
This Online Workshop will explore ways to add custom CSS to a block theme while ensuring those styles work correctly in the Editor and on the site's frontend. If time permits, we will also discuss a Sass workflow you can employ to optimize per-block styles.
Learning Objectives
- Understand when to use custom CSS in a block theme and when you probably don’t need it.
- Learn how to target specific block types with CSS.
- Learn how to use per-block stylesheets.
- Learn how to use the new custom CSS field in the Site Editor (coming in 6.2) and how it ties to theme.json.
- Learn how to combine per-block stylesheets with Sass. (if time permits)
Meetup Information
Where: Zoom (Link will be visible after RSVP)
Audience: Builders
Level: Intermediate
Language: English with live Zoom transcription
