Skip to content

Core Image block doesn't use align support property for Block Alignment #19103

@TeemuSuoranta

Description

@TeemuSuoranta

Describe the bug
Registered blocks' settings can be altered via JS hook blocks.registerBlockType. This can be used to limit alignment options for various default blocks. If you try to limit image block's align options, the default align settings are rendered with the new altered settings – you'll end up with two align UIs.

To reproduce
Steps to reproduce the behavior:

  1. Add JS file to theme "editor-gutenberg.js"
  2. Include it to Gutenberg
add_action('enqueue_block_editor_assets', function() {
  wp_enqueue_script('my-gutenberg-scripts', get_stylesheet_directory_uri() . '/dist/scripts/editor-gutenberg.js', ['wp-i18n', 'wp-blocks', 'wp-dom-ready'], '', true);
});
  1. Filter out unwanted align options (ref: https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-registerblocktype)
wp.hooks.addFilter(
  'blocks.registerBlockType',
  'my-theme/filters',
  function(settings, name) {
    if (name === 'core/image') {
      return lodash.assign({}, settings, {
        supports: lodash.assign({}, settings.supports, {
          align: ['wide'],
        }),
      });
    }
    return settings;
  }
);

Expected behavior
Default alignment dropdown options are replaced with filtered ones.

Screenshots
Screenshot 2019-12-12 at 15 49 46
(Two UIs for alignment)

Root of problem

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions