Merge pull request #22 from MEOM/feature/allow-multiple-terms

Add multiple terms support to TermSelect component

Author: samikeijonen

changelog.md

@@ -1,4 +1,7 @@
 # Changelog
 
+## Version 1.3.0 released May 6, 2024
+- Add `useMultiple` prop to `TermSelect` component.
+
 ## Version 1.2.0 released May 6, 2024
 - Add `useMediaToolbar` prop.

dist/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n'), 'version' => '8f7e20b57d64e16fb8de');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n'), 'version' => '6afcf74866286596fb72');

dist/index.js

@@ -1,6 +1,6 @@
 {
     "name": "@meom/block-components",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "MEOM block components",
     "homepage": "https://github.com/MEOM/block-components",
     "repository": {

package.json

@@ -34,3 +34,30 @@ Remember to define `termId` in `block.json` file as attribute:
     }
 }
 ```
+
+### `useMultiple`
+
+Boolean which determines do we want to select multiple terms.
+
+Usage:
+
+```js
+<TermSelect
+    useMultiple={ true }
+    taxonomyName="category" {...props}
+/>
+```
+
+When using `multiple` remember to define `termId` in `block.json` file as an array:
+
+```json
+"attributes": {
+    "termId": {
+        "type": "array"
+    }
+}
+```
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`

src/components/TermSelect/README.md

@@ -17,6 +17,7 @@ function TermSelect( props ) {
         queryArgs = { per_page: 99 },
         queryOptions = { enabled: true },
         setAttributes,
+        useMultiple = false,
     } = props;
 
     const options = [];
@@ -61,6 +62,7 @@ function TermSelect( props ) {
                             setAttributes( { termId: newTermId } );
                         } }
                         value={ termId }
+                        { ...( useMultiple ? { multiple: true } : {} ) }
                     />
                 </>
             ) }