Create a block to display the Seen before post meta data

[bobbingwide]

On the bigram's home page, archive pages and each singular page that displays a bigram there's a post meta field that displays how many times the bigram has been seen. The display is pretty basic

Seen before: n,nnn times

where n,nnn is the internationalised formatted number.

The Genesis-SB theme displays this automatically using the PHP function genesis_sb_seen_before() For the SB theme I want to display this metadata using a block.

Requirements

Block to display the post meta value field name _seen_before

See also https://github.com/bobbingwide/sb/issues/10

Proposed solution

• Develop a Gutenberg block to display the post meta field.
• See https://developer.wordpress.org/block-editor/how-to-guides/metabox/meta-block-1-intro/
• See https://developer.wordpress.org/block-editor/how-to-guides/metabox/meta-block-2-register-meta/
• etc
• Use register_post_meta to make the field accessible using the REST API
• The solution can be used as a prototype for a generic field block.

The block name will be bigram/seen-before Since the value is supposed to be auto-incremented the post meta data doesn't need to be updateable. But we may as well write the code to allow it to be updated as this will be necessary for other fields.

[bobbingwide]

The solution can be used as a prototype for a generic field block.

I'll start with a new plugin called sb-field-block.

[bobbingwide]

OK. I created a plugin called sb-field-block and implemented a block called oiksb/sb-field-block that did the business. Now I need to

• [x] copy/cobble the code into bigram
• [x] rename the block to bigram/seen-before

[bobbingwide]

The changes necessary to allow the bigram/seen-before block to access the post meta data _seen_before are:

1. The post types for which this field is registered must support custom-fields.

   $post_type_args['supports'] = array( 'title', 'editor', 'thumbnail', 'excerpt', 'revisions',
   'author', 'publicize', 'home', 'custom-fields' );

2. The post meta field needs to be registered as show_in_rest. Done using this wrapper function.

   bigram_register_post_meta( '_seen_before', 'bigram', __( 'Seen before', 'bigram' );

The meta data that has been registered is available in the REST API output.

URL	What you can see
wp-json/v2/	The properties for each meta data field associated with each post type
wp-json/v2/bigram	The actual value(s) for the meta data
wp-json/v2/bigram/ID	The actual value(s) for the meta data

Property definitions

Value for post

For the dynamic block to be displayed on the front-end the block needs to be registered with a callback function to render it.

function bigram_block_block_init() {
    $args = [ 'render_callback' => 'bigram_block_dynamic_block'];
    register_block_type_from_metadata( __DIR__, $args );
}

Note: The block's settings are loaded from block.json by register_block_type_from_metadata(). I haven't yet found a method to put the callback function name in block.json. It's passed in the $args parameter.

[bobbingwide]

While documenting the background of the requirements for a generic field block in https://github.com/bobbingwide/sb-field-block/issues/1 I realised that one way of allowing the block to be used multiple times in a post would be to have a toggle to control whether or not the post meta value is auto-incremented.

[bobbingwide]

The bigram/seen-before block is now delivered on v0.4.1 There's a problem associated with #15. When using the request format of https://seriouslybonkers.com/Sxxx Bxxx the Seen before value is incorrect.

[bobbingwide]

The Seen before block doesn't work in the Site editor. It produces "This block has encountered an error and cannot be previewed". The console log shows

custom-sources-backwards-compatibility.js:61 
Uncaught TypeError: Cannot read properties of undefined (reading '_seen_before')"
react-dom.js?ver=6.0:1 The above error occurred in the <WithMetaAttributeSource(edit)> component:

[bobbingwide]

I tried changing the edit function to not reference meta['_seen_before'] when the post type is not 'bigram' but the code was still failing somewhere. I re-read the documentation for block attributes.

I was using both the code to define the attribute in block.json and the code mentioned in https://developer.wordpress.org/block-editor/how-to-guides/metabox/

Removing the attribute definition resolved the issue.