Filters

Sometimes you want to change or add new types of block attributes that you want to be exposed in the WPGraphQL API. This can be accomplished by using the wpgraphql_content_blocks_block_class filter available to you in the wp-graphql-content-blocks plugin.

wpgraphql_content_blocks_block_class

This filter allows you to provide a new type that inherits the WPGraphQL\ContentBlocks\Blocks\Block class and allows you to use that class instead for registering new WPGraphQL fields.

Here is an example of the wpgraphql_content_blocks_block_class filter in action:

// We include the type of Block class
include_once plugin_dir_path( __DIR__ ) . 'wp-graphql-content-blocks/includes/Blocks/Block.php';

// We register the filter here
add_filter( 'wpgraphql_content_blocks_block_class', 'custom_graphql_editor_block_init', 10, 3 );

// We provide the filter implementation here
function custom_graphql_editor_block_init($class_name, $block, $self) {
    if (str_ends_with($class_name, "CreateBlockMyFirstBlock")) {
        return MyFirstBlock::class;
    }
    return $class_name;
}
// We define class of the MyFirstBlock that inherits from the Block class
class MyFirstBlock extends WPGraphQL\ContentBlocks\Blocks\Block {}

The class MyFirstBlock needs to inherit from WPGraphQL\ContentBlocks\Blocks\Block as the parent class performs certain background work to register this block with WPGraphQL.

The parent class currently offers two ways to customize it:

Using the register_fields template method: During the Block setup proceedure, the parent class will call this method to register any fields that this block needs. If you have provided an implementation of that method in your inherited class you can use it to register new fields. For example:

class MyFirstBlock extends WPGraphQL\ContentBlocks\Blocks\Block {
  public function register_fields() {
        $this->block_registry->type_registry->register_fields( $this->type_name, [
            'align' => [
                'type' => 'String',
                'description' => __( 'The alignment of the block', 'wp-graphql-content-blocks' ),
                'resolve' => function($block) {
                    return $block['attrs']['align'] ?? null;
                }
            ],
        ]);
    }
}

It uses the block_registry instance variable inherited from the parent Block type. The block_registry is the WPGraphQL registry that holds all the types available in the system. We use it to add a new field (in our case the align property) for the current block type as specified in the type_name property. Other properties that are inherited are the block which is the actual block data and the block_attributes which are the attributes of that block taken from the block.json.

We also need to provide the value in the resolve callback. We use the $block parameter which represents the actual block data and return the value or any other value we wish to return.

If you've done everything right, you will be able to query that field in GraphQL:

{
  posts {
    nodes {
      contentBlocks {
        ... on CreateBlockMyFirstBlock {
          align
        }
      }
    }
  }
}

Using the additional_block_attributes property: Using the register_fields method is a bit cumbersome and lengthy. There is another simpler way to register additional block attributes for that block by defining a property additional_block_attributes on that class. This property is of type array and you can assign the list of attributes as key-value pairs similar to the block.json attributes spec:

class MyFirstBlock extends WPGraphQL\ContentBlocks\Blocks\Block
{
    protected ?array $additional_block_attributes = array(
      'align' => array(
        'type' => 'string',
        'default' => 'left',
      )
    );
}

If the structure is correct you will be able to query the new align attribute:

{
  posts {
    nodes {
      contentBlocks {
        ... on CreateBlockMyFirstBlock {
          name
          attributes {
            align
          }
        }
      }
    }
  }
}

The structure of the block attributes needs to follow the attributes guide. For example, the structure of this attribute is:

url: {
  type: 'string',
  source: 'attribute',
  selector: 'img',
  attribute: 'src',
},

This needs to be converted to:

'url' => array(
  'type' => 'string',
  'source' => 'attribute',
  'selector' => 'img',
  'attribute' => 'src',
)

wpgraphql_content_blocks_block_class​

wpgraphql_content_blocks_block_class