WordPress Developer Hours – Styling Blocks (July 2023)

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. Then, for the second presentation of the session, Justin Tadlock shows you how to integrate CSS Custom Properties into your block stylesheets that play nicely with themes. The technique used integrates block plugins and theme.json while still giving preference to user choice. 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. ___________________________________________ View this video and others on WordPress.TV: https://wordpress.tv/2023/07/26/wordpress-developer-hours-styling-blocks-july-2023/ ___________________________________________ Links from the video: – Justin's repo: https://github.com/x3p0-dev/x3p0-progress – Justin's plugin: https://wordpress.org/plugins/x3p0-progress/ – 'useSetting' hook reference: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#usesetting – Developer Blog: https://developer.wordpress.org/news/ – How to modify theme.json data using server-side filters: https://developer.wordpress.org/news/2023/07/how-to-modify-theme-json-data-using-server-side-filters/ – Contribute to WordPress: https://make.wordpress.org/ ___________________________________________ 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 20:34 - CSS Custom Properties in theme.json (intro) 21:55 - Progress bar example 25:13 - Editing theme.json 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

Category