Merge pull request #143 from humanmade/post-picker-modifications-2

Post picker: Design updates, manage current selection, re-order selection.
humanmade · Jul 24, 2023 · 626e3b9 · 626e3b9
2 parents a3ef1d9 + 0b532c6
commit 626e3b9
Show file tree

Hide file tree

Showing 4 changed files with 353 additions and 96 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/src/components/PostPicker/README.md b/src/components/PostPicker/README.md
@@ -1,13 +1,81 @@
 # PostPicker
 
-The `PostPicker` control allows a user to select one or more posts from a given post type, which can be filtered by a taxonomy.
+There are several `PostPicker` controls.
 
-TODO: Implement multiple taxonomy filters.
+* `PostPickerButton` A simple button.
+* `PostPickerToolbarButton` A button for use within `BlockControls` toolbar.
+* `PostPickerModal` The actual modal interface, that can be integrated into your own UI.
 
-## Props
+## `PostPickerButton`
 
-- title
-- postType
-- taxonomies
-- values
-- onChange
+```
+import { PostPickerButton } from '@humanmade/block-editor-components';
+
+...
+
+<PostPickerButton
+	taxonomies={ [ 'category', 'post_tag' ] }
+	onChange={ newValue => setAttributes( { postIds: newValue } ) }
+	values={ attributes.postIds || [] }
+/>
+```
+
+### Props
+
+The `LinkToolbar` component does not have any custom props other than `opensInNewTab`, `value` and `onChange`, which are all passed on as is to the nested [`LinkControl`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/link-control/index.js) component.
+
+#### `values`
+
+The saved values. Array of post IDs.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `Array`                              | yes                                  | `undefined`                          |
+
+
+#### `onChange`
+
+The callback to use for handling changing the selected posts. `onChange` will receive an array of post IDs.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `Function`                           | yes                                  | `undefined`                          |
+
+#### `title`
+
+The title, used by button and modal title.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `String`                             | no                                   | `Select Posts`
+
+#### `postType`
+
+Post type to select from.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `String`                             | no                                   | `post`
+
+#### `taxonomies`
+
+Taxonomies that results can be filtered by. Array of taxonomy slugs. e.g. `[ 'category', 'post_tag' ]`.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `Array`                              | no                                   | `[]`
+
+
+## Post Picker Toolbar Button
+
+There is also a `PostPickerToolbarButton` component available if you import it directly from the source file, which is intended for use within the BlockControls. It supports all the same props as the PostPicker component, with the addition of an `icon`.
+
+## props
+
+#### `icon`
+
+Button icon. Passed through to `ToolbarButton`, refer to the documentation of that component for more info.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                              | no                                   | `edit`