Create custom gutenberg sidebar panel and control [add extra attr and props]

gutenberg-sidebar-add-attr-and-prop.js

// 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 );