Add Terms Query block patterns #71528

cr0ybot · 2025-09-05T22:45:58Z

What?

Addresses differences between the Query block's pattern and variation picker and the Terms Query block.

This PR removes variations from the term-template block, adds variations more similar to the query block to the terms-query block, and includes an example pattern that can be chosen.

Why?

This was discussed in the main PR as one of the issues to address before merging the terms-query block.

How?

Removes variations from the term-template block
Adds variations to the terms-query block that are similar to the query block
Adds an example pattern registration to the terms-query block in order to show the pattern chooser
Reorganizes the terms-query edit component into separate files

Testing Instructions

Edit a page or template
Insert the Terms Query block
Confirm that you are presented with the option to choose a pattern or start blank
Confirm that a pattern is available and selecting it loads the pattern into the editor
Repeat “Select All” behavior #3 and confirm that choosing "start blank" presents the option to select from a few variations
Confirm that choosing a variation loads the variation into the editor

Testing Instructions for Keyboard

All UI patterns are copied from the query block and should work the same

The initial placeholder for selecting between "choose" and "start blank" should be navigable by tab and arrow keys and selectable with space or enter
The pattern modal should be navigable in the same way and dismissable with escape
The variation picker should be navigable in the same way

Screenshots or screencast

Before	After

Additional Screenshots:

I am open to any feedback, and in particular am looking for thoughts about default patterns and variations.

…setting

This reverts commit a52096b.

github-actions · 2025-09-05T22:46:08Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: cr0ybot <cr0ybot@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

cr0ybot · 2025-09-07T13:46:56Z

Need to fix some tests, apparently getByRole('option', { name: 'Standard' }) is picking up the new Standard Terms pattern I added, strange that the selector is so loose...

MaggieCabrera · 2025-09-09T16:12:53Z

lib/compat/wordpress-6.9/terms-query-block-patterns.php

+					<!-- wp:buttons -->
+					<div class="wp-block-buttons">
+					<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/term-data","args":{"key":"link"}}}},"className":"is-style-fill"} -->
+					<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">View posts</a></div>


We need to translate text like this

MaggieCabrera · 2025-09-09T16:15:16Z

lib/compat/wordpress-6.9/terms-query-block-patterns.php

+					<div class="wp-block-group">
+					<!-- wp:buttons {"layout":{"type":"flex","verticalAlignment":"center"}} -->
+					<div class="wp-block-buttons">
+					<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/term-data","args":{"key":"link"}},"text":{"source":"core/term-data","args":{"key":"name"}}}},"className":"is-style-outline","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"border":{"color":"#00000000","radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"0px","bottomRight":"0px"}}}} -->


We need to avoid as much of this styling as we can. Colors won't work on all themes, we should allow the attern to inherit whatever the theme provides. I would also avoid using button variations like outline (the other pattern has an is-style-fill class too that we can probably remove too)

Yea, you're totally right. Since we don't have a compatible Term Title block there's no great way to provide a list of links unless they're all buttons. I could recreate the original pattern with paragraphs but there would be no links... Either way you're right that this isn't great and needs to be changed.

MaggieCabrera · 2025-09-09T16:17:14Z

lib/compat/wordpress-6.9/terms-query-block-patterns.php

+					<!-- wp:term-template {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"horizontal","justifyContent":"left","flexWrap":"wrap"}} -->
+					<!-- wp:buttons -->
+					<div class="wp-block-buttons">
+					<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/term-data","args":{"key":"link"}},"text":{"source":"core/term-data","args":{"key":"name"}}}},"className":"is-style-outline","style":{"spacing":{"padding":{"left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"fontSize":"small"} -->


same here with the font size, I tested in a theme where this looks really strange

Fair enough. I was referencing some of the core query patterns and noticed the use of a few font size slugs but perhaps we should just use pixel values here.

mmmh, I don't think pixel values are better. Maybe we need design input here, but we either remove this type of opinionated styling altogether and leave it to the theme or use the preset values for both texts (the term name and the count number) so they are related to one another. As a last resort we could go for em values if we really had to before going for pixels

MaggieCabrera · 2025-09-09T16:19:59Z

packages/block-library/src/terms-query/pattern-icons.js

