@wordpress/block-editor 15.11.0 → 15.11.1-next.v.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.11.0",
+	"version": "15.11.1-next.v.0+b8934fcf9",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.38.0",
-		"@wordpress/api-fetch": "^7.38.0",
-		"@wordpress/base-styles": "^6.14.0",
-		"@wordpress/blob": "^4.38.0",
-		"@wordpress/block-serialization-default-parser": "^5.38.0",
-		"@wordpress/blocks": "^15.11.0",
-		"@wordpress/commands": "^1.38.0",
-		"@wordpress/components": "^32.0.0",
-		"@wordpress/compose": "^7.38.0",
-		"@wordpress/data": "^10.38.0",
-		"@wordpress/dataviews": "^11.2.0",
-		"@wordpress/date": "^5.38.0",
-		"@wordpress/deprecated": "^4.38.0",
-		"@wordpress/dom": "^4.38.0",
-		"@wordpress/element": "^6.38.0",
-		"@wordpress/escape-html": "^3.38.0",
-		"@wordpress/global-styles-engine": "^1.5.0",
-		"@wordpress/hooks": "^4.38.0",
-		"@wordpress/html-entities": "^4.38.0",
-		"@wordpress/i18n": "^6.11.0",
-		"@wordpress/icons": "^11.5.0",
-		"@wordpress/image-cropper": "^1.2.0",
-		"@wordpress/interactivity": "^6.38.0",
-		"@wordpress/is-shallow-equal": "^5.38.0",
-		"@wordpress/keyboard-shortcuts": "^5.38.0",
-		"@wordpress/keycodes": "^4.38.0",
-		"@wordpress/notices": "^5.38.0",
-		"@wordpress/preferences": "^4.38.0",
-		"@wordpress/priority-queue": "^3.38.0",
-		"@wordpress/private-apis": "^1.38.0",
-		"@wordpress/rich-text": "^7.38.0",
-		"@wordpress/style-engine": "^2.38.0",
-		"@wordpress/token-list": "^3.38.0",
-		"@wordpress/upload-media": "^0.23.0",
-		"@wordpress/url": "^4.38.0",
-		"@wordpress/warning": "^3.38.0",
-		"@wordpress/wordcount": "^4.38.0",
+		"@wordpress/a11y": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/api-fetch": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/base-styles": "^6.14.1-next.v.0+b8934fcf9",
+		"@wordpress/blob": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/block-serialization-default-parser": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/blocks": "^15.11.1-next.v.0+b8934fcf9",
+		"@wordpress/commands": "^1.38.1-next.v.0+b8934fcf9",
+		"@wordpress/components": "^32.0.2-next.v.0+b8934fcf9",
+		"@wordpress/compose": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/data": "^10.38.1-next.v.0+b8934fcf9",
+		"@wordpress/dataviews": "^11.3.1-next.v.0+b8934fcf9",
+		"@wordpress/date": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/deprecated": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/dom": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/element": "^6.38.1-next.v.0+b8934fcf9",
+		"@wordpress/escape-html": "^3.38.1-next.v.0+b8934fcf9",
+		"@wordpress/global-styles-engine": "^1.5.1-next.v.0+b8934fcf9",
+		"@wordpress/hooks": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/html-entities": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/i18n": "^6.11.1-next.v.0+b8934fcf9",
+		"@wordpress/icons": "^11.5.1-next.v.0+b8934fcf9",
+		"@wordpress/image-cropper": "^1.2.1-next.v.0+b8934fcf9",
+		"@wordpress/interactivity": "^6.38.1-next.v.0+b8934fcf9",
+		"@wordpress/is-shallow-equal": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/keyboard-shortcuts": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/keycodes": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/notices": "^5.38.1-next.v.0+b8934fcf9",
+		"@wordpress/preferences": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/priority-queue": "^3.38.1-next.v.0+b8934fcf9",
+		"@wordpress/private-apis": "^1.38.1-next.v.0+b8934fcf9",
+		"@wordpress/rich-text": "^7.38.1-next.v.0+b8934fcf9",
+		"@wordpress/style-engine": "^2.38.1-next.v.0+b8934fcf9",
+		"@wordpress/token-list": "^3.38.1-next.v.0+b8934fcf9",
+		"@wordpress/upload-media": "^0.23.1-next.v.0+b8934fcf9",
+		"@wordpress/url": "^4.38.1-next.v.0+b8934fcf9",
+		"@wordpress/warning": "^3.38.1-next.v.0+b8934fcf9",
+		"@wordpress/wordcount": "^4.38.1-next.v.0+b8934fcf9",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "50c4c0f51e4797c217946ce42adfaa5eb026f33f"
+	"gitHead": "17529010285784fd2e735348a28391c79de87c88"
 }

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

