@wordpress/block-editor 15.11.0 → 15.12.0

package/src/store/test/private-selectors.js

@@ -19,8 +19,8 @@ import {
 	isMoveLockedBlock,
 	isRemoveLockedBlock,
 	isLockedBlock,
-	isBlockHidden,
-	areBlocksHiddenAnywhere,
+	isBlockHiddenAnywhere,
+	isBlockHiddenAtViewport,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
@@ -932,10 +932,11 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
-	describe( 'isBlockHidden', () => {
+	describe( 'isBlockHiddenAnywhere', () => {
 		beforeAll( () => {
 			// Register a block with visibility support
 			registerBlockType( 'core/test-block-with-visibility', {
+				apiVersion: 3,
 				save: () => null,
 				category: 'text',
 				title: 'Test Block With Visibility',
@@ -946,6 +947,7 @@ describe( 'private selectors', () => {
 
 			// Register a block without visibility support
 			registerBlockType( 'core/test-block-without-visibility', {
+				apiVersion: 3,
 				save: () => null,
 				category: 'text',
 				title: 'Test Block Without Visibility',
@@ -956,6 +958,7 @@ describe( 'private selectors', () => {
 
 			// Register a block with no supports defined (defaults to true for visibility)
 			registerBlockType( 'core/test-block-default-visibility', {
+				apiVersion: 3,
 				save: () => null,
 				category: 'text',
 				title: 'Test Block Default Visibility',
@@ -990,7 +993,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( false );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
 		it( 'should return true when block has visibility support and is hidden', () => {
@@ -1015,7 +1018,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( true );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( true );
 		} );
 
 		it( 'should return false when block does not have visibility support', () => {
@@ -1042,7 +1045,7 @@ describe( 'private selectors', () => {
 
 			// Even though blockVisibility is false, the block doesn't support visibility,
 			// so it should return false
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( false );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
 		it( 'should return false when block has default visibility support and is not hidden', () => {
@@ -1067,7 +1070,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( false );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
 		it( 'should return true when block has default visibility support and is hidden', () => {
@@ -1092,7 +1095,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( true );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( true );
 		} );
 
 		it( 'should return false when block has no metadata', () => {
@@ -1108,7 +1111,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( false );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
 		it( 'should return false when block has metadata but no blockVisibility property', () => {
@@ -1133,7 +1136,7 @@ describe( 'private selectors', () => {
 				},
 			};
 
-			expect( isBlockHidden( state, 'block-1' ) ).toBe( false );
+			expect( isBlockHiddenAnywhere( state, 'block-1' ) ).toBe( false );
 		} );
 
 		it( 'should handle non-existent block gracefully', () => {
@@ -1146,25 +1149,93 @@ describe( 'private selectors', () => {
 
 			// When block doesn't exist, getBlockName returns null,
 			// and hasBlockSupport should handle null gracefully
-			expect( isBlockHidden( state, 'non-existent-block' ) ).toBe(
+			expect( isBlockHiddenAnywhere( state, 'non-existent-block' ) ).toBe(
 				false
 			);
 		} );
 	} );
 
-	describe( 'isBlockHidden in different devices', () => {
-		const originalExperimentalFlag =
-			window.__experimentalHideBlocksBasedOnScreenSize;
+	describe( 'isBlockHiddenAtViewport', () => {
+		beforeAll( () => {
+			registerBlockType( 'core/test-block-with-visibility', {
+				apiVersion: 3,
+				save: () => null,
+				category: 'text',
+				title: 'Test Block With Visibility',
+				supports: {
+					visibility: true,
+				},
+			} );
+		} );
+
+		afterAll( () => {
+			unregisterBlockType( 'core/test-block-with-visibility' );
+		} );
+
+		it( 'returns true when block is hidden everywhere', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map( [
+						[
+							'block-1',
+							{ name: 'core/test-block-with-visibility' },
+						],
+					] ),
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: false,
+								},
+							},
+						],
+					] ),
+				},
+			};
 
-		beforeEach( () => {
-			window.__experimentalHideBlocksBasedOnScreenSize = true;
+			expect(
+				isBlockHiddenAtViewport( state, 'block-1', 'Desktop' )
+			).toBe( true );
 		} );
 
-		afterEach( () => {
-			window.__experimentalHideBlocksBasedOnScreenSize =
-				originalExperimentalFlag;
+		it( 'returns visibility based on the requested viewport', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map( [
+						[
+							'block-1',
+							{ name: 'core/test-block-with-visibility' },
+						],
+					] ),
+					attributes: new Map( [
+						[
+							'block-1',
+							{
+								metadata: {
+									blockVisibility: {
+										viewport: {
+											mobile: false,
+											tablet: true,
+										},
+									},
+								},
+							},
+						],
+					] ),
+				},
+			};
+
+			expect(
+				isBlockHiddenAtViewport( state, 'block-1', 'Mobile' )
+			).toBe( true );
+			expect(
+				isBlockHiddenAtViewport( state, 'block-1', 'Tablet' )
+			).toBe( false );
 		} );
+	} );
 
+	describe( 'isBlockHiddenAnywhere in different devices', () => {
 		const createState = ( blockVisibility, deviceType = 'Desktop' ) => ( {
 			settings: {
 				[ deviceTypeKey ]: deviceType,
@@ -1196,132 +1267,58 @@ describe( 'private selectors', () => {
 			},
 		} );
 
-		it( 'returns false when experimental flag is disabled and block has breakpoint visibility', () => {
-			window.__experimentalHideBlocksBasedOnScreenSize = false;
-			const state = createState( { mobile: false, tablet: true } );
-			const result = isBlockHidden( state, 'test-block' );
-			expect( result ).toBe( false );
-		} );
-
-		it( 'returns false when Desktop is selected and block has breakpoint visibility', () => {
+		it( 'returns true when block is hidden at any viewport (mobile)', () => {
 			const state = createState(
-				{ mobile: false, tablet: true },
+				{ viewport: { mobile: false, tablet: true } },
 				'Desktop'
 			);
-			const result = isBlockHidden( state, 'test-block' );
-			expect( result ).toBe( false );
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
+			expect( result ).toBe( true );
 		} );
 
-		it( 'returns true when Desktop is selected and block is hidden on desktop', () => {
-			const state = createState( { desktop: false }, 'Desktop' );
-			const result = isBlockHidden( state, 'test-block' );
+		it( 'returns true when block is hidden on desktop', () => {
+			const state = createState(
+				{ viewport: { desktop: false } },
+				'Desktop'
+			);
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
 			expect( result ).toBe( true );
 		} );
 
-		it( 'returns true when Tablet is selected and block is hidden on tablet', () => {
+		it( 'returns true when block is hidden on tablet', () => {
 			const state = createState(
-				{ mobile: true, tablet: false },
+				{ viewport: { mobile: true, tablet: false } },
 				'Tablet'
 			);
-			const result = isBlockHidden( state, 'test-block' );
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
 			expect( result ).toBe( true );
 		} );
 
-		it( 'returns true when Mobile is selected and block is hidden on mobile', () => {
+		it( 'returns true when block is hidden on mobile', () => {
 			const state = createState(
-				{ mobile: false, tablet: true },
+				{ viewport: { mobile: false, tablet: true } },
 				'Mobile'
 			);
-			const result = isBlockHidden( state, 'test-block' );
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
 			expect( result ).toBe( true );
 		} );
 
-		it( 'returns false when Tablet is selected and block is visible on tablet', () => {
+		it( 'returns true when block is hidden at any viewport even if visible at current device', () => {
 			const state = createState(
-				{ mobile: false, tablet: true },
+				{ viewport: { mobile: false, tablet: true } },
 				'Tablet'
 			);
-			const result = isBlockHidden( state, 'test-block' );
-			expect( result ).toBe( false );
-		} );
-	} );
-
-	describe( 'areBlocksHiddenAnywhere', () => {
-		it( 'should return false when clientIds array is empty', () => {
-			const state = {
-				blocks: {
-					attributes: new Map(),
-				},
-			};
-			expect( areBlocksHiddenAnywhere( state, [] ) ).toBe( false );
-			expect( areBlocksHiddenAnywhere( state, null ) ).toBe( false );
-			expect( areBlocksHiddenAnywhere( state, undefined ) ).toBe( false );
-		} );
-
-		it( 'should return false when no blocks are hidden', () => {
-			const state = {
-				blocks: {
-					attributes: new Map( [
-						[ 'block-1', { metadata: { blockVisibility: true } } ],
-						[ 'block-2', { metadata: {} } ],
-					] ),
-				},
-			};
-			expect(
-				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
-			).toBe( false );
-		} );
-
-		it( 'should return true when a block is hidden everywhere', () => {
-			const state = {
-				blocks: {
-					attributes: new Map( [
-						[ 'block-1', { metadata: { blockVisibility: false } } ],
-						[ 'block-2', { metadata: { blockVisibility: true } } ],
-					] ),
-				},
-			};
-			expect(
-				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
-			).toBe( true );
-		} );
-
-		it( 'should return true when a block is hidden in any viewport', () => {
-			const state = {
-				blocks: {
-					attributes: new Map( [
-						[
-							'block-1',
-							{
-								metadata: {
-									blockVisibility: {
-										mobile: false,
-										tablet: true,
-									},
-								},
-							},
-						],
-						[ 'block-2', { metadata: { blockVisibility: true } } ],
-					] ),
-				},
-			};
-			expect(
-				areBlocksHiddenAnywhere( state, [ 'block-1', 'block-2' ] )
-			).toBe( true );
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
+			expect( result ).toBe( true );
 		} );
 
-		it( 'should return false when clientId is null or undefined', () => {
-			const state = {
-				blocks: {
-					attributes: new Map( [
-						[ 'block-1', { metadata: { blockVisibility: false } } ],
-					] ),
-				},
-			};
-			expect( areBlocksHiddenAnywhere( state, [ null ] ) ).toBe( false );
-			expect( areBlocksHiddenAnywhere( state, [ undefined ] ) ).toBe(
-				false
+		it( 'returns false when block is visible at all viewports', () => {
+			const state = createState(
+				{ mobile: true, tablet: true, desktop: true },
+				'Desktop'
 			);
+			const result = isBlockHiddenAnywhere( state, 'test-block' );
+			expect( result ).toBe( false );
 		} );
 	} );
 } );