Filters as a concept is not new to WordPress. It is a paradigm that allows code to interact or modify other code. To leverage Filters in Gutenberg, we will need to use the @wordpress/hooks api.
Please see the offical docs for more details.
In order to register a Filter, we will need to do four things:
- Import the
addFilter
method fromwp.hooks
. - Define a callback function that will be called when the Filter is run
- Register the filter with
addFilter
.
Here is an example using the blocks.getSaveContent.extraProps
Filter.
const { addFilter } = wp.hooks;
function addSaveProps( props ) {
return Object.assign( props, { style: { background: 'red' } } );
}
addFilter( 'blocks.getSaveContent.extraProps', 'my-custom-namespace', addSaveProps );
** Note that this is not an comprehensive list.