Support

Account

Home Forums Gutenberg Any Plans for InspectorControls integration?

Solving

Any Plans for InspectorControls integration?

  • 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?

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

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

  • 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?

  • 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'));
    
  • 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'));
    
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.