Using Block Inspector sidebar groups

[bph]

Discussed in #106

^{Originally posted by justintadlock May 2, 2023}
Sometimes, block developers need to add custom color options that are not available as the default Text, Background, and Link color supports, as shown in this screenshot:

This question pops up from time to time, and it'd be good to have a solid resource on how to accomplish it. I've already written code for this in a plugin of my own: https://github.com/x3p0-dev/x3p0-progress/blob/1.0/resources/js/color/panel-color.js

Some things to note:

• You cannot add colors to the default "Color" panel. You must build a custom panel. You should be able to add custom colors to the Color panel now.
• You can add individual colors to other custom panels.

[justintadlock]

There's a newer (and simpler) way to do this now (note that I haven't tested this method): WordPress/gutenberg#47323 (comment)

@ryanwelcher - This is the tutorial we talked about if you want to pick it up.

[ryanwelcher]

This topic is difficult to dive into fully as all of the components that are required to add custom items to the existing controls are all marked as experimental. This alone may not be an issue but the process of adding a new items is very complicated and requires a lot of explanation. @ndiego and I discussed this today while I was working through how to add a new color and we both felt that it is far too much to get into for this post.

As such, I have focused solely on how to target the different areas to put items into them rather than extending the controls. This make the post quite short and I am questioning it's value a bit.

That being said, I have a first draft in place for this for review here and would love any feedback.

[justintadlock]

I think the change of direction is OK, and it's worth exploring what you have.

---

@bph - Do we want to split this topic into two separate tickets? Since this has changed, we should probably make sure we're leaving this open for a specific post that covers color options.

[bph]

I read the draft and I think it's great to cover all the places where extenders can add controls.

I support the change in direction.

[ryanwelcher]

I've added a short conclusion and created the preview for second review - https://developer.wordpress.org/news/?p=1465&preview=1&_ppp=7d65c5a2ea

[marybaum]

I've had my way with the copy in the Google doc. See what you think and move the changes you like to the P2!

[ryanwelcher]

Thanks @marybaum! I'll apply those changes today.

[bph]

Pre-publishing checklist:

• Post Title in Sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Props added?

🙌 Publish! 📗

After-publish checklist

• add Props for reviews to #props channel in WP Slack
• close the issue with a comment to link to the published post

[ryanwelcher]

https://developer.wordpress.org/news/2023/06/using-block-inspector-sidebar-groups/