@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/src/components/block-tools/index.js

@@ -58,6 +58,9 @@ function selector( select ) {
 		isZoomOutMode: isZoomOut(),
 		isDragging: isDragging(),
 		viewportModalClientIds: getViewportModalClientIds(),
+		blockVisibilitySetting:
+			select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.blockVisibility?.allowEditing,
 	};
 }
 
@@ -82,6 +85,7 @@ export default function BlockTools( {
 		isZoomOutMode,
 		isDragging,
 		viewportModalClientIds,
+		blockVisibilitySetting,
 	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const {
@@ -247,6 +251,9 @@ export default function BlockTools( {
 		} else if (
 			isMatch( 'core/block-editor/toggle-block-visibility', event )
 		) {
+			if ( blockVisibilitySetting === false ) {
+				return;
+			}
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();

package/src/components/block-types-list/style.scss

@@ -1,5 +1,4 @@
 .block-editor-block-types-list > [role="presentation"] {
-	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;
 }

package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden 1`] = `
 <div>
@@ -9,7 +9,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Change vertical alignment"
+      aria-label="Align content vertically"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -37,7 +37,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Change vertical alignment"
+    label="Align content vertically"
   >
     <div>
       <button

package/src/components/block-vertical-alignment-control/test/index.js

@@ -40,6 +40,22 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
+	test( 'should use custom label and description', () => {
+		render(
+			<BlockVerticalAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				label="Custom Label"
+				description="Custom Description"
+			/>
+		);
+
+		const button = screen.getByRole( 'button', { name: 'Custom Label' } );
+		expect( button ).toHaveAttribute( 'aria-label', 'Custom Label' );
+		// The description is now part of the toggleProps and not directly accessible
+		// We can't easily test for the describedBy attribute here
+	} );
+
 	test( 'should expand controls when toggled', async () => {
 		const user = userEvent.setup();
 
@@ -59,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Change vertical alignment',
+				name: 'Align content vertically',
 			} )
 		);
 
@@ -86,7 +102,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		);
 
 		const activeControl = screen.getByRole( 'button', {
-			name: `Align ${ alignment }`,
+			name: `Align top`,
 			pressed: true,
 		} );
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import {
 	justifyTop,
@@ -43,6 +43,7 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
+	label = __( 'Align content vertically' ),
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -62,10 +63,7 @@ function BlockVerticalAlignmentUI( {
 					? activeAlignment.icon
 					: defaultAlignmentControl.icon
 			}
-			label={ _x(
-				'Change vertical alignment',
-				'Block vertical alignment setting label'
-			) }
+			label={ label }
 			controls={ controls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

package/src/components/block-visibility/modal.js

@@ -28,13 +28,11 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import {
-	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
-	BLOCK_VISIBILITY_VIEWPORTS,
-} from './constants';
+import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 import {
+	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
 	getHideEverywhereCheckboxState,
 } from './utils';
@@ -74,6 +72,16 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			'core/editor/toggle-list-view'
 		);
 	}, [] );
+	const viewportSettings = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.viewport,
+		[]
+	);
+	const viewportEntries = useMemo(
+		() => getBlockVisibilityViewportEntries( viewportSettings ),
+		[ viewportSettings ]
+	);
 
 	const initialViewportValues = useMemo( () => {
 		if ( blocks?.length === 0 ) {
@@ -85,7 +93,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 
 		const viewportValues = {};
 
-		BLOCK_VISIBILITY_VIEWPORT_ENTRIES.forEach( ( [ , { key } ] ) => {
+		viewportEntries.forEach( ( [ , { key } ] ) => {
 			viewportValues[ key ] = getViewportCheckboxState( blocks, key );
 		} );
 
@@ -93,7 +101,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			hideEverywhere: getHideEverywhereCheckboxState( blocks ),
 			viewportChecked: viewportValues,
 		};
-	}, [ blocks ] );
+	}, [ blocks, viewportEntries ] );
 
 	const [ viewportChecked, setViewportChecked ] = useState(
 		initialViewportValues?.viewportChecked ?? {}
@@ -149,12 +157,17 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 		if ( hideEverywhere !== initialViewportValues.hideEverywhere ) {
 			return true;
 		}
-		return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
+		return viewportEntries.some(
 			( [ , { key } ] ) =>
 				viewportChecked[ key ] !==
 				initialViewportValues.viewportChecked[ key ]
 		);
-	}, [ hideEverywhere, viewportChecked, initialViewportValues ] );
+	}, [
+		hideEverywhere,
+		viewportChecked,
+		initialViewportValues,
+		viewportEntries,
+	] );
 
 	const hasIndeterminateValues = useMemo( () => {
 		if ( hideEverywhere === null ) {
@@ -171,7 +184,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			const newVisibility = hideEverywhere
 				? false
 				: {
-						viewport: BLOCK_VISIBILITY_VIEWPORT_ENTRIES.reduce(
+						viewport: viewportEntries.reduce(
 							( acc, [ , { key } ] ) => {
 								if ( viewportChecked[ key ] ) {
 									// Values are inverted to hide the block on the selected viewport.
@@ -215,6 +228,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			noticeMessage,
 			onClose,
 			updateBlockAttributes,
+			viewportEntries,
 			viewportChecked,
 		]
 	);
@@ -258,7 +272,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 							/>
 							{ hideEverywhere !== true && (
 								<ul className="block-editor-block-visibility-modal__sub-options">
-									{ BLOCK_VISIBILITY_VIEWPORT_ENTRIES.map(
+									{ viewportEntries.map(
 										( [ , { label, icon, key } ] ) => (
 											<li
 												key={ key }

package/src/components/block-visibility/style.scss

@@ -29,7 +29,7 @@
 		}
 
 		&-checkbox--everywhere {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 		}
 
 		&-icon--checked {

package/src/components/block-visibility/test/use-block-visibility.js

@@ -6,11 +6,12 @@ import { renderHook } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
+import { useMediaQuery } from '@wordpress/compose';
 
 // Mock WordPress dependencies before importing the hook
 jest.mock( '@wordpress/compose', () => ( {
-	useViewportMatch: jest.fn(),
+	...jest.requireActual( '@wordpress/compose' ),
+	useMediaQuery: jest.fn(),
 } ) );
 
 /**
@@ -20,17 +21,17 @@ import useBlockVisibility from '../use-block-visibility';
 
 describe( 'useBlockVisibility', () => {
 	// Helper function to set up viewport matches
-	const setupViewport = ( { isMobileOrLarger, isMediumOrLarger } ) => {
+	const setupViewport = ( { isMobileViewport, isTabletViewport } ) => {
 		if (
-			isMobileOrLarger !== undefined &&
-			isMediumOrLarger !== undefined
+			isMobileViewport !== undefined &&
+			isTabletViewport !== undefined
 		) {
-			useViewportMatch
-				.mockReturnValueOnce( isMobileOrLarger )
-				.mockReturnValueOnce( isMediumOrLarger );
+			useMediaQuery
+				.mockReturnValueOnce( isMobileViewport )
+				.mockReturnValueOnce( isTabletViewport );
 		} else {
-			useViewportMatch.mockReturnValue(
-				isMobileOrLarger ?? isMediumOrLarger ?? true
+			useMediaQuery.mockReturnValue(
+				isMobileViewport ?? isTabletViewport ?? false
 			);
 		}
 	};
@@ -42,7 +43,7 @@ describe( 'useBlockVisibility', () => {
 
 	describe( 'Device type overrides', () => {
 		it( 'should return true when deviceType is Mobile and block is hidden on mobile', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -55,7 +56,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when deviceType is Mobile and block is visible on mobile', () => {
-			setupViewport( { isMobileOrLarger: false } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -74,7 +75,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return true when deviceType is Tablet and block is hidden on tablet', () => {
-			setupViewport( { isMobileOrLarger: false } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -88,8 +89,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should use actual viewport detection when deviceType is Desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -106,8 +107,8 @@ describe( 'useBlockVisibility', () => {
 	describe( 'Viewport detection with Desktop deviceType', () => {
 		it( 'should return true when on mobile viewport and block is hidden on mobile', () => {
 			setupViewport( {
-				isMobileOrLarger: false,
-				isMediumOrLarger: false,
+				isMobileViewport: true,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -122,8 +123,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on mobile viewport and block is visible on mobile', () => {
 			setupViewport( {
-				isMobileOrLarger: false,
-				isMediumOrLarger: false,
+				isMobileViewport: true,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -144,8 +145,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return true when on tablet viewport and block is hidden on tablet', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: false,
+				isMobileViewport: false,
+				isTabletViewport: true,
 			} );
 
 			const { result } = renderHook( () =>
@@ -160,8 +161,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on tablet viewport and block is visible on tablet', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: false,
+				isMobileViewport: false,
+				isTabletViewport: true,
 			} );
 
 			const { result } = renderHook( () =>
@@ -182,8 +183,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return true when on desktop viewport and block is hidden on desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -198,8 +199,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on desktop viewport and block is visible on desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -217,11 +218,103 @@ describe( 'useBlockVisibility', () => {
 
 			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
 		} );
+
+		it( 'should use custom viewport breakpoints for viewport detection', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						mobile: '640px',
+						tablet: '960px',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				'(width <= 640px)',
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				'(640px < width <= 960px)',
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'tablet' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should use tablet viewport detection for a single tablet breakpoint', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						tablet: '64rem',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				undefined,
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				'(width <= 64rem)',
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'tablet' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should not use tablet viewport detection when the tablet breakpoint is not larger than mobile', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						mobile: '960px',
+						tablet: '640px',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				'(width <= 960px)',
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				undefined,
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'desktop' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
 	} );
 
 	describe( 'Block visibility (hidden everywhere)', () => {
 		it( 'should return true when blockVisibility is false', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -234,7 +327,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is true and no viewport restrictions', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -247,7 +340,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is undefined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -260,7 +353,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return true when blockVisibility is false regardless of viewport settings', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -275,7 +368,7 @@ describe( 'useBlockVisibility', () => {
 
 	describe( 'Edge cases', () => {
 		it( 'should return false when no visibility settings are defined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -288,7 +381,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is undefined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -302,8 +395,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should default to desktop deviceType when not provided', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>

package/src/components/block-visibility/test/utils.js

@@ -2,11 +2,22 @@
  * Internal dependencies
  */
 import {
+	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
 	getHideEverywhereCheckboxState,
 } from '../utils';
 
 describe( 'block-visibility utils', () => {
+	describe( 'getBlockVisibilityViewportEntries', () => {
+		it( 'returns the configured viewport for a single breakpoint', () => {
+			expect(
+				getBlockVisibilityViewportEntries( { tablet: '64rem' } ).map(
+					( [ key ] ) => key
+				)
+			).toEqual( [ 'desktop', 'tablet' ] );
+		} );
+	} );
+
 	describe( 'getViewportCheckboxState', () => {
 		it( 'should return false for empty or invalid input', () => {
 			expect( getViewportCheckboxState( [], 'mobile' ) ).toBe( false );

package/src/components/block-visibility/use-block-visibility.js

@@ -1,31 +1,47 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
+import { useMediaQuery } from '@wordpress/compose';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 /**
  * Returns information about the current block visibility state.
  *
- * @param {Object}         options                 Parameters to avoid extra store subscriptions.
- * @param {Object|boolean} options.blockVisibility Block visibility metadata.
- * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
- * @param {Window?}        options.view            Window instance in which to perform viewport matching
+ * @param {Object}         options                  Parameters to avoid extra store subscriptions.
+ * @param {Object|boolean} options.blockVisibility  Block visibility metadata.
+ * @param {string}         options.deviceType       Current device type ('desktop', 'tablet', 'mobile').
+ * @param {Object}         options.viewportSettings Viewport breakpoint settings.
+ * @param {Window?}        options.view             Window instance in which to perform viewport matching
  * @return {Object} Object with `isBlockCurrentlyHidden` (boolean) and `currentViewport` (string) properties.
  */
 export default function useBlockVisibility( options = {} ) {
 	const {
 		blockVisibility = undefined,
 		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+		viewportSettings,
 		view = window,
 	} = options;
 
-	const isLargerThanMobile = useViewportMatch( 'mobile', '>=', view ); // >= 480px
-	const isLargerThanTablet = useViewportMatch( 'medium', '>=', view ); // >= 782px
+	const viewportBreakpoints = getViewportBreakpoints( viewportSettings );
+	const mobileMediaQuery = viewportBreakpoints.mobile
+		? `(width <= ${ viewportBreakpoints.mobile })`
+		: undefined;
+	const isMobileViewport = useMediaQuery( mobileMediaQuery, view );
+	let tabletMediaQuery;
+	if ( viewportBreakpoints.tablet ) {
+		tabletMediaQuery = viewportBreakpoints.mobile
+			? `(${ viewportBreakpoints.mobile } < width <= ${ viewportBreakpoints.tablet })`
+			: `(width <= ${ viewportBreakpoints.tablet })`;
+	}
+	const isTabletViewport = useMediaQuery( tabletMediaQuery, view );
 
 	/*
 	 * Priority:
@@ -33,13 +49,19 @@ export default function useBlockVisibility( options = {} ) {
 	 * 2. Actual window size (Desktop mode) - uses viewport detection
 	 */
 	let currentViewport;
-	if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+	if (
+		deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key &&
+		viewportBreakpoints.mobile
+	) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+	} else if (
+		deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key &&
+		viewportBreakpoints.tablet
+	) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-	} else if ( ! isLargerThanMobile ) {
+	} else if ( isMobileViewport ) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( isLargerThanMobile && ! isLargerThanTablet ) {
+	} else if ( isTabletViewport && viewportBreakpoints.tablet ) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
 	} else {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.desktop.key;