Skip to content

#65070: Move inline JS from admin_head hooks in options screens into options.js #11572

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.

Sign up for GitHub

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

Open
aminuldeveloper wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

#65070: Move inline JS from admin_head hooks in options screens into options.js #11572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28ffeea
Administration: Move inline JS for options screens into options.js
aminuldeveloper Apr 14, 2026
e9ced2c
Administration: Restore backward compat in deprecated options JS func…
aminuldeveloper Apr 14, 2026
44eb442
Merge remote-tracking branch 'origin/trunk' into ticket-65070-move-op…
aminuldeveloper Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,7 @@ module.exports = function(grunt) {
[ WORKING_DIR + 'wp-admin/js/tags.js' ]: [ './src/js/_enqueues/admin/tags.js' ],
[ WORKING_DIR + 'wp-admin/js/site-health.js' ]: [ './src/js/_enqueues/admin/site-health.js' ],
[ WORKING_DIR + 'wp-admin/js/site-icon.js' ]: [ './src/js/_enqueues/admin/site-icon.js' ],
[ WORKING_DIR + 'wp-admin/js/options.js' ]: [ './src/js/_enqueues/admin/options.js' ],
[ WORKING_DIR + 'wp-admin/js/privacy-tools.js' ]: [ './src/js/_enqueues/admin/privacy-tools.js' ],
[ WORKING_DIR + 'wp-admin/js/theme-plugin-editor.js' ]: [ './src/js/_enqueues/wp/theme-plugin-editor.js' ],
[ WORKING_DIR + 'wp-admin/js/theme.js' ]: [ './src/js/_enqueues/wp/theme.js' ],
Expand Down
99 changes: 99 additions & 0 deletions src/js/_enqueues/admin/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/**
* Scripts for the options/settings administration screens.
*
* @output wp-admin/js/options.js
*/

/* global ajaxurl */

jQuery( function( $ ) {
var $showAvatars = $( '#show_avatars' ),
$avatarSettings = $( '.avatar-settings' ),
$siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
$siteIconPreview = $( '#site-icon-preview-site-title' ),
$languageSelect = $( '#WPLANG' ),
$frontStaticPages = $( '#front-static-pages' ),
homeURL = ( ( window.optionsL10n && window.optionsL10n.homeURL ) || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );

// options-discussion.php: Toggle avatar settings when 'Show Avatars' is changed.
$showAvatars.on( 'change', function() {
$avatarSettings.toggleClass( 'hide-if-js', ! this.checked );
} );

// options-general.php: Update admin bar site name and site icon preview on title input.
$( '#blogname' ).on( 'input', function() {
var title = $.trim( $( this ).val() ) || homeURL;

// Truncate to 40 characters.
if ( 40 < title.length ) {
title = title.substring( 0, 40 ) + '\u2026';
}

$siteName.text( title );
$siteIconPreview.text( title );
} );

// options-general.php: Date and time format pickers.
$( 'input[name="date_format"]' ).on( 'click', function() {
if ( 'date_format_custom_radio' !== $( this ).attr( 'id' ) ) {
$( 'input[name="date_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
}
} );

$( 'input[name="date_format_custom"]' ).on( 'click input', function() {
$( '#date_format_custom_radio' ).prop( 'checked', true );
} );

$( 'input[name="time_format"]' ).on( 'click', function() {
if ( 'time_format_custom_radio' !== $( this ).attr( 'id' ) ) {
$( 'input[name="time_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
}
} );

$( 'input[name="time_format_custom"]' ).on( 'click input', function() {
$( '#time_format_custom_radio' ).prop( 'checked', true );
} );

$( 'input[name="date_format_custom"], input[name="time_format_custom"]' ).on( 'input', function() {
var format = $( this ),
fieldset = format.closest( 'fieldset' ),
example = fieldset.find( '.example' ),
spinner = fieldset.find( '.spinner' );

// Debounce the event callback while users are typing.
clearTimeout( $.data( this, 'timer' ) );
$( this ).data( 'timer', setTimeout( function() {
// If custom date is not empty.
if ( format.val() ) {
spinner.addClass( 'is-active' );

$.post( ajaxurl, {
action: 'date_format_custom' === format.attr( 'name' ) ? 'date_format' : 'time_format',
date: format.val()
}, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
}
}, 500 ) );
} );

// options-general.php: Language install spinner.
$( 'form' ).on( 'submit', function() {
/*
* Don't show a spinner for English and installed languages,
* as there is nothing to download.
*/
if ( $languageSelect.length && ! $languageSelect.find( 'option:selected' ).data( 'installed' ) ) {
$( '#submit', this ).after( '<span class="spinner language-install-spinner is-active" />' );
}
} );

// options-reading.php: Enable/disable page selects based on 'Your homepage displays' radio.
if ( $frontStaticPages.length ) {
var $staticPage = $frontStaticPages.find( 'input:radio[value="page"]' ),
$selects = $frontStaticPages.find( 'select' ),
checkDisabled = function() {
$selects.prop( 'disabled', ! $staticPage.prop( 'checked' ) );
};
checkDisabled();
$frontStaticPages.find( 'input:radio' ).on( 'change', checkDisabled );
}
} );
37 changes: 37 additions & 0 deletions src/wp-admin/includes/deprecated.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1589,3 +1589,40 @@ function image_attachment_fields_to_save( $post, $attachment ) {

return $post;
}

/**
* Output JavaScript to toggle display of additional settings if avatars are disabled.
*
* @since 4.2.0
* @deprecated 7.1.0 Inline JavaScript has been moved to wp-admin/js/options.js,
* enqueued via {@see wp_enqueue_script()}.
*/
function options_discussion_add_js() {
_deprecated_function( __FUNCTION__, '7.1.0' );
wp_enqueue_script( 'options' );
}
Comment on lines +1600 to +1603
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

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

These newly deprecated options_*_add_js() functions are now no-ops (they only call _deprecated_function()), which is a backwards-incompatible behavior change for any code that still calls them. In this file, other deprecated JS helpers (e.g. options_permalink_add_js()) continue to output their original behavior for back-compat. Consider keeping these functions functional by enqueuing options (and localizing optionsL10n where needed) instead of doing nothing, or update the docblock to clearly state they no longer output anything if that is intentional.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Author

@aminuldeveloper aminuldeveloper Apr 14, 2026

Choose a reason for hiding this comment

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

Fixed backward compatibility issue raised in review — deprecated
functions now call wp_enqueue_script('options') (and
wp_localize_script() for options_general_add_js) so external
callers continue to work while still triggering the deprecation notice.


/**
* Display JavaScript on the General Settings screen.
*
* @since 3.5.0
* @deprecated 7.1.0 Inline JavaScript has been moved to wp-admin/js/options.js,
* enqueued via {@see wp_enqueue_script()}.
*/
function options_general_add_js() {
_deprecated_function( __FUNCTION__, '7.1.0' );
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

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

options_general_add_js() is documented as displaying JS for the General Settings screen, but it now does nothing besides _deprecated_function(). For backwards compatibility, consider having this function enqueue options and localize optionsL10n.homeURL (matching the new options.js expectation) so callers still get the behavior they previously relied on.

Suggested change
_deprecated_function( __FUNCTION__, '7.1.0' );
_deprecated_function( __FUNCTION__, '7.1.0' );
wp_enqueue_script( 'options' );
wp_localize_script(
'options',
'optionsL10n',
array(
'homeURL' => home_url(),
)
);

Copilot uses AI. Check for mistakes.
wp_enqueue_script( 'options' );
wp_localize_script( 'options', 'optionsL10n', array( 'homeURL' => get_home_url() ) );
}

/**
* Display JavaScript on the Reading Settings screen.
*
* @since 3.5.0
* @deprecated 7.1.0 Inline JavaScript has been moved to wp-admin/js/options.js,
* enqueued via {@see wp_enqueue_script()}.
*/
function options_reading_add_js() {
_deprecated_function( __FUNCTION__, '7.1.0' );
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

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

options_reading_add_js() previously printed the JS that enables/disables the static-front-page selects. As a deprecated public function it now no-ops, which can break any callers that invoke it outside of options-reading.php. Consider preserving behavior by enqueuing the new options script from here (similar to how other deprecated helpers in this file still run their legacy output).

Suggested change
_deprecated_function( __FUNCTION__, '7.1.0' );
_deprecated_function( __FUNCTION__, '7.1.0' );
wp_enqueue_script( 'options' );

Copilot uses AI. Check for mistakes.
wp_enqueue_script( 'options' );
}
120 changes: 0 additions & 120 deletions src/wp-admin/includes/options.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,126 +7,6 @@
* @since 4.4.0
*/

/**
* Output JavaScript to toggle display of additional settings if avatars are disabled.
*
* @since 4.2.0
*/
function options_discussion_add_js() {
?>
<script>
(function($){
var parent = $( '#show_avatars' ),
children = $( '.avatar-settings' );
parent.on( 'change', function(){
children.toggleClass( 'hide-if-js', ! this.checked );
});
})(jQuery);
</script>
<?php
}

/**
* Display JavaScript on the page.
*
* @since 3.5.0
*/
function options_general_add_js() {
?>
<script>
jQuery( function($) {
var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
$siteIconPreview = $('#site-icon-preview-site-title'),
homeURL = ( <?php echo wp_json_encode( get_home_url(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );

$( '#blogname' ).on( 'input', function() {
var title = $.trim( $( this ).val() ) || homeURL;

// Truncate to 40 characters.
if ( 40 < title.length ) {
title = title.substring( 0, 40 ) + '\u2026';
}

$siteName.text( title );
$siteIconPreview.text( title );
});

$( 'input[name="date_format"]' ).on( 'click', function() {
if ( 'date_format_custom_radio' !== $(this).attr( 'id' ) )
$( 'input[name="date_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
});

$( 'input[name="date_format_custom"]' ).on( 'click input', function() {
$( '#date_format_custom_radio' ).prop( 'checked', true );
});

$( 'input[name="time_format"]' ).on( 'click', function() {
if ( 'time_format_custom_radio' !== $(this).attr( 'id' ) )
$( 'input[name="time_format_custom"]' ).val( $( this ).val() ).closest( 'fieldset' ).find( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
});

$( 'input[name="time_format_custom"]' ).on( 'click input', function() {
$( '#time_format_custom_radio' ).prop( 'checked', true );
});

$( 'input[name="date_format_custom"], input[name="time_format_custom"]' ).on( 'input', function() {
var format = $( this ),
fieldset = format.closest( 'fieldset' ),
example = fieldset.find( '.example' ),
spinner = fieldset.find( '.spinner' );

// Debounce the event callback while users are typing.
clearTimeout( $.data( this, 'timer' ) );
$( this ).data( 'timer', setTimeout( function() {
// If custom date is not empty.
if ( format.val() ) {
spinner.addClass( 'is-active' );

$.post( ajaxurl, {
action: 'date_format_custom' === format.attr( 'name' ) ? 'date_format' : 'time_format',
date : format.val()
}, function( d ) { spinner.removeClass( 'is-active' ); example.text( d ); } );
}
}, 500 ) );
} );

var languageSelect = $( '#WPLANG' );
$( 'form' ).on( 'submit', function() {
/*
* Don't show a spinner for English and installed languages,
* as there is nothing to download.
*/
if ( ! languageSelect.find( 'option:selected' ).data( 'installed' ) ) {
$( '#submit', this ).after( '<span class="spinner language-install-spinner is-active" />' );
}
});
} );
</script>
<?php
}

/**
* Display JavaScript on the page.
*
* @since 3.5.0
*/
function options_reading_add_js() {
?>
<script>
jQuery( function($) {
var section = $('#front-static-pages'),
staticPage = section.find('input:radio[value="page"]'),
selects = section.find('select'),
check_disabled = function(){
selects.prop( 'disabled', ! staticPage.prop('checked') );
};
check_disabled();
section.find( 'input:radio' ).on( 'change', check_disabled );
} );
</script>
<?php
}

/**
* Render the site charset setting.
*
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/options-discussion.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
$title = __( 'Discussion Settings' );
$parent_file = 'options-general.php';

add_action( 'admin_print_footer_scripts', 'options_discussion_add_js' );
wp_enqueue_script( 'options' );

get_current_screen()->add_help_tab(
array(
Expand Down
3 changes: 2 additions & 1 deletion src/wp-admin/options-general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
/* translators: Date and time format for exact current time, mainly about timezones, see https://www.php.net/manual/datetime.format.php */
$timezone_format = _x( 'Y-m-d H:i:s', 'timezone date format' );

add_action( 'admin_head', 'options_general_add_js' );
wp_enqueue_script( 'options' );
wp_localize_script( 'options', 'optionsL10n', array( 'homeURL' => get_home_url() ) );

$options_help = '<p>' . __( 'The fields on this screen determine some of the basics of your site setup.' ) . '</p>' .
'<p>' . __( 'Most themes show the site title at the top of every page, in the title bar of the browser, and as the identifying name for syndicated feeds. Many themes also show the tagline.' ) . '</p>';
Expand Down
2 changes: 1 addition & 1 deletion src/wp-admin/options-reading.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
$title = __( 'Reading Settings' );
$parent_file = 'options-general.php';

add_action( 'admin_head', 'options_reading_add_js' );
wp_enqueue_script( 'options' );

get_current_screen()->add_help_tab(
array(
Expand Down
2 changes: 2 additions & 0 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1485,6 +1485,8 @@ function wp_default_scripts( $scripts ) {
$scripts->add( 'site-health', "/wp-admin/js/site-health$suffix.js", array( 'clipboard', 'jquery', 'wp-util', 'wp-a11y', 'wp-api-request', 'wp-url', 'wp-i18n', 'wp-hooks' ), false, 1 );
$scripts->set_translations( 'site-health' );

$scripts->add( 'options', "/wp-admin/js/options$suffix.js", array( 'jquery' ), false, 1 );

$scripts->add( 'privacy-tools', "/wp-admin/js/privacy-tools$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
$scripts->set_translations( 'privacy-tools' );

Expand Down
Loading