Ticket #21492: 21492.6.diff

src/wp-admin/js/customizer-static-front-page.js

@@ +1 @@
+( function() {
+        /**
+         * Prevent user from selecting the same posts page and static front page.
+         */
+        wp.customize.bind( 'ready', function() {
+                var staticPages, postsPages, pageOnFront, settingToCompare, errorCode, notification, disabledElement, selectedOption, currentStaticPage;
+
+                // Closure variables.
+                staticPages = document.getElementById( '_customize-dropdown-pages-page_on_front' );
+                postsPages = document.getElementById( '_customize-dropdown-pages-page_for_posts' );
+
+                // set error code
+                errorCode = 'same_id_for_both_pages';
+                // Bail if the option is not present in the customizer.
+                if ( ! staticPages || ! postsPages ) {
+                        return;
+                }
+
+                // More closure variables.
+                pageOnFront = document.getElementById( 'customize-control-page_on_front' );
+                currentStaticPage = getSelectedOption( staticPages ).value;
+
+                // If the saved values match, unset the Posts Page dropdown.
+                unsetPage( postsPages, currentStaticPage );
+
+                /**
+                 * Validate page_on_front and page_for_posts
+                 *
+                 * @return string
+                 * @see https://developer.wordpress.org/themes/customize-api/tools-for-improved-user-experience/#client-side-validation
+                */
+                function validateStaticPage( setting, value ) {
+                        if ( '0' === value ) {
+                                setting.notifications.remove( errorCode );
+                                return value;
+                        }
+                        console.log( setting.notifications );
+                        // get setting for compare value
+                        settingToCompare = postsPages;
+                        if ( 'page_for_posts' === setting.id ) {
+                                settingToCompare = staticPages;
+                        }
+                        if ( getSelectedOption( settingToCompare ).value === value ) {
+                                // if two settings have same value, add a notication message and remove selected option from postsPages
+                                notification = new wp.customize.Notification( errorCode, {message: frontPageError.error } );
+                                setting.notifications.add( errorCode, notification );
+                                unsetPage( postsPages, value );
+                        } else {
+                                // if not, remove notification and remove attribute in options
+                                setting.notifications.remove( errorCode );
+                                removeDisabledAttr( postsPages );
+                        }
+                        return value;
+                }
+                // handler validation event in both field
+                wp.customize( 'page_for_posts', function ( setting ) {
+                        setting.validate = function ( value ) {
+                                return validateStaticPage( setting, value );
+                };
+        });
+        wp.customize( 'page_on_front', function ( setting ) {
+                        setting.validate = function ( value ) {
+                                return validateStaticPage( setting, value );
+                };
+        });
+
+                /**
+                 * Get currently selected option from select input.
+                 *
+                 * @see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
+                 */
+                function getSelectedOption( select ) {
+                        if ( ! select || ! select.children ) {
+                                return null;
+                        }
+                        for ( var option, i = 0, len = select.children.length; i < len; i++ ) {
+                                option = select.children[ i ];
+                                if ( option.selected ) {
+                                        return option;
+                                }
+                        }
+                        if ( len > 0 ) {
+                                return select.children[ 0 ];
+                        } else {
+                                return null;
+                        }
+                }
+                /**
+                 * Remove selected ID (pagesID) from the specified dropdown (menu).
+                 */
+                function unsetPage( menu, pagesID ) {
+                        // remove disabled attribute from options
+                        removeDisabledAttr( menu );
+                        selectedOption = menu.querySelector( 'option[value="' + pagesID + '"]' );
+                        selectedOption.selected = false;
+                        selectedOption.setAttribute( 'disabled', 'disabled' );
+                }
+                /**
+                 * Remove Attribute disable from option
+                 */
+                function removeDisabledAttr( menu ) {
+                        disabledElement = document.querySelector( '#' + menu.id + ' option[disabled]' );
+                        if ( disabledElement ) {
+                                disabledElement.removeAttribute( 'disabled' );
+                        }
+                }
+
+        } );
+} ).call( this );

src/wp-includes/class-wp-customize-manager.php

@@ -366 +366 @@
 
                 // Export the settings to JS via the _wpCustomizeSettings variable.
                 add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
+
+                // Validate static front page settings
+                add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_static_front_page_script' ) );
+
         }
 
         /**
@@ -4219 +4223 @@
 
                 return $color;
         }
+        /**
+         * Enqueue Static Front Page customizer JS
+         * @since 4.7.3
+         */
+        public function enqueue_static_front_page_script() {
+                // error message if static front and page for posts have same id
+                $error_message = array(
+                        'error' => esc_html__( 'Front page & Posts page must be different.' ),
+                );
+                // script suffix
+                $suffix = SCRIPT_DEBUG ? '' : '.min';
 
+                wp_register_script( 'customizer-static-front-page', "/wp-admin/js/customizer-static-front-page$suffix.js", array( 'jquery', 'customize-controls' ) );
+
+                wp_localize_script( 'customizer-static-front-page', 'frontPageError', $error_message );
+                wp_enqueue_script( 'customizer-static-front-page' );
+        }
+
         /**
          * Callback for validating a background setting value.
          *