Block Bindings API

<!-- wp:group {"className":"lumen-book-facts","layout":{"type":"constrained"}} -->
<div class="wp-block-group lumen-book-facts">
<!-- wp:image {"sizeSlug":"medium","metadata":{"bindings":{"url":{"source":"lumen/book-data","args":{"field":"cover"}}}}} -->
<figure class="wp-block-image size-medium"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3,"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"lp_isbn"}}}}} -->
<h3 class="wp-block-heading">ISBN not assigned yet</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"lumen/book-data","args":{"field":"pages"}}}}} -->
<p>Page count</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/post-data","args":{"field":"link"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Share this book</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->

<div class="wp-block-group lumen-book-facts has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<figure class="wp-block-image size-medium"><img decoding="async" src="https://lumenpress.test/wp-content/uploads/2026/10/lighthouse-ledger-200x300.png" alt=""/></figure>
<h3 class="wp-block-heading">978-0-00-000001-9</h3>
<p class="wp-block-paragraph">312 pages</p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a href="https://lumenpress.test/books/the-lighthouse-ledger/" class="wp-block-button__link wp-element-button">Share this book</a></div>
</div>
</div>

<!-- wp:lumen/latest-books {"count":3,"showDate":false,"metadata":{"bindings":{"genre":{"source":"lumen/book-data","args":{"field":"genre"}}}}} /-->

<?php
/**
 * The lumen/book-data block bindings source.
 *
 * @package Lumen\Catalog
 */

namespace Lumen\Catalog;

defined( 'ABSPATH' ) || exit;

/**
 * Exposes formatted book data to core blocks through the Block Bindings API.
 */
final class Bindings {

	const SOURCE = 'lumen/book-data';

	// Called from Plugin::boot().
	public static function boot(): void {
		add_action( 'init', array( self::class, 'register_source' ) );
		add_action( 'enqueue_block_editor_assets', array( self::class, 'enqueue_editor_source' ) );
		add_filter( 'block_bindings_supported_attributes_lumen/latest-books', array( self::class, 'latest_books_attributes' ) );
		add_filter( 'block_bindings_source_value', array( self::class, 'keep_fallback_for_empty_meta' ), 10, 5 );
	}

	// The editor receives the name, label and context of a server source automatically.
	public static function register_source(): void {
		register_block_bindings_source(
			self::SOURCE,
			array(
				'label'              => __( 'Book data', 'lumen-catalog' ),
				'get_value_callback' => array( self::class, 'get_value' ),
				'uses_context'       => array( 'postId', 'postType' ),
			)
		);
	}

	// Returns one book field for $source_args['field'], or null to keep the block's own content.
	public static function get_value( array $source_args, $block_instance, string $attribute_name ) {
		$post_id = (int) ( $block_instance->context['postId'] ?? 0 );
		$post    = $post_id ? get_post( $post_id ) : null;

		if ( ! $post || 'lp_book' !== $post->post_type ) {
			return null;
		}

		// Same visibility rule as the core sources: no data from drafts or protected posts for visitors.
		if ( ( ! is_post_publicly_viewable( $post ) && ! current_user_can( 'read_post', $post_id ) ) || post_password_required( $post ) ) {
			return null;
		}

		switch ( $source_args['field'] ?? '' ) {
			case 'isbn':
				$isbn = (string) get_post_meta( $post_id, 'lp_isbn', true );
				return '' === $isbn ? null : $isbn;

			case 'pages':
				$pages = (int) get_post_meta( $post_id, 'lp_pages', true );
				/* translators: %d: number of pages. */
				return $pages ? sprintf( _n( '%d page', '%d pages', $pages, 'lumen-catalog' ), $pages ) : null;

			case 'genre':
				$terms = get_the_terms( $post_id, 'lp_genre' );
				return is_array( $terms ) ? $terms[0]->slug : null;

			case 'cover':
				$url = get_the_post_thumbnail_url( $post_id, 'medium' );
				return $url ? esc_url_raw( $url ) : null;
		}

		return null;
	}

	// Lets the dynamic lumen/latest-books block bind its "genre" attribute (WordPress 6.9+).
	public static function latest_books_attributes( array $attributes ): array {
		$attributes[] = 'genre';
		return $attributes;
	}

