Filters

Filters can be added to extend functionality, toggle features, or add some feature for a brand. See the configuring a brand page for how the configuration array works.

All filters exist in the src/filters/custom-filter-name.js (opens in a new tab). Like blocks, these can also be grouped by brand or feature.

Writing a filter

Writing a filter requires that it the filter either extends a core filter (opens in a new tab) via applyFilters and addFilter or contains some JavaScript that initalizes via domReady (opens in a new tab).

Adding the Filter

/**
 * WordPress Dependencies.
 */
import { applyFilters } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
 
const CustomBlockEdit = () => {
  const title = __( 'This is our default title', 'pmc-gutenberg' );
  const filteredTitle = applyFilters(
		'editor.feature.customBlockTitle',
		title
	);
 
  return (
    <div>
      {filteredTitle}
    </div>
  )
}

Setting the Value via Filter

/**
 * WordPress Dependencies.
 */
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
 
/**
 * Display Text overlay tool on story block
 * if group block's display setting field have 'Hero' style selected.
 */
const CustomFilterComponent = () => __( 'This is our filtered title', 'pmc-gutenberg' );
 
addFilter( 'editor.feature.customBlockTitle', 'pmc/custom-filter-component', CustomFilterComponent );
 

Adding to the Brand Config

Once created and added to the necessary directory the file is built and available to the filters key at the name of file. For example custom-filter.js will have a filter available with the slug custom-filter.

function return_config() {
	return [
		'any'  => [
			'filters' => [ 'custom-filter' ],
		],
	];
}
add_filter( 'pmc_gutenberg_enable_block_editor', 'return_config' );

Once enabled, the output of the CustomBlockEdit above would be This is our filtered title because our custom filter gets enabled and overrides what is available by default.

addRelatedStories

Add related stories to the related content block.

• meta: Object — Meta object.

filterCoverBlockAlignments

Filter the cover block alignment options.

• settings: Object — Settings object.
• name: name — Block name.

ColumnBorders

Determine if column borders can be set.

• canManage: bool — Default false, whether or not a brand or post can manage typography.
• taxonomy: string — Taxonomy name.
• termSlug: string — Term slug.
• allowedPostTypes: Array — Allowed post types array.

EnableAnimation

Returns animation panel status.

• enableAnimation: boolean — Animations styles panel status.
• blockConfig: Object — BlockConfig object for paragraph block.

modifyBlock

Modify block's options.

• settings: Object — Block settings.
• name: string — Block name.

modifyBlock

Modify block's options.

• settings: Object — Block settings.
• name: string — Block name.

EnableNarrativ

Enables the Narrative feature.

• [Reference](pmc/buy-now-button controls component.)

modifyBlock

Modify block's options.

• settings: Object — Block settings.
• name: string — Block name.

UpdateCanManageOverlay

Update whether or not we can manage overlay settings. TODO: This is not brand-agnostic. Should figure a better way to handle this.

CheckFeaturedArticle

CheckFeatured Article component.

CanManageTypography

Determine if typography can be managed.

• canManage: bool — Default false, whether or not a brand or post can manage typography.
• taxonomy: string — Taxonomy name.
• termSlug: string — Term slug.
• allowedPostTypes: Array — Allowed post types array.

replaceText

Replace translation string with a new string.

• translation: string — Translation string.
• text: string — Original text.

getStylesByPostTerms

Returns the caption style data based on post term assigned to the post.

• styles: Array — Array of caption styles.
• blockConfig: Object — BlockConfig object for image block.

updateArtistLabel

Update the label for a mutation.

modifySlotfillLabel

Watch slotfill labels for updates. NOTE: This will probably need to be updated post GUT-540.

getStylesByPostTerms

Returns the initial cap style data based on post term assigned to the post.

• styles: Array — Array of initial cap styles.
• blockConfig: Object — BlockConfig object for paragraph block.

CanManageTypography

Enables the group typography feature.

• canManage: boolean — Is feature enabled.
• blockConfig: Object — Block configuration.

refreshBottomBlock

Refresh the bottom block to reflect new block config.

findBlockIndex

Find index of the bottom block within current blocks.

• blocks: Array — Array of current blocks.
• blockName: string — Block name string.

isDateOlder

Checks post date against legacy date to see if it's in the past.

• dateString: string — Post's date string.

removeBlockPanels

Remove block Panels from blocks. TODO: Used by RollingStone and SPY. To remove GUT-762.

UpdateCanManageOverlay

Display Text overlay tool on story block if group block's display setting field have 'Hero' style selected.