Merge branch 'picker-fixes' into trunk

Author: tlovett1

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,19 @@ 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'
 			}}
 			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>

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}

components/ContentPicker/index.js

@@ -139,9 +139,18 @@ 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;
+			cursor: default;
+
+			&:hover {
+				background: transparent;
+			}
 		}
 	`;
 
@@ -215,6 +224,7 @@ const ContentPicker = ({
 
 					<SortableList
 						items={content}
+						useDragHandle
 						isOrderable={isOrderable}
 						mode={mode}
 						handleItemDelete={handleItemDelete}

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": {