Data Layer and Editor Extensibility

// src/editor/store.js: the lumen/catalog store: stock counts read from and written to lumen/v1.
import apiFetch from '@wordpress/api-fetch';
import { createReduxStore, register } from '@wordpress/data';

const DEFAULT_STATE = { stock: {} };

const actions = {
	receiveStock( bookId, quantity ) {
		return { type: 'RECEIVE_STOCK', bookId, quantity };
	},
	// A thunk: it receives the store's dispatch and select, and may await.
	updateStock:
		( bookId, quantity ) =>
		async ( { dispatch } ) => {
			const response = await apiFetch( {
				path: `/lumen/v1/books/${ bookId }/stock`,
				method: 'PUT',
				data: { quantity },
			} );
			dispatch.receiveStock( bookId, response.quantity );
			return response;
		},
};

const selectors = {
	getStock( state, bookId ) {
		return state.stock[ bookId ];
	},
};

// Runs once per bookId, the first time getStock( bookId ) is selected.
const resolvers = {
	getStock:
		( bookId ) =>
		async ( { dispatch } ) => {
			const response = await apiFetch( {
				path: `/lumen/v1/books/${ bookId }/stock`,
			} );
			dispatch.receiveStock( bookId, response.quantity );
		},
};

function reducer( state = DEFAULT_STATE, action ) {
	if ( action.type === 'RECEIVE_STOCK' ) {
		return {
			...state,
			stock: { ...state.stock, [ action.bookId ]: action.quantity },
		};
	}
	return state;
}

export const store = createReduxStore( 'lumen/catalog', {
	reducer,
	actions,
	selectors,
	resolvers,
} );

register( store );

npm install --save-exact @wordpress/api-fetch@8.0.0 @wordpress/components@43.0.0 @wordpress/compose@9.0.0 \
  @wordpress/core-data@9.0.0 @wordpress/data@11.0.0 @wordpress/editor@16.0.0 @wordpress/element@10.0.0 \
  @wordpress/hooks@5.0.0 @wordpress/notices@6.0.0 @wordpress/plugins@8.0.0
npx wp-scripts build src/editor/index.js --output-path=build/editor
npx wp-scripts lint-js src/editor

<?php
// src/Editor.php: editor script, stock read route and editor curation.

namespace Lumen\Catalog;

defined( 'ABSPATH' ) || exit;

// Wires the "Book details" panel and curates the editor for books.
final class Editor {

	/** Called from Plugin::boot(). */
	public static function boot(): void {
		add_action( 'enqueue_block_editor_assets', array( self::class, 'enqueue' ) );
		add_action( 'rest_api_init', array( self::class, 'register_routes' ) );
		add_filter( 'allowed_block_types_all', array( self::class, 'allowed_blocks' ), 10, 2 );
		add_filter( 'block_editor_settings_all', array( self::class, 'editor_settings' ), 10, 2 );
		add_filter( 'register_block_type_args', array( self::class, 'quote_attribute' ), 10, 2 );
		add_action( 'save_post_lp_book', array( self::class, 'seed_sync_time' ) );
	}

	/** Loads build/editor/index.js in the post editor only, never in the Site Editor. */
	public static function enqueue(): void {
		$screen = get_current_screen();
		if ( ! $screen || 'post' !== $screen->base ) {
			return;
		}
		$asset = require plugin_dir_path( LUMEN_CATALOG_FILE ) . 'build/editor/index.asset.php';
		wp_enqueue_script(
			'lumen-catalog-editor',
			plugins_url( 'build/editor/index.js', LUMEN_CATALOG_FILE ),
			$asset['dependencies'],
			$asset['version'],
			array( 'in_footer' => true )
		);
		wp_set_script_translations( 'lumen-catalog-editor', 'lumen-catalog' );
	}

	/** Adds a GET endpoint to the existing PUT-only stock route; both share one permission check. */
	public static function register_routes(): void {
		register_rest_route(
			'lumen/v1',
			'/books/(?P<id>\d+)/stock',
			array(
				'methods'             => \WP_REST_Server::READABLE,
				'callback'            => array( self::class, 'read_stock' ),
				'permission_callback' => array( StockController::class, 'can_update' ),
				'args'                => array(
					'id' => array(
						'type'     => 'integer',
						'required' => true,
					),
				),
			)
		);
	}

	// Returns the current quantity (the lp_stock post meta), or null when the book has never been synced.
	public static function read_stock( \WP_REST_Request $request ) {
		$book_id = (int) $request['id'];
		$stored  = get_post_meta( $book_id, 'lp_stock', true );
		return rest_ensure_response(
			array(
				'book'     => $book_id,
				'quantity' => '' === $stored ? null : (int) $stored,
			)
		);
	}

	// The editor sends every registered meta key on save. A protected key the user may not write is only skipped when a stored value equals the one sent, so every book gets a stored 0 before REST updates its meta.
	public static function seed_sync_time( $post_id ): void {
		add_post_meta( $post_id, '_lp_stock_synced_at', 0, true );
	}

	// Authors and Contributors write news posts with a short list of blocks; Editors keep every block.
	public static function allowed_blocks( $allowed, $context ) {
		if ( empty( $context->post ) || 'post' !== $context->post->post_type || current_user_can( 'edit_others_posts' ) ) {
			return $allowed;
		}
		return array(
			'core/paragraph',
			'core/heading',
			'core/list',
			'core/list-item',
			'core/quote',
			'core/image',
			'core/embed',
			'lumen/book-card',
			'lumen/latest-books',
		);
	}

	// Fewer escape hatches for people who are not administrators.
	public static function editor_settings( $settings, $context ) {
		$settings['canLockBlocks'] = current_user_can( 'edit_theme_options' );
		if ( ! empty( $context->post ) && 'lp_book' === $context->post->post_type ) {
			$settings['codeEditingEnabled']           = current_user_can( 'manage_options' );
			$settings['enableOpenverseMediaCategory'] = false;
		}
		return $settings;
	}

	// Declares the lpBookId attribute that the editor filter adds to core/quote.
	public static function quote_attribute( $args, $block_type ) {
		if ( 'core/quote' === $block_type ) {
			$args['attributes']['lpBookId'] = array( 'type' => 'integer' );
		}
		return $args;
	}
}

// src/editor/index.js: entry point of build/editor/index.js.
import { useSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';
import BookDetailsPanel from './book-details-panel';
import CatalogueSidebar from './catalogue-sidebar';
import PrePublishCheck from './prepublish-check';
import './quote-source';

function LumenBookPlugin() {
	const postType = useSelect(
		( select ) => select( editorStore ).getCurrentPostType(),
		[]
	);
	if ( postType !== 'lp_book' ) {
		return null;
	}
	return (
		<>
			<BookDetailsPanel />
			<PrePublishCheck />
			<CatalogueSidebar />
		</>
	);
}

registerPlugin( 'lumen-catalog-book', {
	render: LumenBookPlugin,
	icon: 'book-alt',
} );

// src/editor/book-details-panel.js: "Book details" panel in the post tab of the settings sidebar.
import { TextControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { useDispatch } from '@wordpress/data';
import {
	PluginDocumentSettingPanel,
	store as editorStore,
} from '@wordpress/editor';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

// Same rule as Meta::ISBN_PATTERN in PHP: empty, or a hyphenated ISBN-13.
const ISBN = /^(97[89]-[0-9]{1,5}-[0-9]{1,7}-[0-9]{1,7}-[0-9])?$/;

export default function BookDetailsPanel() {
	// [ value, setter ] for the edited (unsaved) meta object of the current book.
	const [ meta, setMeta ] = useEntityProp( 'postType', 'lp_book', 'meta' );
	const { lockPostSaving, unlockPostSaving } = useDispatch( editorStore );

	const isbn = meta?.lp_isbn ?? '';
	const isbnIsValid = ISBN.test( isbn );

	useEffect( () => {
		if ( isbnIsValid ) {
			unlockPostSaving( 'lumen-catalog-isbn' );
		} else {
			lockPostSaving( 'lumen-catalog-isbn' );
		}
		return () => unlockPostSaving( 'lumen-catalog-isbn' );
	}, [ isbnIsValid, lockPostSaving, unlockPostSaving ] );

	if ( ! meta ) {
		return null;
	}

	return (
		<PluginDocumentSettingPanel
			name="lumen-book-details"
			title={ __( 'Book details', 'lumen-catalog' ) }
		>
			<TextControl
				__next40pxDefaultSize
				label={ __( 'ISBN-13', 'lumen-catalog' ) }
				help={
					! isbnIsValid &&
					__(
						'Not a hyphenated ISBN-13: saving is disabled.',
						'lumen-catalog'
					)
				}
				value={ isbn }
				onChange={ ( value ) => setMeta( { ...meta, lp_isbn: value } ) }
			/>
			<TextControl
				__next40pxDefaultSize
				type="number"
				min={ 0 }
				max={ 5000 }
				label={ __( 'Pages', 'lumen-catalog' ) }
				value={ meta.lp_pages || '' }
				onChange={ ( value ) =>
					setMeta( { ...meta, lp_pages: parseInt( value, 10 ) || 0 } )
				}
			/>
		</PluginDocumentSettingPanel>
	);
}

without seed_sync_time: 403 Sorry, you are not allowed to edit the _lp_stock_synced_at custom field. | lp_pages stored: '288'
with seed_sync_time: 200 ok | lp_pages stored: '288'

// src/editor/catalogue-sidebar.js: "Catalogue" sidebar: the stock count from the lumen/catalog store.
import { Button, PanelBody, Spinner } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { PluginSidebar, store as editorStore } from '@wordpress/editor';
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
import { store as catalogStore } from './store';

export default function CatalogueSidebar() {
	const { postId, stock, loaded } = useSelect( ( select ) => {
		const id = select( editorStore ).getCurrentPostId();
		return {
			postId: id,
			stock: select( catalogStore ).getStock( id ),
			loaded: select( catalogStore ).hasFinishedResolution( 'getStock', [
				id,
			] ),
		};
	}, [] );
	const { updateStock } = useDispatch( catalogStore );
	const { createSuccessNotice, createErrorNotice } =
		useDispatch( noticesStore );

	const restock = () =>
		updateStock( postId, ( stock ?? 0 ) + 10 )
			.then( () =>
				createSuccessNotice( __( 'Stock updated.', 'lumen-catalog' ), {
					type: 'snackbar',
				} )
			)
			.catch( ( error ) => createErrorNotice( error.message ) );

	// translators: %d: copies in stock.
	const inStock = __( '%d copies in stock.', 'lumen-catalog' );

	return (
		<PluginSidebar
			name="lumen-catalogue"
			title={ __( 'Catalogue', 'lumen-catalog' ) }
		>
			<PanelBody title={ __( 'Stock', 'lumen-catalog' ) }>
				{ ! loaded && <Spinner /> }
				{ loaded && (
					<p>
						{ stock === null
							? __( 'Never synced.', 'lumen-catalog' )
							: sprintf( inStock, stock ) }
					</p>
				) }
				<Button
					variant="secondary"
					onClick={ restock }
					disabled={ ! loaded }
				>
					{ __( 'Add 10 copies', 'lumen-catalog' ) }
				</Button>
			</PanelBody>
		</PluginSidebar>
	);
}