Support

Account

Home Forums Gutenberg Any Plans for InspectorControls integration? Reply To: Any Plans for InspectorControls integration?

  • Took some time off from this to let the dust settle on the Gutenberg ecosystem. Got back into it recently and am having pretty good results with this approach. Just a warning, it’s mostly Javascript-based. I strongly suggest you grab @wordpress/scripts (https://github.com/WordPress/gutenberg/blob/master/packages/scripts/README.md) so you can write your React code in es2015.

    First, I removed all of the extra “settings” field groups I was cloning, leaving each block field group with ONLY the specific fields needed to get content into the view. So instead of like: Heading, Text, Clone of Spacing settings field group, Clone of Background settings field group, it’s only Heading and Text.

    Then we get into the JS. First we add a filter for the block setings that will let us add attributes for all of the settings we want to customize: backgroundColor, paddingTop, whatever.

    
    import { assign } from 'lodash';
    const { addFilter } = wp.hooks;
    
    const customBlockAttributes = {
    	backgroundColor: {
    		type: 'string'
    	},
    	paddingTop: {
    		type: 'string'
    	},
    	whatever: {
    		type: 'string'
    	},
    };
    
    addFilter('blocks.registerBlockType', 'my_domain', (settings, name) => {
    	/**
    	 * If this is an acf block, add our custom attributes!
    	if (name.match(/^acf/)) {
    		settings.attributes = assign(settings.attributes, customBlockAttributes);
    	}
    
    	return settings;
    });
    

    Then we add another filter on editor.BlockEdit. If it’s an ACF block, we return a Fragment that wraps up the BlockEdit PLUS an InspectorControls component that has whatever React stuff we want!

    
    addFilter('editor.BlockEdit', 'my_domain', createHigherOrderComponent(BlockEdit => {
    	return props => {
    		if (!props.name.match(/^acf/)) {
    			return <BlockEdit {...props} />;
    		} else {
    			return (
    				<Fragment>
    					<BlockEdit {...props} />
    					<InspectorControls>
    						{/* add react components here! */}
    					</InspectorControls>
    				</Fragment>
    			);
    		}
    
    	};
    }, 'withCustomBlockSettings'));