Pembaruan Modul Skrip di 6.7

@wordpress/a11y Script Module

WordPress 6.7 includes a new @wordpress/a11y script module. It has the same interface as the wp-a11y script so it should be familiar and easy to use. The @wordpress/interactivity-router module uses @wordpress/a11y and has a good example of how it can be used and take advantage of deferred loading:

import( '@wordpress/a11y' ).then(
    ( { speak } ) => speak( message ),
    // Ignore failures to load the a11y module.
    () => {}
);

To take advantage of deferred loading, plugins must declare the dependency correctly:

wp_register_script_module(
    '@my-plugin/my-module-that-depends-on-a11y',
    'module/src/url/index.js',
    array(
        array( 'id' => '@wordpress/a11y', 'import' => 'dynamic' ), // declare as a dynamic dependency
    ),
    '1.0.0'
);

Dependencies will be automatically managed for projects that use @wordpress/scripts with the --experimental-modules flag. This also applies to projects that use @wordpress/dependency-extraction-webpack-plugin directly.

New data passing API

A new filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., script_module_data_{$module_id}, has been introduced to allow script module data to be passed from the server to the client. The most common use case is to pass data that is essential for script module initialization on the client. The Interactivity API uses this filter for Interactivity API store data starting with WordPress 6.7. Here’s an example of how a developer can pass the data needed for connecting to a site’s REST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. to a script module:

add_filter(
    'script_module_data_@my-plugin/my-module',
    function ( array $data ): array {
        $data['restApiUrlBase'] = sanitize_url( get_rest_url() );
        $data['nonce']          = wp_create_nonce( 'my-plugin-nonce' );
        return $data;
    }
);

The data is JSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. serialized into the HTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. of the page in a script tag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) of type="application/json" with an ID wp-script-module-data-{$module_id}. The filter function is expected to accept and return an array.

Script modules are responsible for accessing and parsing the data on the client. An example might look like this:

let configData = {};
const jsonDataScriptTag = document.getElementById(
    'wp-script-module-data-@my-plugin/my-module'
);
if ( jsonDataScriptTag?.textContent ) {
    try {
        serverData = JSON.parse( jsonDataScriptTag.textContent );
    } catch {}
}

This was proposed in Proposal: Server to client data sharing for Script Modules.

What’s next?

Script modules are an exciting new area for WordPress. There are open tickets for improving script modules and adding more functionality. This is just the beginning!

See also

Props @cbravobernal, @czapla, @fabiankaegy for review.

#6-7-2, #dev-notes, #dev-notes-6-7, #javascript