Fix: Drag & Drop does not work on the widgets screen (#19029)

WordPress · Dec 10, 2019 · acd5477 · acd5477
1 parent ed66431
commit acd5477
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
  navigateRegions,
+ DropZoneProvider,
  Popover,
  SlotFillProvider,
 } from '@wordpress/components';
@@ -21,25 +22,27 @@ function Layout( { blockEditorSettings } ) {
  const [ selectedArea, setSelectedArea ] = useState( null );
  return (
  <SlotFillProvider>
- <Header />
- <Sidebar />
- <Notices />
- <div
- className="edit-widgets-layout__content"
- role="region"
- aria-label={ __( 'Widgets screen content' ) }
- tabIndex="-1"
- onFocus={ () => {
- setSelectedArea( null );
- } }
- >
- <WidgetAreas
- selectedArea={ selectedArea }
- setSelectedArea={ setSelectedArea }
- blockEditorSettings={ blockEditorSettings }
- />
- </div>
- <Popover.Slot />
+ <DropZoneProvider>
+ <Header />
+ <Sidebar />
+ <Notices />
+ <div
+ className="edit-widgets-layout__content"
+ role="region"
+ aria-label={ __( 'Widgets screen content' ) }
+ tabIndex="-1"
+ onFocus={ () => {
+ setSelectedArea( null );
+ } }
+ >
+ <WidgetAreas
+ selectedArea={ selectedArea }
+ setSelectedArea={ setSelectedArea }
+ blockEditorSettings={ blockEditorSettings }
+ />
+ </div>
+ <Popover.Slot />
+ </DropZoneProvider>
  </SlotFillProvider>
  );
 }

diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss
@@ -20,4 +20,5 @@
 
 .edit-widgets-main-block-list > .block-list-appender {
  padding-top: $panel-padding;
+ position: relative;
 }