Enhance Block Visibility: Introduce 'Show Hidden Blocks as Ghost' fea… #74150
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ture - Added functionality to display hidden blocks with a ghosted appearance instead of fully hiding them. - Updated BlockCard component to show a visual indicator for hidden blocks. - Modified styles for hidden blocks to include opacity and dashed borders. - Integrated preference toggle in the settings modal for user control over hidden block visibility. - Adjusted block list rendering logic to accommodate the new visibility feature. This improves the user experience by allowing users to see hidden blocks while editing.
- Introduced a default ARIA label for the Paragraph block to enhance accessibility when multiple blocks are selected. - Updated end-to-end tests to ensure proper selection and visibility of hidden Paragraph blocks, improving the testing coverage for block visibility features.
github-actions
bot
added
[Package] Editor
|
Size Change: +923 B (+0.04%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
- Modified the default ARIA label for the Paragraph block to ensure it reflects the correct context when selected. - Adjusted end-to-end tests to verify the display of the updated label for the Success Message variation, enhancing test coverage for block variations.
ramonjd
commented
Dec 22, 2025
|
|
||
| // translators: %s: Type of block (i.e. Text, Image etc) | ||
| const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); | ||
| const blockLabel = isBlockHidden |
Member
Author
There was a problem hiding this comment.
Is this the right place for this message? Do we even need it?
ramonjd
commented
Dec 22, 2025
Comment on lines
+122
to
+125
| const defaultAriaLabel = | ||
| isSingleSelected && blockProps[ 'aria-label' ] | ||
| ? blockProps[ 'aria-label' ] | ||
| : __( 'Block: Paragraph' ); |
Member
Author
There was a problem hiding this comment.
not sure if this is a good move. i did it to accommodate custom aria labels above in https://github.com/WordPress/gutenberg/pull/74150/files#r2638778155
this change also ensures block variation titles are shown correctly, instead of just Block: Paragraph. it seemed like a bug that the aria label wasn't overridden. 🤷🏻
|
Flaky tests detected in 02c693e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20423346386
|
Contributor
|
I'm not confident in this being the best approach. The pros are that it makes the block selectable even when hidden, whether at a breakpoint or otherwise, there are quite a few downsides:
The motivation for adding this is entirely valid, but the breaking of WYSIWYG for this means I would love for us to search the full territory for every possible other option, and only when all those other options have failed, can we consider adding it. Even then, I'd propose it to be a toggle. One other option that is growing on me, is this one: 
When a block has notes, there's a "margin"—like the margin on school essays—with the notes added to each. This is also a place for future suggestions and otherwise, it's essentially a place to show additional context and details for blocks in the canvas. It preserves WYSIWYG, and if we embraced this, would allow us to show an indicator: there's a hidden block here. Select that indicator, and that would show the block. |
Member
Author
|
Thanks for the feedback! 🙇🏻 I think I'm just trying to find a way for users to locate and easily edit hidden blocks. From memory, I think this goal is common, and I know we haven't got there yet. This PR was just so I and folks could play with a version of it.
Interesting, thanks for the designs and laying out those ideas. How do you see mobile users working with this?
I get you. The implementation (which can be improved) is, to me, secondary to the UX issue we need to solve. For me, it's almost the exact inverse of the "why is it gone in the frontend?" question, namely, "why is it gone in the editor?", or better put "How can I easily identify a hidden block in the editor on this page?" An extreme example might be "Don't make me go scrolling down a tree, or opening sidebars, or dig into menus (especially on my device) to find that five-deep nested hidden block on a page I didn't create myself." 😄
I think we could have both. The default could be WYSIWYG (or as close to it as we can get), and the "show my hidden blocks" option a complementary tool. What I'm really trying to propose is that we have a way to decouple "which device context am I editing for?" from "am I previewing the final result?". If we pin hide/show to the device toggle, then I'm yet to be convinced we're offering WYSIWYG either:
|
Contributor
Excellent question, and one that similarly needs to be solved for notes. Engaging with the Notes icon in the top toolbar would show the margin as a modal (it's a "sidebar" under the hood).
This is such a key point to agree on, and just for wider feedback permit me to add a @WordPress/gutenberg-design ping. From my perspective, "Desktop" is a misleading moniker for the default option chosen in the view dropdown, and we probably need an alternative, or at least changes to the behavior of that dropdown. In general I don't find that desktop icon intuitive, on any screen type, as the place where you can find the "Preview in new tab" option. But I very much see the default editor interface, not having touched any dropdowns or preview modes, as a true WYSIWYG editor, one that should always show responsive behaviors. I think if we broke this default, responsive patterns not showing their true behavior as you resized the screen would be confusing. I don't think this is necessarily what you are proposing, but what I'm saying is: the "desktop" moniker is wrong, because when you resize the screen it should still show responsive changes. |
Member
Author
Thanks for the quick response 🙇🏻 you know what, I think that is what's bugging me the most: how to tame that dropdown! 😄 I added this comment as an edit above, but I'll move it here: I'm not sure we need to be too clever about this if we answer the user's questions while they're in the editor:
|
Contributor
|
Bang on. I'm experimenting with tweaks to that dropdown, it's already being touched in the responsive PR anyway. Let me see if something good comes of it. |
Member
Author
I'm really grateful for the back and forth here. Helps us understand and make things better! 🚀 |
- Changed the default behavior to hide blocks without showing them as ghosts unless explicitly set. - Updated styles for hidden blocks to improve visibility and user experience. - Introduced new selectors and actions to manage the visibility state of hidden blocks. - Adjusted related components to reflect the updated logic for block visibility, ensuring a consistent user interface. This update refines the handling of hidden blocks, allowing for better control and visibility during editing.
github-actions
bot
removed
[Package] Edit Post
Member
Author
|
I'll close this PR, but I've updated it with a few tweaks that I want to keep in mind for later. Namely:
|
12 tasks
Contributor
|
Just to share that I'm still following this, I'm currently feeling out this: 
The idea here is: we reserve this dropdown to be purely about responsive editing, no toggle. It's not fully connecting yet, and it requires moving "Show template" elsewhere. But I'll keep at this until something clicks. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
A PR to demonstrate the ideas in this comment:
#72502 (comment)
Before
Kapture.2025-12-23.at.10.47.29.mp4
After
Kapture.2025-12-23.at.11.40.25.mp4
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast