Add Boundary Mode to visualize block boundaries by Sukhendu2002 · Pull Request #69388 · WordPress/gutenberg

Sukhendu2002 · 2025-03-03T10:23:27Z

What?

Closes: #66576

This PR adds a new "Boundary Mode" that helps users visualise block boundaries during editing.

Testing Instructions

Create a post with various blocks (paragraphs, columns, groups with nested content)
Open the Options menu (three dots in the top right) and select Preferences
In the "Appearance" section, toggle on "Boundary mode"
Observe that all blocks now display dashed outlines indicating their boundaries

Screenshots or screencast

Screen.Recording.2025-03-03.at.3.57.34.PM.mov

Mamaduka · 2025-03-03T15:39:44Z

Thanks for contributing, @Sukhendu2002!

For issues like #66576, I recommend seeking feedback before moving on with the development.

orionp13 · 2025-03-11T10:54:06Z

this mode need to be by default when editing like on elementor

acketon · 2025-07-10T15:11:22Z

This is great.

I strongly believe a toggle on/off outline or boundary is needed for complex page layouts. In older WP this was done with lots of psuedo elements to add borders around blocks and the UX was much better. However the downside was the extra markup and psuedo elements often conflicted with blocks that were using pseudo elements for some aspect of styling.

Just today I'm fixing a content issue on multiple posts because a user didn't realize they nested a reusable block inside multiple group blocks and broke the layout due to styles attached to the group block. In the Editor it is nearly impossible for the typical user to understand what was wrong with the block structure because so many blocks are effectively invisible and they can't see them. Only someone experienced knows to look at the rendered HTML structure on the frontend or look at the block outline to decipher what was happening structurally.

deutrino · 2026-07-03T05:30:26Z

What's the next step to get this merged?

jasmussen · 2026-08-31T13:34:15Z

Based on discussion, this mostly needs a branch refresh and a code review, as well as addressing the feedback given. I wonder how we can unstick this: @WordPress/gutenberg-core.

coderabbitai · 2026-09-05T11:03:41Z

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 1c75e226-090e-4e84-873e-4c07f6f10106

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

_{Comment @coderabbitai help to get the list of available commands.}

t-hamano · 2026-09-05T11:37:49Z

I have updated this PR to get a code review and design feedback.

Personally, I find this feature useful and anticipate that many people will need it.

@Sukhendu2002, do you have the bandwidth to continue working on this PR?

ramonjd

Just a flyby review. I think this is a nice feature.

Looks like we need to be careful about how we overwrite block CSS as far as I can see.

Sukhendu2002 · 2026-09-24T04:30:12Z

Thanks for the feedback, @ramonjd, @mtias, @jasmussen, and @t-hamano.

I’ve rebased the PR onto the latest trunk, resolved the conflicts, and addressed the review feedback. The PR is now mergeable. I’d appreciate another review when you have time.

jasmussen · 2026-09-24T06:27:07Z

Nice, took it for a spin. This is what I see:

Preference option looks good. Behavior works well. I think this is a feature that a certain subset of builders will really love. Nice work, thanks for contributing.

My only question is whether the dashed line should use the accent colour as it does now, or possibly use currentColor instead. The latter would work consistently in dark contexts as well. You could do someting like: border-color: color-mix(in srgb, currentColor 40%, transparent); and it would mix partial transparency into the currentColor so that it stacks well.

Not a strong opionion. Otherwise, this just needs a quick review on the techncial side, and it can land for 7.2.

hanneslsm · 2026-09-24T13:04:25Z

Thanks @Sukhendu2002 for continuously working on this!

@jasmussen I have tested currentColor a while back and ran also into visibility issues. I prefer the admin color.

I'd also like to propose that the boundary is only shown when the user hovers the editor content, not the page list or inspector. Especially when changing borders and spacing, with the current implementation the user would need to disable and enable the boundary mode all the time to properly see their changes. My video from #66576 (comment) shows how this could look like.

draganescu · 2026-09-24T17:02:41Z

In #80578 there are some more borders incoming for blocks with notes. If this gets in 1st we need to recheck there cc @adamsilverstein

t-hamano

with the current implementation the user would need to disable and enable the boundary mode all the time to properly see their changes.

What do you think about adding it not only to the Preferences modal, but also to the options menu? The View category should be a good fit. Furthermore, if #82976 adds a submenu, it should make things even cleaner.

Another thing I noticed is that outlines should probably be hidden in zoom-out mode, as the lines become thinner and users can only select section blocks in this mode anyway.

