Skip to content

Instantly share code, notes, and snippets.

@richardtape
Created October 5, 2018 00:24
Show Gist options
  • Save richardtape/ab7784170c5322ada39d89c770becdf7 to your computer and use it in GitHub Desktop.
Save richardtape/ab7784170c5322ada39d89c770becdf7 to your computer and use it in GitHub Desktop.
Create custom gutenberg sidebar panel and control [add extra attr and props]
// See https://richardtape.com/?p=348
/**
* 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( settings.name ) ) {
// 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( blockType.name ) ) {
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