	// core/post-meta returns '' for an unset book field, which would blank the block; null keeps its own text.
	public static function keep_fallback_for_empty_meta( $value, $name, $source_args, $block_instance, $attribute_name ) {
		$is_book_meta = 'core/post-meta' === $name && 0 === strpos( $source_args['key'] ?? '', 'lp_' );

		return ( $is_book_meta && 'content' === $attribute_name && '' === $value ) ? null : $value;
	}

	// Loads the editor half of the source, built by wp-scripts into build/editor/.
	public static function enqueue_editor_source(): void {
		$asset = require dirname( LUMEN_CATALOG_FILE ) . '/build/editor/book-data.asset.php';

		wp_enqueue_script(
			'lumen-catalog-book-data',
			plugins_url( 'build/editor/book-data.js', LUMEN_CATALOG_FILE ),
			$asset['dependencies'],
			$asset['version'],
			true
		);
		wp_set_script_translations( 'lumen-catalog-book-data', 'lumen-catalog' );
	}
}

/**
 * Editor half of the lumen/book-data block bindings source.
 */
import { registerBlockBindingsSource } from '@wordpress/blocks';
import { store as coreDataStore } from '@wordpress/core-data';
import { __, _n, sprintf } from '@wordpress/i18n';

const FIELDS = [
	{ label: __( 'ISBN-13', 'lumen-catalog' ), type: 'string', args: { field: 'isbn' } },
	{ label: __( 'Page count', 'lumen-catalog' ), type: 'string', args: { field: 'pages' } },
	{ label: __( 'Genre slug', 'lumen-catalog' ), type: 'string', args: { field: 'genre' } },
	{ label: __( 'Cover URL', 'lumen-catalog' ), type: 'string', args: { field: 'cover' } },
];

const isBook = ( context ) => context?.postType === 'lp_book' && !! context?.postId;

// Mirrors Bindings::get_value() in PHP, reading the unsaved edits of the book.
function readField( select, context, field ) {
	const data = select( coreDataStore );
	const book = data.getEditedEntityRecord( 'postType', 'lp_book', context.postId );
	const meta = book?.meta ?? {};

	switch ( field ) {
		case 'isbn':
			return meta.lp_isbn || null;
		case 'pages':
			return meta.lp_pages
				? sprintf(
						/* translators: %d: number of pages. */
						_n( '%d page', '%d pages', meta.lp_pages, 'lumen-catalog' ),
						meta.lp_pages
					)
				: null;
		case 'genre': {
			const termId = book?.lp_genre?.[ 0 ];
			return termId ? data.getEntityRecord( 'taxonomy', 'lp_genre', termId )?.slug ?? null : null;
		}
		case 'cover': {
			const media = book?.featured_media && data.getEntityRecord( 'postType', 'attachment', book.featured_media );
			return media?.media_details?.sizes?.medium?.source_url ?? media?.source_url ?? null;
		}
	}
	return null;
}

registerBlockBindingsSource( {
	name: 'lumen/book-data',
	label: __( 'Book data', 'lumen-catalog' ),

	getValues( { select, context, bindings } ) {
		const values = {};
		for ( const [ attribute, { args } ] of Object.entries( bindings ) ) {
			const field = FIELDS.find( ( item ) => item.args.field === args?.field );
			const value = isBook( context ) ? readField( select, context, args?.field ) : null;
			// Outside a book (a template, a pattern preview) show the field's label as a placeholder.
			values[ attribute ] = value ?? field?.label ?? args?.field;
		}
		return values;
	},

	setValues( { dispatch, context, bindings } ) {
		const meta = {};
		for ( const { args, newValue } of Object.values( bindings ) ) {
			if ( args?.field === 'isbn' ) {
				meta.lp_isbn = newValue;
			}
		}
		dispatch( coreDataStore ).editEntityRecord( 'postType', context.postType, context.postId, { meta } );
	},

	// Only the raw ISBN is editable, only on the book itself, never inside a Query Loop.
	canUserEditValue( { select, context, args } ) {
		if ( args?.field !== 'isbn' || ! isBook( context ) || context?.query || context?.queryId ) {
			return false;
		}
		return !! select( coreDataStore ).canUser( 'update', {
			kind: 'postType',
			name: 'lp_book',
			id: context.postId,
		} );
	},

	getFieldsList( { context } ) {
		return context?.postType === 'lp_book' ? FIELDS : [];
	},
} );