From 1f3869e9f2a2a4f481659d73320900d333406886 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Sat, 13 Feb 2021 19:42:10 -0500
Subject: [PATCH 1/3] Use proper WP drag handle; don't show drag handle if only
 1 item

---
 components/ContentPicker/PickedItem.js   | 20 +++++++++++++-------
 components/ContentPicker/SortableList.js |  2 +-
 components/ContentPicker/index.js        |  7 ++++++-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/components/ContentPicker/PickedItem.js b/components/ContentPicker/PickedItem.js
index 39d9cf28..1ee66809 100644
--- a/components/ContentPicker/PickedItem.js
+++ b/components/ContentPicker/PickedItem.js
@@ -3,6 +3,7 @@ import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { sortableHandle } from 'react-sortable-hoc';
 /** @jsxImportSource @emotion/react */
 import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
 
@@ -12,6 +13,9 @@ import { jsx } from '@emotion/react'; // eslint-disable-line no-unused-vars
  * @param {Object} props react props
  * @return {*} React JSX
  */
+
+const DragHandle = sortableHandle(() => <svg style={{ marginRight: '5px', cursor: 'grab' }} width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" role="img" aria-hidden="true" focusable="false"><path d="M5 4h2V2H5v2zm6-2v2h2V2h-2zm-6 8h2V8H5v2zm6 0h2V8h-2v2zm-6 6h2v-2H5v2zm6 0h2v-2h-2v2z"></path></svg>);
+
 const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode, totalItems }) => {
 	const type = mode === 'post' ? 'postType' : 'taxonomy';
 
@@ -34,18 +38,20 @@ const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode, tota
 
 	return preparedItem ? (
 		<div
-			css={{
-				cursor: isOrderable && totalItems > 1 ? 'move' : 'default',
+			style={{
 				border: '2px dashed #ddd',
-				':hover': !isOrderable
-					? {
-							backgroundColor: 'transparent',
-					  }
-					: '',
+				paddingTop: '10px',
+				paddingBottom: '10px',
+				paddingLeft: isOrderable ? '3px' : '8px',
+				paddingRight: '3px'
 			}}
 			className="block-editor-link-control__search-item is-entity"
 		>
+			{isOrderable ?
+				<DragHandle />
+			: '' }
 			<span className="block-editor-link-control__search-item-header">
+
 				<span className="block-editor-link-control__search-item-title">
 					{decodeEntities(preparedItem.title)}
 				</span>
diff --git a/components/ContentPicker/SortableList.js b/components/ContentPicker/SortableList.js
index d9d2d45b..4e14171f 100644
--- a/components/ContentPicker/SortableList.js
+++ b/components/ContentPicker/SortableList.js
@@ -7,7 +7,7 @@ const SortableList = SortableContainer(({ items, isOrderable, handleItemDelete,
 		<div>
 			{items.map((item, index) => (
 				<ItemComponent
-					isOrderable={isOrderable}
+					isOrderable={isOrderable && items.length > 1 ? isOrderable : false}
 					key={`item-${item.id}`}
 					index={index}
 					handleItemDelete={handleItemDelete}
diff --git a/components/ContentPicker/index.js b/components/ContentPicker/index.js
index 2510aacd..2ed00ce0 100644
--- a/components/ContentPicker/index.js
+++ b/components/ContentPicker/index.js
@@ -139,9 +139,13 @@ const ContentPicker = ({
 	const hasSearchString = !!searchString.length;
 	const hasSearchResults = !!searchResults.length;
 
+	/**
+	 * Unfortunately, we had to use !important because on PickedItem we couldn't @emotion/styled css
+	 * as it was breaking sortability from react-sortable-hoc
+	 */
 	const StyleWrapper = styled('div')`
 		& .block-editor-link-control__search-item {
-			border: none;
+			border: none !important;
 		}
 	`;
 
@@ -215,6 +219,7 @@ const ContentPicker = ({
 
 					<SortableList
 						items={content}
+						useDragHandle
 						isOrderable={isOrderable}
 						mode={mode}
 						handleItemDelete={handleItemDelete}

From 26aa5b29c3e72406282f343771333716d2e5dc83 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Sat, 13 Feb 2021 20:12:03 -0500
Subject: [PATCH 2/3] Styling for the picked items

---
 components/ContentPicker/PickedItem.js | 3 +--
 components/ContentPicker/index.js      | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/ContentPicker/PickedItem.js b/components/ContentPicker/PickedItem.js
index 1ee66809..76e52854 100644
--- a/components/ContentPicker/PickedItem.js
+++ b/components/ContentPicker/PickedItem.js
@@ -42,8 +42,7 @@ const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode, tota
 				border: '2px dashed #ddd',
 				paddingTop: '10px',
 				paddingBottom: '10px',
-				paddingLeft: isOrderable ? '3px' : '8px',
-				paddingRight: '3px'
+				paddingLeft: isOrderable ? '3px' : '8px'
 			}}
 			className="block-editor-link-control__search-item is-entity"
 		>
diff --git a/components/ContentPicker/index.js b/components/ContentPicker/index.js
index 2ed00ce0..9e959105 100644
--- a/components/ContentPicker/index.js
+++ b/components/ContentPicker/index.js
@@ -146,6 +146,11 @@ const ContentPicker = ({
 	const StyleWrapper = styled('div')`
 		& .block-editor-link-control__search-item {
 			border: none !important;
+			cursor: default;
+
+			&:hover {
+				background: transparent;
+			}
 		}
 	`;
 

From 21e08c56dba6872530575411ef8d72e8815afda5 Mon Sep 17 00:00:00 2001
From: Taylor Lovett <tlovett88@gmail.com>
Date: Sat, 13 Feb 2021 20:12:58 -0500
Subject: [PATCH 3/3] Bump version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b63c3237..934a5f0c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "10up Components built for the WordPress Block Editor.",
   "main": "index.js",
   "scripts": {