How do I save global inspector controls in Gutenberg editor?

Question

I'm new to WP's gutenberg and React(but not WP/PHP). I'm trying to add a series of custom controls that show up on all core blocks. Using the WP documentation, I was able to add a new inspector section with a simple toggle:

var el = wp.element.createElement;
const { ToggleControl, PanelBody, PanelHeader, BaseControl } = wp.components;

var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
 return function( props ) {
  return el(
   wp.element.Fragment,
   {},
   el(
    BlockEdit,
    props
   ),
   el(
    wp.editor.InspectorControls,
    {},
    el(
          PanelBody,
          {
            title: 'Section Controls'
          },
          el(
            ToggleControl,
            {
              label: 'Full Width Section',
              checked: props.attributes.full_width_section,
              onChange: function(value){ props.setAttributes( { full_width_section: value } ); }
            }
          ),
        )
   )
  );
 };
 
}, 'withInspectorControls' );

wp.hooks.addFilter( 'editor.BlockEdit', 'brink/with-inspector-controls', withInspectorControls );

What I can't do is figure out the proper way to utilize blocks.getSaveContent.extraProps to save the new full_width_section toggle.

I know I'll then need to figure out how to manipulate the block output after this, but one problem at a time!

score 0 · Accepted Answer · answered Aug 31 '18 at 16:47

0

I finally figured this out by dissecting a few Gutenberg plugins. In this case, before adding controls to the inspector I had to create attributes for all blocks:

// Attributes
const backgroundSettings = {
    fullWidthSection: {
        type: "boolean",
    },
};
function addAttributes(settings) {
    const { assign } = lodash;
    settings.attributes = assign(settings.attributes, backgroundSettings);
    return settings;
}
wp.hooks.addFilter( 'blocks.registerBlockType', 'brink/add-attributes',  addAttributes ); // Add Attributes

From here all you have to do is add any attributes you want and their settings, default, etc. in backgroundSettings.

answered Aug 31 '18 at 16:47

Noltedesign

11
6

Do you have a working example of this. I cant seem to get your code to work and im loosing my mind lol. – James Oct 20 '18 at 17:39
Sure thing James, here's a gist with my old code. I haven't tested with the newest Gutenberg though: https://gist.github.com/noltedesign/2b19ba7462274b31de4c7ab88b3c43d0 – Noltedesign Oct 25 '18 at 15:55

How do I save global inspector controls in Gutenberg editor?

1 Answers1