Merge branch 'develop' into trunk

Author: tlovett1

.eslintignore

@@ -0,0 +1 @@
+example

.eslintrc

@@ -1,3 +1,6 @@
 {
-    "extends": ["@10up/eslint-config/wordpress"]
+    "extends": ["@10up/eslint-config/react"],
+    "rules": {
+        "import/no-unresolved": 0
+    }
 }

.gitignore

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules
 .vscode

components/ContentPicker/PickedItem.js

@@ -5,6 +5,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { sortableHandle } from 'react-sortable-hoc';
+import { useEffect } from '@wordpress/element';
 
 /**
  * PickedItem
@@ -44,12 +45,17 @@ const Wrapper = styled('div')`
 	}
 `;
 
-const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode }) => {
+const PickedItem = ({ item, isOrderable, handleItemDelete, mode }) => {
 	const type = mode === 'post' ? 'postType' : 'taxonomy';
 
+	// This will return undefined while the item data is being fetched. If the item comes back
+	// empty, it will return null, which is handled in the effect below.
 	const preparedItem = useSelect(
 		(select) => {
-			const result = select('core').getEntityRecord(type, item.type, item.id);
+			const { getEntityRecord, hasFinishedResolution } = select('core');
+
+			const getEntityRecordParameters = [type, item.type, item.id];
+			const result = getEntityRecord(...getEntityRecordParameters);
 
 			if (result) {
 				return {
@@ -59,11 +65,22 @@ const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode }) =>
 				};
 			}
 
-			return null;
+			if (hasFinishedResolution('getEntityRecord', getEntityRecordParameters)) {
+				return null;
+			}
+
+			return undefined;
 		},
 		[item.id, type],
 	);
 
+	// If `getEntityRecord` did not return an item, pass it to the delete callback.
+	useEffect(() => {
+		if (preparedItem === null) {
+			handleItemDelete(item);
+		}
+	}, [item, handleItemDelete, preparedItem]);
+
 	return preparedItem ? (
 		<Wrapper
 			style={{
@@ -87,7 +104,7 @@ const PickedItem = ({ item, isOrderable, handleItemDelete, sortIndex, mode }) =>
 			<button
 				type="button"
 				onClick={() => {
-					handleItemDelete(preparedItem, sortIndex);
+					handleItemDelete(preparedItem);
 				}}
 				aria-label={__('Delete item', '10up-block-components')}
 			>
@@ -107,7 +124,6 @@ PickedItem.propTypes = {
 	item: PropTypes.object.isRequired,
 	isOrderable: PropTypes.bool,
 	handleItemDelete: PropTypes.func.isRequired,
-	sortIndex: PropTypes.number.isRequired,
 	mode: PropTypes.string.isRequired,
 };
 

components/ContentPicker/index.js

@@ -2,17 +2,32 @@ import PropTypes from 'prop-types';
 import arrayMove from 'array-move';
 import styled from '@emotion/styled';
 import { select } from '@wordpress/data';
-import { useState } from '@wordpress/element'; // eslint-disable-line
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { ContentSearch } from '../ContentSearch';
 import SortableList from './SortableList';
 
 const NAMESPACE = '10up-content-picker';
 
+/**
+ * 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 !important;
+		cursor: default;
+
+		&:hover {
+			background: transparent;
+		}
+	}
+`;
+
 /**
  * Content Picker
  *
- * @param {Object} props React props
+ * @param {object} props React props
  * @param props.label
  * @param props.mode
  * @param props.contentTypes
@@ -25,7 +40,7 @@ const NAMESPACE = '10up-content-picker';
  * @param props.content
  * @param props.uniqueContentItems
  * @param props.excludeCurrentPost
- * @return {*} React JSX
+ * @returns {*} React JSX
  */
 const ContentPicker = ({
 	label,
@@ -54,55 +69,40 @@ const ContentPicker = ({
 		}
 	}
 
-	function handleSelect(item) {
-		const newContent = [...content];
-
-		newContent.unshift({
-			id: item.id,
-			type: 'subtype' in item ? item.subtype : item.type,
-		});
-
-		onPickChange(newContent);
-
-		setContent(newContent);
-	}
-
-	function handleItemDelete(item, sortIndex) {
-		const newContent = [...content];
-
-		newContent.splice(sortIndex, 1);
-
-		onPickChange(newContent);
-
-		setContent(newContent);
-	}
-
-	/**
-	 * 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 !important;
-			cursor: default;
-
-			&:hover {
-				background: transparent;
-			}
+	// Run onPickChange callback when content changes.
+	useEffect(() => {
+		onPickChange(content);
+	}, [content, onPickChange]);
+
+	const handleSelect = (item) => {
+		setContent((previousContent) => [
+			{
+				id: item.id,
+				type: 'subtype' in item ? item.subtype : item.type,
+			},
+			...previousContent,
+		]);
+	};
+
+	const onDeleteItem = (deletedItem) => {
+		setContent((previousContent) => previousContent.filter(({ id }) => id !== deletedItem.id));
+	};
+
+	const excludeItems = useMemo(() => {
+		const items = uniqueContentItems ? [...content] : [];
+
+		if (excludeCurrentPost && currentPostId) {
+			items.push({
+				id: currentPostId,
+			});
 		}
-	`;
-
-	const excludeItems = uniqueContentItems ? [...content] : [];
 
-	if (excludeCurrentPost && currentPostId) {
-		excludeItems.push({
-			id: currentPostId,
-		});
-	}
+		return items;
+	}, [content, currentPostId, excludeCurrentPost, uniqueContentItems]);
 
 	return (
 		<div className={`${NAMESPACE}`}>
-			{!content.length || (content.length && content.length < maxContentItems) ? (
+			{(!content.length || (content.length && content.length < maxContentItems)) && (
 				<ContentSearch
 					placeholder={placeholder}
 					label={label}
@@ -111,8 +111,8 @@ const ContentPicker = ({
 					contentTypes={contentTypes}
 					mode={mode}
 				/>
-			) : null}
-			{content.length ? (
+			)}
+			{Boolean(content?.length) > 0 && (
 				<StyleWrapper>
 					<span
 						style={{
@@ -127,19 +127,17 @@ const ContentPicker = ({
 					<SortableList
 						items={content}
 						useDragHandle
+						handleItemDelete={onDeleteItem}
 						isOrderable={isOrderable}
 						mode={mode}
-						handleItemDelete={handleItemDelete}
 						onSortEnd={({ oldIndex, newIndex }) => {
 							const newContent = [...arrayMove(content, oldIndex, newIndex)];
 
-							onPickChange(newContent);
-
 							setContent(newContent);
 						}}
 					/>
 				</StyleWrapper>
-			) : null}
+			)}
 		</div>
 	);
 };

components/ContentSearch/index.js

@@ -57,7 +57,7 @@ const ContentSearch = ({ onSelectItem, placeholder, label, contentTypes, mode, e
 
 		const searchQuery = `wp/v2/search/?search=${keyword}&subtype=${contentTypes.join(
 			',',
-		)}&type=${mode}`;
+		)}&type=${mode}&_embed`;
 
 		if (searchCache[searchQuery]) {
 			setSearchResults(searchCache[searchQuery]);

example/.eslintrc

@@ -1,3 +1,3 @@
 {
-    "extends": "@wordpress/eslint-plugin"
+    "extends": ["@10up/eslint-config/react"]
 }