Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import Maps: Only emit CDATA wrappers for inline scripts for JavaScript #58818

Merged
merged 2 commits into from
Feb 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/compat/wordpress-6.5/class-wp-script-modules.php
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ public function print_import_map() {
'1.8.2',
true
);
wp_print_inline_script_tag(
gutenberg_print_inline_script_tag(
wp_get_script_polyfill(
$wp_scripts,
array(
Expand All @@ -243,7 +243,7 @@ public function print_import_map() {
)
);
}
wp_print_inline_script_tag(
gutenberg_print_inline_script_tag(
wp_json_encode( $import_map, JSON_HEX_TAG | JSON_HEX_AMP ),
array(
'type' => 'importmap',
Expand Down
105 changes: 105 additions & 0 deletions lib/compat/wordpress-6.5/script-loader.php
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,108 @@ function gutenberg_update_wp_date_settings( $scripts ) {
}

add_action( 'wp_default_scripts', 'gutenberg_update_wp_date_settings' );

/**
* Prints inline JavaScript wrapped in `<script>` tag.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param string $javascript Inline JavaScript code.
* @param array $attributes Optional. Key-value pairs representing `<script>` tag attributes.
*/
function gutenberg_print_inline_script_tag( $javascript, $attributes = array() ) {
echo gutenberg_get_inline_script_tag( $javascript, $attributes );
}


/**
* Wraps inline JavaScript in `<script>` tag.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param string $javascript Inline JavaScript code.
* @param array $attributes Optional. Key-value pairs representing `<script>` tag attributes.
* @return string String containing inline JavaScript code wrapped around `<script>` tag.
*/
function gutenberg_get_inline_script_tag( $data, $attributes = array() ) {
$is_html5 = current_theme_supports( 'html5', 'script' ) || is_admin();
if ( ! isset( $attributes['type'] ) && ! $is_html5 ) {
// Keep the type attribute as the first for legacy reasons (it has always been this way in core).
$attributes = array_merge(
array( 'type' => 'text/javascript' ),
$attributes
);
}

/*
* XHTML extracts the contents of the SCRIPT element and then the XML parser
* decodes character references and other syntax elements. This can lead to
* misinterpretation of the script contents or invalid XHTML documents.
*
* Wrapping the contents in a CDATA section instructs the XML parser not to
* transform the contents of the SCRIPT element before passing them to the
* JavaScript engine.
*
* Example:
*
* <script>console.log('&hellip;');</script>
*
* In an HTML document this would print "&hellip;" to the console,
* but in an XHTML document it would print "…" to the console.
*
* <script>console.log('An image is <img> in HTML');</script>
*
* In an HTML document this would print "An image is <img> in HTML",
* but it's an invalid XHTML document because it interprets the `<img>`
* as an empty tag missing its closing `/`.
*
* @see https://www.w3.org/TR/xhtml1/#h-4.8
*/
if (
! $is_html5 &&
(
! isset( $attributes['type'] ) ||
'module' === $attributes['type'] ||
str_contains( $attributes['type'], 'javascript' ) ||
str_contains( $attributes['type'], 'ecmascript' ) ||
str_contains( $attributes['type'], 'jscript' ) ||
str_contains( $attributes['type'], 'livescript' )
)
) {
/*
* If the string `]]>` exists within the JavaScript it would break
* out of any wrapping CDATA section added here, so to start, it's
* necessary to escape that sequence which requires splitting the
* content into two CDATA sections wherever it's found.
*
* Note: it's only necessary to escape the closing `]]>` because
* an additional `<![CDATA[` leaves the contents unchanged.
*/
$data = str_replace( ']]>', ']]]]><![CDATA[>', $data );

// Wrap the entire escaped script inside a CDATA section.
$data = sprintf( "/* <![CDATA[ */\n%s\n/* ]]> */", $data );
}

$data = "\n" . trim( $data, "\n\r " ) . "\n";

/**
* Filters attributes to be added to a script tag.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
* Only the attribute name is added to the `<script>` tag for
* entries with a boolean value, and that are true.
* @param string $data Inline data.
*/
$attributes = apply_filters( 'wp_inline_script_attributes', $attributes, $data );

return sprintf( "<script%s>%s</script>\n", wp_sanitize_script_attributes( $attributes ), $data );
}