Block Toolbar Controls is one of the best ways to simplify blocks and create a better user experience in the Gutenberg block editor. These controls are easily visible on each selected block, thus, giving instant access from the user. You have to make a better judgment when creating a block because too many block controls will clutter the editorial experience. In this tutorial, I will guide you on how to create and extend your Gutenberg block to have custom block toolbar controls.
1. Loading the Dependencies
To work with Block Toolbar Controls, you need to load the necessary dependencies. The main dependency is the BlockControls
component, which is part of the @wordpress/block-editor
module. This component serves as the wrapper for any toolbar controls you want to add to your blocks. Additionally, you may need to load other modules and components based on your specific requirements.
const { __ } = wp.i18n;
const { BlockControls } = wp.blockEditor;
const { DropdownMenu, MenuGroup, MenuItem, ToolbarGroup } = wp.components;
2. Create the Custom Block Toolbar Control
In this particular example, I will show you how to create a custom toolbar control with multiple options using dropdown component. These options will add and remove classes to the block wrapper and so you can apply background color to it.

3. Add Block Controls Component to the Gutenberg Block
Now that the custom Javascript component for the Block Toolbar Control has been created add it to your block’s edit component. In the example below, I’ve also added the block registration to make it more informative.
4. Extending an Existing Block with Custom Block Toolbar Control
If you want to extend an existing block with a custom block toolbar control, follow the steps below. This approach involves registering the necessary block attributes and including the custom component created earlier.
By following these steps, you can create and extend block toolbar controls in the WordPress Gutenberg block editor. Experiment with different controls and functionalities to enhance the editing experience and provide users with a more intuitive interface. Remember to customize the code examples to match your specific requirements and design preferences.
Feel free to explore the official WordPress documentation for more detailed information and additional options related to block toolbar controls in Gutenberg. Happy coding!
Leave a Reply