Redesign Lists in WordPress with Register Block Style

Register a custom block style in Gutenberg with simple PHP and CSS- no JavaScript or build process required.
👉 Full Code github.com/bacoords/example-b...
👉 Full Tutorial www.briancoords.com/custom-li...
👉 Register Block Style developer.wordpress.org/refer...
👉 WP Helpers wphelpers.dev/icons
👉 SVG URL Encoder yoksel.github.io/url-encoder/
👉 Superlist Block wordpress.org/plugins/superli...
00:00:00 Introduction
00:00:50 What is a block style?
00:01:59 The register_block_style function
00:02:37 Our plugin scaffold
00:03:02 Registering our block style
00:04:43 Enqueueing block assets
00:07:31 Writing our custom CSS
00:08:57 Grabbing an SVG icon
00:10:41 Styling with pseudo elements
00:12:14 Making sure our editor styles work
00:13:50 Conclusion and overview

[@carltongordon]

Hey Brian, i want to thank you for these videos, you've cleared up a decent amount of things I've been struggling with since Gutenberg came out in the few videos you have, ive struck gold! thank you man! appreciate it

[@BrianCoords]

Thank you! If you have any topics you think should be covered, let me know.

[@GrantAmbrose]

Is there a downside to using the PHP version vs the JS? and is what's in this video still how you're creating your Block Styles?

[@BrianCoords]

I believe the main difference is that the PHP version lets you define a stylesheet and handles loading the CSS on the frontend. In the JS version, you're responsible for making sure any stylesheets/CSS gets loaded on the frontend.
I do still use this method, but there's some stuff coming in 6.6 that might change my workflow. For now, in my block theme framework, I have a method for loading per block CSS, so I register the styles in JS and then my theme loads the correct block styles.