Extend Wordpress Gutenberg blocks via React

wp-extend-gutenberg.js

const { __ } = wp.i18n;
const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const { Fragment, cloneElement } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, ToggleControl } = wp.components;
const blockHasParent = ( clientId ) => clientId !== wp.data.select( 'core/editor' ).getBlockHierarchyRootClientId( clientId );

// Filter supports props
addFilter(
  "blocks.registerBlockType",
  "pf/customize-support-props",
  ( props, name ) => {
  	props.supports = Object.assign({}, props.supports, {
  	    html: false
  	});

    // Allow anchor-menu blocks inside core/cover blocks  
  	if ( name == 'acf/anchor-menu' ) {	
  		props.parent = [ 'core/cover' ];
  	}

    // Only allow align left for paragraph blocks
  	if ( name == 'core/paragraph' ) {	
  		props.supports = Object.assign({}, props.supports, {
  		  align: ['left']
  		});
  	}

  	return props;
  }
);


wp.domReady(() => {
  // Remove circle-mask option from core/image blocks
	wp.blocks.unregisterBlockStyle(
		'core/image',
		[ 'circle-mask' ]
	);

 // Add option to add inline caption to core/image blocks
	wp.blocks.registerBlockStyle(
		'core/image',
		[
			{
				name: 'inline-caption',
				label: 'Inline Caption',
			}
		]
	);
});


// Add `sticky sidebar` flag attribute
addFilter(
	'blocks.registerBlockType',
	'pf/attr_sticky_sidebar',
	( props, name ) => {
		if ( name !== 'core/columns' ) {	
			return props;
		}

		const attributes = {
			...props.attributes,
			sticky_sidebar: {
				type: 'boolean',
				default: false
			},
		};

		return { ...props, attributes };
	}
);

// Edit `sticky sidebar` flag
const withInspectorControlsStickySidebar = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		if ( props.name !== 'core/columns' || wp.data.select('core/editor').getCurrentPostType() !== 'page' ) {
			return <BlockEdit { ...props } />;
		}

		const { attributes, setAttributes } = props;
		const checked = true === attributes.sticky_sidebar;

		return (
			<Fragment>
				<BlockEdit { ...props } />
				<InspectorControls>
					<PanelBody title={ __( 'Sticky Sidebar' ) }>
						<ToggleControl
							label={ __( 'Has sticky sidebar?' ) }
							checked={ checked }
							onChange={ () => setAttributes( { sticky_sidebar: checked ? '' : true } ) }
							help={ __( '' ) }
						/>
					</PanelBody>
				</InspectorControls>
			</Fragment>
		);
	};
}, 'withInspectorControlsStickySidebar' );

addFilter( 'editor.BlockEdit', 'pf/sticky_sidebar', withInspectorControlsStickySidebar );


// Add `is_innerblock` flag attribute 
addFilter(
	'blocks.registerBlockType',
	'pf/attr_is_inner_block',
	( props, name ) => {

		const attributes = {
			...props.attributes,
			is_innerblock: {
				type: 'boolean',
				default: false
			},
		};

		return { ...props, attributes };
	}
);


// Block edit
const addInnerBlockFlag = createHigherOrderComponent( ( BlockEdit ) => {
	
	return ( props ) => {
		if ( blockHasParent(props.clientId) ) {
			const { attributes, setAttributes } = props;
			setAttributes( { is_innerblock: true } );
		}

		return <BlockEdit { ...props } />;
	};

}, 'addInnerBlockFlag' );

addFilter( 'editor.BlockEdit', 'pf/edit_innerblock_flag', addInnerBlockFlag );