@@ -12,7 +12,7 @@ BlockControls.Slot = BlockControlsSlot;
 export const BlockFormatControls = ( props ) => {
 	return <BlockControlsFill group="inline" { ...props } />;
 };
-BlockFormatControls.Slot = ( props ) => {
+BlockFormatControls.Slot = function Slot( props ) {
 	return <BlockControlsSlot group="inline" { ...props } />;
 };
 

package/src/components/block-controls/test/index.js

@@ -43,6 +43,7 @@ describe( 'BlockControls', () => {
 		const edit = ( { children } ) => <>{ children }</>;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: () => {},
 			category: 'text',
 			title: 'block title',

package/src/components/block-edit/test/edit.js

@@ -37,6 +37,7 @@ describe( 'Edit', () => {
 		const edit = () => <div data-testid="foo-bar" />;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: noop,
 			category: 'text',
 			title: 'block title',
@@ -52,6 +53,7 @@ describe( 'Edit', () => {
 		const save = () => <div data-testid="foo-bar" />;
 
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save,
 			category: 'text',
 			title: 'block title',
@@ -79,6 +81,13 @@ describe( 'Edit', () => {
 
 		render( <Edit name="core/test-block" attributes={ attributes } /> );
 
+		// This test is for API version 1 blocks, so the console warning is intentional.
+		// API version 1 blocks automatically receive the default block class name,
+		// while API version 2+ blocks require useBlockProps() to be used explicitly.
+		expect( console ).toHaveWarnedWith(
+			'Block with API version 2 or lower is deprecated since version 6.9. See: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/block-migration-for-iframe-editor-compatibility/ Note: The block "core/test-block" is registered with API version 1. This means that the post editor may work as a non-iframe editor. Since all editors are planned to work as iframes in the future, set the `apiVersion` field to 3 and test the block inside the iframe editor.'
+		);
+
 		const editElement = screen.getByTestId( 'foo-bar' );
 		expect( editElement ).toHaveClass( 'wp-block-test-block' );
 		expect( editElement ).toHaveClass( 'my-class' );
@@ -87,6 +96,7 @@ describe( 'Edit', () => {
 	it( 'should assign context', () => {
 		const edit = ( { context } ) => context.value;
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			category: 'text',
 			title: 'block title',
 			usesContext: [ 'value' ],

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

@@ -29,7 +29,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import { useBorderPanelLabel } from '../../hooks/border';
 import ContentTab from '../inspector-controls-tabs/content-tab';
-import BlockVisibilityInfo from '../block-visibility/block-visibility-info';
+import ViewportVisibilityInfo from '../block-visibility/viewport-visibility-info';
 import { unlock } from '../../lock-unlock';
 
 function StyleInspectorSlots( {
@@ -77,7 +77,6 @@ function StyleInspectorSlots( {
 function BlockInspector() {
 	const {
 		selectedBlockCount,
-		selectedBlockClientId,
 		renderedBlockName,
 		renderedBlockClientId,
 		blockType,
@@ -119,7 +118,6 @@ function BlockInspector() {
 
 		return {
 			selectedBlockCount: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
 			renderedBlockClientId: _renderedBlockClientId,
 			renderedBlockName: _renderedBlockName,
 			blockType: _blockType,
@@ -257,7 +255,6 @@ function BlockInspector() {
 		>
 			<BlockInspectorSingleBlock
 				renderedBlockClientId={ renderedBlockClientId }
-				selectedBlockClientId={ selectedBlockClientId }
 				blockName={ blockType.name }
 				isSectionBlock={ isSectionBlock }
 				availableTabs={ availableTabs }
@@ -309,10 +306,6 @@ const BlockInspectorSingleBlock = ( {
 	// The block that is displayed in the inspector. This is the block whose
 	// controls and information are shown to the user.
 	renderedBlockClientId,
-	// The actual block that is selected in the editor. This may or may not
-	// be the same as the rendered block (e.g., when a child block is selected
-	// but its parent section block is the main one rendered in the inspector).
-	selectedBlockClientId,
 	blockName,
 	isSectionBlock,
 	availableTabs,
@@ -332,10 +325,6 @@ const BlockInspectorSingleBlock = ( {
 		renderedBlockClientId
 	);
 	const isBlockSynced = blockInformation.isSynced;
-	const shouldShowTabs = ! isBlockSynced && hasMultipleTabs;
-	const isSectionBlockSelected =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		selectedBlockClientId === renderedBlockClientId;
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -353,22 +342,24 @@ const BlockInspectorSingleBlock = ( {
 				isChild={ hasParentChildBlockCards }
 				clientId={ renderedBlockClientId }
 			/>
-			<BlockVisibilityInfo clientId={ renderedBlockClientId } />
+			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			{ window?.__experimentalContentOnlyPatternInsertion && (
 				<EditContents clientId={ renderedBlockClientId } />
 			) }
 			<BlockVariationTransforms blockClientId={ renderedBlockClientId } />
-			{ shouldShowTabs && (
-				<InspectorControlsTabs
-					hasBlockStyles={ hasBlockStyles }
-					clientId={ renderedBlockClientId }
-					blockName={ blockName }
-					tabs={ availableTabs }
-					isSectionBlock={ isSectionBlock }
-					contentClientIds={ contentClientIds }
-				/>
+			{ hasMultipleTabs && (
+				<>
+					<InspectorControlsTabs
+						hasBlockStyles={ hasBlockStyles }
+						clientId={ renderedBlockClientId }
+						blockName={ blockName }
+						tabs={ availableTabs }
+						isSectionBlock={ isSectionBlock }
+						contentClientIds={ contentClientIds }
+					/>
+				</>
 			) }
-			{ ! shouldShowTabs && (
+			{ ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -379,15 +370,6 @@ const BlockInspectorSingleBlock = ( {
 					{ ! isSectionBlock && (
 						<StyleInspectorSlots blockName={ blockName } />
 					) }
-					{ isSectionBlock &&
-						isBlockSynced &&
-						isSectionBlockSelected && (
-							<>
-								<InspectorControls.Slot />
-								{ /* Allow AdvancedControls so users can adjust local attributes (e.g. additional CSS classes, HTML element). */ }
-								<AdvancedControls />
-							</>
-						) }
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { isReusableBlock, isTemplatePart } from '@wordpress/blocks';
 import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -31,6 +32,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 		hasMultiSelection,
 		isSectionBlock,
 		editedContentOnlySection,
+		getBlock,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		insertAfterBlock,
@@ -128,15 +130,13 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				const rect = node.getBoundingClientRect();
 
-				const clone = node.cloneNode( true );
-				clone.style.visibility = 'hidden';
-				// Maybe remove the clone now that it's relative?
-				clone.style.display = 'none';
-
-				// Remove the id and leave it on the clone so that drop target
-				// calculations are correct.
+				// Remove the id and leave it on a shallow clone so that drop
+				// target calculations are correct.
 				const id = node.id;
+				const clone = node.cloneNode();
+				clone.style.display = 'none';
 				node.id = null;
+				node.after( clone );
 
 				let _scale = 1;
 
@@ -154,8 +154,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				const inverted = 1 / _scale;
 
-				node.after( clone );
-
 				const originalNodeProperties = {};
 				for ( const property of [
 					'transform',
@@ -225,32 +223,41 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				}
 
 				let hasStarted = false;
+				let lastClientX = originClientX;
+				let lastClientY = originClientY;
+
+				function dragOver( e ) {
+					// Only trigger `over` if the mouse has moved.
+					if (
+						e.clientX === lastClientX &&
+						e.clientY === lastClientY
+					) {
+						return;
+					}
+					lastClientX = e.clientX;
+					lastClientY = e.clientY;
+					over();
+				}
 
-				function over( e ) {
+				function over() {
 					if ( ! hasStarted ) {
 						hasStarted = true;
 						node.style.pointerEvents = 'none';
 					}
+					const pointerYDelta = lastClientY - originClientY;
+					const pointerXDelta = lastClientX - originClientX;
 					const scrollTop = defaultView.scrollY;
 					const scrollLeft = defaultView.scrollX;
-					node.style.top = `${
-						( e.clientY -
-							originClientY +
-							scrollTop -
-							originScrollTop ) *
-						inverted
-					}px`;
-					node.style.left = `${
-						( e.clientX -
-							originClientX +
-							scrollLeft -
-							originScrollLeft ) *
-						inverted
-					}px`;
+					const scrollTopDelta = scrollTop - originScrollTop;
+					const scrollLeftDelta = scrollLeft - originScrollLeft;
+					const topDelta = pointerYDelta + scrollTopDelta;
+					const leftDelta = pointerXDelta + scrollLeftDelta;
+					node.style.top = `${ topDelta * inverted }px`;
+					node.style.left = `${ leftDelta * inverted }px`;
 				}
 
 				function end() {
-					ownerDocument.removeEventListener( 'dragover', over );
+					ownerDocument.removeEventListener( 'dragover', dragOver );
 					ownerDocument.removeEventListener( 'dragend', end );
 					ownerDocument.removeEventListener( 'drop', end );
 					ownerDocument.removeEventListener( 'scroll', over );
@@ -271,7 +278,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 					);
 				}
 
-				ownerDocument.addEventListener( 'dragover', over );
+				ownerDocument.addEventListener( 'dragover', dragOver );
 				ownerDocument.addEventListener( 'dragend', end );
 				ownerDocument.addEventListener( 'drop', end );
 				ownerDocument.addEventListener( 'scroll', over );
@@ -294,12 +301,22 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			 */
 			function onDoubleClick( event ) {
 				const isSection = isSectionBlock( clientId );
+				const block = getBlock( clientId );
+				const isSyncedPattern = isReusableBlock( block );
+				const isTemplatePartBlock = isTemplatePart( block );
 				const isAlreadyEditing = editedContentOnlySection === clientId;
 
-				if ( isSection && ! isAlreadyEditing ) {
-					event.preventDefault();
-					editContentOnlySection( clientId );
+				if (
+					! isSection ||
+					isAlreadyEditing ||
+					isSyncedPattern ||
+					isTemplatePartBlock
+				) {
+					return;
 				}
+
+				event.preventDefault();
+				editContentOnlySection( clientId );
 			}
 
 			// Only add double-click listener if experimental flag is enabled
@@ -319,6 +336,9 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			clientId,
 			isSelected,
 			getBlockRootClientId,
+			getBlock,
+			isReusableBlock,
+			isTemplatePart,
 			insertAfterBlock,
 			removeBlock,
 			isZoomOut,

package/src/components/block-preview/test/index.js

@@ -16,22 +16,26 @@ import {
  * Internal dependencies
  */
 import { useBlockPreview } from '../';
+import { useBlockProps } from '../../block-list/use-block-props';
 
 describe( 'useBlockPreview', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {
+			apiVersion: 3,
 			save: () => (
-				<div>
+				<div { ...useBlockProps.save() }>
 					Test block save view
 					<button>Button</button>
 				</div>
 			),
-			edit: () => (
-				<div>
-					Test block edit view
-					<button>Button</button>
-				</div>
-			),
+			edit: function Edit() {
+				return (
+					<div { ...useBlockProps() }>
+						Test block edit view
+						<button>Button</button>
+					</div>
+				);
+			},
 			category: 'text',
 			title: 'test block',
 		} );

package/src/components/block-settings-menu-controls/index.js

@@ -21,7 +21,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 import { ModifyContentOnlySectionMenuItem } from '../content-lock';
 import { BlockRenameControl, useBlockRename } from '../block-rename';
-import { BlockVisibilityMenuItem } from '../block-visibility';
+import { BlockVisibilityViewportMenuItem } from '../block-visibility';
 import { EditSectionMenuItem } from './edit-section-menu-item';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
@@ -116,7 +116,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ showVisibilityButton && (
-							<BlockVisibilityMenuItem
+							<BlockVisibilityViewportMenuItem
 								clientIds={ selectedClientIds }
 							/>
 						) }

package/src/components/block-switcher/test/index.js

@@ -33,6 +33,7 @@ describe( 'BlockSwitcher', () => {
 		clientId: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
 	};
 	const headingBlockType = {
+		apiVersion: 3,
 		category: 'text',
 		title: 'Heading',
 		edit: () => {},
@@ -54,6 +55,7 @@ describe( 'BlockSwitcher', () => {
 		},
 	};
 	const paragraphBlockType = {
+		apiVersion: 3,
 		category: 'text',
 		title: 'Paragraph',
 		edit: () => {},

package/src/components/block-switcher/test/use-transformed.patterns.js

@@ -14,6 +14,7 @@ import {
 describe( 'use-transformed-patterns', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
+			apiVersion: 3,
 			attributes: {
 				align: {
 					type: 'string',
@@ -36,6 +37,7 @@ describe( 'use-transformed-patterns', () => {
 			title: 'test block 1',
 		} );
 		registerBlockType( 'core/test-block-2', {
+			apiVersion: 3,
 			attributes: {
 				align: { type: 'string' },
 				content: { type: 'boolean' },

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

@@ -12,6 +12,7 @@ describe( 'BlockSwitcher - utils', () => {
 	describe( 'getRetainedBlockAttributes', () => {
 		beforeAll( () => {
 			registerBlockType( 'core/test-block-1', {
+				apiVersion: 3,
 				attributes: {
 					align: {
 						type: 'string',
@@ -34,6 +35,7 @@ describe( 'BlockSwitcher - utils', () => {
 				title: 'test block 1',
 			} );
 			registerBlockType( 'core/test-block-2', {
+				apiVersion: 3,
 				attributes: {
 					align: { type: 'string' },
 					content: { type: 'boolean' },

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

@@ -27,7 +27,7 @@ import BlockControls from '../block-controls';
 import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
-import { BlockVisibilityToolbar } from '../block-visibility';
+import { ViewportVisibilityToolbar } from '../block-visibility';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowHoveredOrFocusedGestures } from './utils';
@@ -213,7 +213,7 @@ export function PrivateBlockToolbar( {
 							/>
 							{ isDefaultEditingMode &&
 								showBlockVisibilityButton && (
-									<BlockVisibilityToolbar
+									<ViewportVisibilityToolbar
 										clientIds={ blockClientIds }
 									/>
 								) }

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

@@ -35,7 +35,6 @@ import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
 import usePasteStyles from '../use-paste-styles';
 import { BlockVisibilityModal } from '../block-visibility';
-import { cleanEmptyObject } from '../../hooks/utils';
 
 function selector( select ) {
 	const {
@@ -101,7 +100,6 @@ export default function BlockTools( {
 		moveBlocksDown,
 		expandBlock,
 		stopEditingContentOnlySection,
-		updateBlockAttributes,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -230,33 +228,8 @@ export default function BlockTools( {
 					return;
 				}
 
-				if ( window.__experimentalHideBlocksBasedOnScreenSize ) {
-					// Open the visibility breakpoints modal.
-					setVisibilityModalClientIds( clientIds );
-				} else {
-					const hasHiddenBlock = blocks.some(
-						( block ) =>
-							block.attributes.metadata?.blockVisibility === false
-					);
-					const attributesByClientId = Object.fromEntries(
-						blocks.map(
-							( { clientId: mapClientId, attributes } ) => [
-								mapClientId,
-								{
-									metadata: cleanEmptyObject( {
-										...attributes?.metadata,
-										blockVisibility: hasHiddenBlock
-											? undefined
-											: false,
-									} ),
-								},
-							]
-						)
-					);
-					updateBlockAttributes( clientIds, attributesByClientId, {
-						uniqueByBlock: true,
-					} );
-				}
+				// Open the visibility breakpoints modal.
+				setVisibilityModalClientIds( clientIds );
 			}
 		}
 

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

@@ -1,21 +1,5 @@
 export { default as BlockVisibilityModal } from './modal';
 export { default as useBlockVisibility } from './use-block-visibility';
-
-import BlockVisibilityToolbarDefault from './toolbar';
-import BlockVisibilityViewportToolbar from './viewport-toolbar';
-
-import BlockVisibilityMenuItemDefault from './menu-item';
-import BlockVisibilityViewportMenuItem from './viewport-menu-item';
-
-const hasViewportVisibilityExperiment =
-	typeof window !== 'undefined' &&
-	window.__experimentalHideBlocksBasedOnScreenSize;
-
-// Conditionally export the viewport versions when the experimental flag is enabled.
-export const BlockVisibilityMenuItem = hasViewportVisibilityExperiment
-	? BlockVisibilityViewportMenuItem
-	: BlockVisibilityMenuItemDefault;
-
-export const BlockVisibilityToolbar = hasViewportVisibilityExperiment
-	? BlockVisibilityViewportToolbar
-	: BlockVisibilityToolbarDefault;
+export { default as ViewportVisibilityToolbar } from './viewport-toolbar';
+export { default as BlockVisibilityViewportMenuItem } from './viewport-menu-item';
+export { default as ViewportVisibilityInfo } from './viewport-visibility-info';

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

@@ -118,7 +118,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			return sprintf(
 				// translators: %s: The shortcut key to access the List View.
 				__(
-					'Block visibility settings saved. You can access them via the List View (%s).'
+					'Block visibility settings updated. You can access them via the List View (%s).'
 				),
 				listViewShortcut
 			);
@@ -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,
@@ -190,7 +192,7 @@ export default function BlockVisibilityModal( { clientIds, onClose } ) {
 			createSuccessNotice( noticeMessage, {
 				id: hideEverywhere
 					? 'block-visibility-hidden'
-					: 'block-visibility-viewports-saved',
+					: 'block-visibility-viewports-updated',
 				type: 'snackbar',
 			} );
 			onClose();