Display dynamic fields with Block Bindings API

In my previous post, I created custom meta fields using a Meta Box plugin, and display them using the Block Bindings API by registering the meta fields in the theme’s functions.php file. In this post, I’d create my own plugin, where I’d add and register the meta fields there to make it more portable.

Petshop plugin

					
					
<?php
/**
 * Plugin Name: Petshop
 * Description: A plugin to manage pets
 * Version: 1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

// Register pet type

add_action( 'init', 'petshop_register_pet_post_type' );

function petshop_register_pet_post_type() {
    $args = array(
        'labels' => array(
            'name'          => 'Pets',
            'singular_name' => 'Pet',
            'menu_name'     => 'Pets',
            'add_new'       => 'Add New Pet',
            'add_new_item'  => 'Add New Pet',
            'new_item'      => 'New Pet',
            'edit_item'     => 'Edit Pet',
            'view_item'     => 'View Pet',
            'all_items'     => 'All Pets',
        ),
        'public' => true,
        'has_archive' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ),
    );

    register_post_type( 'pet', $args );
}

// Register taxonomy

add_action( 'init', 'petshop_register_species_taxonomy' );

function petshop_register_species_taxonomy() {
    $args = array(
        'labels'       => array(
            'name'          => 'Species',
            'singular_name' => 'Species',
            'edit_item'     => 'Edit Species',
            'update_item'   => 'Update Species',
            'add_new_item'  => 'Add New Species',
            'new_item_name' => 'New Species Name',
            'menu_name'     => 'Species',
        ),
        'hierarchical'  => true,
        'rewrite'       => array( 'slug' => 'species' ),
        'show_in_rest'  => true,
    );

    register_taxonomy( 'species', 'pet', $args );
}

// Add new (custom) fields 'favorite_food & weight'

add_filter( 'postmeta_form_keys', 'petshop_add_petinfo_to_quick_edit', 10, 2 );
function petshop_add_petinfo_to_quick_edit( $keys, $post ) {
    if ( $post->post_type === 'pet' ) {
        $keys[] = 'favorite_food';
        $keys[] = 'weight';

    }
    return $keys;
}

// Register the custom fields to be bound to WP Core block using Block Bindings API

register_meta(
    'post',
    'favorite_food', // Your meta key
    
    array(
        'show_in_rest'      => true, // Required
        'single'            => true, // Required
        'type'              => 'string',
        'sanitize_callback' => 'wp_strip_all_tags' // The name of the sanitization function
    )
);

register_meta(
    'post',
    'weight', // Your meta key
    
    array(
        'show_in_rest'      => true, // Required
        'single'            => true, // Required
        'type'              => 'string', // This should be a 'number' type field, but somehow it didn't work, the post meta's attribute don't show up in the Site editor. Changing it to a 'string' type works. I think it's a bug.
        'sanitize_callback' => 'wp_strip_all_tags' // The name of the sanitization function
    )
);

To input the meta values, I need to enable the Custom Fields UI via Preferences > General, and toggle on the Custom fields option. Previously, when I used the Meta Box plugin, this step wasn’t necessary. This is because, the said plugin created meta boxes for the meta fields, where I didn’t do so in my custom plugin, just to keep it simple. As a side note, here is my other custom plugin with meta boxes.

The method to display the meta values is the same, whether I use a Meta Box plugin, or create a custom one. It can be displayed on the front page, either by placing the meta fields on the template or directly on the post content. Since WordPress 6.9 has added an improvement UI for the post meta, I inserted the following JSON metadata with an empty key to try out the field selection. I’m glad, that it’s working as intended. I can switch, bind and unbind content between the available favorite_food and weight meta fields.

					
					
<!-- wp:paragraph {"metadata":
{"bindings":
{"content":
{"source":"core/post-meta","args":
{"key":""}}}}} -->
<p></p>
<!-- /wp:paragraph -->