Last active
August 31, 2022 20:47
-
-
Save JiveDig/6ce5b2b12d114665b5032893f6ba2b04 to your computer and use it in GitHub Desktop.
Testing loading block assets (scripts and styles) on demand, before the block markup.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment