Skip to content

Conversation

@Debarghya-Banerjee
Copy link

@Debarghya-Banerjee Debarghya-Banerjee commented Aug 11, 2025

Trac Ticket: Core-63806

This pull request updates all inline script outputs in the bundled themes to use WordPress’s script helper functions, specifically wp_print_inline_script_tag(), in place of manually constructed <script> tags.


✅ Why This Matters

As of #59446, WordPress Core has adopted the use of wp_get_script_tag(), wp_get_inline_script_tag(), and wp_print_inline_script_tag() to eliminate manually constructed <script> tags. This change was made to:

However, many default and third-party themes still use raw <script> tags, which prevents them from fully benefiting from these improvements.


🛠 What’s Changed

  • Replaced all instances of echo '<script>...</script>' with calls to wp_print_inline_script_tag().

  • Added a fallback check: if the helper function does not exist, the code directly prints the <script> tag.


🔙 Backward Compatibility

  • On WordPress 5.7+, the new helper functions are used.

  • On earlier versions, where these functions do not exist, the scripts fall back to directly printing raw <script> tags.

@github-actions
Copy link

github-actions bot commented Aug 11, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions
Copy link

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • The Plugin and Theme Directories cannot be accessed within Playground.
  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Copy link

@hbhalodia hbhalodia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add the requested changes?

Copy link
Contributor

@peterwilsoncc peterwilsoncc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a few notes inline.

🔢 indicates the comment applies to similar code in other files too.

@westonruter
Copy link
Member

@Debarghya-Banerjee Hello! Have you seen the latest PR feedback yet?

Also, note the comment I just added to the ticket, related the changes to Core-63887.

@Debarghya-Banerjee
Copy link
Author

Hi @westonruter , I have checked the comments and feedback, I am working on it, and will push the changes in sometime by today itself. Thanks.

@Debarghya-Banerjee
Copy link
Author

Hi @westonruter , Apologies for the late update. I’ve pushed the changes based on your and @sabernhardt 's feedback. Could you please take a look? Thanks!

@westonruter
Copy link
Member

@Debarghya-Banerjee Are you planning to address the remaining feedback or should we start pushing up commits to this PR? Thanks!

@Debarghya-Banerjee
Copy link
Author

Hi @westonruter , I have addressed the feedback. Sorry for getting back late. Can you please check once? Thanks.

@westonruter
Copy link
Member

I wrote a script that checked the output of rendered output of the homepages for each of the themes to verify that there were no regressions in the generated markup, and that only the expected changes occur:

grab-output.sh
#!/bin/bash

outdir=/tmp/trac-63806-output
mkdir -p "$outdir"
echo '' > "$outdir/report.md"

check_theme() {
	theme="$1"
	url="$2"
	theme_dir="/tmp/trac-63806-output/$1"
	echo "# $theme" >> "$outdir/report.md"
	mkdir -p "$theme_dir"
	npm run env:cli theme activate "$theme"
	git checkout trunk
	curl -s "$url" > "$theme_dir/before.html"
	git checkout fix/63806-update-themes-to-use-wp_print_script_tag
	curl -s "$url" > "$theme_dir/after.html"
	prettier "$theme_dir/before.html" > "$theme_dir/before.prettier.html"
	prettier "$theme_dir/after.html" > "$theme_dir/after.prettier.html"
	diff -u "$theme_dir/before.html" "$theme_dir/after.html" > "$theme_dir/raw.diff"
	diff -u "$theme_dir/before.prettier.html" "$theme_dir/after.prettier.html" > "$theme_dir/prettier.diff"

	{
		echo "URL: \`$url\`"
		echo
		echo 'Prettier Diff:'
		echo '```diff'
		cat "$theme_dir/prettier.diff"
		echo '```'
		echo
		echo '<details><summary>Raw Diff</summary>'
		echo
		echo '```diff'
		cat "$theme_dir/raw.diff"
		echo '```'
		echo
		echo '</details>'
		echo
	} >> "$outdir/report.md"
}

home_url="http://localhost:8000/?enable_plugins=none"

check_theme twentyfifteen "$home_url"
check_theme twentyseventeen "$home_url"
check_theme twentysixteen "$home_url"
check_theme twentytwenty "$home_url"
check_theme twentytwentyone "$home_url"

cat "$outdir/report.md"

Here is the output:

twentyfifteen

URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

--- /tmp/trac-63806-output/twentyfifteen/before.prettier.html	2025-10-07 15:23:02
+++ /tmp/trac-63806-output/twentyfifteen/after.prettier.html	2025-10-07 15:23:02
@@ -9,6 +9,7 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentyfifteen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />
Raw Diff
--- /tmp/trac-63806-output/twentyfifteen/before.html	2025-10-07 15:23:02
+++ /tmp/trac-63806-output/twentyfifteen/after.html	2025-10-07 15:23:02
@@ -5,7 +5,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="profile" href="https://gmpg.org/xfn/11">
 	<link rel="pingback" href="http://localhost:8000/xmlrpc.php">