+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const link = (


Where are these from? if we add them to the library we need to support them forever

They're from me, meant to mimic the style of the icons used in the query block variation picker.

ok, these need to be approved by designers before we land them then /cc @jameskoster @fcoveram

mikachan · 2025-09-09T16:38:40Z

lib/compat/wordpress-6.9/terms-query-block-patterns.php

+					<!-- /wp:button -->
+					</div>
+					<!-- /wp:buttons -->
+					<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/term-data","args":{"key":"count"}}}},"fontSize":"medium"} -->


This fontSize is being inserted as large when I use this pattern. I'm not sure why, as the theme I'm testing with does have a medium font size preset:

lol well as @MaggieCabrera pointed out we probably shouldn't be using font size slugs anyways.

Ah, this is the same issue that @MaggieCabrera mentioned here. I think it looks so strange because the wrong font size slug is being pulled through, but I'm not sure why. It's probably best to just remove the font size entirely and let the block use the default paragraph size.

cr0ybot · 2025-09-09T19:40:44Z

@MaggieCabrera @mikachan Thanks for taking a look. I've pushed some updates that should address unnecessary styles in patterns, translating text, and some issues with termQuery props being overridden on pattern insertion. FYI I've removed the buttons from the category list pattern, which means that there are no links. I'm not particularly satisfied with that but I've got nothing other than buttons to work with when it comes to block bindings...

mikachan · 2025-09-10T11:10:42Z

packages/block-library/src/terms-query/pattern-icons.js

+	</SVG>
+);
+
+export const imageTitleLink = (


It looks like imageTitleLink and imageTitleDescriptionLink are not used. Should we remove these until we need them?

mikachan · 2025-09-10T12:15:02Z

packages/block-library/src/terms-query/utils.js

+ * @param {IHasNameAndId[]} entities The entities to extract of helper object.
+ * @return {QueryEntitiesInfo} The object with the entities information.
+ */
+export const getEntitiesInfo = ( entities ) => {


Is this utils file copied from the Query Loop block? I can't see where many of these functions are used for the Terms Query and Term Template blocks.

These functions don't seem to be used: getEntitiesInfo, getValueFromObjectPath, mapToIHasNameAndId, useAllowedControls, isControlAllowed, useTaxonomies, useAllowedTaxonomies, isTaxonomyAllowed, useUnsupportedBlocks.

And then perhaps these could be extracted to a shared util file rather than dupicated: isControlAllowed, usePatterns, useUnsupportedBlocks

That should leave four new functions that are using the Terms Query blocks: useAllowedControls, getTransformedBlocksFromPattern, useBlockNameForPatterns, useScopedBlockVariations.

@mikachan Well that's embarrassing. It was initially copied from the query block and then customized for the plugin I built, then copied over to this PR without cleaning it up. I'll remove the unused functions and look for ways to extract shared utils. I've been hesitant to touch the query block code, I'm assuming packages/block-library/utils/ is the right place for these?

No worries 😄 That sounds good.

Yes, I understand being hesitant to touch the Query block code, especially as this will currently be merged into a much larger PR, which makes it more difficult to isolate these changes. Maybe we could leave the shared utils for a follow-up PR, and just duplicate those functions for the time-being.

mikachan · 2025-09-10T14:47:16Z

Looks like this PR was closed automatically because #70720 was merged. That's not intentional! I thought it would re-target the base branch to trunk. Maybe it's because this is from a fork. @cr0ybot Please re-open this against trunk when you get a chance, and we can continue the review from there 🙇

cr0ybot · 2025-09-10T14:58:31Z

@mikachan No worries, will do.

cr0ybot added 17 commits September 5, 2025 14:06

add termQuery as context source to detect inheritance

ef82dad

add variations and placeholder pattern icons

603464e

move edit components

1a3fa89

remove default category taxonomy

a52096b

placeholder with taxonomy/variation/pattern selector

952cc9d

add button to toolbar for choosing a different pattern after initial …

26d0ac7

…setting

prune utils, update useBlockNameForPatterns from query block

fe56862

Revert "remove default category taxonomy"

5edeb55

This reverts commit a52096b.

remove taxonomy select placeholder

93859f3

remove extraneous prop

89438b6

update terms query toolbar to match query block

8e94d66

add default terms query block pattern as starting point

fb80f9a

add docblock to terms query block pattern registration function

9bdd5c1

update props passed to terms query toolbar

1b6ff45

pluralize component names

9736380

remove variations from term template block

fe403d7

adjust variations default layout

6f4c549

cr0ybot requested review from ajitbohra, fabiankaegy and spacedmonkey as code owners September 5, 2025 22:46

This was referenced Sep 5, 2025

Term Query Loop Block #49094

Closed

Add Terms Query block #70720

Merged

fix phpcs errors

0f61bcd

skorasaurus added the [Block] Post Terms Affects the Post Terms Block label Sep 6, 2025

cr0ybot added 2 commits September 7, 2025 10:07

change up the default term query patterns

4e85b79

fix alignment

4936264

mikachan added the [Type] Enhancement A suggestion for improvement. label Sep 9, 2025

MaggieCabrera reviewed Sep 9, 2025

View reviewed changes

mikachan reviewed Sep 9, 2025

View reviewed changes

cr0ybot added 5 commits September 9, 2025 12:56

remove buttons and styling from category list pattern

fc50175

simplify tag links pattern

9b67d23

remove spacing slug and add translation for button text in pattern

4cc989b

remove unused preview taxonomy

844ea53

fix pattern termQuery overrides

17c1d0f

mikachan reviewed Sep 10, 2025

View reviewed changes

draganescu deleted the branch WordPress:add/terms-query-block-container September 10, 2025 14:41

draganescu closed this Sep 10, 2025

cr0ybot mentioned this pull request Sep 10, 2025

Add Terms Query block patterns, nesting, and extensibility features #71596

Closed

t-hamano added [Block] Terms Query Affects the Terms Query Block and removed [Block] Post Terms Affects the Post Terms Block labels Sep 11, 2025

Add Terms Query block patterns #71528

Add Terms Query block patterns #71528

Uh oh!

Conversation

cr0ybot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cr0ybot commented Sep 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cr0ybot commented Sep 9, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mikachan commented Sep 10, 2025

Uh oh!

cr0ybot commented Sep 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

cr0ybot commented Sep 5, 2025 •

edited

Loading

github-actions bot commented Sep 5, 2025 •

edited

Loading