apply_filters( “script_module_data_{$module_id}”, array $data )

Description

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['dataForClient'] = '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 {}
}
// data.dataForClient === 'ok';
initMyScriptModuleWithData( data );