WordPress.org

Make WordPress Core

Ticket #21492: 21492.6.diff

File 21492.6.diff, 5.3 KB (added by MatheusGimenez, 3 years ago)
  • src/wp-admin/js/customizer-static-front-page.js

     
     1( function() {
     2        /**
     3         * Prevent user from selecting the same posts page and static front page.
     4         */
     5        wp.customize.bind( 'ready', function() {
     6                var staticPages, postsPages, pageOnFront, settingToCompare, errorCode, notification, disabledElement, selectedOption, currentStaticPage;
     7
     8                // Closure variables.
     9                staticPages = document.getElementById( '_customize-dropdown-pages-page_on_front' );
     10                postsPages = document.getElementById( '_customize-dropdown-pages-page_for_posts' );
     11
     12                // set error code
     13                errorCode = 'same_id_for_both_pages';
     14                // Bail if the option is not present in the customizer.
     15                if ( ! staticPages || ! postsPages ) {
     16                        return;
     17                }
     18
     19                // More closure variables.
     20                pageOnFront = document.getElementById( 'customize-control-page_on_front' );
     21                currentStaticPage = getSelectedOption( staticPages ).value;
     22
     23                // If the saved values match, unset the Posts Page dropdown.
     24                unsetPage( postsPages, currentStaticPage );
     25
     26                /**
     27                 * Validate page_on_front and page_for_posts
     28                 *
     29                 * @return string
     30                 * @see https://developer.wordpress.org/themes/customize-api/tools-for-improved-user-experience/#client-side-validation
     31                */
     32                function validateStaticPage( setting, value ) {
     33                        if ( '0' === value ) {
     34                                setting.notifications.remove( errorCode );
     35                                return value;
     36                        }
     37                        console.log( setting.notifications );
     38                        // get setting for compare value
     39                        settingToCompare = postsPages;
     40                        if ( 'page_for_posts' === setting.id ) {
     41                                settingToCompare = staticPages;
     42                        }
     43                        if ( getSelectedOption( settingToCompare ).value === value ) {
     44                                // if two settings have same value, add a notication message and remove selected option from postsPages
     45                                notification = new wp.customize.Notification( errorCode, {message: frontPageError.error } );
     46                                setting.notifications.add( errorCode, notification );
     47                                unsetPage( postsPages, value );
     48                        } else {
     49                                // if not, remove notification and remove attribute in options
     50                                setting.notifications.remove( errorCode );
     51                                removeDisabledAttr( postsPages );
     52                        }
     53                        return value;
     54                }
     55                // handler validation event in both field
     56                wp.customize( 'page_for_posts', function ( setting ) {
     57                        setting.validate = function ( value ) {
     58                                return validateStaticPage( setting, value );
     59                };
     60        });
     61        wp.customize( 'page_on_front', function ( setting ) {
     62                        setting.validate = function ( value ) {
     63                                return validateStaticPage( setting, value );
     64                };
     65        });
     66
     67                /**
     68                 * Get currently selected option from select input.
     69                 *
     70                 * @see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
     71                 */
     72                function getSelectedOption( select ) {
     73                        if ( ! select || ! select.children ) {
     74                                return null;
     75                        }
     76                        for ( var option, i = 0, len = select.children.length; i < len; i++ ) {
     77                                option = select.children[ i ];
     78                                if ( option.selected ) {
     79                                        return option;
     80                                }
     81                        }
     82                        if ( len > 0 ) {
     83                                return select.children[ 0 ];
     84                        } else {
     85                                return null;
     86                        }
     87                }
     88                /**
     89                 * Remove selected ID (pagesID) from the specified dropdown (menu).
     90                 */
     91                function unsetPage( menu, pagesID ) {
     92                        // remove disabled attribute from options
     93                        removeDisabledAttr( menu );
     94                        selectedOption = menu.querySelector( 'option[value="' + pagesID + '"]' );
     95                        selectedOption.selected = false;
     96                        selectedOption.setAttribute( 'disabled', 'disabled' );
     97                }
     98                /**
     99                 * Remove Attribute disable from option
     100                 */
     101                function removeDisabledAttr( menu ) {
     102                        disabledElement = document.querySelector( '#' + menu.id + ' option[disabled]' );
     103                        if ( disabledElement ) {
     104                                disabledElement.removeAttribute( 'disabled' );
     105                        }
     106                }
     107
     108        } );
     109} ).call( this );
  • src/wp-includes/class-wp-customize-manager.php

     
    366366
    367367                // Export the settings to JS via the _wpCustomizeSettings variable.
    368368                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
     369
     370                // Validate static front page settings
     371                add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_static_front_page_script' ) );
     372
    369373        }
    370374
    371375        /**
     
    42194223
    42204224                return $color;
    42214225        }
     4226        /**
     4227         * Enqueue Static Front Page customizer JS
     4228         * @since 4.7.3
     4229         */
     4230        public function enqueue_static_front_page_script() {
     4231                // error message if static front and page for posts have same id
     4232                $error_message = array(
     4233                        'error' => esc_html__( 'Front page & Posts page must be&nbsp;different.' ),
     4234                );
     4235                // script suffix
     4236                $suffix = SCRIPT_DEBUG ? '' : '.min';
    42224237
     4238                wp_register_script( 'customizer-static-front-page', "/wp-admin/js/customizer-static-front-page$suffix.js", array( 'jquery', 'customize-controls' ) );
     4239
     4240                wp_localize_script( 'customizer-static-front-page', 'frontPageError', $error_message );
     4241                wp_enqueue_script( 'customizer-static-front-page' );
     4242        }
     4243
    42234244        /**
    42244245         * Callback for validating a background setting value.
    42254246         *