Add drag icon and remove from quick inserter

WordPress · Dec 15, 2020 · 7722a7f · 7722a7f
1 parent 78d8ca0
commit 7722a7f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
@@ -20,6 +20,7 @@ function BlockTypesList( {
 	onHover = () => {},
 	children,
 	label,
+	isDraggable = true,
 } ) {
 	const composite = useCompositeState();
 	const orderId = items.reduce( ( acc, item ) => acc + '--' + item.id, '' );
@@ -50,6 +51,7 @@ function BlockTypesList( {
 						onSelect={ onSelect }
 						onHover={ onHover }
 						composite={ composite }
+						isDraggable={ isDraggable }
 					/>
 				);
 			} ) }

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -26,6 +26,7 @@ function InserterListItem( {
 	item,
 	onSelect,
 	onHover,
+	isDraggable,
 	...props
 } ) {
 	const isDragging = useRef( false );
@@ -47,7 +48,7 @@ function InserterListItem( {
 
 	return (
 		<InserterListItemDraggable
-			isEnabled={ ! item.disabled }
+			isEnabled={ isDraggable && ! item.disabled }
 			blocks={ blocks }
 			icon={ item.icon }
 		>

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -62,6 +62,10 @@
 		transition: all 0.15s ease-out;
 		@include reduce-motion("transition");
 	}
+
+	.block-editor-block-types-list__list-item[draggable="true"] & {
+		cursor: grab;
+	}
 }
 
 .block-editor-block-types-list__item-title {

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -107,6 +107,7 @@ export default function QuickInserter( {
 					selectBlockOnInsert={ selectBlockOnInsert }
 					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
+					isDraggable={ false }
 				/>
 			</div>
 

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -36,6 +36,7 @@ function InserterSearchResults( {
 	maxBlockPatterns,
 	maxBlockTypes,
 	showBlockDirectory = false,
+	isDraggable = true,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -116,6 +117,7 @@ function InserterSearchResults( {
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
 						label={ __( 'Blocks' ) }
+						isDraggable={ isDraggable }
 					/>
 				</InserterPanel>
 			) }