Changeset 47263

Timestamp:

02/11/2020 03:24:47 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Widgets: Prevent currently active wide widget controls from being partially covered by another widget's controls.

The currently active widget controls should always be displayed on top.

Props audrasjb, fervillz, rinkuyadav999, jaydeep23290, ashokrd2013, melchoyce, pento, westonruter, SergeyBiryukov.
Fixes #42001.

Location:

trunk/src

Files:

• js/_enqueues/admin/widgets.js (modified) (2 diffs)
• wp-admin/css/widgets.css (modified) (1 diff)

trunk/src/js/_enqueues/admin/widgets.js

@@ -128 +128 @@
 
         $(document.body).bind('click.widgets-toggle', function(e) {
-            var target = $(e.target),
-                css = { 'z-index': 100 },
+            var target = $(e.target), css = {},
                 widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,
                 toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );
@@ -213 +212 @@
             distance: 2,
             helper: 'clone',
-            zIndex: 100,
+            zIndex: 101,
             containment: '#wpwrap',
             refreshPositions: true,

trunk/src/wp-admin/css/widgets.css

@@ -5 +5 @@
     position: relative;
     box-sizing: border-box;
+}
+
+.widget.open {
+    z-index: 99;
+}
+.widget.open:focus-within {
+    z-index: 100;
 }