Reply To: Any Plans for InspectorControls integration?

• antishow

• January 4, 2020 at 5:26 am

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