Ticket #38794: 38794.0.diff
File 38794.0.diff, 11.5 KB (added by , 7 years ago) |
---|
-
src/wp-admin/css/customize-controls.css
diff --git src/wp-admin/css/customize-controls.css src/wp-admin/css/customize-controls.css index c4df304ad5..c1aa128a34 100644
p.customize-section-description { 789 789 transition: .15s box-shadow linear; 790 790 } 791 791 792 .customize-control-notifications-container li.notice {792 #customize-controls .customize-control-notifications-container li.notice { 793 793 list-style: none; 794 794 margin: 0 0 6px 0; 795 padding: 4px 8px; 795 padding: 9px 14px; 796 overflow: hidden; 797 } 798 #customize-controls .customize-control-notifications-container .notice.is-dismissible { 799 padding-right: 38px; 796 800 } 797 801 798 802 .customize-control-notifications-container li.notice:last-child { … … p.customize-section-description { 815 819 position: absolute; 816 820 top: 46px; 817 821 width: 100%; 818 max-height: 210px;819 overflow-x: hidden;820 overflow-y: auto;821 822 border-bottom: 1px solid #ddd; 822 823 display: block; 823 824 padding: 0; 824 825 margin: 0; 825 826 } 826 827 828 #customize-controls #customize-notifications-area, 829 #customize-controls .customize-section-title > .customize-control-notifications-container, 830 #customize-controls .panel-meta > .customize-control-notifications-container { 831 max-height: 210px; 832 overflow-x: hidden; 833 overflow-y: auto; 834 } 835 827 836 #customize-controls #customize-notifications-area > ul, 828 #customize-controls #customize-notifications-area .notice { 837 #customize-controls #customize-notifications-area .notice, 838 #customize-controls .panel-meta > .customize-control-notifications-container, 839 #customize-controls .panel-meta > .customize-control-notifications-container .notice, 840 #customize-controls .customize-section-title > .customize-control-notifications-container, 841 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { 829 842 margin: 0; 830 843 } 831 #customize-controls #customize-notifications-area .notice { 844 #customize-controls .panel-meta > .customize-control-notifications-container, 845 #customize-controls .customize-section-title > .customize-control-notifications-container { 846 border-top: 1px solid #ddd; 847 } 848 #customize-controls #customize-notifications-area .notice, 849 #customize-controls .panel-meta > .customize-control-notifications-container .notice, 850 #customize-controls .customize-section-title > .customize-control-notifications-container .notice { 832 851 padding: 9px 14px; 833 852 } 834 #customize-controls #customize-notifications-area .notice.is-dismissible { 853 #customize-controls #customize-notifications-area .notice.is-dismissible, 854 #customize-controls .panel-meta > .customize-control-notifications-container .notice.is-dismissible, 855 #customize-controls .customize-section-title > .customize-control-notifications-container .notice.is-dismissible { 835 856 padding-right: 38px; 836 857 } 837 #customize-controls #customize-notifications-area .notice + .notice { 858 #customize-controls #customize-notifications-area .notice + .notice, 859 #customize-controls .panel-meta > .customize-control-notifications-container .notice + .notice, 860 #customize-controls .customize-section-title > .customize-control-notifications-container .notice + .notice { 838 861 margin-top: 1px; 839 862 } 840 863 -
src/wp-admin/js/customize-controls.js
diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js index 4463e47b40..aa33bb4865 100644
158 158 collection.container.toggle( 0 !== notifications.length ); 159 159 160 160 // Short-circuit if there are no changes to the notifications. 161 if ( _.isEqual( notifications, collection.previousNotifications ) ) {161 if ( collection.container.is( collection.previousContainer ) && _.isEqual( notifications, collection.previousNotifications ) ) { 162 162 return; 163 163 } 164 164 … … 185 185 }); 186 186 187 187 collection.previousNotifications = notifications; 188 collection.previousContainer = collection.container; 188 189 collection.trigger( 'rendered' ); 189 190 } 190 191 }); … … 626 627 ); 627 628 628 629 $.extend( container, options ); 630 container.notifications = new api.Notifications(); 629 631 container.templateSelector = 'customize-' + container.containerType + '-' + container.params.type; 630 632 container.container = $( container.params.content ); 631 633 if ( 0 === container.container.length ) { … … 657 659 }); 658 660 659 661 container.deferred.embedded.done( function () { 662 container.setupNotifications(); 660 663 container.attachEvents(); 661 664 }); 662 665 … … 668 671 }, 669 672 670 673 /** 674 * Get the element inside of a the container that contains the notifications. 675 * 676 * @since 4.9.0 677 * @returns {jQuery} Notification container element. 678 * @this {wp.customize.Control} 679 */ 680 getNotificationsContainerElement: function() { 681 var container = this; 682 return container.contentContainer.find( '.customize-control-notifications-container:first' ); 683 }, 684 685 /** 686 * Set up notifications. 687 * 688 * @since 4.9.0 689 * @returns {void} 690 */ 691 setupNotifications: function() { 692 var container = this, renderNotifications; 693 container.notifications.container = container.getNotificationsContainerElement(); 694 695 // Render notifications when they change and when the construct is expanded. 696 renderNotifications = function() { 697 if ( container.expanded.get() ) { 698 container.notifications.render(); 699 } 700 }; 701 container.expanded.bind( renderNotifications ); 702 renderNotifications(); 703 container.notifications.bind( 'change', _.debounce( renderNotifications ) ); 704 }, 705 706 /** 671 707 * @since 4.1.0 672 708 * 673 709 * @abstract … … 2162 2198 2163 2199 // After the control is embedded on the page, invoke the "ready" method. 2164 2200 control.deferred.embedded.done( function () { 2165 var renderNotifications = function() { 2166 control.notifications.render(); 2167 }; 2168 control.notifications.container = control.getNotificationsContainerElement(); 2169 control.notifications.bind( 'rendered', function() { 2170 var notifications = control.notifications.get(); 2171 control.container.toggleClass( 'has-notifications', 0 !== notifications.length ); 2172 control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length ); 2173 } ); 2174 renderNotifications(); 2175 control.notifications.bind( 'change', _.debounce( renderNotifications ) ); 2201 control.setupNotifications(); 2176 2202 control.ready(); 2177 2203 }); 2178 2204 }, … … 2270 2296 }, 2271 2297 2272 2298 /** 2299 * Set up notifications. 2300 * 2301 * @since 4.9.0 2302 * @returns {void} 2303 */ 2304 setupNotifications: function() { 2305 var control = this, renderNotificationsIfVisible, onSectionAssigned; 2306 2307 control.notifications.container = control.getNotificationsContainerElement(); 2308 2309 renderNotificationsIfVisible = function() { 2310 var sectionId = control.section(); 2311 if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) { 2312 control.notifications.render(); 2313 } 2314 }; 2315 2316 control.notifications.bind( 'rendered', function() { 2317 var notifications = control.notifications.get(); 2318 control.container.toggleClass( 'has-notifications', 0 !== notifications.length ); 2319 control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length ); 2320 } ); 2321 2322 onSectionAssigned = function( newSectionId, oldSectionId ) { 2323 if ( oldSectionId && api.section.has( oldSectionId ) ) { 2324 api.section( oldSectionId ).expanded.unbind( renderNotificationsIfVisible ); 2325 } 2326 if ( newSectionId ) { 2327 api.section( newSectionId, function( section ) { 2328 section.expanded.bind( renderNotificationsIfVisible ); 2329 renderNotificationsIfVisible(); 2330 }); 2331 } 2332 }; 2333 2334 control.section.bind( onSectionAssigned ); 2335 onSectionAssigned( control.section.get() ); 2336 control.notifications.bind( 'change', _.debounce( renderNotificationsIfVisible ) ); 2337 }, 2338 2339 /** 2273 2340 * Render notifications. 2274 2341 * 2275 2342 * Renders the `control.notifications` into the control's container. … … 5854 5921 api.control( 'header_video', function( headerVideoControl ) { 5855 5922 headerVideoControl.deferred.embedded.done( function() { 5856 5923 var toggleNotice = function() { 5857 var section = api.section( headerVideoControl.section() ), notice ;5924 var section = api.section( headerVideoControl.section() ), noticeCode = 'video_header_not_available'; 5858 5925 if ( ! section ) { 5859 5926 return; 5860 5927 } 5861 notice = section.container.find( '.header-video-not-currently-previewable:first' );5862 5928 if ( headerVideoControl.active.get() ) { 5863 notice.stop().slideUp( 'fast');5929 section.notifications.remove( noticeCode ); 5864 5930 } else { 5865 notice.stop().slideDown( 'fast' ); 5931 section.notifications.add( noticeCode, new api.Notification( noticeCode, { 5932 type: 'info', 5933 message: api.l10n.videoHeaderNotice 5934 } ) ); 5866 5935 } 5867 5936 }; 5868 5937 toggleNotice(); -
src/wp-includes/class-wp-customize-manager.php
diff --git src/wp-includes/class-wp-customize-manager.php src/wp-includes/class-wp-customize-manager.php index 7bd1489543..fa97e3f680 100644
final class WP_Customize_Manager { 3928 3928 $title = __( 'Header Media' ); 3929 3929 $description = '<p>' . __( 'If you add a video, the image will be used as a fallback while the video loads.' ) . '</p>'; 3930 3930 3931 // @todo Customizer sections should support having notifications just like controls do. See <https://core.trac.wordpress.org/ticket/38794>.3932 $description .= '<div class="customize-control-notifications-container header-video-not-currently-previewable" style="display: none"><ul>';3933 $description .= '<li class="notice notice-info">' . __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ) . '</li>';3934 $description .= '</ul></div>';3935 3931 $width = absint( get_theme_support( 'custom-header', 'width' ) ); 3936 3932 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 3937 3933 if ( $width && $height ) { -
src/wp-includes/class-wp-customize-panel.php
diff --git src/wp-includes/class-wp-customize-panel.php src/wp-includes/class-wp-customize-panel.php index de839f5ce0..53b90bde65 100644
class WP_Customize_Panel { 371 371 {{{ data.description }}} 372 372 </div> 373 373 <# } #> 374 375 <div class="customize-control-notifications-container"></div> 374 376 </li> 375 377 <?php 376 378 } -
src/wp-includes/class-wp-customize-section.php
diff --git src/wp-includes/class-wp-customize-section.php src/wp-includes/class-wp-customize-section.php index 57b338bf51..e130890a42 100644
class WP_Customize_Section { 361 361 {{{ data.description }}} 362 362 </div> 363 363 <# } #> 364 365 <div class="customize-control-notifications-container"></div> 364 366 </div> 365 367 366 368 <# if ( data.description && ! data.description_hidden ) { #> -
src/wp-includes/script-loader.php
diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php index 15fb88901a..abfc40a607 100644
function wp_default_scripts( &$scripts ) { 563 563 'expandSidebar' => _x( 'Show Controls', 'label for hide controls button without length constraints' ), 564 564 'untitledBlogName' => __( '(Untitled)' ), 565 565 'serverSaveError' => __( 'Failed connecting to the server. Please try saving again.' ), 566 'videoHeaderNotice' => __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ), 566 567 // Used for overriding the file types allowed in plupload. 567 568 'allowedFiles' => __( 'Allowed Files' ), 568 569 'customCssError' => wp_array_slice_assoc(