Last active
June 5, 2023 17:05
-
-
Save phpbits/63aaa65374c407d26b842512f5b648be to your computer and use it in GitHub Desktop.
Create the Custom Gutenberg Block Toolbar Control https://jeffreycarandang.com/how-to-create-and-extend-block-toolbar-controls-on-wordpress-gutenberg-block-editor/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const { __ } = wp.i18n; | |
const { BlockControls } = wp.blockEditor; | |
const { DropdownMenu, MenuGroup, MenuItem, ToolbarGroup } = wp.components; | |
const Controls = (props) => { | |
const { attributes, setAttributes } = props; | |
const { theme } = attributes; | |
const themes = [ | |
{ | |
key: '', | |
label: __('Default', 'custom-domain'), | |
}, | |
{ | |
key: 'dark', | |
label: __('Dark', 'custom-domain'), | |
}, | |
{ | |
key: 'retro', | |
label: __('Retro', 'custom-domain'), | |
}, | |
{ | |
key: 'vintage', | |
label: __('Vintage', 'custom-domain'), | |
}, | |
]; | |
return ( | |
<BlockControls group="other"> | |
<ToolbarGroup> | |
<DropdownMenu | |
icon={<span>{__('Theme', 'custom-domain')}</span>} | |
label={__('Switch Theme', 'custom-domain')} | |
> | |
{({ onClose }) => ( | |
<MenuGroup> | |
{themes.map((themeData) => { | |
return ( | |
<MenuItem | |
icon={theme === themeData.key ? 'yes' : ''} | |
onClick={() => { | |
setAttributes({ theme: themeData.key }); | |
onClose(); | |
}} | |
> | |
{themeData.label} | |
</MenuItem> | |
); | |
})} | |
</MenuGroup> | |
)} | |
</DropdownMenu> | |
</ToolbarGroup> | |
</BlockControls> | |
); | |
}; | |
export default Controls; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment