move isPostTypeHierarchical in inspector controls component + reset…

… parents on post type change
WordPress · May 13, 2022 · bd5d573 · bd5d573
1 parent dc5cffa
commit bd5d573
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -17,6 +17,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -27,6 +29,16 @@ import ParentControl from './parent-control';
 import TaxonomyControls from './taxonomy-controls';
 import { usePostTypes } from '../../utils';
 
+function useIsPostTypeHierarchical( postType ) {
+	return useSelect(
+		( select ) => {
+			const type = select( coreStore ).getPostType( postType );
+			return type?.viewable && type?.hierarchical;
+		},
+		[ postType ]
+	);
+}
+
 const stickyOptions = [
 	{ label: __( 'Include' ), value: '' },
 	{ label: __( 'Exclude' ), value: 'exclude' },
@@ -50,6 +62,7 @@ export default function QueryInspectorControls( {
 	} = query;
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
 	}, [ postType ] );
@@ -74,6 +87,8 @@ export default function QueryInspectorControls( {
 		if ( newValue !== 'post' ) {
 			updateQuery.sticky = '';
 		}
+		// We need to reset `parents` because they are tied to each post type.
+		updateQuery.parents = [];
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -158,11 +173,13 @@ export default function QueryInspectorControls( {
 						value={ querySearch }
 						onChange={ setQuerySearch }
 					/>
-					<ParentControl
-						parents={ parents }
-						postType={ postType }
-						onChange={ setQuery }
-					/>
+					{ isPostTypeHierarchical && (
+						<ParentControl
+							parents={ parents }
+							postType={ postType }
+							onChange={ setQuery }
+						/>
+					) }
 				</PanelBody>
 			) }
 		</InspectorControls>

diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -13,27 +13,16 @@ import { useDebounce } from '@wordpress/compose';
  */
 import { getEntitiesInfo, mapToIHasNameAndId } from '../../utils';
 
-function useIsPostTypeHierarchical( postType ) {
-	return useSelect(
-		( select ) => {
-			const type = select( coreStore ).getPostType( postType );
-			return type?.viewable && type?.hierarchical;
-		},
-		[ postType ]
-	);
-}
-
 const EMPTY_ARRAY = [];
 const SUGGESTIONS_QUERY = {
-	per_page: -1,
+	per_page: 20,
 	order: 'asc',
 	orderby: 'title',
 	_fields: 'id,title',
 	context: 'view',
 };
 
 function ParentControl( { parents, postType, onChange } ) {
-	const isHierarchical = useIsPostTypeHierarchical( postType );
 	const [ search, setSearch ] = useState( '' );
 	const [ value, setValue ] = useState( EMPTY_ARRAY );
 	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
@@ -113,11 +102,6 @@ function ParentControl( { parents, postType, onChange } ) {
 		setSuggestions( entitiesInfo.names );
 	}, [ entitiesInfo.names?.join(), searchHasResolved ] );
 
-	// Parent control is only needed for hierarchical post types.
-	if ( ! isHierarchical ) {
-		return null;
-	}
-
 	const getIdByValue = ( entitiesMappedByName, entity ) => {
 		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
 		if ( id ) return id;