Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add custom toggle control on Gutenberg Advanced Block Panel. View full tutorials at https://jeffreycarandang.com/extending-gutenberg-core-blocks-with-custom-attributes-and-controls/
/**
* WordPress Dependencies
*/
const { __ } = wp.i18n;
const { addFilter } = wp.hooks;
const { Fragment } = wp.element;
const { InspectorAdvancedControls } = wp.editor;
const { createHigherOrderComponent } = wp.compose;
const { ToggleControl } = wp.components;
/**
* Add mobile visibility controls on Advanced Block Panel.
*
* @param {function} BlockEdit Block edit component.
*
* @return {function} BlockEdit Modified block edit component.
*/
const withAdvancedControls = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const {
attributes,
setAttributes,
isSelected,
} = props;
const {
visibleOnMobile,
} = attributes;
return (
<Fragment>
<BlockEdit {...props} />
{ isSelected &&
<InspectorAdvancedControls>
<ToggleControl
label={ __( 'Mobile Devices Visibity' ) }
checked={ !! visibleOnMobile }
onChange={ () => setAttributes( { visibleOnMobile: ! visibleOnMobile } ) }
help={ !! visibleOnMobile ? __( 'Showing on mobile devices.' ) : __( 'Hidden on mobile devices.' ) }
/>
</InspectorAdvancedControls>
}
</Fragment>
);
};
}, 'withAdvancedControls');
addFilter(
'editor.BlockEdit',
'editorskit/custom-advanced-control',
withAdvancedControls
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.