From ea52ebb6f5690c5fd142516c3e807b73db5d0386 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:48:58 -0400 Subject: [PATCH 01/33] Update widgets.php to use `details` and `summary` tags This significantly improves accessibility while also updating the admin to use HTML5 and less JavaScript. --- src/wp-admin/includes/widgets.php | 72 +++++++++++++------------------ 1 file changed, 31 insertions(+), 41 deletions(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index 2ac42862d7..ad7ec22590 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -87,7 +87,11 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { $description = wp_sidebar_description( $sidebar ); - echo '
'; + echo '
'; + + echo '' . esc_html( $sidebar_name ) . ' '; + + echo '
    '; if ( $sidebar_name ) { $add_to = sprintf( @@ -99,9 +103,7 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) {
    -

    '; + echo '
'; + + echo '
'; } /** @@ -130,16 +134,16 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { * @return array */ function wp_list_widget_controls_dynamic_sidebar( $params ) { - global $wp_registered_widgets; + global $wp_registered_widgets, $pagenow; static $i = 0; $i++; $widget_id = $params[0]['widget_id']; $id = isset( $params[0]['_temp_id'] ) ? $params[0]['_temp_id'] : $widget_id; - $hidden = isset( $params[0]['_hide'] ) ? ' style="display:none;"' : ''; + $tag = $pagenow === 'customize.php' ? 'div' : 'li'; // use correct semantic tag according to whether in customizer or not - $params[0]['before_widget'] = "
"; - $params[0]['after_widget'] = '
'; + $params[0]['before_widget'] = '<'. $tag . ' id="widget-' . $i . '_' . $id . '" class="widget open">'; + $params[0]['after_widget'] = ''; $params[0]['before_title'] = '%BEG_OF_TITLE%'; // Deprecated. $params[0]['after_title'] = '%END_OF_TITLE%'; // Deprecated. @@ -240,31 +244,15 @@ function wp_widget_control( $sidebar_args ) { echo $sidebar_args['before_widget']; ?> -
-
- - - - - - -
-

-
+
+ +
+ + + + + +
@@ -282,13 +270,13 @@ function wp_widget_control( $sidebar_args ) { } ?> - - - - - - - + + + + + + +
@@ -301,11 +289,13 @@ function wp_widget_control( $sidebar_args ) { 'widget-' . esc_attr( $id_format ) . '-savewidget' ) ); ?>
-
+
+
+
Date: Fri, 29 Sep 2023 09:49:56 -0400 Subject: [PATCH 02/33] Update widgets-form.php --- src/wp-admin/widgets-form.php | 47 +++++++++++++---------------------- 1 file changed, 17 insertions(+), 30 deletions(-) diff --git a/src/wp-admin/widgets-form.php b/src/wp-admin/widgets-form.php index 01f0947a22..07ba403a95 100644 --- a/src/wp-admin/widgets-form.php +++ b/src/wp-admin/widgets-form.php @@ -342,12 +342,12 @@
- - - + + +
-
+
@@ -421,28 +421,19 @@
-
- -

-
-
-
-

-
-
- +
+ +
+
+

+
+
    + +
+
-
-
-
+ +
0 ) { - $wrap_class .= ' closed'; - } - if ( $split && $i === $split ) { ?>
@@ -549,7 +536,7 @@
-
+
From 449fddc31ea2ac6956cef3e2965ac9c17c0c807f Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:50:56 -0400 Subject: [PATCH 03/33] Update class-wp-customize-widgets.php to work with `details` and `summary` elements --- src/wp-includes/class-wp-customize-widgets.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php index 63d1ee3b46..594951add4 100644 --- a/src/wp-includes/class-wp-customize-widgets.php +++ b/src/wp-includes/class-wp-customize-widgets.php @@ -867,14 +867,14 @@ public function output_widget_control_templates() { ?>

-
+
    get_available_widgets() as $available_widget ) : ?> -
    +
  • -
    • +

    -
+
setting_id_patterns['widget_instance'], $id, $matches ) ) { $id_base = $matches['id_base']; - $args['sanitize_callback'] = function ( $value ) use ( $id_base ) { + $args['sanitize_callback'] = function( $value ) use ( $id_base ) { return $this->sanitize_widget_instance( $value, $id_base ); }; - $args['sanitize_js_callback'] = function ( $value ) use ( $id_base ) { + $args['sanitize_js_callback'] = function( $value ) use ( $id_base ) { return $this->sanitize_widget_js_instance( $value, $id_base ); }; $args['transport'] = $this->is_widget_selective_refreshable( $matches['id_base'] ) ? 'postMessage' : 'refresh'; From 145715f7e0d19c31343ef2ef876b282e7d399abb Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:52:00 -0400 Subject: [PATCH 04/33] Update customize-widgets.js to work with more semantic markup --- src/wp-admin/js/customize-widgets.js | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index 2ba8aeed81..26c155f944 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/wp-admin/js/customize-widgets.js @@ -539,6 +539,7 @@ } } ); } + control.embedWidgetContent(); }, /** @@ -701,18 +702,15 @@ var self = this, $closeBtn; this.container.find( '.widget-top' ).on( 'click', function( e ) { - e.preventDefault(); var sidebarWidgetsControl = self.getSidebarWidgetsControl(); if ( sidebarWidgetsControl.isReordering ) { return; } - self.expanded( ! self.expanded() ); } ); $closeBtn = this.container.find( '.widget-control-close' ); $closeBtn.on( 'click', function() { - self.collapse(); - self.container.find( '.widget-top .widget-action:first' ).focus(); // Keyboard accessibility. + $closeBtn.closest('details').removeAttr('open').children('summary').focus(); // Keyboard accessibility. } ); }, @@ -1421,7 +1419,7 @@ $widget = this.container.find( 'div.widget:first' ); $inside = $widget.find( '.widget-inside:first' ); - $toggleBtn = this.container.find( '.widget-top button.widget-action' ); + $details = $widget.children( 'details' ); expandControl = function() { @@ -1433,11 +1431,7 @@ } ); complete = function() { - self.container.removeClass( 'expanding' ); - self.container.addClass( 'expanded' ); - $widget.addClass( 'open' ); - $toggleBtn.attr( 'aria-expanded', 'true' ); - self.container.trigger( 'expanded' ); + $details.attr( 'open', 'open' ); }; if ( args.completeCallback ) { prevComplete = complete; @@ -1457,7 +1451,7 @@ self.container.addClass( 'expanding' ); }; - if ( $toggleBtn.attr( 'aria-expanded' ) === 'false' ) { + if ( ! $details[0].hasAttribute( 'open' ) ) { if ( api.section.has( self.section() ) ) { api.section( self.section() ).expand( { completeCallback: expandControl @@ -1467,11 +1461,7 @@ } } else { complete = function() { - self.container.removeClass( 'collapsing' ); - self.container.removeClass( 'expanded' ); - $widget.removeClass( 'open' ); - $toggleBtn.attr( 'aria-expanded', 'false' ); - self.container.trigger( 'collapsed' ); + $widget.removeAttr( 'open' ); }; if ( args.completeCallback ) { prevComplete = complete; @@ -1482,7 +1472,6 @@ } self.container.trigger( 'collapse' ); - self.container.addClass( 'collapsing' ); if ( self.params.is_wide ) { $inside.fadeOut( args.duration, complete ); @@ -2285,7 +2274,7 @@ */ $( document ).on( 'widget-added', function( event, widgetContainer ) { var parsedWidgetId, widgetControl, navMenuSelect, editMenuButton; - parsedWidgetId = parseWidgetId( widgetContainer.find( '> .widget-inside > .form > .widget-id' ).val() ); + parsedWidgetId = parseWidgetId( widgetContainer.find( '.widget-inside > .form > .widget-id' ).val() ); if ( 'nav_menu' !== parsedWidgetId.id_base ) { return; } From c8bb2e64dca405570deb798b9b06d12c4a028fdc Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:53:52 -0400 Subject: [PATCH 05/33] Update media-widgets.js Enables all the media widgets (image, audio, video, etc) to work with more semantic markup and the `details` and `summary` elements. --- src/wp-admin/js/widgets/media-widgets.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js index 2ee00a826c..4815adf8dd 100644 --- a/src/wp-admin/js/widgets/media-widgets.js +++ b/src/wp-admin/js/widgets/media-widgets.js @@ -1125,8 +1125,8 @@ wp.mediaWidgets = ( function( $ ) { component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) { var fieldContainer, syncContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. - idBase = widgetForm.find( '> .id_base' ).val(); - widgetId = widgetForm.find( '> .widget-id' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); + widgetId = widgetContainer.find( '.widget-id' ).val(); // Prevent initializing already-added widgets. if ( component.widgetControls[ widgetId ] ) { @@ -1212,7 +1212,7 @@ wp.mediaWidgets = ( function( $ ) { return; } - idBase = widgetForm.find( '.id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); ControlConstructor = component.controlConstructors[ idBase ]; if ( ! ControlConstructor ) { @@ -1262,7 +1262,7 @@ wp.mediaWidgets = ( function( $ ) { component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) { var widgetForm, widgetContent, widgetId, widgetControl, attributes = {}; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); - widgetId = widgetForm.find( '> .widget-id' ).val(); + widgetId = widgetContainer.find( '.widget-id' ).val(); widgetControl = component.widgetControls[ widgetId ]; if ( ! widgetControl ) { @@ -1313,7 +1313,7 @@ wp.mediaWidgets = ( function( $ ) { if ( 'widgets' !== window.pagenow ) { return; } - widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'li.widget' ); widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { var widgetContainer = $( this ); component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); From 96da283b0901ffb6841b1076a3dffde5307bbde6 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:54:25 -0400 Subject: [PATCH 06/33] Update text-widgets.js to work with more semantic markup --- src/wp-admin/js/widgets/text-widgets.js | 36 ++++--------------------- 1 file changed, 5 insertions(+), 31 deletions(-) diff --git a/src/wp-admin/js/widgets/text-widgets.js b/src/wp-admin/js/widgets/text-widgets.js index ee4dbb9529..7346d2e45f 100644 --- a/src/wp-admin/js/widgets/text-widgets.js +++ b/src/wp-admin/js/widgets/text-widgets.js @@ -160,8 +160,6 @@ wp.textWidgets = ( function( $ ) { if ( ! control.fields.text.is( document.activeElement ) ) { control.fields.text.val( syncInput.val() ); } - } else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) { - control.editor.setContent( wp.oldEditor.autop( syncInput.val() ) ); } }, @@ -237,18 +235,12 @@ wp.textWidgets = ( function( $ ) { // The user has disabled TinyMCE. if ( typeof window.tinymce === 'undefined' ) { - wp.oldEditor.initialize( id, { - quicktags: true, - mediaButtons: true - }); - return; } // Destroy any existing editor so that it can be re-initialized after a widget-updated event. if ( tinymce.get( id ) ) { restoreTextMode = tinymce.get( id ).isHidden(); - wp.oldEditor.remove( id ); } // Add or enable the `wpview` plugin. @@ -262,14 +254,6 @@ wp.textWidgets = ( function( $ ) { } } ); - wp.oldEditor.initialize( id, { - tinymce: { - wpautop: true - }, - quicktags: true, - mediaButtons: true - }); - /** * Show a pointer, focus on dismiss, and speak the contents for a11y. * @@ -383,7 +367,7 @@ wp.textWidgets = ( function( $ ) { var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. - idBase = widgetForm.find( '> .id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } @@ -394,11 +378,6 @@ wp.textWidgets = ( function( $ ) { return; } - // Bypass using TinyMCE when widget is in legacy mode. - if ( ! widgetForm.find( '.visual' ).val() ) { - return; - } - /* * Create a container element for the widget control fields. * This is inserted into the DOM immediately before the .widget-content @@ -451,16 +430,11 @@ wp.textWidgets = ( function( $ ) { return; } - idBase = widgetForm.find( '.id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } - // Bypass using TinyMCE when widget is in legacy mode. - if ( ! widgetForm.find( '.visual' ).val() ) { - return; - } - fieldContainer = $( '
' ); syncContainer = widgetForm.find( '> .widget-inside' ); syncContainer.before( fieldContainer ); @@ -490,12 +464,12 @@ wp.textWidgets = ( function( $ ) { var widgetForm, widgetId, widgetControl, idBase; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); - idBase = widgetForm.find( '> .id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } - widgetId = widgetForm.find( '> .widget-id' ).val(); + widgetId = widgetForm.find( '.widget-id' ).val(); widgetControl = component.widgetControls[ widgetId ]; if ( ! widgetControl ) { return; @@ -535,7 +509,7 @@ wp.textWidgets = ( function( $ ) { if ( 'widgets' !== window.pagenow ) { return; } - widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'li.widget' ); widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { var widgetContainer = $( this ); component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); From b7893c9f37a09390c601595a91db5935c376e674 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:54:56 -0400 Subject: [PATCH 07/33] Update custom-html-widgets.js to work with more semantic markup --- src/wp-admin/js/widgets/custom-html-widgets.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/wp-admin/js/widgets/custom-html-widgets.js b/src/wp-admin/js/widgets/custom-html-widgets.js index e36d11583f..20d15527fc 100644 --- a/src/wp-admin/js/widgets/custom-html-widgets.js +++ b/src/wp-admin/js/widgets/custom-html-widgets.js @@ -294,13 +294,13 @@ wp.customHtmlWidgets = ( function( $ ) { var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen. - idBase = widgetForm.find( '> .id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } // Prevent initializing already-added widgets. - widgetId = widgetForm.find( '.widget-id' ).val(); + widgetId = widgetContainer.find( '.widget-id' ).val(); if ( component.widgetControls[ widgetId ] ) { return; } @@ -333,7 +333,7 @@ wp.customHtmlWidgets = ( function( $ ) { * This ensures that the textarea is visible and the editor can be initialized. */ renderWhenAnimationDone = function() { - if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://github.com/xwp/wordpress-develop/pull/247/commits/5322387d + if ( ! ( widgetContainer.children( 'details' )[0].hasAttribute( 'open' ) ) ) { setTimeout( renderWhenAnimationDone, animatedCheckDelay ); } else { widgetControl.initializeEditor(); @@ -356,7 +356,7 @@ wp.customHtmlWidgets = ( function( $ ) { return; } - idBase = widgetForm.find( '.id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } @@ -390,12 +390,12 @@ wp.customHtmlWidgets = ( function( $ ) { var widgetForm, widgetId, widgetControl, idBase; widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); - idBase = widgetForm.find( '> .id_base' ).val(); + idBase = widgetContainer.find( '.id_base' ).val(); if ( -1 === component.idBases.indexOf( idBase ) ) { return; } - widgetId = widgetForm.find( '> .widget-id' ).val(); + widgetId = widgetContainer.find( '.widget-id' ).val(); widgetControl = component.widgetControls[ widgetId ]; if ( ! widgetControl ) { return; @@ -439,7 +439,7 @@ wp.customHtmlWidgets = ( function( $ ) { if ( 'widgets' !== window.pagenow ) { return; } - widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' ); + widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'li.widget' ); widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() { var widgetContainer = $( this ); component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer ); From 3eb8485f5414b6d308036827240567c1c5e65c1b Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:56:01 -0400 Subject: [PATCH 08/33] Update widgets.js to work with `details` and `summary` elements and more semantic markup --- src/wp-admin/js/widgets.js | 296 +++++++++++++------------------------ 1 file changed, 105 insertions(+), 191 deletions(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index e8fc42507d..487859bc0b 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -27,45 +27,26 @@ window.wpWidgets = { self = this, chooser = $('.widgets-chooser'), selectSidebar = chooser.find('.widgets-chooser-sidebars'), - sidebars = $('div.widgets-sortables'), - isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ); - - // Handle the widgets containers in the right column. - $( '#widgets-right .sidebar-name' ) - /* - * Toggle the widgets containers when clicked and update the toggle - * button `aria-expanded` attribute value. - */ - .on( 'click', function() { - var $this = $( this ), - $wrap = $this.closest( '.widgets-holder-wrap '), - $toggle = $this.find( '.handlediv' ); - - if ( $wrap.hasClass( 'closed' ) ) { - $wrap.removeClass( 'closed' ); - $toggle.attr( 'aria-expanded', 'true' ); - // Refresh the jQuery UI sortable items. - $this.parent().sortable( 'refresh' ); - } else { - $wrap.addClass( 'closed' ); - $toggle.attr( 'aria-expanded', 'false' ); - } - - // Update the admin menu "sticky" state. - $document.triggerHandler( 'wp-pin-menu' ); - }) - /* - * Set the initial `aria-expanded` attribute value on the widgets - * containers toggle button. The first one is expanded by default. - */ - .find( '.handlediv' ).each( function( index ) { - if ( 0 === index ) { - // jQuery equivalent of `continue` within an `each()` loop. - return; - } + sidebars = $('ul.widgets-sortables'), + isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );// Refresh the widgets containers in the right column. + + document.querySelector( '#widgets-right details' ).setAttribute( 'open', 'open' ); + document.querySelector( '.inactive-sidebar .sidebar-name' ).parentElement.setAttribute( 'open', 'open' ); + + // Hide elements on the Inactive Sidebar. + document.querySelector( '.inactive-sidebar .sidebar-name' ).addEventListener( 'click', (e) => { + e.target.parentElement.nextElementSibling.classList.toggle( 'hidden' ); + e.target.closest( '.widget-holder' ).nextElementSibling.classList.toggle( 'hidden' ); + }); + + // Update the admin menu "sticky" state. + $( '#widgets-left .sidebar-name' ).on( 'click', function() { + $document.triggerHandler( 'wp-pin-menu' ); + }); - $( this ).attr( 'aria-expanded', 'false' ); - }); + $( '#widgets-right summary' ).on( 'click', function() { + $document.triggerHandler( 'wp-pin-menu' ); + }); // Show AYS dialog when there are unsaved widget changes. $( window ).on( 'beforeunload.widgets', function( event ) { @@ -80,8 +61,8 @@ window.wpWidgets = { return -1 !== dirtyWidgetIds.indexOf( $( this ).prop( 'id' ).replace( /^widget-\d+_/, '' ) ); }); unsavedWidgetsElements.each( function() { - if ( ! $( this ).hasClass( 'open' ) ) { - $( this ).find( '.widget-title-action:first' ).trigger( 'click' ); + if ( ! $( this )[0].hasAttribute( 'open' ) ) { + $( this ).children( 'details' ).attr( 'open', 'open' );// or make click? } }); @@ -100,26 +81,14 @@ window.wpWidgets = { } }); - // Handle the widgets containers in the left column. - $( '#widgets-left .sidebar-name' ).on( 'click', function() { - var $wrap = $( this ).closest( '.widgets-holder-wrap' ); - - $wrap - .toggleClass( 'closed' ) - .find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) ); - - // Update the admin menu "sticky" state. - $document.triggerHandler( 'wp-pin-menu' ); - }); - $(document.body).on('click.widgets-toggle', function(e) { var target = $(e.target), css = {}, widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId, toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' ); - if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) { - widget = target.closest('div.widget'); - inside = widget.children('.widget-inside'); + if ( target.parents('.widget-top').length && ! target.parents('.widget-inside').length && ! target.parents('#available-widgets').length ) { + widget = target.closest('li.widget'); + inside = widget.find('.widget-inside'); targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ); widgetWidth = widget.parent().width(); widgetId = inside.find( '.widget-id' ).val(); @@ -136,8 +105,8 @@ window.wpWidgets = { widget.data( 'dirty-state-initialized', true ); } - if ( inside.is(':hidden') ) { - if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) { + if ( ! widget.children('details')[0].hasAttribute( 'open' ) ) { + if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('ul.widgets-sortables').length ) { if ( widget.closest('div.widget-liquid-right').length ) { margin = isRTL ? 'margin-right' : 'margin-left'; } else { @@ -147,35 +116,15 @@ window.wpWidgets = { css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px'; widget.css( css ); } - /* - * Don't change the order of attributes changes and animation: - * it's important for screen readers, see ticket #31476. - */ - toggleBtn.attr( 'aria-expanded', 'true' ); - inside.slideDown( 'fast', function() { - widget.addClass( 'open' ); - }); - } else { - /* - * Don't change the order of attributes changes and animation: - * it's important for screen readers, see ticket #31476. - */ - toggleBtn.attr( 'aria-expanded', 'false' ); - inside.slideUp( 'fast', function() { - widget.attr( 'style', '' ); - widget.removeClass( 'open' ); - }); } } else if ( target.hasClass('widget-control-save') ) { - wpWidgets.save( target.closest('div.widget'), 0, 1, 0 ); + wpWidgets.save( target.closest('li.widget'), 0, 1, 0 ); e.preventDefault(); } else if ( target.hasClass('widget-control-remove') ) { - wpWidgets.save( target.closest('div.widget'), 1, 1, 0 ); + wpWidgets.save( target.closest('li.widget'), 1, 1, 0 ); } else if ( target.hasClass('widget-control-close') ) { - widget = target.closest('div.widget'); - widget.removeClass( 'open' ); - toggleBtn.attr( 'aria-expanded', 'false' ); - wpWidgets.close( widget ); + widget = target.closest('li.widget'); + widget.children('details').removeAttr('open').children('summary').focus(); } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) { wpWidgets.removeInactiveWidgets(); e.preventDefault(); @@ -192,8 +141,8 @@ window.wpWidgets = { } }); - $('#widget-list').children('.widget').draggable({ - connectToSortable: 'div.widgets-sortables', + $('#widget-list').find('.widget').draggable({ + connectToSortable: 'ul.widgets-sortables', handle: '> .widget-top > .widget-title', distance: 2, helper: 'clone', @@ -237,18 +186,16 @@ window.wpWidgets = { * @param {Object} event jQuery event object. */ over: function( event ) { - var $wrap = $( event.target ).parent(); + var details = $( event.target ).closest( 'details' ); - if ( wpWidgets.hoveredSidebar && ! $wrap.is( wpWidgets.hoveredSidebar ) ) { + if ( wpWidgets.hoveredSidebar && ! details.children('ul').is( wpWidgets.hoveredSidebar ) ) { // Close the previous Sidebar as the Widget has been dragged onto another Sidebar. - wpWidgets.closeSidebar( event ); + details.removeAttr( 'open' ); } - if ( $wrap.hasClass( 'closed' ) ) { - wpWidgets.hoveredSidebar = $wrap; - $wrap - .removeClass( 'closed' ) - .find( '.handlediv' ).attr( 'aria-expanded', 'true' ); + if ( ! details[0].hasAttribute( 'open' ) ) { + wpWidgets.hoveredSidebar = details.children('ul'); + details.attr( 'open', 'open' ); } $( this ).sortable( 'refresh' ); @@ -262,8 +209,10 @@ window.wpWidgets = { * @param {Object} event jQuery event object. */ out: function( event ) { + var details = $( event.target ).closest( 'details' ); + if ( wpWidgets.hoveredSidebar ) { - wpWidgets.closeSidebar( event ); + details.removeAttr( 'open' ); } } } ); @@ -279,17 +228,15 @@ window.wpWidgets = { refreshPositions: true, start: function( event, ui ) { var height, $this = $(this), - $wrap = $this.parent(), - inside = ui.item.children('.widget-inside'); + $wrap = $this.closest( '.widgets-holder-wrap' ), + details = ui.item.children('details'); - if ( inside.css('display') === 'block' ) { - ui.item.removeClass('open'); - ui.item.find( '.widget-top button.widget-action' ).attr( 'aria-expanded', 'false' ); - inside.hide(); + if ( details[0].hasAttribute( 'open' ) ) { + details.removeAttr( 'open' ); $(this).sortable('refreshPositions'); } - if ( ! $wrap.hasClass('closed') ) { + if ( $wrap.find('details')[0].hasAttribute( 'open' ) ) { // Lock all open sidebars min-height when starting to drag. // Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below. height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height(); @@ -341,10 +288,8 @@ window.wpWidgets = { $sidebar = $widget.parent(); - if ( $sidebar.parent().hasClass('closed') ) { - $sidebar.parent() - .removeClass( 'closed' ) - .find( '.handlediv' ).attr( 'aria-expanded', 'true' ); + if ( ! $sidebar.parent()[0].hasAttribute('open') ) { + $sidebar.parent().attr( 'open', 'open' ); $children = $sidebar.children('.widget'); @@ -389,7 +334,7 @@ window.wpWidgets = { $sender.parents('.orphan-sidebar').slideUp( 400, function(){ $(this).remove(); } ); } } - }).sortable( 'option', 'connectWith', 'div.widgets-sortables' ); + }).sortable( 'option', 'connectWith', 'ul.widgets-sortables' ); $('#available-widgets').droppable({ tolerance: 'pointer', @@ -406,7 +351,7 @@ window.wpWidgets = { if ( ui.draggable.hasClass('ui-sortable-helper') ) { $('#removing-widget').show().children('span') - .html( ui.draggable.find( 'div.widget-title' ).children( 'h3' ).html() ); + .html( ui.draggable.find( 'summary.widget-title' ).html() ); } }, out: function(e,ui) { @@ -419,7 +364,7 @@ window.wpWidgets = { // Area Chooser. $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) { var $element = $( element ), - name = $element.find( '.sidebar-name h2' ).text() || '', + name = $element.find( 'summary.sidebar-name' ).text() || '', ariaLabel = $element.find( '.sidebar-name' ).data( 'add-to' ), id = $element.find( '.widgets-sortables' ).attr( 'id' ), li = $( '
  • ' ), @@ -441,50 +386,61 @@ window.wpWidgets = { li.data( 'sidebarId', id ); }); - $( '#available-widgets .widget .widget-top' ).on( 'click.widgets-chooser', function() { - var $widget = $( this ).closest( '.widget' ), - toggleButton = $( this ).find( '.widget-action' ), - chooserButtons = selectSidebar.find( '.widgets-chooser-button' ); - - if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) { - toggleButton.attr( 'aria-expanded', 'false' ); - self.closeChooser(); - } else { - // Open the chooser. - self.clearWidgetSelection(); - $( '#widgets-left' ).addClass( 'chooser' ); - // Add CSS class and insert the chooser after the widget description. - $widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser ); - // Open the chooser with a slide down animation. - chooser.slideDown( 300, function() { - // Update the toggle button aria-expanded attribute after previous DOM manipulations. - toggleButton.attr( 'aria-expanded', 'true' ); + // Add sidebar chooser on the widgets screen but not the Customizer. + var widgetTops = document.querySelectorAll( '#available-widgets .widget .widget-top' ), + chooserButtons = selectSidebar.find( '.widgets-chooser-button' ); + + if ( document.querySelector( 'body' ).classList.contains( 'widgets-php' ) ) { + widgetTops.forEach( ( top ) => { + top.addEventListener( 'click', function( e ) { + + // Open the chooser. + if ( ! e.target.closest( 'details' ).hasAttribute( 'open' ) ) { + self.clearWidgetSelection(); + document.getElementById( 'widgets-left' ).classList.add( 'chooser' ); + + chooserButtons.on( 'click.widgets-chooser', function() { + selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' ); + chooserButtons.attr( 'aria-pressed', 'false' ); + $( this ) + .attr( 'aria-pressed', 'true' ) + .closest( 'li' ).addClass( 'widgets-chooser-selected' ); + } ); + + // Add CSS class and insert the chooser at the end of the details element. + e.target.closest( 'li' ).classList.add( 'widget-in-question' ); + e.target.closest( '.widget-top' ).append( chooser[0] ); + e.target.focus(); + } else { + document.querySelector( '.chooser' ).classList.remove( 'chooser' ); + } }); + }); + } - chooserButtons.on( 'click.widgets-chooser', function() { - selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' ); - chooserButtons.attr( 'aria-pressed', 'false' ); - $( this ) - .attr( 'aria-pressed', 'true' ) - .closest( 'li' ).addClass( 'widgets-chooser-selected' ); - } ); - } + // Add event handlers for choosers. + var widgetActions = document.querySelectorAll( '.widgets-chooser-actions' ); + widgetActions.forEach( ( action ) => { + action.addEventListener( 'click', function( e ) { + if ( e.target.classList.contains( 'button-primary' ) ) { + self.addWidget( chooser ); + } + e.target.closest( '.widget-top' ).removeAttribute( 'open' ); + setTimeout( () => { + document.querySelector( '.chooser' ).classList.remove( 'chooser' ); + }, 0 ); + }); }); - // Add event handlers. - chooser.on( 'click.widgets-chooser', function( event ) { - var $target = $( event.target ); - - if ( $target.hasClass('button-primary') ) { - self.addWidget( chooser ); - self.closeChooser(); - } else if ( $target.hasClass( 'widgets-chooser-cancel' ) ) { - self.closeChooser(); - } - }).on( 'keyup.widgets-chooser', function( event ) { - if ( event.which === $.ui.keyCode.ESCAPE ) { - self.closeChooser(); - } + // Enable Escape key. + var openWidgets = document.querySelectorAll( '.widget.open' ); + openWidgets.forEach( ( widget ) => { + widget.addEventListener( 'keyup', function( e ) { + if ( e.key === 'Escape' ) { + e.target.closest( '.widget-top' ).removeAttribute( 'open' ); + document.querySelector( '.chooser' ).classList.remove( 'chooser' ); + } + }); }); }, @@ -499,7 +455,7 @@ window.wpWidgets = { $( '#' + sidebarId ).find( '.spinner:first' ).addClass( 'is-active' ); } - $('div.widgets-sortables').each( function() { + $('ul.widgets-sortables').each( function() { if ( $(this).sortable ) { data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(','); } @@ -513,7 +469,7 @@ window.wpWidgets = { save : function( widget, del, animate, order ) { var self = this, data, a, - sidebarId = widget.closest( 'div.widgets-sortables' ).attr( 'id' ), + sidebarId = widget.closest( 'ul.widgets-sortables' ).attr( 'id' ), form = widget.find( 'form' ), isAdd = widget.find( 'input.add_new' ).val(); @@ -545,7 +501,7 @@ window.wpWidgets = { if ( ! $('input.widget_number', widget).val() ) { $('#available-widgets').find('input.widget-id').each(function(){ if ( $(this).val() === id ) { - $(this).closest('div.widget').show(); + $(this).closest('li.widget').show(); } }); } @@ -628,15 +584,6 @@ window.wpWidgets = { }, - close : function(widget) { - widget.children('.widget-inside').slideUp('fast', function() { - widget.attr( 'style', '' ) - .find( '.widget-top button.widget-action' ) - .attr( 'aria-expanded', 'false' ) - .focus(); - }); - }, - addWidget: function( chooser ) { var widget, widgetId, add, n, viewportTop, viewportBottom, sidebarBounds, sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'), @@ -666,10 +613,6 @@ window.wpWidgets = { } // Open the widgets container. - sidebar.closest( '.widgets-holder-wrap' ) - .removeClass( 'closed' ) - .find( '.handlediv' ).attr( 'aria-expanded', 'true' ); - sidebar.append( widget ); sidebar.sortable('refresh'); @@ -701,43 +644,14 @@ window.wpWidgets = { window.setTimeout( function() { // Cannot use a callback in the animation above as it fires twice, // have to queue this "by hand". - widget.find( '.widget-title' ).trigger('click'); // At the end of the animation, announce the widget has been added. window.wp.a11y.speak( wp.i18n.__( 'Widget has been added to the selected sidebar' ), 'assertive' ); }, 250 ); }, - closeChooser: function() { - var self = this, - widgetInQuestion = $( '#available-widgets .widget-in-question' ); - - $( '.widgets-chooser' ).slideUp( 200, function() { - $( '#wpbody-content' ).append( this ); - self.clearWidgetSelection(); - // Move focus back to the toggle button. - widgetInQuestion.find( '.widget-action' ).attr( 'aria-expanded', 'false' ).focus(); - }); - }, - clearWidgetSelection: function() { $( '#widgets-left' ).removeClass( 'chooser' ); $( '.widget-in-question' ).removeClass( 'widget-in-question' ); - }, - - /** - * Closes a Sidebar that was previously closed, but opened by dragging a Widget over it. - * - * Used when a Widget gets dragged in/out of the Sidebar and never dropped. - * - * @param {Object} event jQuery event object. - */ - closeSidebar: function( event ) { - this.hoveredSidebar - .addClass( 'closed' ) - .find( '.handlediv' ).attr( 'aria-expanded', 'false' ); - - $( event.target ).css( 'min-height', '' ); - this.hoveredSidebar = null; } }; From 39609d648defa1e8396aa1bfeef98a70f0fc23a0 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 09:56:50 -0400 Subject: [PATCH 09/33] Update widgets.css so that changes to markup cause minimal visual differences. --- src/wp-admin/css/widgets.css | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 0efe6d220d..d8d9d5e9e8 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -28,7 +28,8 @@ } .widget-title h3, -.widget-title h4 { +.widget-title h4, +summary.widget-title { margin: 0; padding: 15px; font-size: 1em; @@ -42,11 +43,13 @@ } .widgets-holder-wrap .widget-inside { - border-top: none; + border: 0; + border-top: 1px solid #c3c4c7; padding: 1px 15px 15px; line-height: 1.23076923; } +#available-widgets .widget-inside, .widget.widget-dirty .widget-control-close-wrapper { display: none; } @@ -351,6 +354,13 @@ line-height: 1.5; } +summary.sidebar-name { + padding: 15px 15px 15px 7px; + color: #1d2327; + font-size: 1.3em; + font-weight: 600; +} + .widgets-holder-wrap .description { padding: 0 0 15px; margin: 0; @@ -559,6 +569,7 @@ div#widgets-right .closed .widgets-sortables { padding: 0 15px; line-height: 3.30769230; border-left: 1px solid #dcdcde; + margin-top: -3.3em; } #widgets-left .widget-control-edit:hover, @@ -589,6 +600,10 @@ div#widgets-right .closed .widgets-sortables { margin-top: 20px; } +#available-widgets .widget-control-actions { + display: none; +} + .js .widgets-holder-wrap.closed .widget, .js .widgets-holder-wrap.closed .sidebar-description, .js .widgets-holder-wrap.closed .remove-inactive-widgets, @@ -601,14 +616,14 @@ div#widgets-right .closed .widgets-sortables { display: block; } -/* Hide Widget Settings by Default */ -.widget-inside, +/* Hide Widget Description by Default */ .widget-description { display: none; } .widget-inside { background: #fff; + font-weight: 500; } .widget-inside select { @@ -679,7 +694,7 @@ div#widgets-right .closed .widgets-sortables { div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { border-color: #8c8f94; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .widgets-chooser ul.widgets-chooser-sidebars { @@ -693,8 +708,9 @@ div#widgets-right .widget-top:hover, display: none; } -.widgets-chooser ul { - border: 1px solid #c3c4c7; +#available-widgets .widgets-chooser { + display: block; + font-weight: 500; } .widgets-chooser li { @@ -846,7 +862,7 @@ ul.CodeMirror-hints { } @media only screen and (min-width: 1250px) { - #widgets-left #available-widgets .widget { + #widgets-left #widget-list .widget { width: 49%; float: left; } @@ -855,7 +871,7 @@ ul.CodeMirror-hints { min-width: 49%; } - #widgets-left #available-widgets .widget:nth-child(even) { + #widgets-left #widget-list .widget:nth-child(even) { float: right; } From 0669b51464f7b1e85ad71c318b41440fb8a3bf42 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 10:53:18 -0400 Subject: [PATCH 10/33] Update widgets.js to ensure chooser reamins available after dragging a widget --- src/wp-admin/js/widgets.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 487859bc0b..0d6ecf881a 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -408,6 +408,7 @@ window.wpWidgets = { } ); // Add CSS class and insert the chooser at the end of the details element. + chooser[0].style.display = 'block'; // ensure that chooser remains available after dragging widget e.target.closest( 'li' ).classList.add( 'widget-in-question' ); e.target.closest( '.widget-top' ).append( chooser[0] ); e.target.focus(); From 0d4d28fbe136af0c64ae9b8add4f514a6c8d6d4f Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 11:06:42 -0400 Subject: [PATCH 11/33] Update widgets.js to ensure that `inert` attribute on widget contents is removed after dragging to sidebar. --- src/wp-admin/js/widgets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 0d6ecf881a..198c6572b1 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -261,7 +261,7 @@ window.wpWidgets = { addNew = $widget.find('input.add_new').val(); widgetNumber = $widget.find('input.multi_number').val(); - $widget.attr( 'style', '' ).removeClass('ui-draggable'); + $widget.attr( 'style', '' ).removeClass('ui-draggable').find( '.widget-inside' ).removeAttr( 'inert' ); the_id = ''; if ( addNew ) { From e219da02e4fe8569d862c3bc5d55b182fa10e880 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 17:28:50 -0400 Subject: [PATCH 12/33] Update widgets.js to increment each new added widget's ID. --- src/wp-admin/js/widgets.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 198c6572b1..154d73162a 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -275,10 +275,10 @@ window.wpWidgets = { $widget.attr( 'id', id.replace( '__i__', widgetNumber ) ); widgetNumber++; - $( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber ); + $( 'li#' + id ).find( 'input.multi_number' ).val( widgetNumber ); } else if ( 'single' === addNew ) { $widget.attr( 'id', 'new-' + id ); - rem = 'div#' + id; + rem = 'li#' + id; } wpWidgets.save( $widget, 0, 0, 1 ); From 511da87f954548b3b4b1f9c7fa53edff64ee4751 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Fri, 29 Sep 2023 23:47:12 -0400 Subject: [PATCH 13/33] Update widgets.js to ensure widget opens when added to sidebar. --- src/wp-admin/js/widgets.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 154d73162a..0f5fc71fc2 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -62,7 +62,7 @@ window.wpWidgets = { }); unsavedWidgetsElements.each( function() { if ( ! $( this )[0].hasAttribute( 'open' ) ) { - $( this ).children( 'details' ).attr( 'open', 'open' );// or make click? + $( this ).children( 'details' ).attr( 'open', 'open' ); } }); @@ -305,7 +305,7 @@ window.wpWidgets = { } if ( addNew ) { - $widget.find( '.widget-action' ).trigger( 'click' ); + $widget.children( 'details' ).attr( 'open', 'open' ); } else { wpWidgets.saveOrder( $sidebar.attr('id') ); } From c0f4260390b7fcc64431097adf76accbde1c57fe Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 30 Sep 2023 00:53:28 -0400 Subject: [PATCH 14/33] Update widgets.css to ensure available widgets sidebar description is visible. --- src/wp-admin/css/widgets.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index d8d9d5e9e8..ef0e5f0eea 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -649,7 +649,6 @@ div#widgets-right .closed .widgets-sortables { .widgets_access .widget-action, .widgets_access .handlediv, .widgets_access #access-on, -.widgets_access .widget-holder .description, .no-js .widget-holder .description { display: none; } From 05cef97ccff77a0bcf30082712254837915023ac Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 30 Sep 2023 14:51:26 -0400 Subject: [PATCH 15/33] Update widgets.php to improve semantics of receiving sidebar --- src/wp-admin/includes/widgets.php | 29 +++++++---------------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index ad7ec22590..baa9a61d15 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -89,33 +89,18 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { echo '
    '; - echo '' . esc_html( $sidebar_name ) . ' '; + echo '' . esc_html( $sidebar_name ) . ''; - echo '
      '; + if ( ! empty( $description ) ) { - if ( $sidebar_name ) { - $add_to = sprintf( - /* translators: %s: Widgets sidebar name. */ - __( 'Add to: %s' ), - $sidebar_name - ); - ?> -
      - -
      - '; + echo '

      ' . $description . '

      '; + echo ''; - if ( ! empty( $description ) ) { - ?> -
      -

      -
      - '; + dynamic_sidebar( $sidebar ); echo '
    '; From b91fa48c8254e01009e94292beb82bb95129f849 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 30 Sep 2023 14:54:18 -0400 Subject: [PATCH 16/33] Update widgets.js to have receiving sidebars open and close when widget dragged over or off them. --- src/wp-admin/js/widgets.js | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 0f5fc71fc2..d75fc928db 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -28,6 +28,7 @@ window.wpWidgets = { chooser = $('.widgets-chooser'), selectSidebar = chooser.find('.widgets-chooser-sidebars'), sidebars = $('ul.widgets-sortables'), + sidebarWrappers = $( '.widgets-holder-wrap' ); isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );// Refresh the widgets containers in the right column. document.querySelector( '#widgets-right details' ).setAttribute( 'open', 'open' ); @@ -177,7 +178,14 @@ window.wpWidgets = { */ sidebars.droppable( { tolerance: 'intersect', + over: function( event ) { + $( this ).sortable( 'refresh' ); + } + } ); + sidebarWrappers.droppable( { + tolerance: 'intersect', + greedy: true, /** * Open Sidebar when a Widget gets dragged over it. * @@ -186,19 +194,17 @@ window.wpWidgets = { * @param {Object} event jQuery event object. */ over: function( event ) { - var details = $( event.target ).closest( 'details' ); + var details = $( event.target ).children( 'details' ); if ( wpWidgets.hoveredSidebar && ! details.children('ul').is( wpWidgets.hoveredSidebar ) ) { // Close the previous Sidebar as the Widget has been dragged onto another Sidebar. details.removeAttr( 'open' ); } - if ( ! details[0].hasAttribute( 'open' ) ) { + if ( ! details.attr( 'open' ) ) { wpWidgets.hoveredSidebar = details.children('ul'); details.attr( 'open', 'open' ); } - - $( this ).sortable( 'refresh' ); }, /** @@ -209,11 +215,12 @@ window.wpWidgets = { * @param {Object} event jQuery event object. */ out: function( event ) { - var details = $( event.target ).closest( 'details' ); - - if ( wpWidgets.hoveredSidebar ) { - details.removeAttr( 'open' ); - } + setTimeout( () => { + var sidebar = this.querySelector( 'ul' ); + if ( ! sidebar.classList.contains( 'ui-droppable-hover' ) ) { + this.querySelector( 'details' ).removeAttribute( 'open' ); + } + }, 0); } } ); @@ -620,6 +627,7 @@ window.wpWidgets = { wpWidgets.save( widget, 0, 0, 1 ); // No longer "new" widget. widget.find( 'input.add_new' ).val(''); + widget.find( '.widgets-chooser' ).removeAttr( 'inert' ); $document.trigger( 'widget-added', [ widget ] ); From 4450d2f15d3e944709402ad72ec83da03d5d57f2 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 00:38:10 -0400 Subject: [PATCH 17/33] Update customize-controls.css --- src/wp-admin/css/customize-controls.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index d30a205111..c990bbe625 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -2741,7 +2741,7 @@ body.adding-widget .add-new-widget:before, #available-widgets .widget-tpl, #available-menu-items .item-tpl { position: relative; - padding: 15px 15px 15px 60px; + padding: 15px; background: #fff; border-bottom: 1px solid #dcdcde; border-left: 4px solid #fff; From 819dd9005f27539357d97d5d4f5d894e5b30f25d Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 00:40:44 -0400 Subject: [PATCH 18/33] Update customize-widgets.css --- src/wp-admin/css/customize-widgets.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index c7ec77ce73..cc3d10897c 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -83,7 +83,8 @@ .widget-inside { padding: 1px 10px 10px; - border-top: none; + border: 0; + border-top: 1px solid #c3c4c7; line-height: 1.23076923; } @@ -249,11 +250,11 @@ border-left: 4px solid #2271b1; } -#customize-controls .widget-title h3 { +#customize-controls summary.widget-title { font-size: 1em; } -#available-widgets .widget-title h3 { +#available-widgets summary.widget-title { padding: 0 0 5px; font-size: 14px; } @@ -289,16 +290,15 @@ body.adding-widget #customize-preview { #available-widgets .widget-title { position: relative; + list-style: none; + padding: 10px 0; } #available-widgets .widget-title:before { content: "\f132"; - position: absolute; - top: -3px; - right: 100%; + position: inline; + vertical-align: sub; margin-right: 20px; - width: 20px; - height: 20px; color: #2c3338; font: normal 20px/1 dashicons; text-align: center; From 17a90a211be89e78fa91eb9fe69d525f152939dc Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 09:17:16 -0400 Subject: [PATCH 19/33] Update customize-widgets.css to ensure summary marker does not show in Safari --- src/wp-admin/css/customize-widgets.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index cc3d10897c..dd5f483965 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -294,6 +294,11 @@ body.adding-widget #customize-preview { padding: 10px 0; } +/* Fix for Safari */ +#available-widgets summary::-webkit-details-marker { + display: none; +} + #available-widgets .widget-title:before { content: "\f132"; position: inline; From a7fa30b90faf43f84bb87398fa5c7c6786e0101a Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 09:39:28 -0400 Subject: [PATCH 20/33] Update widgets.css to enable custom `summary` marker --- src/wp-admin/css/widgets.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index ef0e5f0eea..1de5920441 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -31,7 +31,7 @@ .widget-title h4, summary.widget-title { margin: 0; - padding: 15px; + padding: 12px 15px 15px 10px; font-size: 1em; line-height: 1; overflow: hidden; @@ -42,6 +42,25 @@ summary.widget-title { user-select: none; } +summary.widget-title { + list-style: none; +} + +summary.widget-title::before { + content: '\25B8'; + font-size: 1.4em; + cursor: pointer; +} + +details[open] > summary.widget-title::before { + content: '\25BE'; +} + +/* Fix for Safari */ +#available-widgets summary.widget-title::-webkit-details-marker { + display: none; +} + .widgets-holder-wrap .widget-inside { border: 0; border-top: 1px solid #c3c4c7; From ad7ddfb4e4521476e8fcf0c6464c3bae0bda7526 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 09:41:19 -0400 Subject: [PATCH 21/33] Update widgets.php to reinstate `

    ` header after feedback on dashboard widgets PR --- src/wp-admin/includes/widgets.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index baa9a61d15..fd2387863e 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -230,7 +230,7 @@ function wp_widget_control( $sidebar_args ) { echo $sidebar_args['before_widget']; ?>
    - +

    From f1bc455ca5d44be09e256a280e5da1c930a1b254 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 10:00:31 -0400 Subject: [PATCH 22/33] Update widgets.css to create custom markers for lists of widget --- src/wp-admin/css/widgets.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 1de5920441..ddf2334bb1 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -57,7 +57,7 @@ details[open] > summary.widget-title::before { } /* Fix for Safari */ -#available-widgets summary.widget-title::-webkit-details-marker { +summary.widget-title::-webkit-details-marker { display: none; } @@ -378,6 +378,23 @@ summary.sidebar-name { color: #1d2327; font-size: 1.3em; font-weight: 600; + list-style: none; +} + +summary.sidebar-name::before { + content: '\25B8'; + padding-right: 0.5em; + font-size: 1.2em; + cursor: pointer; +} + +details[open] > summary.sidebar-name::before { + content: '\25BE'; +} + +/* Fix for Safari */ +summary.sidebar-name::-webkit-details-marker { + display: none; } .widgets-holder-wrap .description { From 3a88703848f065b0e5f8e6862dbf231149036cc4 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 11:39:58 -0400 Subject: [PATCH 23/33] Update widgets.php to reinstate `

    ` headers --- src/wp-admin/includes/widgets.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index fd2387863e..5161481923 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -89,7 +89,7 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { echo '
    '; - echo '' . esc_html( $sidebar_name ) . ''; + echo '

    ' . esc_html( $sidebar_name ) . '

    '; if ( ! empty( $description ) ) { From a56c96c9d51f23d4519ce78239666db7626f0896 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 11:41:14 -0400 Subject: [PATCH 24/33] Update widgets-form.php to reinstate `

    ` headers --- src/wp-admin/widgets-form.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/widgets-form.php b/src/wp-admin/widgets-form.php index 07ba403a95..35870a2b36 100644 --- a/src/wp-admin/widgets-form.php +++ b/src/wp-admin/widgets-form.php @@ -422,7 +422,7 @@
    - +

    From 6833804c1ed2b048fbac58370037081696a2d19c Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 11:42:42 -0400 Subject: [PATCH 25/33] Update widgets.css to account for reinstatement of `

    ` headers --- src/wp-admin/css/widgets.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index ddf2334bb1..d43cb1ae25 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -371,6 +371,7 @@ summary.widget-title::-webkit-details-marker { overflow: hidden; white-space: normal; line-height: 1.5; + font-size: 1em; } summary.sidebar-name { From 21de5a98e041ec85dab3818afda68a044c42aee9 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 14:03:36 -0400 Subject: [PATCH 26/33] Update widgets.css to maintain marker spacing --- src/wp-admin/css/widgets.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index d43cb1ae25..196e200404 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -389,6 +389,10 @@ summary.sidebar-name::before { cursor: pointer; } +#widgets-right .widgets-holder-wrap > details > summary.sidebar-name::before { + padding-right: 0; +} + details[open] > summary.sidebar-name::before { content: '\25BE'; } From 0b17d3c47606cfbc0c7ad26a03447c4e514bac6b Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Sat, 7 Oct 2023 14:06:12 -0400 Subject: [PATCH 27/33] Update widgets.css --- src/wp-admin/css/widgets.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 196e200404..b418de8866 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -390,7 +390,7 @@ summary.sidebar-name::before { } #widgets-right .widgets-holder-wrap > details > summary.sidebar-name::before { - padding-right: 0; + padding-right: 0.2em; } details[open] > summary.sidebar-name::before { From 197f74a6f471e4f6c46f45142b2a87865b04d240 Mon Sep 17 00:00:00 2001 From: mattyrob Date: Sun, 8 Oct 2023 08:28:19 +0100 Subject: [PATCH 28/33] PHP Coding Standards --- src/wp-admin/includes/widgets.php | 2 +- src/wp-includes/class-wp-customize-widgets.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index 5161481923..307757aaaa 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -127,7 +127,7 @@ function wp_list_widget_controls_dynamic_sidebar( $params ) { $id = isset( $params[0]['_temp_id'] ) ? $params[0]['_temp_id'] : $widget_id; $tag = $pagenow === 'customize.php' ? 'div' : 'li'; // use correct semantic tag according to whether in customizer or not - $params[0]['before_widget'] = '<'. $tag . ' id="widget-' . $i . '_' . $id . '" class="widget open">'; + $params[0]['before_widget'] = '<' . $tag . ' id="widget-' . $i . '_' . $id . '" class="widget open">'; $params[0]['after_widget'] = ''; $params[0]['before_title'] = '%BEG_OF_TITLE%'; // Deprecated. $params[0]['after_title'] = '%END_OF_TITLE%'; // Deprecated. diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php index 594951add4..87c0f839bc 100644 --- a/src/wp-includes/class-wp-customize-widgets.php +++ b/src/wp-includes/class-wp-customize-widgets.php @@ -919,10 +919,10 @@ public function get_setting_args( $id, $overrides = array() ) { $args['transport'] = current_theme_supports( 'customize-selective-refresh-widgets' ) ? 'postMessage' : 'refresh'; } elseif ( preg_match( $this->setting_id_patterns['widget_instance'], $id, $matches ) ) { $id_base = $matches['id_base']; - $args['sanitize_callback'] = function( $value ) use ( $id_base ) { + $args['sanitize_callback'] = function ( $value ) use ( $id_base ) { return $this->sanitize_widget_instance( $value, $id_base ); }; - $args['sanitize_js_callback'] = function( $value ) use ( $id_base ) { + $args['sanitize_js_callback'] = function ( $value ) use ( $id_base ) { return $this->sanitize_widget_js_instance( $value, $id_base ); }; $args['transport'] = $this->is_widget_selective_refreshable( $matches['id_base'] ) ? 'postMessage' : 'refresh'; From d96cf9d15397f9ad54a1569ddd26ebeb24f0988a Mon Sep 17 00:00:00 2001 From: mattyrob Date: Sun, 8 Oct 2023 17:36:32 +0100 Subject: [PATCH 29/33] PHPUnit fixes --- src/wp-admin/includes/widgets.php | 2 +- tests/phpunit/tests/customize/widgets.php | 2 +- tests/phpunit/tests/widgets.php | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index 307757aaaa..83488edb80 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -127,7 +127,7 @@ function wp_list_widget_controls_dynamic_sidebar( $params ) { $id = isset( $params[0]['_temp_id'] ) ? $params[0]['_temp_id'] : $widget_id; $tag = $pagenow === 'customize.php' ? 'div' : 'li'; // use correct semantic tag according to whether in customizer or not - $params[0]['before_widget'] = '<' . $tag . ' id="widget-' . $i . '_' . $id . '" class="widget open">'; + $params[0]['before_widget'] = "<{$tag} id='widget-{$i}_{$id}' class='widget'>"; $params[0]['after_widget'] = ''; $params[0]['before_title'] = '%BEG_OF_TITLE%'; // Deprecated. $params[0]['after_title'] = '%END_OF_TITLE%'; // Deprecated. diff --git a/tests/phpunit/tests/customize/widgets.php b/tests/phpunit/tests/customize/widgets.php index dc596b296b..da50cac93f 100644 --- a/tests/phpunit/tests/customize/widgets.php +++ b/tests/phpunit/tests/customize/widgets.php @@ -458,7 +458,7 @@ public function test_wp_widget_form_customize_control_json() { $this->assertSame( 'widget_form', $params['type'] ); $this->assertMatchesRegularExpression( '#^]+>\s*

    • $#', $params['content'] ); - $this->assertMatchesRegularExpression( '#^]*class=\'widget\'[^>]*#s', $params['widget_control'] ); + $this->assertMatchesRegularExpression( '#^]*class=\'widget\'[^>]*#s', $params['widget_control'] ); $this->assertStringContainsString( '
    ', $params['widget_control'] ); $this->assertStringNotContainsString( 'assertStringContainsString( 'assertNotEmpty( $control ); - $this->assertStringContainsString( '
    ', $control ); + $this->assertStringContainsString( '
    ', $control ); $this->assertStringContainsString( '
    ', $control ); - $this->assertStringContainsString( '
    ', $control ); + $this->assertStringContainsString( '', $control ); $this->assertStringContainsString( '
    ', $control ); $this->assertStringContainsString( '
    ', $control ); $this->assertStringContainsString( ' Date: Sun, 8 Oct 2023 17:46:04 +0100 Subject: [PATCH 30/33] JSHint fixes --- src/wp-admin/js/customize-widgets.js | 4 +-- src/wp-admin/js/widgets.js | 31 +++++++++---------- .../js/widgets/custom-html-widgets.js | 2 +- src/wp-admin/js/widgets/media-widgets.js | 2 +- src/wp-admin/js/widgets/text-widgets.js | 2 +- 5 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js index 26c155f944..c24c8f355c 100644 --- a/src/wp-admin/js/customize-widgets.js +++ b/src/wp-admin/js/customize-widgets.js @@ -701,7 +701,7 @@ _setupControlToggle: function() { var self = this, $closeBtn; - this.container.find( '.widget-top' ).on( 'click', function( e ) { + this.container.find( '.widget-top' ).on( 'click', function() { var sidebarWidgetsControl = self.getSidebarWidgetsControl(); if ( sidebarWidgetsControl.isReordering ) { return; @@ -1400,7 +1400,7 @@ * @param {Object} args merged on top of this.defaultActiveArguments */ onChangeExpanded: function ( expanded, args ) { - var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn; + var self = this, $widget, $inside, complete, prevComplete, expandControl, $details; self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI. if ( expanded ) { diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index d75fc928db..2a8a70a235 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -28,24 +28,24 @@ window.wpWidgets = { chooser = $('.widgets-chooser'), selectSidebar = chooser.find('.widgets-chooser-sidebars'), sidebars = $('ul.widgets-sortables'), - sidebarWrappers = $( '.widgets-holder-wrap' ); + sidebarWrappers = $( '.widgets-holder-wrap' ), isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );// Refresh the widgets containers in the right column. - + document.querySelector( '#widgets-right details' ).setAttribute( 'open', 'open' ); document.querySelector( '.inactive-sidebar .sidebar-name' ).parentElement.setAttribute( 'open', 'open' ); // Hide elements on the Inactive Sidebar. - document.querySelector( '.inactive-sidebar .sidebar-name' ).addEventListener( 'click', (e) => { + document.querySelector( '.inactive-sidebar .sidebar-name' ).addEventListener( 'click', function( e ) { e.target.parentElement.nextElementSibling.classList.toggle( 'hidden' ); e.target.closest( '.widget-holder' ).nextElementSibling.classList.toggle( 'hidden' ); - }); + }); // Update the admin menu "sticky" state. $( '#widgets-left .sidebar-name' ).on( 'click', function() { $document.triggerHandler( 'wp-pin-menu' ); }); - $( '#widgets-right summary' ).on( 'click', function() { + $( '#widgets-right summary' ).on( 'click', function() { $document.triggerHandler( 'wp-pin-menu' ); }); @@ -84,8 +84,7 @@ window.wpWidgets = { $(document.body).on('click.widgets-toggle', function(e) { var target = $(e.target), css = {}, - widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId, - toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' ); + widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId; if ( target.parents('.widget-top').length && ! target.parents('.widget-inside').length && ! target.parents('#available-widgets').length ) { widget = target.closest('li.widget'); @@ -178,7 +177,7 @@ window.wpWidgets = { */ sidebars.droppable( { tolerance: 'intersect', - over: function( event ) { + over: function() { $( this ).sortable( 'refresh' ); } } ); @@ -214,13 +213,13 @@ window.wpWidgets = { * * @param {Object} event jQuery event object. */ - out: function( event ) { - setTimeout( () => { + out: function() { + setTimeout( function() { var sidebar = this.querySelector( 'ul' ); if ( ! sidebar.classList.contains( 'ui-droppable-hover' ) ) { this.querySelector( 'details' ).removeAttribute( 'open' ); } - }, 0); + }, 0 ); } } ); @@ -398,14 +397,14 @@ window.wpWidgets = { chooserButtons = selectSidebar.find( '.widgets-chooser-button' ); if ( document.querySelector( 'body' ).classList.contains( 'widgets-php' ) ) { - widgetTops.forEach( ( top ) => { + widgetTops.forEach( function ( top ) { top.addEventListener( 'click', function( e ) { // Open the chooser. if ( ! e.target.closest( 'details' ).hasAttribute( 'open' ) ) { self.clearWidgetSelection(); document.getElementById( 'widgets-left' ).classList.add( 'chooser' ); - + chooserButtons.on( 'click.widgets-chooser', function() { selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' ); chooserButtons.attr( 'aria-pressed', 'false' ); @@ -428,13 +427,13 @@ window.wpWidgets = { // Add event handlers for choosers. var widgetActions = document.querySelectorAll( '.widgets-chooser-actions' ); - widgetActions.forEach( ( action ) => { + widgetActions.forEach( function ( action ) { action.addEventListener( 'click', function( e ) { if ( e.target.classList.contains( 'button-primary' ) ) { self.addWidget( chooser ); } e.target.closest( '.widget-top' ).removeAttribute( 'open' ); - setTimeout( () => { + setTimeout( function () { document.querySelector( '.chooser' ).classList.remove( 'chooser' ); }, 0 ); }); @@ -442,7 +441,7 @@ window.wpWidgets = { // Enable Escape key. var openWidgets = document.querySelectorAll( '.widget.open' ); - openWidgets.forEach( ( widget ) => { + openWidgets.forEach( function ( widget ) { widget.addEventListener( 'keyup', function( e ) { if ( e.key === 'Escape' ) { e.target.closest( '.widget-top' ).removeAttribute( 'open' ); diff --git a/src/wp-admin/js/widgets/custom-html-widgets.js b/src/wp-admin/js/widgets/custom-html-widgets.js index 20d15527fc..1729e8c61c 100644 --- a/src/wp-admin/js/widgets/custom-html-widgets.js +++ b/src/wp-admin/js/widgets/custom-html-widgets.js @@ -350,7 +350,7 @@ wp.customHtmlWidgets = ( function( $ ) { * @return {void} */ component.setupAccessibleMode = function setupAccessibleMode() { - var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; + var widgetForm, widgetContainer, idBase, widgetControl, fieldContainer, syncContainer; widgetForm = $( '.editwidget > form' ); if ( 0 === widgetForm.length ) { return; diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js index 4815adf8dd..d00e70ac91 100644 --- a/src/wp-admin/js/widgets/media-widgets.js +++ b/src/wp-admin/js/widgets/media-widgets.js @@ -1206,7 +1206,7 @@ wp.mediaWidgets = ( function( $ ) { * @return {void} */ component.setupAccessibleMode = function setupAccessibleMode() { - var widgetForm, widgetId, idBase, widgetControl, ControlConstructor, ModelConstructor, modelAttributes, fieldContainer, syncContainer; + var widgetForm, widgetId, widgetContainer, idBase, widgetControl, ControlConstructor, ModelConstructor, modelAttributes, fieldContainer, syncContainer; widgetForm = $( '.editwidget > form' ); if ( 0 === widgetForm.length ) { return; diff --git a/src/wp-admin/js/widgets/text-widgets.js b/src/wp-admin/js/widgets/text-widgets.js index 7346d2e45f..925c36a362 100644 --- a/src/wp-admin/js/widgets/text-widgets.js +++ b/src/wp-admin/js/widgets/text-widgets.js @@ -424,7 +424,7 @@ wp.textWidgets = ( function( $ ) { * @return {void} */ component.setupAccessibleMode = function setupAccessibleMode() { - var widgetForm, idBase, widgetControl, fieldContainer, syncContainer; + var widgetForm, widgetContainer, idBase, widgetControl, fieldContainer, syncContainer; widgetForm = $( '.editwidget > form' ); if ( 0 === widgetForm.length ) { return; From 8d6a656a88f0590720d3703cf19347fe26b2c2e2 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Mon, 9 Oct 2023 17:32:14 -0400 Subject: [PATCH 31/33] Update widgets.js to address error message in console --- src/wp-admin/js/widgets.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js index 2a8a70a235..3795b30e13 100644 --- a/src/wp-admin/js/widgets.js +++ b/src/wp-admin/js/widgets.js @@ -213,11 +213,11 @@ window.wpWidgets = { * * @param {Object} event jQuery event object. */ - out: function() { + out: function( event ) { setTimeout( function() { - var sidebar = this.querySelector( 'ul' ); + var sidebar = event.target.querySelector( 'ul' ); if ( ! sidebar.classList.contains( 'ui-droppable-hover' ) ) { - this.querySelector( 'details' ).removeAttribute( 'open' ); + event.target.querySelector( 'details' ).removeAttribute( 'open' ); } }, 0 ); } From bd953ad0d6b06066b547a260468a365eaa3db9a5 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Mon, 9 Oct 2023 17:46:27 -0400 Subject: [PATCH 32/33] Update media-widgets.js to make widget open when added to sidebar --- src/wp-admin/js/widgets/media-widgets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js index d00e70ac91..bb5df855f8 100644 --- a/src/wp-admin/js/widgets/media-widgets.js +++ b/src/wp-admin/js/widgets/media-widgets.js @@ -1182,7 +1182,7 @@ wp.mediaWidgets = ( function( $ ) { * can initialize with the proper dimensions. */ renderWhenAnimationDone = function() { - if ( ! widgetContainer.hasClass( 'open' ) ) { + if ( ! widgetContainer.children( 'details' ).attr( 'open' ) ) { setTimeout( renderWhenAnimationDone, animatedCheckDelay ); } else { widgetControl.render(); From 937fedf626baf9f1a4cda5bc987ad70c95296095 Mon Sep 17 00:00:00 2001 From: Tim Kaye Date: Tue, 10 Oct 2023 08:58:10 -0400 Subject: [PATCH 33/33] Update widgets.css to use native disclosure widget marker, but enlarged I have just read an article by Scott O'Hara (https://www.scottohara.me/blog/2022/09/12/details-summary.html), where he says that removing the native marker for the disclosure widget can cause accessibility problems because some assistive technology looks to the marker instead of the status of the `open` attribute to know whether the widget is open or not! Yes, it's completely crazy! So this commit goes back to using the native marker but makes it bigger. Which, really, I suppose is what I should have done in the first place. I will submit a PR to make a similar change for the dashboard widgets, post metaboxes, and menu items that we've already included. --- src/wp-admin/css/widgets.css | 36 ++++++------------------------------ 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index b418de8866..cde369954d 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -42,25 +42,16 @@ summary.widget-title { user-select: none; } -summary.widget-title { - list-style: none; +.widget-title h3 { + padding-left: 5px; } -summary.widget-title::before { - content: '\25B8'; +summary.widget-title::marker, +summary.widget-title::-webkit-details-marker { font-size: 1.4em; cursor: pointer; } -details[open] > summary.widget-title::before { - content: '\25BE'; -} - -/* Fix for Safari */ -summary.widget-title::-webkit-details-marker { - display: none; -} - .widgets-holder-wrap .widget-inside { border: 0; border-top: 1px solid #c3c4c7; @@ -379,29 +370,14 @@ summary.sidebar-name { color: #1d2327; font-size: 1.3em; font-weight: 600; - list-style: none; } -summary.sidebar-name::before { - content: '\25B8'; - padding-right: 0.5em; +summary.sidebar-name::marker, +summary.sidebar-name::-webkit-details-marker { font-size: 1.2em; cursor: pointer; } -#widgets-right .widgets-holder-wrap > details > summary.sidebar-name::before { - padding-right: 0.2em; -} - -details[open] > summary.sidebar-name::before { - content: '\25BE'; -} - -/* Fix for Safari */ -summary.sidebar-name::-webkit-details-marker { - display: none; -} - .widgets-holder-wrap .description { padding: 0 0 15px; margin: 0;