plugin updates
This commit is contained in:
Tony Volpe
@@ -30,6 +30,17 @@ class WP_Script_Modules {
|
||||
*/
|
||||
private $enqueued_before_registered = array();
|
||||
|
||||
/**
|
||||
* Tracks whether the @wordpress/a11y script module is available.
|
||||
*
|
||||
* Some additional HTML is required on the page for the module to work. Track
|
||||
* whether it's available to print at the appropriate time.
|
||||
*
|
||||
* @since 6.7.0
|
||||
* @var bool
|
||||
*/
|
||||
private $a11y_available = false;
|
||||
|
||||
/**
|
||||
* Registers the script module if no script module with that script module
|
||||
* identifier has already been registered.
|
||||
@@ -182,6 +193,11 @@ class WP_Script_Modules {
|
||||
add_action( 'admin_print_footer_scripts', array( $this, 'print_import_map' ) );
|
||||
add_action( 'admin_print_footer_scripts', array( $this, 'print_enqueued_script_modules' ) );
|
||||
add_action( 'admin_print_footer_scripts', array( $this, 'print_script_module_preloads' ) );
|
||||
|
||||
add_action( 'wp_footer', array( $this, 'print_script_module_data' ) );
|
||||
add_action( 'admin_print_footer_scripts', array( $this, 'print_script_module_data' ) );
|
||||
add_action( 'wp_footer', array( $this, 'print_a11y_script_module_html' ), 20 );
|
||||
add_action( 'admin_print_footer_scripts', array( $this, 'print_a11y_script_module_html' ), 20 );
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -227,26 +243,10 @@ class WP_Script_Modules {
|
||||
* Prints the import map using a script tag with a type="importmap" attribute.
|
||||
*
|
||||
* @since 6.5.0
|
||||
*
|
||||
* @global WP_Scripts $wp_scripts The WP_Scripts object for printing the polyfill.
|
||||
*/
|
||||
public function print_import_map() {
|
||||
$import_map = $this->get_import_map();
|
||||
if ( ! empty( $import_map['imports'] ) ) {
|
||||
global $wp_scripts;
|
||||
if ( isset( $wp_scripts ) ) {
|
||||
wp_print_inline_script_tag(
|
||||
wp_get_script_polyfill(
|
||||
$wp_scripts,
|
||||
array(
|
||||
'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")' => 'wp-polyfill-importmap',
|
||||
)
|
||||
),
|
||||
array(
|
||||
'id' => 'wp-load-polyfill-importmap',
|
||||
)
|
||||
);
|
||||
}
|
||||
wp_print_inline_script_tag(
|
||||
wp_json_encode( $import_map, JSON_HEX_TAG | JSON_HEX_AMP ),
|
||||
array(
|
||||
@@ -363,4 +363,141 @@ class WP_Script_Modules {
|
||||
|
||||
return $src;
|
||||
}
|
||||
|
||||
/**
|
||||
* Print data associated with Script Modules.
|
||||
*
|
||||
* The data will be embedded in the page HTML and can be read by Script Modules on page load.
|
||||
*
|
||||
* @since 6.7.0
|
||||
*
|
||||
* Data can be associated with a Script Module via the
|
||||
* {@see "script_module_data_{$module_id}"} filter.
|
||||
*
|
||||
* The data for a Script Module will be serialized as JSON in a script tag with an ID of the
|
||||
* form `wp-script-module-data-{$module_id}`.
|
||||
*/
|
||||
public function print_script_module_data(): void {
|
||||
$modules = array();
|
||||
foreach ( array_keys( $this->get_marked_for_enqueue() ) as $id ) {
|
||||
if ( '@wordpress/a11y' === $id ) {
|
||||
$this->a11y_available = true;
|
||||
}
|
||||
$modules[ $id ] = true;
|
||||
}
|
||||
foreach ( array_keys( $this->get_import_map()['imports'] ) as $id ) {
|
||||
if ( '@wordpress/a11y' === $id ) {
|
||||
$this->a11y_available = true;
|
||||
}
|
||||
$modules[ $id ] = true;
|
||||
}
|
||||
|
||||
foreach ( array_keys( $modules ) as $module_id ) {
|
||||
/**
|
||||
* Filters data associated with a given Script Module.
|
||||
*
|
||||
* Script Modules may require data that is required for initialization or is essential
|
||||
* to have immediately available on page load. These are suitable use cases for
|
||||
* this data.
|
||||
*
|
||||
* The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID
|
||||
* that the data is associated with.
|
||||
*
|
||||
* This is best suited to pass essential data that must be available to the module for
|
||||
* initialization or immediately on page load. It does not replace the REST API or
|
||||
* fetching data from the client.
|
||||
*
|
||||
* @example
|
||||
* add_filter(
|
||||
* 'script_module_data_MyScriptModuleID',
|
||||
* function ( array $data ): array {
|
||||
* $data['script-needs-this-data'] = 'ok';
|
||||
* return $data;
|
||||
* }
|
||||
* );
|
||||
*
|
||||
* If the filter returns no data (an empty array), nothing will be embedded in the page.
|
||||
*
|
||||
* The data for a given Script Module, if provided, will be JSON serialized in a script
|
||||
* tag with an ID of the form `wp-script-module-data-{$module_id}`.
|
||||
*
|
||||
* The data can be read on the client with a pattern like this:
|
||||
*
|
||||
* @example
|
||||
* const dataContainer = document.getElementById( 'wp-script-module-data-MyScriptModuleID' );
|
||||
* let data = {};
|
||||
* if ( dataContainer ) {
|
||||
* try {
|
||||
* data = JSON.parse( dataContainer.textContent );
|
||||
* } catch {}
|
||||
* }
|
||||
* initMyScriptModuleWithData( data );
|
||||
*
|
||||
* @since 6.7.0
|
||||
*
|
||||
* @param array $data The data associated with the Script Module.
|
||||
*/
|
||||
$data = apply_filters( "script_module_data_{$module_id}", array() );
|
||||
|
||||
if ( is_array( $data ) && array() !== $data ) {
|
||||
/*
|
||||
* This data will be printed as JSON inside a script tag like this:
|
||||
* <script type="application/json"></script>
|
||||
*
|
||||
* A script tag must be closed by a sequence beginning with `</`. It's impossible to
|
||||
* close a script tag without using `<`. We ensure that `<` is escaped and `/` can
|
||||
* remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
|
||||
*
|
||||
* - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
|
||||
* - JSON_UNESCAPED_SLASHES: Don't escape /.
|
||||
*
|
||||
* If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
|
||||
*
|
||||
* - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
|
||||
* - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
|
||||
* JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
|
||||
* before PHP 7.1 without this constant. Available as of PHP 7.1.0.
|
||||
*
|
||||
* The JSON specification requires encoding in UTF-8, so if the generated HTML page
|
||||
* is not encoded in UTF-8 then it's not safe to include those literals. They must
|
||||
* be escaped to avoid encoding issues.
|
||||
*
|
||||
* @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
|
||||
* @see https://www.php.net/manual/en/json.constants.php for details on these constants.
|
||||
* @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
|
||||
*/
|
||||
$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
|
||||
if ( ! is_utf8_charset() ) {
|
||||
$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
|
||||
}
|
||||
|
||||
wp_print_inline_script_tag(
|
||||
wp_json_encode(
|
||||
$data,
|
||||
$json_encode_flags
|
||||
),
|
||||
array(
|
||||
'type' => 'application/json',
|
||||
'id' => "wp-script-module-data-{$module_id}",
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @access private This is only intended to be called by the registered actions.
|
||||
*
|
||||
* @since 6.7.0
|
||||
*/
|
||||
public function print_a11y_script_module_html() {
|
||||
if ( ! $this->a11y_available ) {
|
||||
return;
|
||||
}
|
||||
echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
|
||||
. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications' ) . '</p>'
|
||||
. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
|
||||
. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
|
||||
. '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user