Interactivity API

{
	"$schema": "https://schemas.wp.org/wp/7.1/block.json",
	"apiVersion": 3,
	"name": "lumen/wishlist",
	"version": "0.1.0",
	"title": "Wishlist",
	"category": "lumen-catalog",
	"icon": "heart",
	"description": "A wishlist button for the current book, or the reader's wishlist for the site header.",
	"keywords": [ "favourites", "save for later" ],
	"textdomain": "lumen-catalog",
	"attributes": {
		"display": {
			"type": "string",
			"enum": [ "toggle", "count" ],
			"default": "toggle"
		}
	},
	"usesContext": [ "postId", "postType" ],
	"supports": {
		"html": false,
		"interactivity": true,
		"spacing": {
			"padding": true
		}
	},
	"editorScript": "file:./index.js",
	"style": "file:./style-index.css",
	"viewScriptModule": "file:./view.js",
	"render": "file:./render.php"
}

<?php
namespace Lumen\Catalog;

use WP_REST_Request;
use WP_REST_Server;

defined( 'ABSPATH' ) || exit;

// The reader's wishlist: user meta lp_wishlist, a REST route and a no-JavaScript form handler.
final class Wishlist {

	const META_KEY = 'lp_wishlist'; // List of array( 'book' => int, 'added' => int ).

	// Called from Plugin::boot().
	public static function boot(): void {
		add_action( 'rest_api_init', array( self::class, 'register_routes' ) );
		add_action( 'admin_post_lumen_wishlist_toggle', array( self::class, 'handle_form' ) );
	}

	public static function register_routes(): void {
		register_rest_route(
			'lumen/v1',
			'/wishlist',
			array(
				'methods'             => WP_REST_Server::READABLE,
				'callback'            => array( self::class, 'rest_response' ),
				'permission_callback' => 'is_user_logged_in',
			)
		);
		register_rest_route(
			'lumen/v1',
			'/wishlist/(?P<book>\d+)',
			array(
				'methods'             => array( 'PUT', 'DELETE' ),
				'callback'            => array( self::class, 'rest_update' ),
				'permission_callback' => 'is_user_logged_in',
				'args'                => array(
					'book' => array(
						'type'              => 'integer',
						'required'          => true,
						'validate_callback' => array( self::class, 'is_book' ),
					),
				),
			)
		);
	}

	// PUT adds the book, DELETE removes it; both return the whole list.
	public static function rest_update( WP_REST_Request $request ) {
		$book = (int) $request['book'];
		'PUT' === $request->get_method() ? self::add( get_current_user_id(), $book ) : self::remove( get_current_user_id(), $book );
		return self::rest_response();
	}

	public static function rest_response() {
		return rest_ensure_response( array( 'items' => self::items( get_current_user_id() ) ) );
	}

	// Fallback for browsers without JavaScript: a plain form post to admin-post.php.
	public static function handle_form(): void {
		$book = isset( $_POST['book'] ) ? absint( $_POST['book'] ) : 0;
		check_admin_referer( 'lumen_wishlist_toggle_' . $book );

		if ( self::is_book( $book ) ) {
			$user = get_current_user_id();
			in_array( $book, self::book_ids( $user ), true ) ? self::remove( $user, $book ) : self::add( $user, $book );
		}
		wp_safe_redirect( wp_get_referer() ? wp_get_referer() : home_url( '/' ) );
		exit;
	}

	public static function is_book( $id ): bool {
		return 'lp_book' === get_post_type( (int) $id ) && 'publish' === get_post_status( (int) $id );
	}

	public static function book_ids( int $user ): array {
		$entries = get_user_meta( $user, self::META_KEY, true );
		return is_array( $entries ) ? array_map( 'intval', array_column( $entries, 'book' ) ) : array();
	}

	// The shape the block's state uses: newest first, published books only.
	public static function items( int $user ): array {
		$items = array();
		foreach ( array_reverse( self::book_ids( $user ) ) as $book ) {
			if ( self::is_book( $book ) ) {
				$items[] = array(
					'id'    => $book,
					'title' => get_the_title( $book ),
					'url'   => get_permalink( $book ),
				);
			}
		}
		return $items;
	}

	private static function add( int $user, int $book ): void {
		if ( in_array( $book, self::book_ids( $user ), true ) ) {
			return; // Each book at most once; PUT is idempotent.
		}
		$entries   = (array) get_user_meta( $user, self::META_KEY, true );
		$entries[] = array( 'book' => $book, 'added' => time() );
		update_user_meta( $user, self::META_KEY, array_values( array_filter( $entries ) ) );
	}

