Query Block: Allow developers to extend the attributes

[grappler]

What problem does this address?

As raised in #24934 not all the filter options are available to in the Query Loop Block. I understand that will take time. In the meantime, it would be useful to allow developers to extend the Query Block to add their own settings.

With a new PHP filter as mentioned in #36504 would allow developers to extend the output on the front end but I could not find a way to extend the query parameter of getEntityRecords( 'postType', postType, query ) to include new parameters.

Currently, I am using the following code to add a new text field to support a new include attribute, which is a comma delimited string of IDs to test.

const addIncludePosts = ( settings, name ) => {
	if ( name !== 'core/query' ) {
		return settings;
	}

	return {
		...settings,
		attributes: {
			...settings.attributes,
			query: {
				...settings.attributes.query,
				include: {
					type: 'array',
					default: [],
				},
			},
		},
	};
};

addFilter(
	'blocks.registerBlockType',
	'required/query-block/include-posts',
	addIncludePosts
);

/**
 * Override the default edit UI to include a new block inspector control for
 * assigning the anchor ID, if block supports anchor.
 *
 * @param {WPComponent} BlockEdit Original component.
 *
 * @return {WPComponent} Wrapped component.
 */
const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => {
	return ( props ) => {
		if ( props.name !== 'core/query' ) {
			return <BlockEdit { ...props } />;
		}

		const { query } = props.attributes;
		const include = query.include || [];

		return (
			<>
				<BlockEdit { ...props } />
				<InspectorControls>
					<PanelBody
						title={ __( 'Select Posts', 'ph-blocks' ) }
						initialOpen={ true }
					>
						<TextControl
							label={ __( 'Posts', 'ph-blocks' ) }
							value={ include.join() }
							onChange={ ( value ) => {
								props.setAttributes(
									{
										query: {
											...query,
											include: value.split( ',' )
										}
									}
								);
							} }
						/>
					</PanelBody>
				</InspectorControls>
			</>
		);
	};
}, 'withInspectorControl' );

addFilter(
	'editor.BlockEdit',
	'required/query-block/with-include-posts-control',
	withInspectorControl
);

What is your proposed solution?

Allow the query in PostTemplateEdit to be extended.

Related Issues

• Query Loop: Add custom taxonomies to the Filters options #34977
• Query Block - more advanced / multi select query options #30706
• Missing Query block functionality #24934
• Add a filter hook to post template WP_Query or build_query_vars_from_query_block() #36504

[sc0ttkclark]

Clever solution here @grappler!

[ntsekouras]

Thanks for the issue @msaari! I'm closing this as this has been implemented here: #44093.

You can read more about extending Query Loop in the related docs page.

Feel free to reopen, if you need something more/different.