Block visibility: create selectors for block visibility in current viewport (device setting or responsive) #74517
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
This was referenced Jan 11, 2026
|
Size Change: +376 B (+0.01%) Total Size: 3.09 MB
ℹ️ View Unchanged
|
ramonjd
commented
Jan 12, 2026
| ); | ||
| const blockAttributes = getBlockAttributes( clientId ); | ||
| return { | ||
| canToggleBlockVisibility: hasBlockSupport( |
Member
Author
There was a problem hiding this comment.
All the selectors already have a supports check.
ramonjd
commented
Jan 12, 2026
Comment on lines
128
to
132
| const { getBlock, getBlockName, getSettings } = | ||
| select( blockEditorStore ); | ||
| const { isBlockHidden: _isBlockHidden } = unlock( | ||
| select( blockEditorStore ) | ||
| ); |
Member
Author
There was a problem hiding this comment.
Just consolidating the selects
ramonjd
commented
Jan 12, 2026
Comment on lines
8
to
10
| const hasViewportVisibilityExperiment = | ||
| typeof window !== 'undefined' && | ||
| window.__experimentalHideBlocksBasedOnScreenSize; |
Member
Author
There was a problem hiding this comment.
I created two files for ease of development and to facilitate removing one or the other later.
ramonjd
commented
Jan 12, 2026
Comment on lines
734
to
741
| // Check if the block is hidden at any viewport. | ||
| return Object.values( BLOCK_VISIBILITY_VIEWPORTS ).some( | ||
| ( viewport ) => blockVisibility?.[ viewport.value ] === false | ||
| ); |
Member
Author
There was a problem hiding this comment.
This is changed behaviour.
For a consistent UI (right now), we indicate in the toolbar and listview that the block has some kind of visibility settings activated even when the block is visible on the canvas.
This will evolve of course and is not final, but it's an incremental change that is as close to the current behaviour as possible.
ramonjd
commented
Jan 12, 2026
Comment on lines
91
to
121
| let label; | ||
| if ( isBlockCurrentlyHidden ) { | ||
| // Block is currently hidden - check if hidden everywhere or at specific viewport | ||
| if ( blockVisibility === false ) { | ||
| label = __( 'Block is hidden' ); | ||
| } else { | ||
| const viewportLabel = | ||
| BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label || | ||
| currentViewport; | ||
| label = sprintf( | ||
| /* translators: %s: viewport name (Desktop, Tablet, Mobile) */ | ||
| __( 'Block is hidden in %s' ), | ||
| viewportLabel | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // Parent is hidden - check if hidden everywhere or at specific viewport | ||
| if ( hasParentHiddenEverywhere ) { | ||
| label = __( 'Parent block is hidden' ); | ||
| } else if ( isBlockParentHiddenAtViewport ) { | ||
| const viewportLabel = | ||
| BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label || | ||
| currentViewport; | ||
| label = sprintf( | ||
| /* translators: %s: viewport name (Desktop, Tablet, Mobile) */ | ||
| __( 'Parent block is hidden in %s' ), | ||
| viewportLabel | ||
| ); | ||
| } |
Member
Author
There was a problem hiding this comment.
The logic is:
- if the block, or one of its parents are currently hidden everywhere show the "Block/Parent is hidden" generic message
- if the block, or one of its parents are currently hidden at a specific viewport (device type OR viewport calculated from the screen size) show "Block/Parent is hidden in ${ viewport }"
Seems to work 😄
ramonjd
commented
Jan 12, 2026
| ); | ||
|
|
||
| const blockVisibilityDescription = isBlockHidden | ||
| const blockVisibilityDescription = isBlockCurrentlyHidden |
Member
Author
There was a problem hiding this comment.
This is AriaReferencedText - it might need the same treatment as the block info, that is, where it's hidden.
ramonjd
force-pushed
the
update/block-visibility-responsive-selectors-block-info
branch
2 times, most recently
from
d696f4b to
a62d2c3
Compare
ramonjd
commented
Jan 14, 2026
Comment on lines
+64
to
+70
| export default function BlockVisibilityInfo( { clientId } ) { | ||
| return window.__experimentalHideBlocksBasedOnScreenSize ? ( | ||
| <ViewportVisibilityInfo clientId={ clientId } /> | ||
| ) : ( | ||
| <BlockVisibilityInfoDefault clientId={ clientId } /> | ||
| ); | ||
| } |
Member
Author
There was a problem hiding this comment.
I updated all conditional imports to take place from inside the component so that we know at runtime if the experiment is running
ramonjd
commented
Jan 14, 2026
Comment on lines
+157
to
+174
| const blockVisibilityDescription = useMemo( () => { | ||
| if ( isBlockCurrentlyHidden ) { | ||
| if ( block?.attributes?.metadata?.blockVisibility === false ) { | ||
| return __( 'Block is hidden' ); | ||
| } | ||
| return sprintf( | ||
| /* translators: %s: viewport name (Desktop, Tablet, Mobile) */ | ||
| __( 'Block is hidden in %s' ), | ||
| BLOCK_VISIBILITY_VIEWPORTS[ currentViewport ]?.label || | ||
| currentViewport | ||
| ); | ||
| } | ||
| return null; | ||
| }, [ | ||
| isBlockCurrentlyHidden, | ||
| block?.attributes?.metadata?.blockVisibility, | ||
| currentViewport, | ||
| ] ); |
Member
Author
There was a problem hiding this comment.
Provides feedback on the list view item
ramonjd
commented
Jan 14, 2026
| * | ||
| * @return {boolean} Whether the block is hidden at the viewport. | ||
| */ | ||
| export const isBlockHiddenAtViewport = ( state, clientId, viewport ) => { |
Member
Author
There was a problem hiding this comment.
This will be an important selector (I imagine) also when we want to display different viewport icons, not just text, in the UI
ramonjd
requested review from
aaronrobertshaw,
andrewserong,
talldan and
tellthemachines
…ility at different viewports. - Introduce `isBlockHiddenEverywhere` and `isBlockHiddenAtViewport` selectors to improve visibility handling. - Update the rendering logic to display appropriate labels based on block and parent visibility status. - Ensure accurate viewport detection for block visibility conditions.
…tor conditional component exporting due to runtime race condition/build
… item to provide feedback on block visibility status across different viewports.
ramonjd
added
[Type] Enhancement
…ort handling. Update `isBlockHiddenAtViewport` to correctly assess visibility based on viewport conditions and add comprehensive tests for its functionality.
ramonjd
force-pushed
the
update/block-visibility-responsive-selectors-block-info
branch
from
54d8e2f to
eef30c8
Compare
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Member
Author
|
This is ready for first round of review. I went pretty raw with this one, so if folks see any opportunity to tighten up the selectors, the naming or anything else, please go ahead. I'll be away for a couple of weeks so, please feel free to edit/merge. |
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
This is generally looking good to me, except for a vague concern that all these checks are being run for every block, hidden or not, when the inspector or the list view are open. I think it's inevitable, at least for the list view, which needs accurate descriptions of block visibility for accessibility reasons.
I guess we could question whether we really need the label in the inspector, but it's already being used for hiding blocks altogether so it would also be good to keep the now-familiar UI 😄
| selectedDeviceType: BLOCK_VISIBILITY_VIEWPORTS.desktop.value, | ||
| }; | ||
|
|
||
| export default function BlockVisibilityInfo( { clientId } ) { |
Contributor
There was a problem hiding this comment.
This should be called ViewportVisibilityInfo to match the file name and the name under which it's being imported in block-visibility-info.js.
| * this selector will probably be deprecated (or repurposed) as it only considers visibility | ||
| * according to the device preview state. What would be more useful is a selector that returns | ||
| * whether the block is hidden anywhere to flag that the block has visibility metadata set. | ||
| * |
Contributor
There was a problem hiding this comment.
Isn't this what the change from isBlockHidden to isBlockHiddenAnywhere accomplishes? I'm guessing this comment is no longer needed?
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.
Part of:
Related to:
What?
This PR:
isBlockHiddenEverywhere,isBlockHiddenAtViewport, and parent equivalents).Why?
While limited to the block inspector info card and list view accessibility label, this PR will also
How
New selectors added in
packages/block-editor/src/store/private-selectors.jsto distinguish:New UI component viewport-visibility-info.js uses current viewport + new selectors to render badges/labels.
List view and block visibility UI consume the new selectors for accurate icons and labels.
Testing Instructions
Enable the experimental flag for responsive visibility.Enable experimental flag in
/wp-admin/admin.php?page=gutenberg-experimentsKapture.2026-01-11.at.18.51.35.mp4