Skip to content

Instantly share code, notes, and snippets.

@richardtape
Created October 5, 2018 00:18
Show Gist options
  • Save richardtape/452ff0338e0a469c6be0bcad8cde809c to your computer and use it in GitHub Desktop.
Save richardtape/452ff0338e0a469c6be0bcad8cde809c to your computer and use it in GitHub Desktop.
Create custom gutenberg sidebar panel and control
// See richardtape.com/?p=348
/**
* Override the default edit UI to include a new block inspector control for
* adding our custom control.
*
* @param {function|Component} BlockEdit Original component.
*
* @return {string} Wrapped component.
*/
export const addMyCustomBlockControls = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
// If this block supports scheduling and is currently selected, add our UI
if ( isValidBlockType( props.name ) && props.isSelected ) {
return (
<Fragment>
<BlockEdit { ...props } />
<InspectorControls>
<PanelBody title={ __( 'My Custom Panel Heading' ) }>
<TextControl
label={ __( 'My Custom Control' ) }
help={ __( 'Some help text for my custom control.' ) }
value={ props.attributes.scheduledStart || '' }
onChange={ ( nextValue ) => {
props.setAttributes( {
scheduledStart: nextValue,
} );
} } />
</PanelBody>
</InspectorControls>
</Fragment>
);
}
return <BlockEdit { ...props } />;
};
}, 'addMyCustomBlockControls' );
addFilter( 'editor.BlockEdit', 'my-plugin/my-control', addMyCustomBlockControls );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment