ToolsPanel and ToolsPanelItem Examples #136
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Thanks for putting this together :) I have some suggestions/additions that I probably missed in my original brief. So sorry for that.
I think it would be good for the guide to briefly give some background into why this guide is useful / what issue we are trying to solve for.
In this case that would be something like:
WordPress recently adopted a new UI approach for grouping related settings in the Inspector Controls sidebar. Instead of grouping the settings in PanelBody components which create an accordion esc user experience, the new ToolPanel approach allows users to toggle individual settings from a semantic group. This reduces the number of unused controls shown to the user when they open a block sidebar. This approach also makes it much easier for extenders to add additional settings into these semantic panels. So if you for example have a custom typography setting which isn't already in core like lets say the writing mode, you can create a block extension and add your own custom setting into the typography panel of a block.
Leading into these guides with a little preamble that explains some context makes them much more approachable and explains why one would even care.
And that is the reason why I even want to write a guide about this, even though the components are still experimental, this is the only way for us as extenders to properly render settings in these slots. Which is something we commonly need to achieve :)
And of course we can not just use this API to add individual panel items to existing panels but also create new panels entirely from scratch. Which is what I had shown in the animation example. Which is useful when we want to create experiences wich feel natively integrated into the editor.
|
Preface has been added and also a small blurb on creating a new panel as shown in the animation portion of the code example. |
|
@fabiankaegy committed suggestion. Ready for re-review |
guides/tools-panel.md
Outdated
| If you have custom controls that should exist within or be added to an existing block support panels group in the WP Admin block settings and you would like a fine grained ability on when to enable or have the user enable a specific control. This functionality also provides the benefit of resetting a control to a default state. Additionally new panels can be created using `ToolsPanel` as shown in the example below where a new `Animation` panel would be created. | ||
|
|
||
| ### Caveats: | ||
| * When enabling the controls they must be tied to a block support panel group ie: `border`, `color`, `dimensions`, `typography` or `styles`. |
There was a problem hiding this comment.
This is not correct. You can technically use them anywhere. These slots are just ways to add them to existing panels :)
guides/tools-panel.md
Outdated
|
|
||
| ### Caveats: | ||
| * When enabling the controls they must be tied to a block support panel group ie: `border`, `color`, `dimensions`, `typography` or `styles`. | ||
| * It is best to use a `ToolsPanel` if there will be multiple `ToolsPanelItem`'s within a specific block support panel group. `ToolsPanelItem` is preferred if there is just a singluar `ToolsPanelItem` within a group. |
There was a problem hiding this comment.
I'm not sure I fully understand this here. The way I would say it is that you can use the ToolsPanel component to create entirely new panels that can house ToolsPanelItems, or your can extend existing ToolsPanels by adding individual ToolsPanelItems to them.
|
@pdavies88 sorry found 2 more small things. Besides that this is ready to go :) |
Co-authored-by: Fabian Kägy <[email protected]>
…actices into guide/tools-panel
|
@fabiankaegy thanks so much I updated the section to fix those two caveats |
Description of the Change
Add a guide for adding a setting to an existing tools panel like typography
Closing # #133