WordPress Developer Hours: Styling Blocks

Styling blocks: empowering users with CSS Custom Properties

It's important not to be too prescriptive when developing blocks, and to allow users to have as much control as possible over the look and feel of the blocks on their websites.

In this edition of WordPress Developer Hours we talk about CSS Custom Properties (also known as CSS variables) and look at how you can leverage them in blocks to give users more control over the styling and presentation of their sites.

First up, Michael Burridge presents a solution to a common problem, i.e. how to allow users to have control over the styling of inner elements in blocks which have complex markup. While it's relatively simple to allow users to style a block at the root level, this presentation looks at how you can assign the values stored in block attributes to CSS Custom Properties and use them to apply user-defined styling to child-elements in both static and dynamic blocks.

Whether you're just starting out with block development or have built dozens of blocks already, this WordPress Developer Hours session is for you, and you're sure to learn a ton.
___________________________________________

___________________________________________

Links from the video:

___________________________________________

00:00 - Introduction

Michael
03:22 - Blocks with complex markup (intro)
05:04 - CSS Custom Properties
08:56 - Outline of the strategy
10:16 - CSS Custom Properties in static blocks
14:10 - CSS Custom Properties in dynamic blocks
17:44 - Q & A

Justin
21:55 - Progress bar example
30:25 - Q & A

37:30 - Getting all the colors
39:52 - The Developer Blog
40:30 - Font sizes in templates

48:25 - Wrap up