Skip to content

Query block: Allow inheriting the global query arguments #27128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aristath merged 26 commits into from
Dec 8, 2020
Merged

Query block: Allow inheriting the global query arguments #27128

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
6629662
Add a "customize query" checkbox
aristath Nov 20, 2020
9d3d835
Add overrides
aristath Nov 20, 2020
166d525
improve query overrides
aristath Nov 20, 2020
17c9150
Maybe just toggle the labels? :thinking:
aristath Nov 20, 2020
8ccec48
Change to ToggleControl
aristath Nov 20, 2020
db4af75
reverse logic
aristath Nov 20, 2020
8a3c9e8
combine conditions
aristath Nov 20, 2020
3325878
Merge branch 'master' into try/global-query
aristath Nov 23, 2020
20e23ac
Hide controls when using global query
aristath Nov 23, 2020
406442d
Inherit query from template
aristath Nov 23, 2020
239e7ef
Merge branch 'master' into try/global-query
aristath Nov 23, 2020
fd70067
attachment is not an archive
aristath Nov 23, 2020
7ca7b4a
Simplify implementation - minimal changes compared to master
aristath Nov 24, 2020
d68e8e8
Merge branch 'master' into try/global-query
aristath Nov 24, 2020
5b4fc7b
Rename useGlobalQuery to isGlobalQuery
aristath Nov 24, 2020
dcd942a
Refactor code that updates the global query
gziolo Nov 24, 2020
37bd1d2
Merge branch 'master' into try/global-query
aristath Nov 25, 2020
243c237
Merge branch 'master' into try/global-query
aristath Nov 26, 2020
f1cb044
properly modify the postType passed-on to the query
aristath Nov 26, 2020
1aeb80c
Merge branch 'master' into try/global-query
aristath Nov 26, 2020
7709c41
Merge branch 'master' into try/global-query
aristath Nov 30, 2020
9d5c02a
Merge branch 'master' into try/global-query
aristath Dec 4, 2020
628184c
Merge branch 'master' into try/global-query
aristath Dec 8, 2020
c82e063
fix e2e
aristath Dec 8, 2020
334beae
indentation fix
aristath Dec 8, 2020
ccf3513
rename isGlobalQuery to inherit
aristath Dec 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions packages/block-library/src/query-loop/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function QueryLoopEdit( {
search,
exclude,
sticky,
isGlobalQuery,
} = {},
queryContext,
layout: { type: layoutType = 'flex', columns = 1 } = {},
Expand Down Expand Up @@ -78,6 +79,29 @@ export default function QueryLoopEdit( {
if ( sticky ) {
query.sticky = sticky === 'only';
}

// When you insert this block outside of the edit site then store
// does not exist therefore we check for its existence.
if ( isGlobalQuery && select( 'core/edit-site' ) ) {
Copy link
Member

@gziolo gziolo Nov 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that I better understand the proposed changes, it looks like we can avoid passing isGlobalQuery down, and we could modify the context passed in the Query block instead. What would be even better is to read the slug and other query params from the context set by the editor. In fact, there might be something like that already:

gutenberg/packages/edit-site/src/components/editor/index.js

Lines 160 to 183 in 5c530b2

// Set default query for misplaced Query Loop blocks, and
// provide the root `queryContext` for top-level Query Loop
// and Query Pagination blocks.
const blockContext = useMemo(
() => ( {
...page?.context,
query: page?.context.query || { categoryIds: [], tagIds: [] },
queryContext: [
page?.context.queryContext || { page: 1 },
( newQueryContext ) =>
setPage( {
...page,
context: {
...page?.context,
queryContext: {
...page?.context.queryContext,
...newQueryContext,
},
},
} ),
],
} ),
[ page?.context ]
);

I'm going to investigate how it all works as it would make everything so much easier to control for all blocks like Query Pagination, or for example Calendar block that should look different depending on query args selected.

Copy link
Contributor

@ntsekouras ntsekouras Nov 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we are going this way (not decoupling context with preview), that was the direction I was following as well in my explorations. setPage sets context to blocks that needed and was setting info in FSE navigation sidebar.

Copy link
Member

@gziolo gziolo Dec 8, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aristath, this is the only part of this PR that I'm not particularly happy about but at the same time it allows us to move forward so I think it's an acceptable compromise. I plan to look into the context propagation separately anyway.

// This should be passed from the context exposed by edit site.
const { getTemplateId, getTemplateType } = select(
'core/edit-site'
);

if ( 'wp_template' === getTemplateType() ) {
const { slug } = select( 'core' ).getEntityRecord(
'postType',
'wp_template',
getTemplateId()
);

// Change the post-type if needed.
if ( slug?.startsWith( 'archive-' ) ) {
query.postType = slug.replace( 'archive-', '' );
}
}
}

return {
posts: getEntityRecords( 'postType', postType, query ),
blocks: getBlocks( clientId ),
Expand All @@ -97,6 +121,7 @@ export default function QueryLoopEdit( {
postType,
exclude,
sticky,
isGlobalQuery,
]
);

Expand Down
15 changes: 11 additions & 4 deletions packages/block-library/src/query-loop/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
$query['post__not_in'] = array_merge( $query['post__not_in'], $block->context['query']['exclude'] );
}
if ( isset( $block->context['query']['perPage'] ) ) {
$query['offset'] = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset'];
$query['offset'] = ( $block->context['query']['perPage'] * ( $page - 1 ) ) + $block->context['query']['offset'];
$query['posts_per_page'] = $block->context['query']['perPage'];
}
if ( isset( $block->context['query']['categoryIds'] ) ) {
$query['category__in'] = $block->context['query']['categoryIds'];
Expand All @@ -56,9 +57,6 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
if ( isset( $block->context['query']['orderBy'] ) ) {
$query['orderby'] = $block->context['query']['orderBy'];
}
if ( isset( $block->context['query']['perPage'] ) ) {
$query['posts_per_page'] = $block->context['query']['perPage'];
}
if ( isset( $block->context['query']['author'] ) ) {
$query['author'] = $block->context['query']['author'];
}
Expand All @@ -67,6 +65,15 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
}
}

// Override the custom query with the global query if needed.
$use_global_query = ( isset( $block->context['query']['isGlobalQuery'] ) && $block->context['query']['isGlobalQuery'] );
if ( $use_global_query ) {
global $wp_query;
if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
$query = wp_parse_args( $wp_query->query_vars, $query );
}
}

$posts = get_posts( $query );

$classnames = '';
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/query/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
"author": "",
"search": "",
"exclude": [],
"sticky": ""
"sticky": "",
"isGlobalQuery": true
}
},
"layout": {
Expand Down
118 changes: 70 additions & 48 deletions packages/block-library/src/query/edit/query-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
FormTokenField,
SelectControl,
RangeControl,
ToggleControl,
Notice,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -44,6 +45,7 @@ export default function QueryInspectorControls( {
author: selectedAuthorId,
postType,
sticky,
isGlobalQuery,
} = query;
const [ showCategories, setShowCategories ] = useState( true );
const [ showTags, setShowTags ] = useState( true );
Expand Down Expand Up @@ -132,19 +134,32 @@ export default function QueryInspectorControls( {
debounce( () => setQuery( { search: querySearch } ), 250 ),
[ querySearch ]
);

useEffect( () => {
onChangeDebounced();
return onChangeDebounced.cancel;
}, [ querySearch, onChangeDebounced ] );
return (
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
options={ postTypesSelectOptions }
value={ postType }
label={ __( 'Post Type' ) }
onChange={ onPostTypeChange }
<ToggleControl
label={ __( 'Inherit query from URL' ) }
help={ __(
'Disable the option to customize the query arguments. Leave enabled to inherit the global query depending on the URL.'
) }
checked={ !! isGlobalQuery }
onChange={ ( value ) =>
setQuery( { isGlobalQuery: !! value } )
}
/>
{ ! isGlobalQuery && (
<SelectControl
options={ postTypesSelectOptions }
value={ postType }
label={ __( 'Post Type' ) }
onChange={ onPostTypeChange }
/>
) }
{ layout?.type === 'flex' && (
<>
<RangeControl
Expand All @@ -165,13 +180,17 @@ export default function QueryInspectorControls( {
) }
</>
) }
<QueryControls
{ ...{ order, orderBy } }
onOrderChange={ ( value ) => setQuery( { order: value } ) }
onOrderByChange={ ( value ) =>
setQuery( { orderBy: value } )
}
/>
{ ! isGlobalQuery && (
<QueryControls
{ ...{ order, orderBy } }
onOrderChange={ ( value ) =>
setQuery( { order: value } )
}
onOrderByChange={ ( value ) =>
setQuery( { orderBy: value } )
}
/>
) }
{ showSticky && (
<SelectControl
label={ __( 'Sticky posts' ) }
Expand All @@ -181,45 +200,48 @@ export default function QueryInspectorControls( {
/>
) }
</PanelBody>
<PanelBody title={ __( 'Filters' ) }>
{ showCategories && categories?.terms?.length > 0 && (
<FormTokenField
label={ __( 'Categories' ) }
value={ ( query.categoryIds || [] ).map(
( categoryId ) => ( {
id: categoryId,
value: categories.mapById[ categoryId ].name,
{ ! isGlobalQuery && (
<PanelBody title={ __( 'Filters' ) }>
{ showCategories && categories?.terms?.length > 0 && (
<FormTokenField
label={ __( 'Categories' ) }
value={ ( query.categoryIds || [] ).map(
( categoryId ) => ( {
id: categoryId,
value:
categories.mapById[ categoryId ].name,
} )
) }
suggestions={ categories.names }
onChange={ onCategoriesChange }
/>
) }
{ showTags && tags?.terms?.length > 0 && (
<FormTokenField
label={ __( 'Tags' ) }
value={ ( query.tagIds || [] ).map( ( tagId ) => ( {
id: tagId,
value: tags.mapById[ tagId ].name,
} ) ) }
suggestions={ tags.names }
onChange={ onTagsChange }
/>
) }
<QueryControls
{ ...{ selectedAuthorId, authorList } }
onAuthorChange={ ( value ) =>
setQuery( {
author: value !== '' ? +value : undefined,
} )
) }
suggestions={ categories.names }
onChange={ onCategoriesChange }
}
/>
) }
{ showTags && tags?.terms?.length > 0 && (
<FormTokenField
label={ __( 'Tags' ) }
value={ ( query.tagIds || [] ).map( ( tagId ) => ( {
id: tagId,
value: tags.mapById[ tagId ].name,
} ) ) }
suggestions={ tags.names }
onChange={ onTagsChange }
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
) }
<QueryControls
{ ...{ selectedAuthorId, authorList } }
onAuthorChange={ ( value ) =>
setQuery( {
author: value !== '' ? +value : undefined,
} )
}
/>
<TextControl
label={ __( 'Keyword' ) }
value={ querySearch }
onChange={ setQuerySearch }
/>
</PanelBody>
</PanelBody>
) }
</InspectorControls>
);
}