diff --git a/client/src/components/byline-autocomplete/index.jsx b/client/src/components/byline-autocomplete/index.jsx
deleted file mode 100644
index e6e9c0c9..00000000
--- a/client/src/components/byline-autocomplete/index.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-// External dependencies.
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import { useState, useEffect, useCallback } from '@wordpress/element';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import Autocomplete from 'react-autocomplete';
-
-// Hooks.
-import { useDebounce } from '@uidotdev/usehooks';
-
-function BylineAutocomplete({
- id,
- profiles,
- onUpdate,
- profilesApiUrl,
- addAuthorPlaceholder,
- addAuthorLabel,
-}) {
- const [search, setSearch] = useState('');
- const [searchResults, setSearchResults] = useState([]);
-
- // Debounce search string from input.
- const debouncedSearchString = useDebounce(search, 750);
-
- const doProfileSearch = useCallback((fragment) => {
- apiFetch({ url: addQueryArgs(profilesApiUrl, { s: fragment }) })
- .then((rawResults) => {
- const currentIds = profiles.map((profile) => profile.id);
- const newSearchResults = rawResults.filter(
- (result) => currentIds.indexOf(result.id) < 0,
- );
- setSearchResults(newSearchResults);
- });
- }, [profilesApiUrl, profiles]);
-
- const inputProps = {
- className: 'components-text-control__input',
- type: 'text',
- placeholder: addAuthorPlaceholder,
- id,
- onKeyDown: (e) => {
- // If the user hits 'enter', stop the parent form from submitting.
- if (e.keyCode === 13) {
- e.preventDefault();
- }
- },
- };
-
- useEffect(() => {
- if (debouncedSearchString !== '') {
- doProfileSearch(debouncedSearchString);
- }
- }, [debouncedSearchString, doProfileSearch]);
-
- return (
-
-
-
item.name}
- wrapperStyle={{ position: 'relative', display: 'block' }}
- onSelect={(__, item) => {
- setSearch('');
- setSearchResults([]);
-
- onUpdate(item);
- }}
- onChange={(__, next) => setSearch(next)}
- renderMenu={(children) => (
-
- {children}
-
- )}
- renderItem={(item, isHighlighted) => (
-
- {item.name}
-
- )}
- renderInput={(props) => }
- />
-
- );
-}
-
-BylineAutocomplete.defaultProps = {
- id: 'profiles_autocomplete',
-};
-
-BylineAutocomplete.propTypes = {
- id: PropTypes.string,
- profiles: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]),
- byline_id: PropTypes.number,
- name: PropTypes.string,
- image: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.string,
- ]),
- })).isRequired,
- onUpdate: PropTypes.func.isRequired,
- profilesApiUrl: PropTypes.string.isRequired,
- addAuthorPlaceholder: PropTypes.string.isRequired,
- addAuthorLabel: PropTypes.string.isRequired,
-};
-
-export default BylineAutocomplete;
diff --git a/client/src/components/byline-postpicker/index.jsx b/client/src/components/byline-postpicker/index.jsx
new file mode 100644
index 00000000..2af8218f
--- /dev/null
+++ b/client/src/components/byline-postpicker/index.jsx
@@ -0,0 +1,48 @@
+// External dependencies.
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { useCallback } from 'react';
+import { PostPicker } from '@alleyinteractive/block-editor-tools';
+import PropTypes from 'prop-types';
+
+function BylinePostpicker({
+ addAuthorLabel,
+ id,
+ onUpdate,
+ profilesApiUrl,
+}) {
+ const doProfileSearch = useCallback((profileId) => {
+ apiFetch({ url: addQueryArgs(profilesApiUrl, { id: profileId }) })
+ .then((rawResults) => {
+ onUpdate(rawResults[0]);
+ });
+ }, [profilesApiUrl, onUpdate]);
+
+ return (
+ <>
+
+ doProfileSearch(profile)}
+ />
+ >
+ );
+}
+
+BylinePostpicker.defaultProps = {
+ id: 'profiles_postpicker',
+};
+
+BylinePostpicker.propTypes = {
+ addAuthorLabel: PropTypes.string.isRequired,
+ id: PropTypes.string,
+ onUpdate: PropTypes.func.isRequired,
+ profilesApiUrl: PropTypes.string.isRequired,
+};
+
+export default BylinePostpicker;
diff --git a/client/src/components/byline-slot-wrapper/index.jsx b/client/src/components/byline-slot-wrapper/index.jsx
index 66dd55fb..3b2eb99e 100644
--- a/client/src/components/byline-slot-wrapper/index.jsx
+++ b/client/src/components/byline-slot-wrapper/index.jsx
@@ -6,18 +6,16 @@ import { Spinner } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
// Internal dependencies.
-import BylineAutocomplete from '../byline-autocomplete';
import BylineFreeform from '../byline-freeform';
import BylineList from '../byline-list';
+import BylinePostpicker from '../byline-postpicker';
function BylineSlotWrapper({
addAuthorLabel,
- addAuthorPlaceholder,
addFreeformButtonLabel,
addFreeformLabel,
addFreeformPlaceholder,
addProfile,
- autocompleteInputId,
freeformInputId,
profiles,
profilesApiUrl,
@@ -33,13 +31,10 @@ function BylineSlotWrapper({
) : (
-
PROFILE_POST_TYPE,
'numberposts' => 10,
- 's' => $request->get_param( 's' ),
'suppress_filters' => false,
'orderby' => 'relevance',
+ 'include' => [ $request->get_param( 'id' ) ],
]
);
diff --git a/package-lock.json b/package-lock.json
index 63ccf4a8..22b240b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
"name": "byline-manager",
"hasInstallScript": true,
"dependencies": {
+ "@alleyinteractive/block-editor-tools": "^0.10.2",
"@uidotdev/usehooks": "^2.4.1",
"@wordpress/api-fetch": "^6.47.0",
"@wordpress/components": "^25.8.14",
@@ -89,6 +90,18 @@
"node": ">=0.10.0"
}
},
+ "node_modules/@alleyinteractive/block-editor-tools": {
+ "version": "0.10.2",
+ "resolved": "https://registry.npmjs.org/@alleyinteractive/block-editor-tools/-/block-editor-tools-0.10.2.tgz",
+ "integrity": "sha512-QXiCOaJTvdPuhTElJ68bJF1io7iyx4+kRj4Yt6asB88LbIbBnkbOgDcQQN2w7wq0McHpGrisEbeY35WUwVorMw==",
+ "engines": {
+ "node": ">=16.0.0 <21.0.0",
+ "npm": ">=8.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=18"
+ }
+ },
"node_modules/@alleyinteractive/eslint-config": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@alleyinteractive/eslint-config/-/eslint-config-0.1.6.tgz",
diff --git a/package.json b/package.json
index 00babfda..6f1f8fdb 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
"webpack-dev-server": "^5.0.4"
},
"dependencies": {
+ "@alleyinteractive/block-editor-tools": "^0.10.2",
"@uidotdev/usehooks": "^2.4.1",
"@wordpress/api-fetch": "^6.47.0",
"@wordpress/components": "^25.8.14",