Skip to content

Feature : Categories List - new Inline display#76185

Open
Vrishabhsk wants to merge 2 commits intoWordPress:trunkfrom
Vrishabhsk:add/categories-list-display-options
Open

Feature : Categories List - new Inline display#76185
Vrishabhsk wants to merge 2 commits intoWordPress:trunkfrom
Vrishabhsk:add/categories-list-display-options

Conversation

@Vrishabhsk
Copy link
Copy Markdown
Contributor

What?

This PR adds new display options to the Categories/Terms List block:

  • Inline layout - displays terms horizontally with configurable delimiters (comma, dot, pipe, slash)
  • Tag style - a new block style that presents terms as pill/chip elements with borders and padding

Why?

The Categories List block previously only supported two display modes: a bulleted list or a dropdown. However, many common design patterns require:

  • Inline lists - showing categories/tags as a horizontal sequence (e.g., "News, Updates, Events")

Previously, these layouts required custom CSS or custom blocks, which added friction for designers and content creators.

How?

Block Attributes

  • Replaced displayAsDropdown (boolean) with displayLayout (string enum: list, dropdown, inline)
  • Added delimiter attribute (string enum: comma, dot, pipe, slash) for inline layout
  • Added block styles: default and tag

Editor Changes (edit.js)

  • Replaced "Display as dropdown" toggle with a "Display layout" SelectControl
  • Added "Delimiter" SelectControl (visible only when inline layout is selected)
  • Added renderCategoryInline() function for horizontal rendering
  • "Show hierarchy" option is hidden when inline layout is selected (not applicable)

Server-Side Rendering (index.php)

  • Added rendering logic for inline layout using get_categories()
  • Delimiter markup rendered with aria-hidden="true" for accessibility
  • Backward compatibility for existing displayAsDropdown attribute

Styles (style.scss, editor.scss)

  • Added .wp-block-categories-inline styles for horizontal flex layout
  • Added .is-style-tag block style for pill/chip appearance
  • Delimiter spacing and tag styling with hover effects

Migration (deprecated.js)

  • Created migration from displayAsDropdowndisplayLayout for existing blocks

Testing Instructions

  1. Start the development environment: npm run wp-env start
  2. Create a new post or page
  3. Insert a Terms List (Categories List) block
  4. In the block settings sidebar, verify the new Display layout dropdown with options: List, Dropdown, Inline
  5. Select Inline and verify:
    • Terms display horizontally
    • The Delimiter option appears with choices: Comma, Dot, Pipe, Slash
    • Each delimiter renders correctly between terms
  6. Test with different taxonomies (Categories, Tags)
  7. Verify existing blocks with displayAsDropdown: true still render as dropdowns

Preview

Screen.Recording.2026-03-05.at.12.19.29.PM.mov

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 5, 2026

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

1 similar comment
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 5, 2026

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 5, 2026

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: Vrishabhsk <vrishabhsk@git.wordpress.org>
Co-authored-by: henriqueiamarino <iamarinoh@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

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

@henriqueiamarino
Copy link
Copy Markdown

Hey @Vrishabhsk, great work on this! The inline layout and tag style additions are solid improvements. It addresses a pain point and gives the designers the chance to avoid custom CSS to achieve the patterns. It's exactly what I required at the PR #75127.

One suggestion worth considering: your delimiter SelectControl with fixed options (Comma, Dot, Pipe, Slash) is a step forward, but it might be a bit rigid compared to what we already support today. Under the Advanced tab, the Categories element already accepts any character(s) in Advanced > Separator. So, by restricting it to four options, we’d move toward a more constrained experience.
Screenshot 2026-03-05 at 14 44 01

What if the dropdown included a Custom option as the last choice, similar to how the Date block handles custom formats? That way, you get the discoverability and UX clarity of predefined options, while still giving power users the flexibility they’re used to. It would also keep things more coherent with the broader WP design system.

Otherwise, the implementation looks clean to me, a theme designer. We’ll need more experienced eyes after the fixes. Let me know, and I'll get someone to help us.

@Vrishabhsk
Copy link
Copy Markdown
Contributor Author

Hi @henriqueiamarino 👋 Appreciate the review and the design perspective!

  • I've added the "Custom" option you mentioned. Now when users select it, they get a text input where they can enter whatever delimiter they want - just like the Date block handles custom formats.
  • This keeps the nice UX of having discoverable presets (Comma, Dot, Pipe, Slash) for most users, while still giving power users the flexibility they're used to from the Advanced > Separator setting.
Screenshot 2026-03-10 at 5 08 21 PM

@henriqueiamarino
Copy link
Copy Markdown

Thanks for the iteration, @Vrishabhsk. I’ll need a review from @scruffian, as the feature is good to go from a design perspective.

@carolinan
Copy link
Copy Markdown
Contributor

carolinan commented Mar 17, 2026

Hi
I am for adding style options, but there are a few things I would like us to reconsider.

I don't think that a "tag style" is something universal? Themes style tags in many different ways. What I mean is, will users immediately understand what selecting the "tag style" does?
Similarly, I think the CSS class name is too generic and not explanatory?

When the dropdown option is selected, all the tag style does is move the label to the right? And only in the editor, not the front? I personally don't find that intuitive, that the style is always available, but only applies to some options.

I'm not sure this style option lets us do what we really want?
It doesn't let us adjust spacing, add a separate background, text or link color or border styles for the items. We can still only add a background to the whole block, so when the border is added around the items, it can look pretty bad.
Because these tags are not "inner blocks".

Screenshot 2026-03-17 083753

Secondly, I am unsure about using the term "Inline" as a visible user-facing label. I could not find any other blocks that uses this label, correct me if I missed any.
Perhaps it could be "Horizontal" ?

....
Could we remove the block style variation for now and only add the options that alter the markup?

onChange={ toggleAttribute( 'displayAsDropdown' ) }
<SelectControl
__next40pxDefaultSize
label={ __( 'Display layout' ) }
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I am not a native English speaker, but to me this sounds redundant, as if saying the same thing twice?

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

Labels

[Package] Block library /packages/block-library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Categories/Tags List block: add more display options (inline + unbulleted)

3 participants