diff --git a/Gruntfile.js b/Gruntfile.js index 8863d030627b8..6a05b399de806 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -498,6 +498,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' ], diff --git a/src/js/_enqueues/admin/options.js b/src/js/_enqueues/admin/options.js new file mode 100644 index 0000000000000..bbfeebf6adb4f --- /dev/null +++ b/src/js/_enqueues/admin/options.js @@ -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( '' ); + } + } ); + + // 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 ); + } +} ); diff --git a/src/wp-admin/includes/deprecated.php b/src/wp-admin/includes/deprecated.php index 86524fb897311..ce6bde3577cf0 100644 --- a/src/wp-admin/includes/deprecated.php +++ b/src/wp-admin/includes/deprecated.php @@ -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' ); +} + +/** + * 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' ); + 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' ); + wp_enqueue_script( 'options' ); +} diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php index 5742e3ccc1ccc..5891298546122 100644 --- a/src/wp-admin/includes/options.php +++ b/src/wp-admin/includes/options.php @@ -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() { - ?> - - - - - - add_help_tab( array( diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php index 969065b7008f4..77a9883a3ad10 100644 --- a/src/wp-admin/options-general.php +++ b/src/wp-admin/options-general.php @@ -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 = '
' . __( 'The fields on this screen determine some of the basics of your site setup.' ) . '
' . '' . __( '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.' ) . '
'; diff --git a/src/wp-admin/options-reading.php b/src/wp-admin/options-reading.php index 31facac7edcca..74461b4292896 100644 --- a/src/wp-admin/options-reading.php +++ b/src/wp-admin/options-reading.php @@ -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( diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 42d42b3f8781d..2bb65a87511e8 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -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' );