	private static function remove( int $user, int $book ): void {
		$entries = (array) get_user_meta( $user, self::META_KEY, true );
		$entries = array_filter(
			$entries,
			static function ( $entry ) use ( $book ) {
				return is_array( $entry ) && (int) $entry['book'] !== $book;
			}
		);
		update_user_meta( $user, self::META_KEY, array_values( $entries ) );
	}
}

<?php
// Server-side rendering of lumen/wishlist. $attributes['display'] is "toggle" or "count";
// $block->context['postId'] comes from the Query Loop or the single-book template.

use Lumen\Catalog\Wishlist;

defined( 'ABSPATH' ) || exit;

$lumen_book = (int) ( $block->context['postId'] ?? 0 );

if ( ! is_user_logged_in() ) {
	if ( 'toggle' === $attributes['display'] && Wishlist::is_book( $lumen_book ) ) {
		printf(
			'<p %s><a href="%s">%s</a></p>',
			get_block_wrapper_attributes(), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
			esc_url( wp_login_url( get_permalink( $lumen_book ) ) ),
			esc_html__( 'Log in to save books to your wishlist', 'lumen-catalog' )
		);
	}
	return;
}

// Static settings for every block on the page.
wp_interactivity_config(
	'lumen/wishlist',
	array(
		'endpoint' => rest_url( 'lumen/v1/wishlist' ),
		'nonce'    => wp_create_nonce( 'wp_rest' ),
	)
);

// Global state, shared by every lumen/wishlist block, plus server versions of the derived state.
$lumen_items = Wishlist::items( get_current_user_id() );
wp_interactivity_state(
	'lumen/wishlist',
	array(
		'items'       => $lumen_items,
		'isOnline'    => true,
		'labelAdd'    => __( 'Add to wishlist', 'lumen-catalog' ),
		'labelRemove' => __( 'Remove from wishlist', 'lumen-catalog' ),
		'labelError'  => __( 'Could not update your wishlist. Try again.', 'lumen-catalog' ),
		'count'       => count( $lumen_items ), // Known at render time: a plain value.
		'isEmpty'     => array() === $lumen_items,
		'inWishlist'  => static function () {
			$state   = wp_interactivity_state();
			$context = wp_interactivity_get_context();
			return in_array( $context['bookId'], array_column( $state['items'], 'id' ), true );
		},
		'toggleLabel' => static function () {
			$state = wp_interactivity_state();
			return $state['inWishlist']() ? $state['labelRemove'] : $state['labelAdd'];
		},
		'isDisabled'  => false,
	)
);

if ( 'count' === $attributes['display'] ) :
	$lumen_panel = wp_unique_id( 'lumen-wishlist-' );
	?>
	<div
		<?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		data-wp-interactive="lumen/wishlist"
		<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
		data-wp-init="callbacks.refreshOnRestore"
		data-wp-run="callbacks.useConnectionStatus"
		data-wp-on-document--keydown="actions.closeOnEscape"
	>
		<button type="button" aria-controls="<?php echo esc_attr( $lumen_panel ); ?>"
			data-wp-on--click="actions.togglePanel"
			data-wp-bind--aria-expanded="context.isOpen"
		>
			<?php esc_html_e( 'Wishlist', 'lumen-catalog' ); ?>
			<span class="lumen-wishlist__count" data-wp-text="state.count" data-wp-class--is-empty="state.isEmpty"></span>
		</button>
		<div id="<?php echo esc_attr( $lumen_panel ); ?>" class="lumen-wishlist__panel"
			data-wp-bind--hidden="!context.isOpen"
			data-wp-watch="callbacks.focusPanel"
		>
			<p data-wp-bind--hidden="!state.isEmpty"><?php esc_html_e( 'Your wishlist is empty.', 'lumen-catalog' ); ?></p>
			<ul>
				<template data-wp-each--book="state.items" data-wp-each-key="context.book.id">
					<li><a data-wp-bind--href="context.book.url" data-wp-text="context.book.title"></a></li>
				</template>
			</ul>
		</div>
	</div>
	<?php
	return;
endif;

if ( ! Wishlist::is_book( $lumen_book ) ) {
	return; // A toggle outside a book (for example in a page template) renders nothing.
}

$lumen_context = array(
	'bookId'   => $lumen_book,
	'title'    => get_the_title( $lumen_book ),
	'url'      => get_permalink( $lumen_book ),
	'isSaving' => false,
	'error'    => '',
);
?>
<form
	<?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>"
	data-wp-interactive="lumen/wishlist"
	<?php echo wp_interactivity_data_wp_context( $lumen_context ); ?>
	data-wp-on--submit="actions.toggle"
	data-wp-class--is-saved="state.inWishlist"
