Testing loading block assets (scripts and styles) on demand, before the block markup.

on-demand-block-assets.php

<?php

add_action( 'enqueue_block_editor_assets', 'mai_enqueue_block_editor_assets' );
/**
 * Enqueues block assets for the editor,
 * since front-end assets are loaded on-demand.
 *
 * @since TBD
 *
 * @return void
 */
function mai_enqueue_block_editor_assets() {
	$assets = mai_get_block_assets();

	if ( ! $assets ) {
		return;
	}

	// Loop through assets.
	foreach ( $assets as $name => $values ) {
		foreach ( $values as $type => $args ) {
			// Skip if no handle and no src.
			if ( ! ( $args['handle'] && $args['src'] ) ) {
				continue;
			}

			// Enqueue.
			if ( 'style' === $type ) {
				wp_enqueue_style( $args['handle'], $args['src'], $args['deps'], $args['ver'], $args['media'] );
			} elseif ( 'script' === $type ) {
				wp_enqueue_script( $args['handle'], $args['src'], $args['deps'], $args['ver'] );
			}
		}
	}
}

add_filter( 'render_block', 'mai_maybe_enqueue_block_assets', 10, 2 );
/**
 *
 * Loads block assets (scripts and styles) on demand, before the block markup.
 *
 * @since TBD
 *
 * @param string $block_content The existing block content.
 * @param object $block         The cover block object.
 *
 * @return string
 */
function mai_maybe_enqueue_block_assets( $block_content, $block ) {
	static $loaded = [];

	$name   = $block['blockName'];
	$assets = mai_get_block_assets();

	// Bail if no assets.
	if ( ! $assets ) {
		return $block_content;
	}

	// Bail if not a block we need.
	if ( ! isset( $assets[ $name ] ) ) {
		return $block_content;
	}

	// Loop through assets.
	foreach ( $assets[ $name ] as $type => $args ) {
		// Skip if asset is already loaded.
		if ( isset( $loaded[ $name ][ $type ] ) ) {
			continue;
		}

		// Build the asset markup.
		switch ( $type ) {
			case 'style':
				$asset = sprintf( '<link rel="stylesheet" href="%s">', esc_url( $args['src'] ) );
			break;
			case 'script':
				$asset = sprintf( '<script src="%s"></script>', esc_url( $args['src'] ) );
			break;
			default:
				$asset = '';
		}

		// Prepend asset to the block content.
		$block_content = $asset . $block_content;

		// Update static var.
		$loaded[ $name ][ $type ] = true;
	}

	return $block_content;
}

/**
 * Gets array of block assets to be loaded on demand.
 *
 * @since TBD
 *
 * @return array
 */
function mai_get_block_assets() {
	static $assets = null;

	if ( ! is_null( $assets ) ) {
		return $assets;
	}

	$suffix = mai_lists_get_suffix();
	$assets = [
		'acf/mai-list' => [
			'style' => [
				'handle' => 'mai-lists',
				'src'    => MAI_LISTS_PLUGIN_URL . sprintf( 'assets/mai-lists%s.css', $suffix ),
				'ver'    => MAI_LISTS_VERSION . '.' . date( 'njYHi', filemtime( MAI_LISTS_PLUGIN_DIR . sprintf( 'assets/mai-lists%s.css', $suffix ) ) ),
			],
		],
	];

	// Add filter for plugins to add assets.
	$assets = (array) apply_filters( 'mai_block_assets', $assets );

	// Parse and sanitize.
	foreach ( $assets as $name => $values ) {
		foreach ( $values as $type => $args ) {
			// Parse args.
			$args = wp_parse_args( $args,
				[
					'handle' => '',
					'src'    => '',
					'deps'   => '',
					'ver'    => get_bloginfo( 'version' ),
					'media'  => 'all',
				]
			);

			// Sanitize.
			$args = array_map( 'esc_attr', $args );

			// Update.
			$assets[ $name ][ $type ] = $args;
		}
	}

	return $assets;
}