Page parent selector with ComboboxControl.

packages/components/src/combobox-control/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -26,6 +31,7 @@ function ComboboxControl( {
 	hideLabelFromVision,
 	help,
 	allowReset = true,
+	className,
 	messages = {
 		selected: __( 'Item selected.' ),
 	},
@@ -155,7 +161,7 @@ function ComboboxControl( {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<BaseControl
-			className="components-combobox-control"
+			className={ classnames( className, 'components-combobox-control' ) }
 			tabIndex="-1"
 			label={ label }
 			id={ `components-form-token-input-${ instanceId }` }

packages/core-data/src/queried-data/get-query-parts.js

@@ -65,11 +65,16 @@ export function getQueryParts( query ) {
 				);
 				break;
 
-			case '_fields':
-				parts.fields = getNormalizedCommaSeparable( value );
-				break;
-
 			default:
+				// While in theory, we could exclude "_fields" from the stableKey
+				// because two request with different fields have the same results
+				// We're not able to ensure that because the server can decide to omit
+				// fields from the response even if we explicitely asked for it.
+				// Example: Asking for titles in posts without title support.
+				if ( key === '_fields' ) {
+					parts.fields = getNormalizedCommaSeparable( value );
+				}
+
 				// While it could be any deterministic string, for simplicity's
 				// sake mimic querystring encoding for stable key.
 				//

packages/core-data/src/queried-data/selectors.js

@@ -3,7 +3,7 @@
  */
 import createSelector from 'rememo';
 import EquivalentKeyMap from 'equivalent-key-map';
-import { get, has, set } from 'lodash';
+import { get, set } from 'lodash';
 
 /**
  * Internal dependencies
@@ -31,7 +31,6 @@ function getQueriedItemsUncached( state, query ) {
 	const { stableKey, page, perPage, include, fields } = getQueryParts(
 		query
 	);
-
 	let itemIds;
 	if ( Array.isArray( include ) && ! stableKey ) {
 		// If the parsed query yields a set of IDs, but otherwise no filtering,
@@ -73,14 +72,7 @@ function getQueriedItemsUncached( state, query ) {
 			filteredItem = {};
 
 			for ( let f = 0; f < fields.length; f++ ) {
-				// Abort the entire request if a field is missing from the item.
-				// This accounts for the fact that queried items are stored by
-				// stable key without an associated fields query. Other requests
-				// may have included fewer fields properties.
 				const field = fields[ f ].split( '.' );
-				if ( ! has( item, field ) ) {
-					return null;
-				}
 				const value = get( item, field );
 				set( filteredItem, field, value );
 			}

packages/core-data/src/queried-data/test/get-query-parts.js

@@ -28,18 +28,6 @@ describe( 'getQueryParts', () => {
 		} );
 	} );
 
-	it( 'parses out `_fields` property filtering', () => {
-		const parts = getQueryParts( { _fields: 'content', a: 1 } );
-
-		expect( parts ).toEqual( {
-			page: 1,
-			perPage: 10,
-			stableKey: 'a=1',
-			fields: [ 'content' ],
-			include: null,
-		} );
-	} );
-
 	it( 'encodes stable string key', () => {
 		const first = getQueryParts( { '?': '&', b: 2 } );
 		const second = getQueryParts( { b: 2, '?': '&' } );

packages/core-data/src/queried-data/test/selectors.js

@@ -94,7 +94,7 @@ describe( 'getQueriedItems', () => {
 				2: true,
 			},
 			queries: {
-				'': [ 1, 2 ],
+				'_fields%5B0%5D=content': [ 1, 2 ],
 			},
 		};
 
@@ -133,7 +133,7 @@ describe( 'getQueriedItems', () => {
 				2: true,
 			},
 			queries: {
-				'': [ 1, 2 ],
+				'_fields%5B0%5D=content&_fields%5B1%5D=meta.template': [ 1, 2 ],
 			},
 		};
 

packages/core-data/src/selectors.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { first, map, find, get, filter, compact, defaultTo } from 'lodash';
+import { set, map, find, get, filter, compact, defaultTo } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
 import { REDUCER_KEY } from './name';
 import { getQueriedItems } from './queried-data';
 import { DEFAULT_ENTITY_KEY } from './entities';
+import { getNormalizedCommaSeparable } from './utils';
 
 /**
  * Returns true if a request is in progress for embed preview data, or false
@@ -135,8 +136,19 @@ export function getEntityRecord( state, kind, name, key, query ) {
 		return queriedState.items[ key ];
 	}
 
-	query = { ...query, include: [ key ] };
-	return first( getQueriedItems( queriedState, query ) );
+	const item = queriedState.items[ key ];
+	if ( item && query._fields ) {
+		const filteredItem = {};
+		const fields = getNormalizedCommaSeparable( query._fields );
+		for ( let f = 0; f < fields.length; f++ ) {
+			const field = fields[ f ].split( '.' );
+			const value = get( item, field );
+			set( filteredItem, field, value );
+		}
+		return filteredItem;
+	}
+
+	return item;
 }
 
 /**

packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js

@@ -22,8 +22,6 @@ const openPageAttributesPanel = async () => {
 		await openButton.click();
 	}
 };
-const SELECT_OPTION_SELECTOR =
-	'.editor-page-attributes__parent option:nth-child(2)';
 
 describe( 'Test Custom Post Types', () => {
 	beforeAll( async () => {
@@ -35,6 +33,11 @@ describe( 'Test Custom Post Types', () => {
 	} );
 
 	it( 'It should be able to create an hierarchical post without title support', async () => {
+		const PARENT_PAGE_INPUT =
+			'.editor-page-attributes__parent input:not([disabled])';
+		const SUGGESTION =
+			'.editor-page-attributes__parent .components-form-token-field__suggestion:first-child';
+
 		// Create a parent post.
 		await createNewPost( { postType: 'hierar-no-title' } );
 		await page.click( '.block-editor-writing-flow' );
@@ -43,25 +46,29 @@ describe( 'Test Custom Post Types', () => {
 		// Create a post that is a child of the previously created post.
 		await createNewPost( { postType: 'hierar-no-title' } );
 		await openPageAttributesPanel();
-		await page.waitForSelector( SELECT_OPTION_SELECTOR );
-		const optionToSelect = await page.$( SELECT_OPTION_SELECTOR );
-		const valueToSelect = await (
-			await optionToSelect.getProperty( 'value' )
-		 ).jsonValue();
-		await page.select(
-			'.editor-page-attributes__parent select',
-			valueToSelect
+		await page.waitForSelector( PARENT_PAGE_INPUT );
+		await page.click( PARENT_PAGE_INPUT );
+		await page.waitForSelector( SUGGESTION );
+		const optionToSelect = await page.$( SUGGESTION );
+		const valueToSelect = await page.$eval(
+			SUGGESTION,
+			( element ) => element.textContent
 		);
+		await optionToSelect.click();
 		await page.click( '.block-editor-writing-flow' );
 		await page.keyboard.type( 'Child Post' );
 		await publishPost();
 		// Reload the child post and verify it is still correctly selected as a child post.
 		await page.reload();
-		await page.waitForSelector( SELECT_OPTION_SELECTOR );
-		const selectedValue = await page.$eval(
-			'.editor-page-attributes__parent select',
-			( el ) => el.value
+		await page.waitForSelector( PARENT_PAGE_INPUT );
+		// Wait for the list of suggestions to fetch
+		// There should be a better way to do that.
+		// eslint-disable-next-line no-restricted-syntax
+		await page.waitFor(
+			( [ value, inputSelector ] ) =>
+				document.querySelector( inputSelector ).value === value,
+			{},
+			[ valueToSelect, PARENT_PAGE_INPUT ]
 		);
-		expect( selectedValue ).toEqual( valueToSelect );
 	} );
 } );