Any Plans for InspectorControls integration?

• antishow

• October 30, 2018 at 5:29 am

Hi ACF! First of all thank you SO MUCH for all the hard work!

Our ACF implementation leans heavily on Flexible Layouts and using clones of field groups for things like Background settings (image, repeat, size, etc.). Before Gutenberg I was totally happy just using tabs to separate the Content fields for the flexible layout from the Background fields, but I feel like it’s not a great UX in the Gutenberg editor. It’s even worse when I switch to preview mode and all my tabs get crammed into that little sidebar.

It would be awesome if I could instead register my block with the content fields, but also somehow indicate another field group to use for the InspectorControls. Poking around in the source I didn’t spot an obvious way to do that. Are there any plans for this in the future?

• nkatsambiris

• November 25, 2018 at 9:04 am

+1 for this. Would be a game changer. When in preview mode to have certain fields I.e colour picker in the inspector controls.

• jamie_blueshoon

• January 10, 2019 at 4:23 am

Another +1 for this! Would love to see this as an option in a future release.

• yarovikov

• January 17, 2019 at 6:51 am

maybe, it’s right way

'fields' => array(
	array(
		'key' => 'field_5c3dww5839b7',
		'label' => __( 'Block Name', 'ay' ),
		'name' => 'block_name',
		'type' => 'text',
		'inspector_controls' => true
	),
)

• parapxl

• February 14, 2019 at 11:06 am

+1 for this!

• jk2189

• December 6, 2019 at 3:48 am

This would be great! Has there been any progress?

• antishow

• January 4, 2020 at 5:25 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'));

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

• jeathree

• February 15, 2020 at 4:15 am

+1 Yes, this feature needs built in!

• jeathree

• February 15, 2020 at 4:22 am

@antishow

While this might work, haven’t tested it yet. Either way it isn’t a solution but a work-around. I would imagine most people using ACF blocks are doing so because they don’t want to or have the experience to setup and start using JS within WP.

Thanks for sharing your solution, I will give this a try.