@automattic/newspack-blocks 4.34.1 → 4.35.0-alpha.1

package/src/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php

@@ -80,6 +80,53 @@ class WP_REST_Newspack_Articles_Controller extends WP_REST_Controller {
 			]
 		);
 
+		// Endpoint to get articles for every block on a page in one request, in document order.
+		register_rest_route(
+			$this->namespace,
+			'/newspack-blocks-posts-batch',
+			[
+				'methods'             => \WP_REST_Server::CREATABLE,
+				'callback'            => [ 'Newspack_Blocks_API', 'posts_batch_endpoint' ],
+				'args'                => [
+					'queries' => [
+						'type'     => 'array',
+						'required' => true,
+						'maxItems' => Newspack_Blocks_API::POSTS_BATCH_MAX_QUERIES,
+						// Core fills defaults for top-level args only, so the handler supplies its
+						// own for these two rather than relying on the schema.
+						'items'    => [
+							'type'       => 'object',
+							'properties' => [
+								'clientId'    => [
+									'type'     => 'string',
+									'required' => true,
+								],
+								'postsQuery'  => [
+									'type' => 'object',
+								],
+								'deduplicate' => [
+									'type' => 'boolean',
+								],
+							],
+						],
+					],
+					'exclude' => [ // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude
+						'type'     => 'array',
+						'items'    => [
+							'type' => 'integer',
+						],
+						// Every deduplicating query carries this list plus everything the batch has
+						// matched so far, so an unbounded list here is work every query pays for.
+						'maxItems' => Newspack_Blocks_API::POSTS_BATCH_MAX_EXCLUDE,
+						'default'  => [],
+					],
+				],
+				'permission_callback' => function() {
+					return current_user_can( 'edit_posts' );
+				},
+			]
+		);
+
 		// Endpoint to get articles in the editor, in specific posts mode.
 		register_rest_route(
 			$this->namespace,

package/src/blocks/homepage-articles/store.js

@@ -11,6 +11,7 @@ import { set } from 'lodash';
  */
 import { register, select } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -86,28 +87,103 @@ const POSTS_QUERIES_CACHE = {};
 const createCacheKey = JSON.stringify;
 
 /**
- * Get posts for a single block.
+ * The query a block's posts are cached under. A deduplicating block's result depends on
+ * the posts shown above it, so the exclusion list is part of its key.
+ *
+ * @param {Object} block   an object with a postsQuery and a deduplicate flag
+ * @param {Array}  exclude IDs of posts already shown above the block
+ * @return {Object} posts query
+ */
+const effectiveQuery = ( block, exclude ) => ( block.deduplicate ? { ...block.postsQuery, exclude } : block.postsQuery );
+
+/**
+ * Fetch posts for blocks in document order, carrying the exclusion list from each
+ * deduplicating block to the next.
+ *
+ * Blocks answered from the cache are dispatched without a request. From the first block
+ * that isn't cached, the rest go to the batch endpoint, which applies the exclusion list
+ * server-side, so a page costs one request instead of one per block. When only one block
+ * needs posts, it uses the single-block endpoint instead.
  *
  * @yield
- * @param {Object} block an object with a postsQuery and a clientId
+ * @param {Array} blockQueries objects with clientId, postsQuery and deduplicate, in document order
+ * @param {Array} exclude      IDs of posts to exclude from the first deduplicating block
  */
-function* getPostsForBlock( block ) {
-	const cacheKey = createCacheKey( block.postsQuery );
-	const restUrl = window.newspack_blocks_data.posts_rest_url;
-	let posts = POSTS_QUERIES_CACHE[ cacheKey ];
-	if ( posts === undefined ) {
-		const url = addQueryArgs( restUrl, {
-			...block.postsQuery,
-			// `context=edit` is needed, so that custom REST fields are returned.
-			context: 'edit',
-		} );
-		posts = yield call( apiFetch, { url } );
-		POSTS_QUERIES_CACHE[ cacheKey ] = posts;
-	}
+export function* fetchPostsForBlocks( blockQueries, exclude ) {
+	const { posts_rest_url: singleUrl, posts_batch_rest_url: url } = window.newspack_blocks_data;
+	// Localized as a string, and the server enforces its own limit either way.
+	const maxQueries = Number( window.newspack_blocks_data.posts_batch_max_queries );
+	const pending = [ ...blockQueries ];
+
+	const showPosts = function* ( block, posts ) {
+		POSTS_QUERIES_CACHE[ createCacheKey( effectiveQuery( block, exclude ) ) ] = posts;
+		yield put( { type: 'UPDATE_BLOCK_POSTS', clientId: block.clientId, posts } );
+		if ( block.deduplicate ) {
+			exclude = [ ...exclude, ...posts.map( post => post.id ) ];
+		}
+	};
+
+	while ( pending.length ) {
+		const cached = POSTS_QUERIES_CACHE[ createCacheKey( effectiveQuery( pending[ 0 ], exclude ) ) ];
+		if ( cached !== undefined ) {
+			yield* showPosts( pending.shift(), cached );
+			continue;
+		}
+
+		const batch = pending.splice( 0, maxQueries );
+
+		if ( batch.length === 1 ) {
+			const [ block ] = batch;
+			try {
+				const posts = yield call( apiFetch, {
+					// `context=edit` is needed, so that custom REST fields are returned.
+					url: addQueryArgs( singleUrl, { ...effectiveQuery( block, exclude ), context: 'edit' } ),
+				} );
+				yield* showPosts( block, posts );
+			} catch ( e ) {
+				// A failed block adds nothing to the exclusion list, so later blocks can still load.
+				yield put( { type: 'UPDATE_BLOCK_ERROR', clientId: block.clientId, error: e.message } );
+			}
+			continue;
+		}
+
+		let results;
+		try {
+			results = yield call( apiFetch, {
+				url,
+				method: 'POST',
+				data: {
+					exclude,
+					queries: batch.map( ( { clientId, postsQuery, deduplicate } ) => ( {
+						clientId,
+						// `context=edit` is needed, so that custom REST fields are returned.
+						postsQuery: { ...postsQuery, context: 'edit' },
+						deduplicate,
+					} ) ),
+				},
+			} );
+		} catch ( e ) {
+			// Without this batch's posts the exclusion list for later blocks is unknown.
+			for ( const block of [ ...batch, ...pending ] ) {
+				yield put( { type: 'UPDATE_BLOCK_ERROR', clientId: block.clientId, error: e.message } );
+			}
+			return;
+		}
 
-	const postsIds = posts.map( post => post.id );
-	yield put( { type: 'UPDATE_BLOCK_POSTS', clientId: block.clientId, posts } );
-	return postsIds;
+		const resultsByClientId = Object.fromEntries( results.map( result => [ result.clientId, result ] ) );
+		for ( const block of batch ) {
+			const result = resultsByClientId[ block.clientId ];
+			if ( result?.posts ) {
+				yield* showPosts( block, result.posts );
+			} else {
+				yield put( {
+					type: 'UPDATE_BLOCK_ERROR',
+					clientId: block.clientId,
+					error: result?.error || __( 'The posts for this block could not be loaded.', 'newspack-blocks' ),
+				} );
+			}
+		}
+	}
 }
 
 /**
@@ -140,33 +216,20 @@ const createFetchPostsSaga = blockNames => {
 
 		const blocks = recursivelyGetBlocks( getBlocks );
 
-		const blockQueries = getBlockQueries( blocks, blockNames );
+		const blockQueries = getBlockQueries( blocks, blockNames ).map( block => ( {
+			...block,
+			deduplicate: Boolean( shouldDeduplicate( block.clientId ) ),
+		} ) );
 
 		// Use requested specific posts ids as the starting state of exclusion list.
-		const specificPostsId = blockQueries.reduce( ( acc, { clientId, postsQuery } ) => {
-			if ( shouldDeduplicate( clientId ) && postsQuery.include ) {
+		const specificPostsId = blockQueries.reduce( ( acc, { deduplicate, postsQuery } ) => {
+			if ( deduplicate && postsQuery.include ) {
 				acc = [ ...acc, ...postsQuery.include ];
 			}
 			return acc;
 		}, [] );
 
-		let exclude = sanitizePostList( [ ...specificPostsId, getCurrentPostId() ] );
-		while ( blockQueries.length ) {
-			const nextBlock = blockQueries.shift();
-			const deduplicate = shouldDeduplicate( nextBlock.clientId );
-			if ( deduplicate ) {
-				nextBlock.postsQuery.exclude = exclude;
-			}
-			let fetchedPostIds = [];
-			try {
-				fetchedPostIds = yield call( getPostsForBlock, nextBlock );
-			} catch ( e ) {
-				yield put( { type: 'UPDATE_BLOCK_ERROR', clientId: nextBlock.clientId, error: e.message } );
-			}
-			if ( deduplicate ) {
-				exclude = [ ...exclude, ...fetchedPostIds ];
-			}
-		}
+		yield call( fetchPostsForBlocks, blockQueries, sanitizePostList( [ ...specificPostsId, getCurrentPostId() ] ) );
 
 		yield put( { type: 'ENABLE_UI' } );
 	}

package/src/blocks/homepage-articles/store.test.js

@@ -0,0 +1,189 @@
+/**
+ * External dependencies
+ */
+import { runSaga } from 'redux-saga';
+
+/**
+ * WordPress dependencies
+ */
+import { getQueryArgs } from '@wordpress/url';
+
+jest.mock( '@wordpress/api-fetch' );
+
+const SINGLE_URL = 'https://example.test/wp-json/newspack-blocks/v1/newspack-blocks-posts';
+const BATCH_URL = 'https://example.test/wp-json/newspack-blocks/v1/newspack-blocks-posts-batch';
+
+// Every query draws from posts 1–20, newest first, skipping the posts in its exclusion list.
+const findPosts = ( postsToShow, exclude ) => {
+	const ids = [];
+	for ( let id = 1; id <= 20 && ids.length < postsToShow; id++ ) {
+		if ( ! exclude.includes( id ) ) {
+			ids.push( id );
+		}
+	}
+	return ids;
+};
+
+// Stands in for both endpoints. The batch endpoint carries the exclusion list from each
+// deduplicating query to the next; the single-block endpoint takes its list from the URL.
+const fakeEndpoints = ( { url, data } ) => {
+	if ( ! data ) {
+		const { postsToShow, exclude = [] } = getQueryArgs( url );
+		return Promise.resolve( findPosts( Number( postsToShow ), exclude.map( Number ) ).map( id => ( { id } ) ) );
+	}
+	let exclude = [ ...data.exclude ];
+	return Promise.resolve(
+		data.queries.map( ( { clientId, postsQuery, deduplicate } ) => {
+			if ( postsQuery.fail ) {
+				return { clientId, error: 'Invalid parameter(s): postsToShow' };
+			}
+			const ids = findPosts( postsQuery.postsToShow, deduplicate ? exclude : [] );
+			if ( deduplicate ) {
+				exclude = [ ...exclude, ...ids ];
+			}
+			return { clientId, posts: ids.map( id => ( { id } ) ) };
+		} )
+	);
+};
+
+const block = ( clientId, postsToShow, extra = {} ) => ( {
+	clientId,
+	postsQuery: { postsToShow, ...extra },
+	deduplicate: true,
+} );
+
+describe( 'fetchPostsForBlocks', () => {
+	// The query cache lives at module scope, so each test loads a fresh copy of the store,
+	// along with the api-fetch mock that copy calls.
+	let fetchPostsForBlocks, apiFetch;
+
+	const run = async ( blocks, exclude = [] ) => {
+		const dispatched = [];
+		await runSaga( { dispatch: action => dispatched.push( action ) }, fetchPostsForBlocks, blocks, exclude ).toPromise();
+		return {
+			postsByBlock: Object.fromEntries(
+				dispatched
+					.filter( action => action.type === 'UPDATE_BLOCK_POSTS' )
+					.map( action => [ action.clientId, action.posts.map( post => post.id ) ] )
+			),
+			errorsByBlock: Object.fromEntries(
+				dispatched.filter( action => action.type === 'UPDATE_BLOCK_ERROR' ).map( action => [ action.clientId, action.error ] )
+			),
+		};
+	};
+
+	beforeEach( () => {
+		// wp_localize_script casts every scalar to a string, so the limit arrives as one.
+		window.newspack_blocks_data = { posts_rest_url: SINGLE_URL, posts_batch_rest_url: BATCH_URL, posts_batch_max_queries: '50' };
+		jest.isolateModules( () => {
+			apiFetch = require( '@wordpress/api-fetch' ).default;
+			( { fetchPostsForBlocks } = require( './store' ) );
+		} );
+		apiFetch.mockImplementation( fakeEndpoints );
+	} );
+
+	it( 'loads every block on the page with one request', async () => {
+		const { postsByBlock } = await run( [ block( 'a', 2 ), block( 'b', 2 ), block( 'c', 1 ) ], [ 20 ] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( apiFetch.mock.calls[ 0 ][ 0 ] ).toMatchObject( { url: BATCH_URL, method: 'POST', data: { exclude: [ 20 ] } } );
+		expect( postsByBlock ).toEqual( { a: [ 1, 2 ], b: [ 3, 4 ], c: [ 5 ] } );
+	} );
+
+	it( 'asks for custom REST fields', async () => {
+		await run( [ block( 'a', 1 ), block( 'b', 1 ) ] );
+
+		expect( apiFetch.mock.calls[ 0 ][ 0 ].data.queries[ 0 ].postsQuery.context ).toBe( 'edit' );
+	} );
+
+	it( 'uses the single-block request when only one block needs posts', async () => {
+		const { postsByBlock } = await run( [ block( 'a', 2 ) ], [ 1 ] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		const [ { url, data, method } ] = apiFetch.mock.calls[ 0 ];
+		expect( url.startsWith( SINGLE_URL + '?' ) ).toBe( true );
+		expect( getQueryArgs( url ) ).toMatchObject( { context: 'edit', exclude: [ '1' ] } );
+		expect( data ).toBeUndefined();
+		expect( method ).toBeUndefined();
+		expect( postsByBlock ).toEqual( { a: [ 2, 3 ] } );
+	} );
+
+	it( 'fetches only the last block, on its own, when it is the one that changed', async () => {
+		await run( [ block( 'a', 2 ), block( 'b', 2 ) ] );
+		const { postsByBlock } = await run( [ block( 'a', 2 ), block( 'b', 3 ) ] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+		const [ { url, data } ] = apiFetch.mock.calls[ 1 ];
+		expect( data ).toBeUndefined();
+		expect( getQueryArgs( url ).exclude ).toEqual( [ '1', '2' ] );
+		expect( postsByBlock ).toEqual( { a: [ 1, 2 ], b: [ 3, 4, 5 ] } );
+	} );
+
+	it( 'reports a failed single-block request on that block only', async () => {
+		apiFetch.mockRejectedValueOnce( new Error( 'Service unavailable' ) );
+
+		const { postsByBlock, errorsByBlock } = await run( [ block( 'a', 1 ) ] );
+
+		expect( errorsByBlock ).toEqual( { a: 'Service unavailable' } );
+		expect( postsByBlock ).toEqual( {} );
+	} );
+
+	it( 'reuses cached posts when nothing on the page changed', async () => {
+		const blocks = [ block( 'a', 2 ), block( 'b', 2 ) ];
+		await run( blocks );
+		const { postsByBlock } = await run( blocks );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
+		expect( postsByBlock ).toEqual( { a: [ 1, 2 ], b: [ 3, 4 ] } );
+	} );
+
+	// Blocks above an edited block keep their cached posts. The edited block and everything
+	// below it are re-fetched, starting from the posts the blocks above show.
+	it( 'only re-fetches from the first block that changed', async () => {
+		await run( [ block( 'a', 2 ), block( 'b', 2 ), block( 'c', 2 ) ] );
+		const { postsByBlock } = await run( [ block( 'a', 2 ), block( 'b', 3 ), block( 'c', 2 ) ] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+		const { data } = apiFetch.mock.calls[ 1 ][ 0 ];
+		expect( data.queries.map( query => query.clientId ) ).toEqual( [ 'b', 'c' ] );
+		expect( data.exclude ).toEqual( [ 1, 2 ] );
+		expect( postsByBlock ).toEqual( { a: [ 1, 2 ], b: [ 3, 4, 5 ], c: [ 6, 7 ] } );
+	} );
+
+	it( 'keeps the posts of a block without deduplication available to the blocks below it', async () => {
+		const { postsByBlock } = await run( [ block( 'a', 2 ), { ...block( 'b', 2 ), deduplicate: false }, block( 'c', 2 ) ] );
+
+		expect( postsByBlock ).toEqual( { a: [ 1, 2 ], b: [ 1, 2 ], c: [ 3, 4 ] } );
+	} );
+
+	it( 'reports a failed query on its own block and still loads the others', async () => {
+		const { postsByBlock, errorsByBlock } = await run( [ block( 'a', 1 ), block( 'b', 1, { fail: true } ), block( 'c', 1 ) ] );
+
+		expect( errorsByBlock ).toEqual( { b: 'Invalid parameter(s): postsToShow' } );
+		expect( postsByBlock ).toEqual( { a: [ 1 ], c: [ 2 ] } );
+	} );
+
+	// Later blocks' exclusion lists depend on the failed batch, so they can't be loaded either.
+	it( 'reports an error on every remaining block when a batch request fails', async () => {
+		window.newspack_blocks_data.posts_batch_max_queries = '2';
+		apiFetch.mockImplementationOnce( fakeEndpoints ).mockRejectedValueOnce( new Error( 'Service unavailable' ) );
+
+		const { postsByBlock, errorsByBlock } = await run( [ block( 'a', 1 ), block( 'b', 1 ), block( 'c', 1 ), block( 'd', 1 ), block( 'e', 1 ) ] );
+
+		expect( postsByBlock ).toEqual( { a: [ 1 ], b: [ 2 ] } );
+		expect( errorsByBlock ).toEqual( { c: 'Service unavailable', d: 'Service unavailable', e: 'Service unavailable' } );
+		expect( apiFetch ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'splits a page larger than the batch limit and carries deduplication across batches', async () => {
+		window.newspack_blocks_data.posts_batch_max_queries = '2';
+
+		const { postsByBlock } = await run( [ block( 'a', 1 ), block( 'b', 1 ), block( 'c', 1 ), block( 'd', 1 ), block( 'e', 1 ) ] );
+
+		expect( apiFetch ).toHaveBeenCalledTimes( 3 );
+		expect( apiFetch.mock.calls[ 1 ][ 0 ].data.exclude ).toEqual( [ 1, 2 ] );
+		// The last block is left over on its own, so it uses the single-block request.
+		expect( getQueryArgs( apiFetch.mock.calls[ 2 ][ 0 ].url ).exclude ).toEqual( [ '1', '2', '3', '4' ] );
+		expect( postsByBlock ).toEqual( { a: [ 1 ], b: [ 2 ], c: [ 3 ], d: [ 4 ], e: [ 5 ] } );
+	} );
+} );

package/src/modal-checkout/modal.js

@@ -11,6 +11,7 @@ import * as a11y from './accessibility.js';
  */
 import { manageDismissed, manageOpened } from './analytics';
 import {
+	afterDeferredScripts,
 	domReady,
 	iframeReady,
 	onCheckoutReady,
@@ -980,7 +981,16 @@ domReady( () => {
 			stripCheckoutUrlParams();
 		}
 	};
-	handleModalCheckoutUrlParams();
+	// A click reaches a form long after every script has loaded; the URL trigger
+	// fires as soon as this bundle runs. This bundle is async and the reader
+	// activation scripts are deferred, so firing here can beat them — and then
+	// the checkout opens without the sign-in step and without registering as an
+	// overlay, which lets prompts open on top of it. Deferred scripts are done
+	// by DOMContentLoaded, so the trigger waits for that rather than queueing on
+	// newspackRAS: that queue only flushes once newspack-plugin's reader
+	// activation script runs, and the modal needs only WooCommerce, so on a site
+	// without newspack-plugin a queued trigger would never fire.
+	afterDeferredScripts( handleModalCheckoutUrlParams );
 
 	/**
 	 * Open the modal checkout.

package/src/modal-checkout/utils.js

@@ -20,6 +20,39 @@ export function domReady( callback ) {
 	document.addEventListener( 'DOMContentLoaded', callback );
 }
 
+/**
+ * Run a callback once every deferred script on the page has executed.
+ *
+ * Deferred scripts run after parsing ends and before DOMContentLoaded, and
+ * this bundle is async, so it can execute in between — domReady() only waits
+ * for parsing. readyState is `interactive` on both sides of DOMContentLoaded,
+ * so in that state navigation timing settles whether the event already fired.
+ *
+ * @param {Function} callback The function to run.
+ * @return {void}
+ */
+export function afterDeferredScripts( callback ) {
+	const { readyState } = document;
+	if ( readyState === 'complete' || ( readyState === 'interactive' && hasDomContentLoadedFired() ) ) {
+		return void callback();
+	}
+	document.addEventListener( 'DOMContentLoaded', callback, { once: true } );
+}
+
+/**
+ * Whether DOMContentLoaded has fired, according to navigation timing.
+ *
+ * Without a navigation entry there is nothing to consult, and waiting would
+ * risk an event that never comes: report it as fired, which degrades to
+ * running immediately.
+ *
+ * @return {boolean} Whether the event has fired.
+ */
+function hasDomContentLoadedFired() {
+	const [ navigation ] = window.performance?.getEntriesByType?.( 'navigation' ) || [];
+	return ! navigation || navigation.domContentLoadedEventStart > 0;
+}
+
 /**
  * Create a hidden input field.
  *

package/src/modal-checkout/utils.test.js

@@ -2,12 +2,78 @@
  * Tests for modal-checkout utils.
  */
 
-import { getCheckoutData } from './utils';
+import { afterDeferredScripts, getCheckoutData } from './utils';
 
 afterEach( () => {
 	document.body.innerHTML = '';
 } );
 
+describe( 'afterDeferredScripts()', () => {
+	let readyState;
+	let navigationEntries;
+
+	beforeEach( () => {
+		readyState = 'complete';
+		navigationEntries = [];
+		Object.defineProperty( document, 'readyState', { configurable: true, get: () => readyState } );
+		Object.defineProperty( window.performance, 'getEntriesByType', {
+			configurable: true,
+			value: type => ( type === 'navigation' ? navigationEntries : [] ),
+		} );
+	} );
+
+	afterEach( () => {
+		delete document.readyState;
+		delete window.performance.getEntriesByType;
+	} );
+
+	// Images still loading keep readyState at `interactive` after DOMContentLoaded,
+	// so a bundle arriving then must not wait for an event that will not repeat.
+	// Missing navigation timing leaves nothing to consult, and the trigger
+	// degrades to running immediately rather than to never running.
+	it.each( [
+		[ 'the document is complete', 'complete', [] ],
+		[ 'DOMContentLoaded already fired and images keep the document interactive', 'interactive', [ { domContentLoadedEventStart: 850 } ] ],
+		[ 'navigation timing is unavailable', 'interactive', [] ],
+	] )( 'runs at once when %s', ( _, state, entries ) => {
+		readyState = state;
+		navigationEntries = entries;
+		const callback = jest.fn();
+
+		afterDeferredScripts( callback );
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'waits for DOMContentLoaded, once, when parsing has ended but the event has not fired', () => {
+		// The window an async bundle lands in when it beats the deferred scripts:
+		// readyState is already `interactive`, DOMContentLoaded is still pending.
+		readyState = 'interactive';
+		navigationEntries = [ { domContentLoadedEventStart: 0 } ];
+		const callback = jest.fn();
+
+		afterDeferredScripts( callback );
+		expect( callback ).not.toHaveBeenCalled();
+
+		document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
+		document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'waits for DOMContentLoaded while the document is still loading, without consulting timing', () => {
+		// `loading` alone says the event is ahead; the empty navigation timing
+		// must not be read as permission to run.
+		readyState = 'loading';
+		navigationEntries = [];
+		const callback = jest.fn();
+
+		afterDeferredScripts( callback );
+		expect( callback ).not.toHaveBeenCalled();
+
+		document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
+
 /**
  * Build a checkout-button-style form: a `quantity` hidden input (as view.php
  * emits when a block's default seat count is above 1) plus a `data-checkout`

package/vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'automattic/newspack-blocks',
         'pretty_version' => 'dev-main',
         'version' => 'dev-main',
-        'reference' => '8c1da1c0b9e039c24135d8101b433ebe48842e9b',
+        'reference' => 'ce1df4abbe28872d98ac84032eabca65ae1b6abf',
         'type' => 'wordpress-plugin',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -13,7 +13,7 @@
         'automattic/newspack-blocks' => array(
             'pretty_version' => 'dev-main',
             'version' => 'dev-main',
-            'reference' => '8c1da1c0b9e039c24135d8101b433ebe48842e9b',
+            'reference' => 'ce1df4abbe28872d98ac84032eabca65ae1b6abf',
             'type' => 'wordpress-plugin',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),