Merge pull request #1596 from tomusborne/tweak/dynamic-tags-filter-re…

…placeTags

Elements preview support, Query improvements

includes/class-query-utils.php

@@ -97,17 +97,40 @@ public function get_wp_query( $request ) {
 		$attributes     = $request->get_param( 'attributes' ) ?? [];
 		$current_post   = $request->get_param( 'postId' ) ?? null;
 		$current_author = $request->get_param( 'authorId' ) ?? null;
+		$context        = $request->get_param( 'context' ) ?? [];
+		$query_type     = $request->get_param( 'queryType' ) ?? GenerateBlocks_Block_Query::TYPE_WP_QUERY;
+		$current        = [
+			'post_id'   => $current_post,
+			'author_id' => $current_author,
+		];
+
+		/**
+		 * Filter the args for get-wp-query calls before they're passed to get_wp_query_args.
+		 *
+		 * @param array $args The WP_Query args to parse.
+		 * @param array $props Additional filter properties.
+		 *
+		 * @return array $args The optimized WP_Query args array.
+		 */
+		$args = apply_filters(
+			'generateblocks_rest_get_wp_query_args',
+			$args,
+			[
+				'page'       => $page,
+				'attributes' => $attributes,
+				'context'    => $context,
+				'current'    => $current,
+				'query_type' => $query_type,
+			]
+		);
 
 		$query = new WP_Query(
 			self::get_wp_query_args(
 				$args,
 				$page,
 				$attributes,
 				null,
-				[
-					'post_id'   => $current_post,
-					'author_id' => $current_author,
-				]
+				$current
 			)
 		);
 

package.json

@@ -19,7 +19,7 @@
 	},
 	"dependencies": {
 		"@edge22/block-styles": "^1.1.33",
-		"@edge22/components": "^1.1.48",
+		"@edge22/components": "^1.1.49",
 		"@edge22/styles-builder": "^1.2.48",
 		"@wordpress/block-editor": "^12.12.0",
 		"@wordpress/blocks": "^12.21.0",

src/blocks/looper/components/LoopInnerBlocksRenderer.jsx

@@ -32,7 +32,7 @@ function BlockPreview( { blocks, isHidden } ) {
 
 const MemoizedBlockPreview = memo( BlockPreview );
 
-function useWpQuery( shouldRequest = true, query, attributes, block ) {
+function useWpQuery( shouldRequest = true, { query, attributes, selectedBlock, context, queryType } ) {
 	const currentPost = useSelect( ( select ) => {
 		const { getCurrentPost } = select( 'core/editor' );
 
@@ -70,6 +70,12 @@ function useWpQuery( shouldRequest = true, query, attributes, block ) {
 			}
 		}
 
+		const { queryLoopEditorPostsCap = 50 } = generateBlocksEditor;
+
+		if ( args.posts_per_page > queryLoopEditorPostsCap ) {
+			args.posts_per_page = queryLoopEditorPostsCap;
+		}
+
 		async function fetchPosts() {
 			setIsLoading( true );
 
@@ -80,7 +86,9 @@ function useWpQuery( shouldRequest = true, query, attributes, block ) {
 					data: {
 						args,
 						attributes,
-						block,
+						context,
+						queryType,
+						block: selectedBlock,
 						postId: currentPost?.id,
 						authorId: currentPost?.author,
 					},
@@ -106,11 +114,12 @@ function useWpQuery( shouldRequest = true, query, attributes, block ) {
 export function LoopInnerBlocksRenderer( props ) {
 	const {
 		clientId,
-		context,
 		attributes,
 		isSelected,
 	} = props;
 
+	const context = applyFilters( 'generateblocks.editor.preview.context', props.context, { props } );
+
 	const {
 		'generateblocks/query': query = {},
 		'generateblocks/queryType': queryType = 'WP_Query',
@@ -123,7 +132,7 @@ export function LoopInnerBlocksRenderer( props ) {
 	};
 	const { getSelectedBlock } = useSelect( blockEditorStore );
 	const selectedBlock = getSelectedBlock();
-	const wpQuery = useWpQuery( 'WP_Query' === queryType, query, attributes, selectedBlock );
+	const wpQuery = useWpQuery( 'WP_Query' === queryType, { query, context, queryType, attributes, selectedBlock } );
 
 	const otherQuery = applyFilters( 'generateblocks.editor.looper.query', null, {
 		query,

src/blocks/query/components/BlockSettings.jsx

@@ -12,6 +12,7 @@ export function BlockSettings( {
 	name,
 	attributes,
 	setAttributes,
+	context,
 } ) {
 	const panelProps = {
 		name,
@@ -38,6 +39,7 @@ export function BlockSettings( {
 				<QueryInspectorControls
 					attributes={ attributes }
 					setAttributes={ setAttributes }
+					context={ context }
 				/>
 			</OpenPanel>
 			<OpenPanel

src/blocks/query/components/ControlBuilder.jsx

@@ -37,7 +37,7 @@ function ControlComponent( props ) {
 				/>
 			);
 		case 'postTypeSelect':
-			return <SelectPostType { ...standardProps } />;
+			return <SelectPostType multiple={ true } { ...standardProps } />;
 		case 'select':
 			return <ComboboxControl { ...standardProps } />;
 		case 'multiSelect':

src/blocks/query/components/QueryInspectorControls.jsx

@@ -11,7 +11,7 @@ import { ParameterList } from './ParameterList';
 import useQueryReducer from '@hooks/useQueryReducer';
 import { getParameters } from '../query-parameters';
 
-export function QueryInspectorControls( { attributes, setAttributes } ) {
+export function QueryInspectorControls( { attributes, setAttributes, context } ) {
 	const { queryState, setParameter, removeParameter } = useQueryReducer( attributes.query );
 	const [ displayParameterSelect, setDisplayParameterSelect ] = useState( false );
 
@@ -121,7 +121,15 @@ export function QueryInspectorControls( { attributes, setAttributes } ) {
 				applyFilters(
 					'generateblocks.editor.query.inspectorControls',
 					null,
-					{ queryType: attributes.queryType, attributes, setAttributes, queryState, setParameter, removeParameter }
+					{
+						queryType: attributes.queryType,
+						attributes,
+						setAttributes,
+						queryState,
+						setParameter,
+						removeParameter,
+						context,
+					}
 				)
 			}
 		</>

src/dynamic-tags/utils.js

@@ -1,4 +1,5 @@
 import apiFetch from '@wordpress/api-fetch';
+import { applyFilters } from '@wordpress/hooks';
 
 export async function replaceTags( content, context = {} ) {
 	// Define an async function to fetch data
@@ -8,7 +9,7 @@ export async function replaceTags( content, context = {} ) {
 			method: 'POST',
 			data: {
 				content,
-				context,
+				context: applyFilters( 'generateblocks.editor.preview.context', context, { content } ),
 			},
 		} );
 

src/hoc/withDynamicTag.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { replaceTags } from '../dynamic-tags/utils';
 
 export function withDynamicTag( WrappedComponent ) {
@@ -16,6 +17,7 @@ export function withDynamicTag( WrappedComponent ) {
 
 		const [ dynamicTagValue, setDynamicTagValue ] = useState( '' );
 		const [ contentMode, setContentMode ] = useState( 'edit' );
+		const isSavingPost = useSelect( ( select ) => select( 'core/editor' ).isSavingPost() );
 
 		const getContentValue = () => {
 			if ( 'img' === tagName ) {
@@ -48,7 +50,7 @@ export function withDynamicTag( WrappedComponent ) {
 			}
 
 			fetchData();
-		}, [ contentValue, contentMode, context ] );
+		}, [ contentValue, contentMode, context, tagName, isSavingPost ] );
 
 		return (
 			<WrappedComponent

src/hoc/withHtmlAttributes.js

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import { InspectorAdvancedControls } from '@wordpress/block-editor';
 import { TextControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
 
 import { useUpdateEffect } from 'react-use';
@@ -74,6 +75,7 @@ export function withHtmlAttributes( WrappedComponent ) {
 			align,
 		} = attributes;
 
+		const isSavingPost = useSelect( ( select ) => select( 'core/editor' ).isSavingPost() );
 		const { style = '', href, ...otherAttributes } = htmlAttributes;
 		const [ processedStyle, setProcessedStyle ] = useState( style );
 
@@ -89,7 +91,7 @@ export function withHtmlAttributes( WrappedComponent ) {
 			}
 
 			fetchProcessedStyle();
-		}, [ style, props ] );
+		}, [ style, context, isSavingPost ] );
 
 		useUpdateEffect( () => {
 			const layoutClasses = [ 'alignwide', 'alignfull' ];