>
	<input type="hidden" name="action" value="lumen_wishlist_toggle">
	<input type="hidden" name="book" value="<?php echo esc_attr( $lumen_book ); ?>">
	<input type="hidden" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( 'lumen_wishlist_toggle_' . $lumen_book ) ); ?>">
	<button type="submit"
		data-wp-text="state.toggleLabel"
		data-wp-bind--aria-busy="context.isSaving"
		data-wp-bind--disabled="state.isDisabled"
		data-wp-style--cursor="state.cursor"
	></button>
	<span role="status" data-wp-text="context.error"></span>
</form>

import {
	store,
	getConfig,
	getContext,
	getElement,
	useEffect,
	watch,
	withScope,
	withSyncEvent,
} from '@wordpress/interactivity';

// Sends the request with the REST nonce and returns the new list of items.
function* request( path, method ) {
	const { endpoint, nonce } = getConfig();
	const response = yield fetch( endpoint + path, {
		method,
		headers: { 'X-WP-Nonce': nonce },
	} );
	if ( ! response.ok ) {
		throw new Error( `HTTP ${ response.status }` );
	}
	const data = yield response.json();
	return data.items;
}

const { state, actions } = store( 'lumen/wishlist', {
	state: {
		// Derived state: getters recompute when what they read changes.
		get count() {
			return state.items.length;
		},
		get isEmpty() {
			return state.items.length === 0;
		},
		get inWishlist() {
			const { bookId } = getContext();
			return state.items.some( ( item ) => item.id === bookId );
		},
		get toggleLabel() {
			return state.inWishlist ? state.labelRemove : state.labelAdd;
		},
		get isDisabled() {
			return ! state.isOnline || getContext().isSaving;
		},
		get cursor() {
			return getContext().isSaving ? 'progress' : false;
		},
	},
	actions: {
		// preventDefault() needs the event synchronously, hence withSyncEvent();
		// the generator lets the action wait for fetch() without losing its scope.
		toggle: withSyncEvent( function* ( event ) {
			event.preventDefault();
			const context = getContext();
			const adding = ! state.inWishlist;
			const previous = state.items;

			context.isSaving = true;
			context.error = '';
			// Optimistic update: the UI changes before the server answers.
			state.items = adding
				? [
						{
							id: context.bookId,
							title: context.title,
							url: context.url,
						},
						...previous,
					]
				: previous.filter( ( item ) => item.id !== context.bookId );

			try {
				state.items = yield* request(
					`/${ context.bookId }`,
					adding ? 'PUT' : 'DELETE'
				);
			} catch {
				state.items = previous;
				context.error = state.labelError;
			} finally {
				context.isSaving = false;
			}
		} ),
		*refresh() {
			try {
				state.items = yield* request( '', 'GET' );
			} catch {
				// Keep the list the page was rendered with.
			}
		},
		togglePanel() {
			const context = getContext();
			context.isOpen = ! context.isOpen;
		},
		closeOnEscape( event ) {
			if ( event.key === 'Escape' ) {
				getContext().isOpen = false;
			}
		},
	},
	callbacks: {
		// data-wp-init: runs once, when the element is hydrated.
		refreshOnRestore() {
			const onPageShow = withScope( ( event ) => {
				if ( event.persisted ) {
					actions.refresh(); // Page came back from the back/forward cache.
				}
			} );
			window.addEventListener( 'pageshow', onPageShow );
			return () => window.removeEventListener( 'pageshow', onPageShow );
		},
		// data-wp-run: runs on every render, so it can use hooks.
		useConnectionStatus() {
			useEffect( () => {
				const update = () => {
					state.isOnline = window.navigator.onLine;
				};
				window.addEventListener( 'online', update );
				window.addEventListener( 'offline', update );
				return () => {
					window.removeEventListener( 'online', update );
					window.removeEventListener( 'offline', update );
				};
			}, [] );
		},
		// data-wp-watch: runs again whenever context.isOpen changes.
		focusPanel() {
			const { isOpen } = getContext();
			const { ref } = getElement();
			if ( isOpen ) {
				ref.querySelector( 'a' )?.focus();
			}
		},
	},
} );

// watch() (WordPress 7.0): a store-level effect not tied to any element.
watch( () => {
	document.body.classList.toggle( 'has-wishlist-items', state.count > 0 );
} );