Skip to content

Breadcrumbs: Add character limit control with ellipsis truncation#77145

Draft
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/breadcrumbs-character-limit
Draft

Breadcrumbs: Add character limit control with ellipsis truncation#77145
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/breadcrumbs-character-limit

Conversation

@dhruvikpatel18
Copy link
Copy Markdown
Contributor

@dhruvikpatel18 dhruvikpatel18 commented Apr 8, 2026

What?

Closes #76533

Adds a character limit control to the Breadcrumbs block that truncates the rendered breadcrumb trail with an ellipsis (...) when the defined limit is exceeded.

Why?

The Breadcrumbs block currently has no way to limit the trail's length. On mobile viewports and narrow layouts, a deep breadcrumb path easily wraps to multiple lines, breaking layouts and consuming disproportionate vertical space. This feature provides a native way to gracefully truncate the output for better responsive design.

The behavior mirrors the existing Excerpt block controls for consistency with established patterns in Gutenberg.

Testing Instructions

  1. Navigate to a single post/page with a deep hierarchy (e.g., Parent > Child > Grandchild > Current Page)
  2. Insert a Breadcrumbs block
  3. In the block inspector, locate the "Max characters" slider in the Settings panel
  4. Test the following scenarios:
    • Set the limit to 20 and verify breadcrumbs are truncated with ellipsis
    • Set the limit to 50 and verify more complete trail is shown
    • Set the limit to 0 (disabled) and verify full breadcrumb trail is displayed
    • Verify the ellipsis is properly appended to truncated content
    • Test with different viewport widths on mobile to confirm improved layout

@github-actions github-actions bot added the [Package] Block library /packages/block-library label Apr 8, 2026
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.

Breadcrumb block: Add character limit control with ellipsis truncation

1 participant