Skip to content

Commit

Permalink
Merge branch 'develop' of github.com:10up/block-components into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sidsector9
Sidsector9 committed May 27, 2023
2 parents 904a015 + 163b815 commit bc2f249
Show file tree
Hide file tree
Showing 11 changed files with 497 additions and 203 deletions.
4 changes: 4 additions & 0 deletions api/register-block-extension/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ function registerBlockExtension(
* @returns {boolean} true if the block is the one we want to add the extension to
*/
const shouldApplyBlockExtension = (blockType) => {
if (blockName === '*') {
return true;
}

if (isMultiBlock) {
return blockName.includes(blockType);
}
Expand Down
5 changes: 5 additions & 0 deletions components/content-picker/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const ContentPickerWrapper = styled('div')`
* @param {boolean} props.uniqueContentItems whether or not the picker should only show unique items
* @param {boolean} props.excludeCurrentPost whether or not to exclude the current post from the picker
* @param {number} props.perPage number of items to show per page
* @param {boolean} props.fetchInitialResults whether or not to fetch initial results on mount
* @returns {*} React JSX
*/
const ContentPicker = ({
Expand All @@ -66,6 +67,7 @@ const ContentPicker = ({
uniqueContentItems,
excludeCurrentPost,
perPage,
fetchInitialResults,
}) => {
const currentPostId = select('core/editor')?.getCurrentPostId();

Expand Down Expand Up @@ -129,6 +131,7 @@ const ContentPicker = ({
mode={mode}
queryFilter={queryFilter}
perPage={perPage}
fetchInitialResults={fetchInitialResults}
/>
) : (
label && (
Expand Down Expand Up @@ -186,6 +189,7 @@ ContentPicker.defaultProps = {
excludeCurrentPost: true,
multiPickedLabel: __('You have selected the following items:', '10up-block-components'),
singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
fetchInitialResults: false,
};

ContentPicker.propTypes = {
Expand All @@ -203,6 +207,7 @@ ContentPicker.propTypes = {
excludeCurrentPost: PropTypes.bool,
maxContentItems: PropTypes.number,
perPage: PropTypes.number,
fetchInitialResults: PropTypes.bool,
};

export { ContentPicker };
25 changes: 13 additions & 12 deletions components/content-picker/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,19 @@ function MyComponent( props ) {

| Name | Type | Default | Description |
|----------------------|------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `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. |
| `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 |
| `maxContentItems` | `number` | `1` | Max number of items a user can select. |
| `isOrderable` | `bool` | `false` | When true, will allow the user to order items. Must be used in conjunction with `maxContentItems > 1` |
| `uniqueContentItems` | `bool` | `true` | Prevent duplicate items from being picked. |
| `excludeCurrentPost` | `bool` | `true` | Don't allow user to pick the current post. Only applicable on the editor screen. |
| `content` | `array` | `[]` | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
| `perPage` | `number` | `50` | Number of items to show during search |
| `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. |
| `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 |
| `maxContentItems` | `number` | `1` | Max number of items a user can select. |
| `isOrderable` | `bool` | `false` | When true, will allow the user to order items. Must be used in conjunction with `maxContentItems > 1` |
| `uniqueContentItems` | `bool` | `true` | Prevent duplicate items from being picked. |
| `excludeCurrentPost` | `bool` | `true` | Don't allow user to pick the current post. Only applicable on the editor screen. |
| `content` | `array` | `[]` | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
| `perPage` | `number` | `50` | Number of items to show during search
| `fetchInitialResults` | `bool` | `false` | Fetch initial results to present when focusing the search input | |
__NOTE:__ Content picker cannot validate that posts you pass it via `content` prop actually exist. If a post does not exist, it will not render as one of the picked items but will still be passed back as picked items if new items are picked/sorted. Therefore, on save you need to validate that all the picked posts/terms actually exist.

The `contentTypes` will get used in a Rest Request to the `search` endpoint as the `subtypes`:
Expand Down
27 changes: 22 additions & 5 deletions components/content-search/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ const ContentSearch = ({
queryFilter,
excludeItems,
renderItemType,
fetchInitialResults,
}) => {
const [searchString, setSearchString] = useState('');
const [searchQueries, setSearchQueries] = useState({});
const [selectedItem, setSelectedItem] = useState(null);
const [currentPage, setCurrentPage] = useState(1);
const [isFocused, setIsFocused] = useState(false);

const mounted = useRef(true);

Expand Down Expand Up @@ -132,17 +134,17 @@ const ContentSearch = ({
/**
* handleSearchStringChange
*
* Using the keyword and the list of tags that are linked to the parent block
* search for posts/terms that match and return them to the autocomplete component.
* Using the keyword and the list of tags that are linked to the parent
* block search for posts/terms/users that match and return them to the
* autocomplete component.
*
* @param {string} keyword search query string
* @param {string} page page query string
*/
const handleSearchStringChange = (keyword, page) => {
// Reset page and query on empty keyword.
if (keyword.trim() === '') {
setSearchString(keyword);
setCurrentPage(1);
return;
}

const preparedQuery = prepareSearchQuery(keyword, page);
Expand Down Expand Up @@ -180,9 +182,15 @@ const ContentSearch = ({
};

useEffect(() => {
// Trigger initial fetch if enabled.
if (fetchInitialResults) {
handleSearchStringChange('', 1);
}

return () => {
mounted.current = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
Expand Down Expand Up @@ -304,6 +312,7 @@ const ContentSearch = ({
}
const hasSearchString = !!searchString.length;
const hasSearchResults = searchResults && !!searchResults.length;
const hasInitialResults = fetchInitialResults && isFocused;

const listCSS = css`
/* stylelint-disable */
Expand Down Expand Up @@ -346,9 +355,15 @@ const ContentSearch = ({
}}
placeholder={placeholder}
autoComplete="off"
onFocus={() => {
setIsFocused(true);
}}
onBlur={() => {
setIsFocused(false);
}}
/>

{hasSearchString ? (
{hasSearchString || hasInitialResults ? (
<>
<ul className={`${NAMESPACE}-list`} css={listCSS}>
{isLoading && currentPage === 1 && (
Expand Down Expand Up @@ -427,6 +442,7 @@ ContentSearch.defaultProps = {
console.log('Select!'); // eslint-disable-line no-console
},
renderItemType: undefined,
fetchInitialResults: false,
};

ContentSearch.propTypes = {
Expand All @@ -439,6 +455,7 @@ ContentSearch.propTypes = {
label: PropTypes.string,
perPage: PropTypes.number,
renderItemType: PropTypes.func,
fetchInitialResults: PropTypes.bool,
};

export { ContentSearch };
Loading

0 comments on commit bc2f249

Please sign in to comment.