Skip to content

Commit

Permalink
[Block Library - Query Loop]: Add support for custom taxonomies filte…
Browse files Browse the repository at this point in the history 
…ring (#38063)

* [Block Library - Query Loop]: Add support for custom taxonomies filtering

* update fixtures

* add Query deprecation

* add fixture and update existing fixtures

* update variations

* update patterns

* remove last occurances of tagIds and categoryIds

* remove empty line

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>

Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
  • Loading branch information
@ntsekouras @aristath
ntsekouras and aristath authored Jan 20, 2022
1 parent 3ccd2d5 commit 2323eec
Show file tree
Hide file tree
Showing 18 changed files with 430 additions and 169 deletions.
14 changes: 7 additions & 7 deletions lib/block-patterns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function gutenberg_register_gutenberg_patterns() {
'title' => _x( 'Standard', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/query' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
Expand All @@ -37,7 +37,7 @@ function gutenberg_register_gutenberg_patterns() {
'title' => _x( 'Image at left', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/query' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:columns {"align":"wide"} -->
Expand All @@ -57,7 +57,7 @@ function gutenberg_register_gutenberg_patterns() {
'title' => _x( 'Small image and title', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/query' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
'content' => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center"} -->
Expand All @@ -76,7 +76,7 @@ function gutenberg_register_gutenberg_patterns() {
'title' => _x( 'Grid', 'Block pattern title', 'gutenberg' ),
'blockTypes' => array( 'core/query' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
'content' => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
Expand All @@ -93,7 +93,7 @@ function gutenberg_register_gutenberg_patterns() {
'blockTypes' => array( 'core/query' ),
'categories' => array( 'query' ),
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
Expand All @@ -119,7 +119,7 @@ function gutenberg_register_gutenberg_patterns() {
'content' => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
Expand All @@ -131,7 +131,7 @@ function gutenberg_register_gutenberg_patterns() {
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:spacer {"height":200} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
Expand Down
41 changes: 33 additions & 8 deletions lib/compat/wordpress-6.0/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,40 @@ function gutenberg_build_query_vars_from_query_block( $block, $page ) {
$query['offset'] = ( $per_page * ( $page - 1 ) ) + $offset;
$query['posts_per_page'] = $per_page;
}
if ( ! empty( $block->context['query']['categoryIds'] ) ) {
$term_ids = array_map( 'intval', $block->context['query']['categoryIds'] );
$term_ids = array_filter( $term_ids );
$query['category__in'] = $term_ids;

// We need to migrate `categoryIds` and `tagIds` to `tax_query` for backwards compatibility.
if ( ! empty( $block->context['query']['categoryIds'] ) || ! empty( $block->context['query']['tagIds'] ) ) {
$tax_query = array();
if ( ! empty( $block->context['query']['categoryIds'] ) ) {
$tax_query[] = array(
'taxonomy' => 'category',
'terms' => $block->context['query']['categoryIds'],
'include_children' => false,
);
}
if ( ! empty( $block->context['query']['tagIds'] ) ) {
$tax_query[] = array(
'taxonomy' => 'post_tag',
'terms' => $block->context['query']['tagIds'],
'include_children' => false,
);
}
$query['tax_query'] = $tax_query;
}
if ( ! empty( $block->context['query']['tagIds'] ) ) {
$term_ids = array_map( 'intval', $block->context['query']['tagIds'] );
$term_ids = array_filter( $term_ids );
$query['tag__in'] = $term_ids;
if ( ! empty( $block->context['query']['taxQuery'] ) ) {
$query['tax_query'] = array();
foreach ( $block->context['query']['taxQuery'] as $taxonomy => $terms ) {
if ( ! empty( $terms ) ) {
$term_ids = array_map( 'intval', $terms );
$term_ids = array_filter( $term_ids );

$query['tax_query'][] = array(
'taxonomy' => $taxonomy,
'terms' => $terms,
'include_children' => false,
);
}
}
}
if (
isset( $block->context['query']['order'] ) &&
Expand Down
34 changes: 27 additions & 7 deletions packages/block-library/src/post-template/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,16 +69,15 @@ export default function PostTemplateEdit( {
query: {
perPage,
offset,
categoryIds = [],
postType,
tagIds = [],
order,
orderBy,
author,
search,
exclude,
sticky,
inherit,
taxQuery,
} = {},
queryContext = [ { page: 1 } ],
templateSlug,
Expand All @@ -90,15 +89,37 @@ export default function PostTemplateEdit( {

const { posts, blocks } = useSelect(
( select ) => {
const { getEntityRecords } = select( coreStore );
const { getEntityRecords, getTaxonomies } = select( coreStore );
const { getBlocks } = select( blockEditorStore );
const taxonomies = getTaxonomies( {
type: postType,
per_page: -1,
context: 'view',
} );
const query = {
offset: perPage ? perPage * ( page - 1 ) + offset : 0,
categories: categoryIds,
tags: tagIds,
order,
orderby: orderBy,
};
if ( taxQuery ) {
// We have to build the tax query for the REST API and use as
// keys the taxonomies `rest_base` with the `term ids` as values.
const builtTaxQuery = Object.entries( taxQuery ).reduce(
( accumulator, [ taxonomySlug, terms ] ) => {
const taxonomy = taxonomies?.find(
( { slug } ) => slug === taxonomySlug
);
if ( taxonomy?.rest_base ) {
accumulator[ taxonomy?.rest_base ] = terms;
}
return accumulator;
},
{}
);
if ( !! Object.keys( builtTaxQuery ).length ) {
Object.assign( query, builtTaxQuery );
}
}
if ( perPage ) {
query.per_page = perPage;
}
Expand Down Expand Up @@ -134,8 +155,6 @@ export default function PostTemplateEdit( {
perPage,
page,
offset,
categoryIds,
tagIds,
order,
orderBy,
clientId,
Expand All @@ -146,6 +165,7 @@ export default function PostTemplateEdit( {
sticky,
inherit,
templateSlug,
taxQuery,
]
);
const blockContexts = useMemo(
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/query/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@
"pages": 0,
"offset": 0,
"postType": "post",
"categoryIds": [],
"tagIds": [],
"order": "desc",
"orderBy": "date",
"author": "",
"search": "",
"exclude": [],
"sticky": "",
"inherit": true
"inherit": true,
"taxQuery": null
}
},
"tagName": {
Expand Down
83 changes: 80 additions & 3 deletions packages/block-library/src/query/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,85 @@ import { omit } from 'lodash';
/**
* WordPress dependencies
*/
import { InnerBlocks } from '@wordpress/block-editor';
import {
InnerBlocks,
useInnerBlocksProps,
useBlockProps,
} from '@wordpress/block-editor';

const migrateToTaxQuery = ( attributes ) => {
const { query } = attributes;
const newQuery = {
...omit( query, [ 'categoryIds', 'tagIds' ] ),
};
if ( query.categoryIds?.length || query.tagIds?.length ) {
newQuery.taxQuery = {
category: !! query.categoryIds?.length
? query.categoryIds
: undefined,
post_tag: !! query.tagIds?.length ? query.tagIds : undefined,
};
}
return {
...attributes,
query: newQuery,
};
};

const deprecated = [
// Version with `categoryIds and tagIds`.
{
attributes: {
queryId: {
type: 'number',
},
query: {
type: 'object',
default: {
perPage: null,
pages: 0,
offset: 0,
postType: 'post',
categoryIds: [],
tagIds: [],
order: 'desc',
orderBy: 'date',
author: '',
search: '',
exclude: [],
sticky: '',
inherit: true,
},
},
tagName: {
type: 'string',
default: 'div',
},
displayLayout: {
type: 'object',
default: {
type: 'list',
},
},
},
supports: {
align: [ 'wide', 'full' ],
html: false,
color: {
gradients: true,
link: true,
},
__experimentalLayout: true,
},
isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
categoryIds || tagIds,
migrate: migrateToTaxQuery,
save( { attributes: { tagName: Tag = 'div' } } ) {
const blockProps = useBlockProps.save();
const innerBlocksProps = useInnerBlocksProps.save( blockProps );
return <Tag { ...innerBlocksProps } />;
},
},
// Version with NO wrapper `div` element.
{
attributes: {
Expand Down Expand Up @@ -44,9 +120,10 @@ const deprecated = [
html: false,
},
migrate( attributes ) {
const withTaxQuery = migrateToTaxQuery( attributes );
return {
...omit( attributes, [ 'layout' ] ),
displayLayout: attributes.layout,
...omit( withTaxQuery, [ 'layout' ] ),
displayLayout: withTaxQuery.layout,
};
},
save() {
Expand Down
Loading

0 comments on commit 2323eec

Please sign in to comment.