-	<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+	<script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentyfifteen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

twentyseventeen

URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

--- /tmp/trac-63806-output/twentyseventeen/before.prettier.html	2025-10-07 15:23:03
+++ /tmp/trac-63806-output/twentyseventeen/after.prettier.html	2025-10-07 15:23:04
@@ -9,6 +9,7 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentyseventeen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />
Raw Diff
--- /tmp/trac-63806-output/twentyseventeen/before.html	2025-10-07 15:23:03
+++ /tmp/trac-63806-output/twentyseventeen/after.html	2025-10-07 15:23:03
@@ -5,7 +5,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="profile" href="https://gmpg.org/xfn/11">
 
-<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+<script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentyseventeen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

twentysixteen

URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

--- /tmp/trac-63806-output/twentysixteen/before.prettier.html	2025-10-07 15:23:05
+++ /tmp/trac-63806-output/twentysixteen/after.prettier.html	2025-10-07 15:23:05
@@ -8,6 +8,7 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentysixteen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />
Raw Diff
--- /tmp/trac-63806-output/twentysixteen/before.html	2025-10-07 15:23:05
+++ /tmp/trac-63806-output/twentysixteen/after.html	2025-10-07 15:23:05
@@ -4,7 +4,10 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="profile" href="https://gmpg.org/xfn/11">
-		<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+		<script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentysixteen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

twentytwenty

URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

--- /tmp/trac-63806-output/twentytwenty/before.prettier.html	2025-10-07 15:23:06
+++ /tmp/trac-63806-output/twentytwenty/after.prettier.html	2025-10-07 15:23:06
@@ -618,6 +618,7 @@
     <script>
       document.documentElement.className =
         document.documentElement.className.replace("no-js", "js");
