Skip to content

Term Template: Add flex layout option for content items - #79108

Open
BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:feat/term-template-flex-layout
Open

BugReportOnWeb wants to merge 1 commit into
WordPress:trunkfrom
BugReportOnWeb:feat/term-template-flex-layout

Conversation

@BugReportOnWeb

Copy link
Copy Markdown
Contributor

What?

Closes #73185

Adds a third layout option ("Flex view") to the Term Template block toolbar, alongside the existing List and Grid options.

Why?

Currently the Term Template block only supports list and grid layouts, both of which force each term item to span full width or a fixed grid column width. This makes it impossible to render terms as inline tags where each item is only as wide as its content.

How?

Adds a new toolbar button that sets layout.type to 'flex' on the block's attributes. It has display: flex in the styles making term items flow inline and wrap naturally based on their content width.

Testing Instructions

Testing Instructions for Keyboard

  1. Go to Posts > Tags and create several tags with varied name lengths.
  2. Open site editor and add a Terms Query block
  3. Select Tags taxonomy and enable 'Show empty terms' to display list of newly created Tags
  4. Inside Term Query block, locate the Term Template block.
  5. In the toolbar, you should now see three layout icons: List, Grid, and Flex.
  6. Click the Flex option and verify that term items render inline, each only as wide as their content, wrapping onto new lines when the container is full.
  7. Switch back to List and Grid and verify those still behave as before.

Screenshots or screencast

Screenshot 2026-06-11 at 12 47 21 PM

Use of AI Tools

ChatGPT for refining the PR description.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jun 11, 2026
@BugReportOnWeb
BugReportOnWeb marked this pull request as ready for review June 11, 2026 08:29
@github-actions

Copy link
Copy Markdown

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: BugReportOnWeb <devasheeshkaul@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

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

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Terms Query Affects the Terms Query Block labels Jun 14, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Terms Query Affects the Terms Query Block [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Term template: Add group view

2 participants