Skip to content

Block visibility supports: refactor metadata to use nested structure #74602

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ramonjd merged 3 commits into from
Jan 16, 2026
+148 −74
Merged

Block visibility supports: refactor metadata to use nested structure #74602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7661270
Restructuring viewport configuration. Update related components to ut…
ramonjd Jan 14, 2026
0dd8b97
backport
ramonjd Jan 14, 2026
c9ca218
tests... unit!
ramonjd Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion backport-changelog/7.0/10629.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ https://github.com/WordPress/wordpress-develop/pull/10629

* https://github.com/WordPress/gutenberg/pull/73994
* https://github.com/WordPress/gutenberg/pull/74379
* https://github.com/WordPress/gutenberg/pull/74526
* https://github.com/WordPress/gutenberg/pull/74526
* https://github.com/WordPress/gutenberg/pull/74602
10 changes: 9 additions & 1 deletion lib/block-supports/block-visibility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,14 @@ function gutenberg_render_block_visibility_support( $block_content, $block ) {
}

if ( is_array( $block_visibility ) && ! empty( $block_visibility ) ) {
// Get viewport configuration from nested structure.
$viewport_config = $block_visibility['viewport'] ?? null;
Copy link
Member Author

@ramonjd ramonjd Jan 14, 2026

Choose a reason for hiding this comment

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

This is pretty basic, but my general idea is that later, sources could define their own evaluation rules for when blocks are hidden.

This could be via filters, or some sort of registration pattern. Not sure yet.

Maybe theme.json if we want to build a UI around it.


// If no viewport config, return unchanged.
if ( ! is_array( $viewport_config ) || empty( $viewport_config ) ) {
return $block_content;
}

/*
* Breakpoints definitions are in several places in WordPress packages.
* The following are taken from: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss
Expand Down Expand Up @@ -86,7 +94,7 @@ function gutenberg_render_block_visibility_support( $block_content, $block ) {
$hidden_on = array();

// Collect which breakpoints the block is hidden on (only known breakpoints).
foreach ( $block_visibility as $breakpoint => $is_visible ) {
foreach ( $viewport_config as $breakpoint => $is_visible ) {
if ( false === $is_visible && isset( $breakpoint_queries[ $breakpoint ] ) ) {
$hidden_on[] = $breakpoint;
}
Expand Down
26 changes: 14 additions & 12 deletions packages/block-editor/src/components/block-visibility/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,18 +160,20 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
event.preventDefault();
const newVisibility = hideEverywhere
? false
: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
( acc, [ , { key } ] ) => {
if ( viewportChecked[ key ] ) {
// Values are inverted to hide the block on the selected viewport.
// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,
// so 'false' means hide the block on the selected viewport.
acc[ key ] = false;
}
return acc;
},
{}
);
: {
viewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
( acc, [ , { key } ] ) => {
if ( viewportChecked[ key ] ) {
// Values are inverted to hide the block on the selected viewport.
// In the UI, the checkbox is checked (true) when the block is hidden on the selected viewport,
// so 'false' means hide the block on the selected viewport.
acc[ key ] = false;
}
return acc;
},
{}
),
};
const attributesByClientId = Object.fromEntries(
blocks.map( ( { clientId, attributes } ) => [
clientId,
Expand Down
46 changes: 27 additions & 19 deletions packages/block-editor/src/components/block-visibility/test/use-block-visibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { mobile: false },
blockVisibility: { viewport: { mobile: false } },
deviceType: 'mobile',
} )
);
Expand All @@ -66,9 +66,11 @@ describe( 'useBlockVisibility', () => {
const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: {
mobile: true,
tablet: false,
desktop: false,
viewport: {
mobile: true,
tablet: false,
desktop: false,
},
},
deviceType: 'mobile',
} )
Expand All @@ -82,7 +84,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { tablet: false },
blockVisibility: { viewport: { tablet: false } },
deviceType: 'tablet',
} )
);
Expand All @@ -98,7 +100,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { desktop: false },
blockVisibility: { viewport: { desktop: false } },
deviceType: 'desktop',
} )
);
Expand All @@ -116,7 +118,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { mobile: false },
blockVisibility: { viewport: { mobile: false } },
deviceType: 'desktop',
} )
);
Expand All @@ -133,9 +135,11 @@ describe( 'useBlockVisibility', () => {
const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: {
mobile: true,
tablet: false,
desktop: false,
viewport: {
mobile: true,
tablet: false,
desktop: false,
},
},
deviceType: 'desktop',
} )
Expand All @@ -152,7 +156,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { tablet: false },
blockVisibility: { viewport: { tablet: false } },
deviceType: 'desktop',
} )
);
Expand All @@ -169,9 +173,11 @@ describe( 'useBlockVisibility', () => {
const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: {
mobile: false,
tablet: true,
desktop: false,
viewport: {
mobile: false,
tablet: true,
desktop: false,
},
},
deviceType: 'desktop',
} )
Expand All @@ -188,7 +194,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { desktop: false },
blockVisibility: { viewport: { desktop: false } },
deviceType: 'desktop',
} )
);
Expand All @@ -205,9 +211,11 @@ describe( 'useBlockVisibility', () => {
const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: {
mobile: false,
tablet: false,
desktop: true,
viewport: {
mobile: false,
tablet: false,
desktop: true,
},
},
deviceType: 'desktop',
} )
Expand Down Expand Up @@ -306,7 +314,7 @@ describe( 'useBlockVisibility', () => {

const { result } = renderHook( () =>
useBlockVisibility( {
blockVisibility: { desktop: false },
blockVisibility: { viewport: { desktop: false } },
} )
);

Expand Down
32 changes: 24 additions & 8 deletions packages/block-editor/src/components/block-visibility/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ describe( 'block-visibility utils', () => {
{
attributes: {
metadata: {
blockVisibility: {},
blockVisibility: {
viewport: {},
},
},
},
},
Expand Down Expand Up @@ -75,15 +77,19 @@ describe( 'block-visibility utils', () => {
attributes: {
metadata: {
blockVisibility: {
mobile: false,
viewport: {
mobile: false,
},
},
},
},
},
{
attributes: {
metadata: {
blockVisibility: {},
blockVisibility: {
viewport: {},
},
},
},
},
Expand All @@ -105,7 +111,9 @@ describe( 'block-visibility utils', () => {
{
attributes: {
metadata: {
blockVisibility: {},
blockVisibility: {
viewport: {},
},
},
},
},
Expand All @@ -122,7 +130,9 @@ describe( 'block-visibility utils', () => {
attributes: {
metadata: {
blockVisibility: {
mobile: false,
viewport: {
mobile: false,
},
},
},
},
Expand Down Expand Up @@ -188,7 +198,9 @@ describe( 'block-visibility utils', () => {
{
attributes: {
metadata: {
blockVisibility: {},
blockVisibility: {
viewport: {},
},
},
},
},
Expand Down Expand Up @@ -245,7 +257,9 @@ describe( 'block-visibility utils', () => {
attributes: {
metadata: {
blockVisibility: {
mobile: false,
viewport: {
mobile: false,
},
},
},
},
Expand All @@ -254,7 +268,9 @@ describe( 'block-visibility utils', () => {
attributes: {
metadata: {
blockVisibility: {
tablet: false,
viewport: {
tablet: false,
},
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-visibility/use-block-visibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function useBlockVisibility( options = {} ) {

if (
window.__experimentalHideBlocksBasedOnScreenSize &&
blockVisibility?.[ currentViewport ] === false
blockVisibility?.viewport?.[ currentViewport ] === false
) {
return true;
}
Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/block-visibility/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ function isBlockHiddenForViewport( block, viewport ) {
return false;
}

// Get viewport configuration from nested structure.
const viewportConfig = blockVisibility.viewport;

// If no viewport config, block is not hidden for any specific viewport.
if ( ! viewportConfig || 'object' !== typeof viewportConfig ) {
return false;
}

// Check if the viewport is valid.
if (
! BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
Expand All @@ -37,7 +45,7 @@ function isBlockHiddenForViewport( block, viewport ) {
}

// Check if the specific viewport is hidden.
return blockVisibility[ viewport ] === false;
return viewportConfig[ viewport ] === false;
}

/**
Expand Down
24 changes: 16 additions & 8 deletions packages/block-editor/src/store/private-selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -733,11 +733,15 @@ export const isBlockHidden = ( state, clientId ) => {
// Check viewport-specific hiding based on current device preview
// Only apply when a device is explicitly selected.
if ( typeof blockVisibility === 'object' && blockVisibility !== null ) {
const settings = getSettings( state );
const viewportType =
settings[ deviceTypeKey ] ?? BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
const viewportKey = viewportType.toLowerCase();
return blockVisibility?.[ viewportKey ] === false;
const viewportConfig = blockVisibility.viewport;
if ( viewportConfig && typeof viewportConfig === 'object' ) {
const settings = getSettings( state );
const viewportType =
settings[ deviceTypeKey ] ??
BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
const viewportKey = viewportType.toLowerCase();
return viewportConfig[ viewportKey ] === false;
}
}

return false;
Expand Down Expand Up @@ -795,9 +799,13 @@ export const areBlocksHiddenAnywhere = ( state, clientIds ) => {
}

// Check viewport-specific visibility.
return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
( [ , { key } ] ) => blockVisibility?.[ key ] === false
);
const viewportConfig = blockVisibility.viewport;
if ( viewportConfig && typeof viewportConfig === 'object' ) {
return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
( [ , { key } ] ) => viewportConfig[ key ] === false
);
}
return false;
} );
};

Expand Down
Loading
Loading