Block Filters

The Answer to Customizing Blocks Without Rolling Your Own

Paul Barthmaier

Sidetrack Studio



O, he sits high in all the people's hearts:
And that which would appear offence in us,
His countenance, like richest alchemy,
Will change to virtue and to worthiness.

— William Shakespeare

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

What are Block Filters

Block Filters allow you to extend or
change the functionality of a block.

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Hooks, Actions, Filters

Hooks

Actions

Filters

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

What does the Handbook say?

To modify the behavior of existing blocks,
WordPress exposes several APIs.

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Style Variations

Enable you to provides alternative styles to existing blocks.

  • blocks.registerBlockStyle
  • blocks.unregisterBlockStyle

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Settings Variations

These filters can extend the block settings:

  • blocks.registerBlockType
  • blocks.getSaveElement
  • blocks.getSaveContent.extraProps
  • blocks.getBlockDefaultClassName
  • blocks.switchToBlockType.transformedBlock
  • blocks.getBlockAttributes 
  • editor.BlockEdit
  • editor.BlockListBlock

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Access Variations

These filters can control the use of blocks in your site:

  • Removing Blocks — whitelist or blacklist
    blocks.unregisterBlockType
  • Hide Blocks from Inserter
    allowed_block_types
  • Manage Block Categories
    block_categories

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Let's Get Magical

or How to Extend a Block

Extend an Existing Block

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Image Inserter

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Applying a Style

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Gist to alter Core Image Block

Select Philly Phader

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Benefits Abound

This method of block customization keeps functionality where it belongs. Rather than adding to the growing list of blocks you may access, we can simply apply the style where it is needed — and where the user expects to find it.

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Category

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Category Code Result

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Block Category Icon Code

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Onwards

Moving beyond experiments

WWW

With the advent of the new block editor, our shared development processes and best practices are shifting.

It's the Wild, Wild, West all over again.

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Higher Order Component

Why use an HOC?

  • Provides a wrapper for the underlying React code
  • Acts as a silo for your customizations

  • Considered current best practice

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Higher Order Component

HOCs are a React JS construct that refer to a function that takes a component and returns a new component.

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

HOC Gist

Source: The WP Developer Handbook

@_pbrocks #codeisalchemy WordCamp Lancaster 2019

Need to get info into Database

PHP Block

Restrict Block Access

ACF Block

ACF on Frontend

ACF Rendered in Block

@_pbrocks #codeisalchemy

Paul Barthmaier

Block Filters

Sidetrack Studio