Filters

First, indicate the directory to resolve filter modules from:

roots.register.filters(`./`)

Then, create *.filter.{js,ts} modules.

Each should export the required properties of the WordPress Editor Filter API.

• name is the identifier for your module (sometimes referred to as namespace in WordPress documentation)
• hook is the identifier for the hook (set by WordPress).
• callback is the supplied function.

Example

Using named exports:

import {assign} from 'lodash';

/* Filter name */
export const name = `namespace/example/list`;

/* Hook id */
export const hook = `blocks.registerBlockType`;

/* Filter callback */
export const callback = (settings, name) => {
  if (name !== 'core/list') return settings;

  return assign({}, settings, {
    example: {
      innerBlocks: [
        {name: 'core/list-item', attributes: {content: 'Item a'}},
        {name: 'core/list-item', attributes: {content: 'Item b'}},
      ],
    },
  });
};

Using a default export

import {assign} from 'lodash'

export default {
  /** Filter id */
  name: `namespace/example/list`,
  /** Hook id */
  hook: `blocks.registerBlockType`,
  /** Filter callback */
  callback: (settings, name) => {
    if (name !== 'core/list') return settings;

    return assign({}, settings, {
      example: {
        innerBlocks: [
          {name: 'core/list-item', attributes: {content: 'Item a'}},
          {name: 'core/list-item', attributes: {content: 'Item b'}},
        ],
      },
    })
  }
}

Registering filters from a block or plugin

You may also export a filters object to register filters from either *.plugin.js or *.block.js modules.

The name of the filter will automatically have the block or plugin namespace applied to it (if you don't include the namespace manually).

So, the following filter would be registered as example/block/list:

export const name = `example/block`
export const title = `Example Block`

export const filters = {
  'block.registerBlockType': {
    list: x => x,
  }
}

Example

Example plugin which registers a example-plugins/list/examples filter on blocks.registerBlockType:

export const name = 'example-plugin';
export const title = 'Example Plugin';
export const render = () => null;

export const filters = {
  'blocks.registerBlockType': {
    'list/examples': x => x,
  },
}