+      //# sourceURL=twentytwenty_no_js_class
     </script>
     <style id="custom-background-css">
       body.custom-background {
Raw Diff
--- /tmp/trac-63806-output/twentytwenty/before.html	2025-10-07 15:23:06
+++ /tmp/trac-63806-output/twentytwenty/after.html	2025-10-07 15:23:06
@@ -78,8 +78,11 @@
 <script src="http://localhost:8000/wp-content/themes/twentytwenty/assets/js/index.js?ver=2.9" id="twentytwenty-js-js" defer data-wp-strategy="defer"></script>
 <link rel="https://api.w.org/" href="http://localhost:8000/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8000/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.9-alpha-60093-src" />
-	<script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
-	<style id="custom-background-css">
+<script>
+document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );
+//# sourceURL=twentytwenty_no_js_class
+</script>
+<style id="custom-background-css">
 body.custom-background { background-color: #fff; }
 </style>
 	

twentytwentyone

URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

--- /tmp/trac-63806-output/twentytwentyone/before.prettier.html	2025-10-07 15:23:07
+++ /tmp/trac-63806-output/twentytwentyone/after.prettier.html	2025-10-07 15:23:08
@@ -1524,6 +1524,7 @@
     </script>
     <script>
       document.body.classList.remove("no-js");
+      //# sourceURL=twenty_twenty_one_supports_js
     </script>
     <button
       id="dark-mode-toggler"
@@ -1622,6 +1623,7 @@
 
       darkModeInitialLoad();
       darkModeRepositionTogglerOnScroll();
+      //# sourceURL=http://localhost:8000/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
     </script>
     <script>
       if (
@@ -1630,6 +1632,7 @@
       ) {
         document.body.classList.add("is-IE");
       }
+      //# sourceURL=twentytwentyone_add_ie_class
     </script>
     <style id="core-block-supports-inline-css">
       /**
Raw Diff
--- /tmp/trac-63806-output/twentytwentyone/before.html	2025-10-07 15:23:07
+++ /tmp/trac-63806-output/twentytwentyone/after.html	2025-10-07 15:23:07
@@ -470,7 +470,11 @@
 <script type="speculationrules">
 {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyone/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
 </script>
-<script>document.body.classList.remove("no-js");</script><button id="dark-mode-toggler" class="fixed-bottom" aria-pressed="false" onClick="toggleDarkMode()">Dark Mode: <span aria-hidden="true"></span></button>		<style>
+<script>
+document.body.classList.remove('no-js');
+//# sourceURL=twenty_twenty_one_supports_js
+</script>
+<button id="dark-mode-toggler" class="fixed-bottom" aria-pressed="false" onClick="toggleDarkMode()">Dark Mode: <span aria-hidden="true"></span></button>		<style>
 			#dark-mode-toggler > span {
 				margin-left: 5px;
 			}
@@ -482,7 +486,8 @@
 			}
 					</style>
 
-		<script>function toggleDarkMode() { // jshint ignore:line
+		<script>
+function toggleDarkMode() { // jshint ignore:line
 	var toggler = document.getElementById( 'dark-mode-toggler' );
 
 	if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
@@ -553,12 +558,15 @@
 
 darkModeInitialLoad();
 darkModeRepositionTogglerOnScroll();
-</script>	<script>
-	if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
-		document.body.classList.add( 'is-IE' );
-	}
-	</script>
-	<style id='core-block-supports-inline-css'>
+//# sourceURL=http://localhost:8000/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
+</script>
+<script>
+		if ( -1 !== navigator.userAgent.indexOf('MSIE') || -1 !== navigator.appVersion.indexOf('Trident/') ) {
+			document.body.classList.add('is-IE');
+		}
+	//# sourceURL=twentytwentyone_add_ie_class
+</script>
+<style id='core-block-supports-inline-css'>
 /**
  * Core styles: block-supports
  */

pento pushed a commit that referenced this pull request Oct 7, 2025
… include `sourceURL` for JS.

Instead of manually constructing the markup for `SCRIPT` tags, leverage `wp_print_inline_script_tag()` when available to do the construction while also ensuring filters may inject additional attributes on the `SCRIPT` tags, such as `nonce` for CSP. When the function is not available (prior to WP 5.7), fall back to the manual markup construction.

This also adds the `sourceURL` comments to the inline scripts to facilitate debugging, per #63887.

Developed in #9416.

Follow-up to [60909], [60899].

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt, poena.
See #63887, #59446.
Fixes #63806.


git-svn-id: https://develop.svn.wordpress.org/trunk@60913 602fd350-edb4-49c9-b593-d223f7449a82
@github-actions
Copy link

github-actions bot commented Oct 7, 2025

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 60913
GitHub commit: dbd1ed5

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

@github-actions github-actions bot closed this Oct 7, 2025
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 7, 2025
… include `sourceURL` for JS.

Instead of manually constructing the markup for `SCRIPT` tags, leverage `wp_print_inline_script_tag()` when available to do the construction while also ensuring filters may inject additional attributes on the `SCRIPT` tags, such as `nonce` for CSP. When the function is not available (prior to WP 5.7), fall back to the manual markup construction.

This also adds the `sourceURL` comments to the inline scripts to facilitate debugging, per #63887.

Developed in WordPress/wordpress-develop#9416.

Follow-up to [60909], [60899].

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt, poena.
See #63887, #59446.
Fixes #63806.

Built from https://develop.svn.wordpress.org/trunk@60913


git-svn-id: http://core.svn.wordpress.org/trunk@60249 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to gilzow/wordpress-performance that referenced this pull request Oct 7, 2025
… include `sourceURL` for JS.

Instead of manually constructing the markup for `SCRIPT` tags, leverage `wp_print_inline_script_tag()` when available to do the construction while also ensuring filters may inject additional attributes on the `SCRIPT` tags, such as `nonce` for CSP. When the function is not available (prior to WP 5.7), fall back to the manual markup construction.

This also adds the `sourceURL` comments to the inline scripts to facilitate debugging, per #63887.

Developed in WordPress/wordpress-develop#9416.

Follow-up to [60909], [60899].

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt, poena.
See #63887, #59446.
Fixes #63806.

Built from https://develop.svn.wordpress.org/trunk@60913


git-svn-id: https://core.svn.wordpress.org/trunk@60249 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Copy link

@sabernhardt sabernhardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I successfully checked each of these themes, both with the patch in trunk and with WordPress 5.6.

For completeness, I made diffs for the Customizer scripts, which only show differences in spacing (indentation).

Twenty Fifteen:

 	</script>
-		<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
-			/* Color Scheme */
+	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+	/* Color Scheme */
 
 	/* Background Color */

...

 		}
-	}	</script>
-		<script type="text/html" id="tmpl-customize-themes-details-view">
+	}
+</script>
+	<script type="text/html" id="tmpl-customize-themes-details-view">
 		<div class="theme-backdrop"></div>

Twenty Sixteen:

 	</script>
-		<script type="text/html" id="tmpl-twentysixteen-color-scheme">
-			/* Color Scheme */
+	<script type="text/html" id="tmpl-twentysixteen-color-scheme">
+	/* Color Scheme */
 
 	/* Background Color */

...

 	}
-	</script>
-		<script type="text/html" id="tmpl-customize-themes-details-view">
+</script>
+	<script type="text/html" id="tmpl-customize-themes-details-view">
 		<div class="theme-backdrop"></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants