Beyond Block Styles: Part 3

[justintadlock]

This will be Part 3 of a planned three-part series. It will teach theme authors how to create a custom icon picker control for the Separator block.

For the full details, see:

• https://github.com/WordPress/developer-blog-content/discussions/130
• https://github.com/WordPress/developer-blog-content/issues/144
• https://github.com/WordPress/developer-blog-content/issues/152

[justintadlock]

I'm working on this post here: https://docs.google.com/document/d/11t45xYE7HCG44ZQUbJcc19lDLH8M2vwyEZYw9nHBaUM/edit?usp=sharing

[justintadlock]

Part 3 is now ready for review! https://docs.google.com/document/d/11t45xYE7HCG44ZQUbJcc19lDLH8M2vwyEZYw9nHBaUM/edit?usp=sharing

[justintadlock]

Thanks to @ndiego for a first review.

[marybaum]

On it for copy within the hour!... from my phoneOn Aug 1, 2023, at 3:42 PM, Justin Tadlock @.***> wrote: Part 3 is now ready for review! https://docs.google.com/document/d/11t45xYE7HCG44ZQUbJcc19lDLH8M2vwyEZYw9nHBaUM/edit?usp=sharing

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: @.***>

[bph]

I went through the example and it works. I also left a few comments on the Google Doc.

Philosophically, I just noticed that would like to follow along with first adding the start button then do the progressive enhancements on the pieces. I didn't like that I had to wait until the very end to get to see something on my test site.

Your approach was that of a very experience developer who has plenty of architectural foresight on how to approach things and does so methodically.

Even with my many years of development, I always put the places where things would go first and then fill them up with the pieces. This might not make any sense to someone, who isn't me, though. 🤣

[justintadlock]

Thanks, @bph. Yes, I'd considered a few different approaches to it. What you described about getting one piece in place and then building on top of it progressively was one of those approaches.

I decided against that because it would've meant adding placeholder code in a couple of spots and re-doing it in later steps. This would've made the post much longer and created more potential areas for a reader to make a mistake.

I definitely see the benefit of doing it that way (you get a quick "win" or two and build confidence as a reader), and will keep it in mind for future posts.

[bph]

Just a short note: I am still debugging the issue: I don't get the icon into the editor nor on the frontend. The gradients seem to come over.

https://github.com/WordPress/developer-blog-content/assets/39980/2f395416-3dc8-45d9-b94a-5c560355e213

[justintadlock]

@bph - It looks like you're missing the icon-specific CSS from Part 2 (second block of code here): https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-2-building-a-custom-style-for-the-separator-block/#designing-icon-separators

[marybaum]

Done and out of the tab!

[justintadlock]

Thank you, @marybaum.

[justintadlock]

And we're live! 🎉 https://developer.wordpress.org/news/2023/08/beyond-block-styles-part-3-building-custom-design-tools/

Thanks for all the help getting this across the finish line, everyone!