Share examples of using the new filter blockEditor.useSetting.before

[annezazu]

Pulled from this PR: WordPress/gutenberg#45089 This would be a great filter to highlight, especially when thinking about additional curation options with the block editor.

This allows the injection of block settings into the block editor before everything is rendered, so we are able to customize the settings available for a block however we want.

This unlocks a ton of neat options but definitely needs to be explained in detail and documented in general.

[ndiego]

I would like to pick up this topic for the Developers Blog.

[alecgeatches]

@ndiego: @ingeniumed and I put together a basic example of the blockEditor.useSetting.before hook based on this governance issue. The example below disables the text color option on core/heading blocks when they're nested in a core/media-text using the hook:

const { getBlockName, getBlockParents } = wp.data.select('core/block-editor');

wp.hooks.addFilter(
  'blockEditor.useSetting.before',
  'test/disable-heading-text-color-in-media-text',
  (result, path, clientId, blockName) => {
    if (blockName === 'core/heading') {
      const blockParents = getBlockParents(clientId, true);
      const inMediaText = blockParents.some((ancestorId) => getBlockName(ancestorId) === 'core/media-text');

      if (inMediaText && path === 'color.text') {
        // Disable text color selection
        result = false;
      }
    }

    return result;
  }
);

Here's what that looks like in action:

---

---

There's probably other good ways to use this hook that aren't governance related, but this example can be used to show how the hook can be used to accomplish something not possible with theme.json settings.

[alecgeatches]

Note that the demo was recorded with the Gutenberg plugin enabled since blockEditor.useSetting.before isn't in the latest 6.1.1 release.

[ndiego]

This is fantastic, thank you @alecgeatches 🙌

[bph]

A Dev Note is in the works on this: Customize settings for any block in WordPress 6.2

[bph]

This topic discussion is now locked. Please add further comment to the issue

• Examples of using the new filter blockEditor.useSetting.before #85

[ndiego]

This article has been published: https://developer.wordpress.org/news/2023/05/curating-the-editor-experience-with-client-side-filters/ 🎉