Merge branch 'develop' into fix/274-safari-missing-icons

components/content-picker/index.js

@@ -38,6 +38,7 @@ const ContentPickerWrapper = styled.div`
  *
  * @param {object} props React props
  * @param {string} props.label label for the picker
+ * @param {boolean} props.hideLabelFromVision whether or not to hide the label from vision
  * @param {string} props.mode mode of the picker
  * @param {Array} props.contentTypes array of content types to filter by
  * @param {string} props.placeholder placeholder text for the search input
@@ -57,6 +58,7 @@ const ContentPickerWrapper = styled.div`
  */
 const ContentPicker = ({
 	label,
+	hideLabelFromVision,
 	mode,
 	contentTypes,
 	placeholder,
@@ -130,6 +132,7 @@ const ContentPicker = ({
 					<ContentSearch
 						placeholder={placeholder}
 						label={label}
+						hideLabelFromVision={hideLabelFromVision}
 						excludeItems={excludeItems}
 						onSelectItem={handleSelect}
 						contentTypes={contentTypes}
@@ -184,6 +187,7 @@ const ContentPicker = ({
 
 ContentPicker.defaultProps = {
 	label: '',
+	hideLabelFromVision: true,
 	mode: 'post',
 	onPickChange: (ids) => {
 		console.log('Content picker list change', ids); // eslint-disable-line no-console
@@ -209,6 +213,7 @@ ContentPicker.propTypes = {
 	placeholder: PropTypes.string,
 	mode: PropTypes.oneOf(['post', 'user', 'term']),
 	label: PropTypes.string,
+	hideLabelFromVision: PropTypes.bool,
 	multiPickedLabel: PropTypes.string,
 	singlePickedLabel: PropTypes.string,
 	isOrderable: PropTypes.bool,

components/content-picker/readme.md

@@ -28,7 +28,8 @@ function MyComponent( props ) {
 |----------------------|------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `onPickChange`        | `function` | `undefined`          | Callback function the list of picked content gets changed                                                                                                                                                                                                                                                                                                                                                              |
 | `queryFilter`         | `function` | `undefined`          | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter                                                                                                                                                                                                                                                                                         |
-| `label`               | `string`   | `''`                 | Renders a label for the Search Field.                                                                                                                                                                                                                                                                                                                                                                                  |
+| `label`               | `string`   | `''`                 | Renders a label for the Search Field.
+| `hideLabelFromVision` | `bool`     | `true`               | Whether to hide the label |
 | `mode`                | `string`   | `'post'`             | One of: `post`, `user`, `term`                                                                                                                                                                                                                                                                                                                                                                                         |
 | `placeholder`         | `string`   | `''`                 | Renders placeholder text inside the Search Field.                                                                                                                                                                                                                                                                                                                                                                      |
 | `contentTypes`        | `array`    | `[ 'post', 'page' ]` | Names of the post types or taxonomies that should get searched                                                                                                                                                                                                                                                                                                                                                         |

components/content-search/SearchItem.js

@@ -36,6 +36,7 @@ const ButtonStyled = styled(Button)`
 		padding: 2px 4px;
 		text-transform: capitalize;
 		border-radius: 2px;
+		flex-shrink: 0;
 	}
 
 	.block-editor-link-control__search-item-header {

components/content-search/index.js

@@ -1,4 +1,4 @@
-import { TextControl, Spinner, NavigableMenu, Button } from '@wordpress/components';
+import { Spinner, NavigableMenu, Button, SearchControl } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
 import PropTypes from 'prop-types';
@@ -43,6 +43,7 @@ const ContentSearch = ({
 	onSelectItem,
 	placeholder,
 	label,
+	hideLabelFromVision,
 	contentTypes,
 	mode,
 	perPage,
@@ -343,12 +344,14 @@ const ContentSearch = ({
 	return (
 		<StyledComponentContext cacheKey="tenup-component-content-search">
 			<NavigableMenu onNavigate={handleOnNavigate} orientation="vertical">
-				<TextControl
-					label={label}
+				<SearchControl
+					__next40pxDefaultSize
 					value={searchString}
 					onChange={(newSearchString) => {
 						handleSearchStringChange(newSearchString, 1);
 					}}
+					label={label}
+					hideLabelFromVision={hideLabelFromVision}
 					placeholder={placeholder}
 					autoComplete="off"
 					onFocus={() => {
@@ -424,6 +427,7 @@ ContentSearch.defaultProps = {
 	placeholder: '',
 	perPage: 20,
 	label: '',
+	hideLabelFromVision: true,
 	mode: 'post',
 	excludeItems: [],
 	queryFilter: (query) => query,
@@ -442,6 +446,7 @@ ContentSearch.propTypes = {
 	placeholder: PropTypes.string,
 	excludeItems: PropTypes.array,
 	label: PropTypes.string,
+	hideLabelFromVision: PropTypes.bool,
 	perPage: PropTypes.number,
 	renderItemType: PropTypes.func,
 	fetchInitialResults: PropTypes.bool,

components/content-search/readme.md

@@ -26,7 +26,8 @@ function MyComponent( props ) {
 |-----------------------|------------|--------------------------------------|----------------------------------------------------------------------------------------------------------------------------------|
 | `onSelectItem`        | `function` | `undefined`                          | Function called when a searched item is clicked                                                                                  |
 | `queryFilter`         | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before it's made. It's advisable to use `useCallback` to save this parameter |
-| `label`               | `string`   | `''`                                 | Renders a label for the Search Field.                                                                                            |
+| `label`               | `string`   | `''`                                 | Renders a label for the Search Field.
+| `hideLabelFromVision` | `bool`     | `true`                               | Whether to hide the label                                                                                           |
 | `mode`                | `string`   | `'post'`                             | One of: `post`, `user`, `term`                                                                                                   |
 | `placeholder`         | `string`   | `''`                                 | Renders placeholder text inside the Search Field.                                                                                |
 | `contentTypes`        | `array`    | `[ 'post', 'page' ]`                 | Names of the post types or taxonomies that should get searched                                                                   |

components/image/index.js

@@ -14,6 +14,7 @@ const Image = (props) => {
 		onChangeFocalPoint,
 		labels = {},
 		canEditImage = true,
+		allowedTypes = ['image'],
 		...rest
 	} = props;
 	const hasImage = !!id;
@@ -27,7 +28,13 @@ const Image = (props) => {
 
 	if (!hasImage && canEditImage) {
 		return (
-			<MediaPlaceholder labels={labels} onSelect={onSelect} accept="image" multiple={false} />
+			<MediaPlaceholder
+				labels={labels}
+				onSelect={onSelect}
+				accept="image"
+				multiple={false}
+				allowedTypes={allowedTypes}
+			/>
 		);
 	}
 
@@ -77,13 +84,15 @@ Image.defaultProps = {
 	onChangeFocalPoint: undefined,
 	labels: {},
 	canEditImage: true,
+	allowedTypes: ['image'],
 };
 
 Image.propTypes = {
 	id: PropTypes.number.isRequired,
 	size: PropTypes.string,
 	onSelect: PropTypes.func.isRequired,
 	onChangeFocalPoint: PropTypes.func,
+	allowedTypes: PropTypes.array,
 	focalPoint: PropTypes.shape({
 		x: PropTypes.string,
 		y: PropTypes.string,

components/image/readme.md

@@ -29,9 +29,10 @@ function BlockEdit(props) {
             onSelect={handleImageSelect}
             focalPoint={focalPoint}
             onChangeFocalPoint={handleFocalPointChange}
+            allowedTypes={['image/gif']}
             labels={{
-                title: 'Select Poster Image',
-                instructions: 'Upload a media file or pick one from your media library.'
+                title: 'Select Gif Image',
+                instructions: 'Upload a GIF or pick one from your media library.'
             }}
         />
     )
@@ -52,4 +53,5 @@ function BlockEdit(props) {
 | `onChangeFocalPoint` | `function` | `undefined` | Callback that gets called with the new focal point when it changes. (Is required for the FocalPointPicker to appear) |
 | `labels` | `object` | `{}` | Pass in an object of labels to be used by the `MediaPlaceholder` component under the hook. Allows the sub properties `title` and `instructions` |
 | `canEditImage` | `boolean` | `true` | whether or not the image can be edited by in the context its getting viewed. Controls whether a placeholder or upload controls should be shown when no image is present |
+| `allowedTypes` | `array` | `['image']` | Array of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers): file extensions, [MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types), `image` |
 | `...rest` | `*` | `null` | any additional attributes you want to pass to the underlying `img` tag |

components/media-toolbar/index.js

@@ -13,7 +13,7 @@ import { useMedia } from '../../hooks/use-media';
  * This should be used on components that have optional images.
  *
  * @param {object} props options
- * @returns {object} markup of the ToolbarGroup
+ * @returns {React.ReactElement} markup of the ToolbarGroup
  */
 export const MediaToolbar = (props) => {
 	const { onSelect, onRemove, isOptional = false, id } = props;

components/optional/index.js

@@ -11,6 +11,6 @@ Optional.defaultProps = {
 };
 
 Optional.propTypes = {
-	value: PropTypes.string || PropTypes.bool,
+	value: PropTypes.string || PropTypes.bool || PropTypes.number,
 	children: PropTypes.node.isRequired,
 };

components/repeater/index.js

@@ -42,6 +42,8 @@ export const AttributeRepeater = ({ children, attribute, addButton, allowReorder
 		};
 	});
 
+	defaultRepeaterData[0].id = uuid();
+
 	const handleOnChange = (value) => {
 		updateBlockAttributes(clientId, { [attribute]: value });
 	};

example/src/blocks/content-picker-example/block.json

@@ -0,0 +1,19 @@
+{
+	"apiVersion": 2,
+	"name": "example/content-picker",
+	"title": "Content Picker",
+    "description": "Example Block to show the Content Picker in usage",
+    "icon": "excerpt-view",
+    "category": "common",
+    "example": {},
+    "supports": {
+        "html": false
+    },
+    "attributes": {
+        "selectedPosts": {
+            "type": "array"
+        }
+    },
+    "variations": [],
+	"editorScript": "file:./index.js"
+}

example/src/blocks/content-picker-example/edit.js

@@ -0,0 +1,49 @@
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, Placeholder } from '@wordpress/components';
+
+import { ContentPicker } from '@10up/block-components';
+
+export const BlockEdit = (props) => {
+	const {
+		attributes: {selectedPosts},
+		setAttributes
+	} = props;
+
+	function handlePostSelection(posts) {
+		setAttributes({ selectedPosts: posts })
+	}
+
+	const blockProps = useBlockProps();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={__('Content Picker', 'example')}>
+					<ContentPicker
+						label={__('Select a Post or Page', 'example')}
+						contentTypes={['page', 'post']}
+						onPickChange={handlePostSelection}
+						fetchInitialResults
+						value={selectedPosts}
+						content={selectedPosts}
+						maxContentItems={5}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div {...blockProps}>
+				<Placeholder label={__('Content Picker', 'example')} instructions={__('Use the text field to search for a post', 'example')}>
+					<ContentPicker
+						label={__('Select a Post or Page', 'example')}
+						contentTypes={['page', 'post']}
+						onPickChange={handlePostSelection}
+						fetchInitialResults
+						value={selectedPosts}
+						content={selectedPosts}
+						maxContentItems={5}
+					/>
+				</Placeholder>
+			</div>
+		</>
+	)
+}

example/src/blocks/content-picker-example/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import { BlockEdit } from './edit';
+
+registerBlockType( metadata, {
+    edit: BlockEdit,
+    save: () => null
+} );

hooks/use-filtered-list/index.js → hooks/use-filtered-list/index.ts

@@ -12,15 +12,16 @@ const fuzzy = new uFuzzy();
  * @param {string?} property name of the prop
  * @returns {Array} filtered list
  */
-export function useFilteredList(list = [], searchTerm = '', property = 'name') {
+export function useFilteredList<TListItem extends {[key: string]: string}>(list: TListItem[] = [], searchTerm = '', property: keyof TListItem = 'name') {
 	const [filteredList, setFilteredList] = useState(list);
 
 	const propertyList = useMemo(() => list.map((item) => item[property]), [list, property]);
 
 	const filterList = useCallback(
-		(searchTerm) => {
+		(searchTerm: string) => {
 			const matchedNames = fuzzy.filter(propertyList, searchTerm);
-			return matchedNames.map((index) => list[index]);
+			const results = matchedNames?.map((index) => list[index]) || [];
+			return results;
 		},
 		[propertyList, list],
 	);

package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.17.2",
+  "version": "1.17.4",
   "description": "10up Components built for the WordPress Block Editor.",
   "main": "./dist/index.js",
   "source": "index.js",
@@ -46,6 +46,7 @@
   },
   "homepage": "https://github.com/10up/block-components.git#readme",
   "dependencies": {
+    "@10up/block-components": "^1.17.2",
     "@dnd-kit/core": "^6.0.6",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.1",