Disable the innerBlocks dropzones so drag drop works same as existing…

… gallery - with the idea that we will improve the innerblocks drag and drop in a later PR
WordPress · Nov 5, 2020 · cc05d60 · cc05d60
1 parent 38ab027
commit cc05d60
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -49,6 +49,7 @@ function UncontrolledInnerBlocks( props ) {
 		__experimentalAppenderTagName,
 		renderAppender,
 		orientation,
+		dropZonesDisabled,
 		placeholder,
 		__experimentalLayout: layout = defaultLayout,
 	} = props;
@@ -58,7 +59,8 @@ function UncontrolledInnerBlocks( props ) {
 		allowedBlocks,
 		templateLock,
 		captureToolbars,
-		orientation
+		orientation,
+		dropZonesDisabled,
 	);
 
 	useInnerBlockTemplateSync(

diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -28,7 +28,8 @@ export default function useNestedSettingsUpdate(
 	allowedBlocks,
 	templateLock,
 	captureToolbars,
-	orientation
+	orientation,
+	dropZonesDisabled,
 ) {
 	const { updateBlockListSettings } = useDispatch( 'core/block-editor' );
 
@@ -65,6 +66,9 @@ export default function useNestedSettingsUpdate(
 		if ( orientation !== undefined ) {
 			newSettings.orientation = orientation;
 		}
+		if ( dropZonesDisabled !== undefined ) {
+			newSettings.dropZonesDisabled = dropZonesDisabled;
+		}
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
 			updateBlockListSettings( clientId, newSettings );
@@ -77,6 +81,7 @@ export default function useNestedSettingsUpdate(
 		parentLock,
 		captureToolbars,
 		orientation,
+		dropZonesDisabled,
 		updateBlockListSettings,
 	] );
 }
diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -98,12 +98,14 @@ export default function useBlockDropZone( {
 } ) {
 	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
 
-	const { isLockedAll, orientation } = useSelect(
+	const { isLockedAll, orientation, isDropZonesDisabled } = useSelect(
 		( select ) => {
 			const { getBlockListSettings, getTemplateLock } = select(
 				'core/block-editor'
 			);
 			return {
+				isDropZonesDisabled: getBlockListSettings( targetRootClientId )
+				?.dropZonesDisabled,
 				isLockedAll: getTemplateLock( targetRootClientId ) === 'all',
 				orientation: getBlockListSettings( targetRootClientId )
 					?.orientation,
@@ -119,7 +121,7 @@ export default function useBlockDropZone( {
 
 	const { position } = useDropZone( {
 		element,
-		isDisabled: isLockedAll,
+		isDisabled: isLockedAll || isDropZonesDisabled,
 		withPosition: true,
 		...dropEventHandlers,
 	} );

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -2,8 +2,13 @@
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
+
 	li {
 		list-style-type: none;
+		.components-drop-zone {
+			display: none;
+			pointer-events: none;
+		}
 	}
 
 	// @todo: this deserves a refactor, by being moved to the toolbar.

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -44,6 +44,7 @@ export const Gallery = ( props ) => {
 		},
 		{
 			allowedBlocks: [ 'core/image' ],
+			dropZonesDisabled: true,
 			orientation: 'horizontal',
 			renderAppender: false,
 			__experimentalLayout: { type: 'default', alignments: [] },