hanneslsm · 2026-09-25T09:38:48Z

What do you think about adding it not only to the Preferences modal, but also to the options menu? The View category should be a good fit. Furthermore, if #82976 adds a submenu, it should make things even cleaner.

Yes, this is also a good idea, maybe even better than toggling the boundary mode only in the Appearance settings.

There could be situations where a user left off their work and a few weeks later log back in, only because they want to do some minor design changes. Depending on how they left the editor, they need to enable the template view, edit the pattern, deactivate the boundary mode… this could be too much for many people.
But for now and this PR, i think adding the boundary mode to the View mode is a good move.

FYI @fcoveram, this discussion here might be relevant to you for #83102

Rename the preference, preserve block pseudo-elements, and hide boundaries in previews. Refs WordPress#66576

t-hamano

Thanks for the update. I ran a smoke test and everything is working great. Personally, I think this is pretty much ready to ship, but I'd also love to hear feedback from others.

t-hamano · 2026-09-25T13:28:07Z


+// Display visible borders around all blocks to visualize their boundaries.
+.show-block-boundaries .block-editor-block-list__block {
+	outline: 1px dashed color-mix(in srgb, var(--wp-admin-theme-color, #007cba) 60%, transparent);


I understand that the use of color-mix is intentional, but the outline might be difficult to see in some dark themes. There might still be room for improvement.

outline: 1px dashed color-mix(in srgb, var(--wp-admin-theme-color, #007cba) 60%, transparent);

outline: 1px dashed var(--wp-admin-theme-color, #007cba);

adamsilverstein · 2026-09-25T18:02:45Z

This worked well in my testing, nice one!

jasmussen · 2026-09-28T08:43:49Z

Noting that I personally feel like it is a bridge too far to bring this toggle to the appearance flyout. I would keep this only in Preferences > Appearance, at least in the first PR.

It is tempting to put it in the main ellipsis now that we have a dropdown, but it is also a temptation that can easily lead to it being a kitchen sink very quickly. I'm thinking also of #74546 which would exist to further simplify the whole thing.

Not offering a blocker, but that's the only piece where I would pull this PR back.

t-hamano · 2026-09-28T09:48:30Z

Noting that I personally feel like it is a bridge too far to bring this toggle to the appearance flyout. I would keep this only in Preferences > Appearance, at least in the first PR.

I don't have a strong preference either way, but I think starting small is a good approach.

mtias · 2026-10-21T09:00:39Z

Let's get this in. I agree with @jasmussen about not placing it in the flyout menu yet. Should we consider placing this in the accessibility set of preferences instead of appearance?

github-actions · 2026-10-21T09:01:31Z

🤖 PR meta 🤖

🎉 Props

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @orionp13, @deutrino, @ajitbohra.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: orionp13, deutrino, ajitbohra.

Co-authored-by: Sukhendu2002 <sukhendu2002@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: acketon <acketon@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: buzztone <buzztone@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: cbirdsong <cbirdsong@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

…-mode # Conflicts: # packages/block-editor/CHANGELOG.md # packages/editor/CHANGELOG.md

Sukhendu2002 · 2026-10-22T09:49:00Z

Thanks for the feedback. I’ve updated the PR to:

Move “Show block boundaries” to Preferences → Accessibility → Interface.
Remove the toggle from the Appearance flyout.
Use the opaque admin color for clearer outlines on dark backgrounds.

The existing preference key and command remain unchanged. Ready for another look when you have time.

t-hamano · 2026-10-23T08:03:57Z

 }

+// Display visible borders around all blocks to visualize their boundaries.
+.show-block-boundaries .block-editor-block-list__block {


Suggested change

.show-block-boundaries .block-editor-block-list__block {

.show-block-boundaries .block-editor-block-list__block:not(.is-editing-disabled) {

While this may be open to debate, I believe block boundaries should only be displayed on blocks that are actually selectable and editable. For blocks within a template where clicking does nothing, their outlines should not be highlighted.

Before

After

Sukhendu2002 marked this pull request as ready for review March 3, 2025 10:48

Sukhendu2002 requested review from ajitbohra, ellatrix, fabiankaegy, juanmaguitar and ndiego as code owners March 3, 2025 10:48

t-hamano added [Type] Enhancement A suggestion for improvement. [Package] Block editor /packages/block-editor [Package] Commands /packages/commands labels Mar 3, 2025

hanneslsm mentioned this pull request Mar 11, 2025

Add "Boundary View Mode" to Display Block Outlines in the Gutenberg Editor #66576

Open

Mamaduka added the Needs Decision Needs a decision to be actionable or relevant label Mar 11, 2025

afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Mar 12, 2025

afercia mentioned this pull request Mar 12, 2025

Accessibility regression: The selected block isn't outlined any longer #23892

Closed

mtias reviewed Aug 1, 2025

View reviewed changes

Comment thread docs/reference-guides/data/data-core-editor.md Outdated

jasmussen mentioned this pull request Aug 31, 2026

Show outlines of all blocks in select mode #25133

Closed

jasmussen removed the Needs Decision Needs a decision to be actionable or relevant label Aug 31, 2026

youknowriad mentioned this pull request Sep 4, 2026

Add a highlight border around empty parent blocks #38338

Closed

github-actions Bot added [Package] Editor /packages/editor and removed [Package] Commands /packages/commands labels Sep 5, 2026

ramonjd reviewed Sep 7, 2026

View reviewed changes

Comment thread packages/block-editor/src/components/block-list/content.scss Outdated

Comment thread packages/block-editor/src/components/block-list/index.jsx Outdated

Comment thread packages/editor/src/store/actions.js Outdated

Sukhendu2002 force-pushed the add/66576-boundary-mode branch from e9aa2e2 to 2fc74d4 Compare September 24, 2026 04:11

Sukhendu2002 requested a review from ramonjd September 24, 2026 04:32

Sukhendu2002 requested a review from mtias September 24, 2026 04:33

t-hamano reviewed Sep 25, 2026

View reviewed changes

Sukhendu2002 and others added 3 commits September 25, 2026 16:49

Add Boundary Mode

7001b9f

feat(editor): refine block boundaries

bd847ad

Rename the preference, preserve block pseudo-elements, and hide boundaries in previews. Refs WordPress#66576

feat(editor): address block boundary feedback

46d1e0e

Sukhendu2002 force-pushed the add/66576-boundary-mode branch from 82665df to 46d1e0e Compare September 25, 2026 11:29

Sukhendu2002 added 2 commits September 25, 2026 17:06

Merge branch 'trunk' into add/66576-boundary-mode

eb878b2

Merge branch 'trunk' into add/66576-boundary-mode

e3e1695

t-hamano reviewed Sep 25, 2026

View reviewed changes

youknowriad mentioned this pull request Oct 12, 2026

Editor mode "guide" #59687

Closed

Sukhendu2002 added 2 commits October 22, 2026 11:20

Merge remote-tracking branch 'upstream/trunk' into add/66576-boundary…

cf0c443

…-mode # Conflicts: # packages/block-editor/CHANGELOG.md # packages/editor/CHANGELOG.md

fix(editor): move block boundaries to Accessibility and improve contrast

835928f

t-hamano reviewed Oct 23, 2026

View reviewed changes

	.show-block-boundaries .block-editor-block-list__block {
	.show-block-boundaries .block-editor-block-list__block:not(.is-editing-disabled) {

Conversation

Sukhendu2002 commented Mar 3, 2025 • edited by t-hamano Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Screenshots or screencast

Uh oh!

Mamaduka commented Mar 3, 2025

Uh oh!

orionp13 commented Mar 11, 2025

Uh oh!

acketon commented Jul 10, 2025

Uh oh!

Uh oh!

deutrino commented Jul 3, 2026

Uh oh!

jasmussen commented Aug 31, 2026

Uh oh!

coderabbitai Bot commented Sep 5, 2026

Review skipped

Uh oh!

t-hamano commented Sep 5, 2026

Uh oh!

ramonjd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Sukhendu2002 commented Sep 24, 2026

Uh oh!

jasmussen commented Sep 24, 2026

Uh oh!

hanneslsm commented Sep 24, 2026

Uh oh!

draganescu commented Sep 24, 2026

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hanneslsm commented Sep 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Sep 25, 2026

Choose a reason for hiding this comment

Uh oh!

adamsilverstein commented Sep 25, 2026

Uh oh!

jasmussen commented Sep 28, 2026

Uh oh!

t-hamano commented Sep 28, 2026

Uh oh!

mtias commented Oct 21, 2026

Uh oh!

github-actions Bot commented Oct 21, 2026

🤖 PR meta 🤖

🎉 Props

Unlinked Accounts

Uh oh!

Sukhendu2002 commented Oct 22, 2026

Uh oh!

t-hamano Oct 23, 2026

Choose a reason for hiding this comment

Before

After

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Sukhendu2002 commented Mar 3, 2025 •

edited by t-hamano

Loading

hanneslsm commented Sep 25, 2026 •

edited

Loading