[jbr]

Thanks, that’s definitely the right direction!

I’ve got

getEditWrapperProps() {
         
              return { 'class': 'editor-block-list__block EXTRA CLASSES HERE' };
          
      },

The problem I’m having now is that any custom class I have is being removed when the block is selected or hovered, and replaced with

editor-block-list__block is-selected or editor-block-list__block is-hovered, and then back to editor-block-list__block

Any idea if there’s a way to keep the class added? It looks like the editor completely replaces the classes on the div rather than just toggling specific ones.

[jbr]

I think I’ve actually just found what I was looking for through some Google-Fu, you’ll never guess where 😀

https://wp.zacgordon.com/2018/01/01/how-to-use-the-tooltip-component-in-gutenberg/

This is the code I ended up with (in this case it’s a quick toggle for a thick border around the element).

 <Toolbar>
                            <Tooltip text={ __( 'Thick Border', 'jsforwpblocks' )  }>
                                <Button
                                    className={ classnames(
                                        'components-icon-button',
                                        'components-toolbar__control',
                                        { 'is-active': thickBorder },
                                    ) }
                                    
                                    onClick={ () => setAttributes( { thickBorder: ! thickBorder } ) }
                                >
                                     <Dashicon icon="grid-view" />
                                </Button>
                            </Tooltip>
                        </Toolbar>

Thanks for the help, really impressed with the course!

[jbr]

Not too much yet, I’d tried adding the icon name as an attribute to the button in the JSX, and trying to find a way to import from Dashicons.

Do you know if the icons are stored anywhere in WP in JSX format so they can be called in the same way as the SVG icons?

i.e. like

import icon from './icon';

.
.
.

 <Toolbar>
                            <Tooltip text={ __( 'High Contrast', 'jsforwpblocks' )  }>
                                <Button
                                    className={ classnames(
                                        'components-icon-button',
                                        'components-toolbar__control',
                                        { 'is-active': highContrast },
                                    ) }
                                    onClick={ () => setAttributes( { highContrast: ! highContrast } ) }
                                >
                                    { icon }
                                </Button>
                            </Tooltip>
                        </Toolbar>

[Author]

Posts