Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Create custom gutenberg sidebar panel and control [add extra attr and props]
// See
* Filters registered block settings, extending attributes with our custom data.
* @param {Object} settings Original block settings.
* @return {Object} Filtered block settings.
export function addAttribute( settings ) {
// If this is a valid block
if ( isValidBlockType( ) ) {
// Use Lodash's assign to gracefully handle if attributes are undefined
settings.attributes = assign( settings.attributes, {
scheduledStart: {
type: 'string',
} );
return settings;
}// end addAttribute()
* Override props assigned to save component to inject our custom data.
* This is only done if the component is a valid block type.
* @param {Object} extraProps Additional props applied to save element.
* @param {Object} blockType Block type.
* @param {Object} attributes Current block attributes.
* @return {Object} Filtered props applied to save element.
export function addSaveProps( extraProps, blockType, attributes ) {
// If the current block is valid, add our prop.
if ( isValidBlockType( ) ) {
extraProps.scheduledStart = attributes.scheduledStart;
return extraProps;
}// end addSaveProps()
addFilter( 'blocks.registerBlockType', 'my-plugin/add-attr', addAttribute );
addFilter( 'blocks.getSaveContent.extraProps', 'my-plugin/add-props', addSaveProps );
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.