Better API for toggling default functionality in blocks.

[lassemt]

The challenge
One of the first things I usually do when developing a WordPress theme is to deduct functionality that let content creators create inconsistent layouts/typography. As a designer I'm used to see layouts/typography become inconsistent because the content creator have too much freedom in the editor. Common things we see is blog posts with center aligned text, where all the other blog posts are left aligned. Inconsistency in image sizes. And texts that are all bold where bold should only be used to emphasise words.

E.g. if I want to disable captions on images in Gutenberg. I have to duplicate the core block and then make my changes in the new blocks to remove functionality I don't want. The same matter is with alignments on images, paragraph, headers, and so on. I believe this could be done in a much easier way. Also in a way that could make it better to reuse existing blocks to create new blocks by using InnerBlocks.

Suggested solution
I haven't really thought about in this solution would be how to globally toggle functionality. For UX and design purposes mentioned above it would be nice to be able to disable block settings like alignment, text styles, drop-cap, image editing, image link settings, etc. in a similar way that add_theme_support( 'disable-custom-colors' );and add_theme_support( 'disable-custom-font-sizes' ); do.

A possible solution would be adding new attributes to core blocks for disabling default functionality. Example: To toggle captions on images we add a disableCaption attribute to the core image block, then we can conditionally render the caption:

// packages/block-library/src/image/edit.js
...
{ ( !disableCaption && (! RichText.isEmpty( caption ) || isSelected) ) && (
	<RichText
		tagName="figcaption"
		placeholder={ __( 'Write caption…' ) }
		value={ caption }
		unstableOnFocus={ this.onFocusCaption }
		onChange={ ( value ) => setAttributes( { caption: value } ) }
		isSelected={ this.state.captionFocused }
		inlineToolbar
	/>
) }
...

Then block filters can be used to toggle default functionality for the block.

This would also make it a lot easier to build new blocks with InnerBlocks and the Template API using existing blocks. Here is an example on how a new block could be composited (note the comments in the template):

// Global Dependencies
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.editor;

// Register block
registerBlockType( 'cb/identity', {
  title: __( 'A person card' ),
  icon: 'admin-users',
  description: __( 'Identity cards for persons' ),
  category: 'layout',

  edit() {
    return [
      <div className="Identity">
        <InnerBlocks
          template={[
            [ 'core/image', {
              disableCaption: true, // Disable captions
              disableEditing: true, // Disable editing abilities
              imageSize: 'custom-image-size', // The image size that should be used
            } ],
            [ 'core/heading', { 
              placeholder: 'Name of person..',
              fixedLevel: 3, // Fixed to only allow h3
              disableAlignment: true // Disable alignment options
            } ] ,
            [ 'core/paragraph', { 
              placeholder: 'Description of person..',
              disableAlignment: true // Disable alignment options
            } ]
          ]}
          templateLock={ 'all' }
        />
      </div>
    ];
  },

  save() {
    return (
      <div className="Identity">
        <InnerBlocks.Content />
      </div>
    );
  }
} );

Reviewing the suggested solution
I can see a problem with this solution is that attributes are meant to be used to extract a value of an attribute from markup, and they are not meant to work as settings for the block. A solution for this could be making a Block Settings Api that works in a similar way like attributes.

Wrapping up
I have seen other block specific issues mentioning the ability to toggle specific functionality. I can refer to them if that is wanted. I hope all this makes sense and its something we can consider. Thanks for taking WordPress to the next level :)

[youknowriad]

Hi There! I agree that ultimately we need something like that. I shared some thoughts here #6023 (comment) and I'm closing this as a duplicate.