@wordpress/block-editor 15.11.0 → 15.12.0

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,31 +301,39 @@ 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;
 				}
-			}
 
-			// Only add double-click listener if experimental flag is enabled
-			if ( window?.__experimentalContentOnlyPatternInsertion ) {
-				node.addEventListener( 'dblclick', onDoubleClick );
+				event.preventDefault();
+				editContentOnlySection( clientId );
 			}
 
+			node.addEventListener( 'dblclick', onDoubleClick );
+
 			return () => {
 				node.removeEventListener( 'keydown', onKeyDown );
 				node.removeEventListener( 'dragstart', onDragStart );
-				if ( window?.__experimentalContentOnlyPatternInsertion ) {
-					node.removeEventListener( 'dblclick', onDoubleClick );
-				}
+				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
 		[
 			clientId,
 			isSelected,
 			getBlockRootClientId,
+			getBlock,
+			isReusableBlock,
+			isTemplatePart,
 			insertAfterBlock,
 			removeBlock,
 			isZoomOut,

package/src/components/block-list/use-in-between-inserter.js

@@ -15,12 +15,14 @@ import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
-	const isInBetweenInserterDisabled = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree ||
-			unlock( select( blockEditorStore ) ).isZoomOut(),
-		[]
-	);
+	const isInBetweenInserterDisabled = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return (
+			settings.isDistractionFree ||
+			settings.isPreviewMode ||
+			unlock( select( blockEditorStore ) ).isZoomOut()
+		);
+	}, [] );
 	const {
 		getBlockListSettings,
 		getBlockIndex,

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/block-settings-dropdown.js

@@ -87,6 +87,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		isContentOnly,
 		isZoomOut,
+		canEdit,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -97,6 +98,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getBlockEditingMode,
 				isZoomOut: _isZoomOut,
+				canEditBlock,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -121,6 +123,7 @@ export function BlockSettingsDropdown( {
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 				isZoomOut: _isZoomOut(),
+				canEdit: canEditBlock( firstBlockClientId ),
 			};
 		},
 		[ firstBlockClientId ]
@@ -240,7 +243,7 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-									{ count === 1 && (
+									{ canEdit && count === 1 && (
 										<BlockHTMLConvertButton
 											clientId={ firstBlockClientId }
 										/>
@@ -252,7 +255,7 @@ export function BlockSettingsDropdown( {
 											shortcut={ shortcuts.copy }
 										/>
 									) }
-									{ ! isContentOnly && (
+									{ canRemove && ! isContentOnly && (
 										<CopyMenuItem
 											clientIds={ clientIds }
 											label={ __( 'Cut' ) }
@@ -301,7 +304,7 @@ export function BlockSettingsDropdown( {
 											</MenuItem>
 										</>
 									) }
-									{ count === 1 && (
+									{ canEdit && count === 1 && (
 										<CommentIconSlotFill.Slot
 											fillProps={ {
 												clientId: firstBlockClientId,
@@ -318,9 +321,11 @@ export function BlockSettingsDropdown( {
 											label={ __( 'Copy styles' ) }
 											eventType="copyStyles"
 										/>
-										<MenuItem onClick={ onPasteStyles }>
-											{ __( 'Paste styles' ) }
-										</MenuItem>
+										{ canEdit && (
+											<MenuItem onClick={ onPasteStyles }>
+												{ __( 'Paste styles' ) }
+											</MenuItem>
+										) }
 									</MenuGroup>
 								) }
 								{ ! isContentOnly && (

package/src/components/block-settings-menu-controls/edit-section-menu-item.js

@@ -31,13 +31,7 @@ export function EditSectionMenuItem( { clientId, onClose } ) {
 		[ clientId ]
 	);
 
-	// Only show when the experiment is enabled, the block is a section block,
-	// and we're not already editing it
-	if (
-		! window?.__experimentalContentOnlyPatternInsertion ||
-		! isSectionBlock ||
-		isEditingContentOnlySection
-	) {
+	if ( ! isSectionBlock || isEditingContentOnlySection ) {
 		return null;
 	}
 

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

@@ -19,9 +19,8 @@ import {
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 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' );
@@ -32,6 +31,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		selectedClientIds,
 		isContentOnly,
 		canToggleSelectedBlocksVisibility,
+		canEdit,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -39,6 +39,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
 				getBlockEditingMode,
+				canEditBlock,
 			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
@@ -52,6 +53,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				).every( ( block ) =>
 					hasBlockSupport( block.name, 'visibility', true )
 				),
+				canEdit: canEditBlock( ids[ 0 ] ),
 			};
 		},
 		[ clientIds ]
@@ -105,34 +107,30 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 								onClose={ fillProps?.onClose }
 							/>
 						) }
-						{ showLockButton && (
+						{ canEdit && showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
-						{ showRenameButton && (
+						{ canEdit && showRenameButton && (
 							<BlockRenameControl
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
-						{ showVisibilityButton && (
-							<BlockVisibilityMenuItem
+						{ canEdit && showVisibilityButton && (
+							<BlockVisibilityViewportMenuItem
 								clientIds={ selectedClientIds }
 							/>
 						) }
 						{ fills }
-						{ selectedClientIds.length === 1 && (
-							<ModifyContentOnlySectionMenuItem
-								clientId={ selectedClientIds[ 0 ] }
-								onClose={ fillProps?.onClose }
-							/>
-						) }
-						{ fillProps?.count === 1 && ! isContentOnly && (
-							<BlockModeToggle
-								clientId={ fillProps?.firstBlockClientId }
-								onToggle={ fillProps?.onClose }
-							/>
-						) }
+						{ canEdit &&
+							fillProps?.count === 1 &&
+							! isContentOnly && (
+								<BlockModeToggle
+									clientId={ fillProps?.firstBlockClientId }
+									onToggle={ fillProps?.onClose }
+								/>
+							) }
 					</MenuGroup>
 				);
 			} }

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/block-toolbar-icon.js

@@ -27,6 +27,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
+		canEditBlock,
 	} = unlock( select( blockEditorStore ) );
 	const { getBlockStyles } = select( blocksStore );
 
@@ -53,17 +54,16 @@ function getBlockIconVariant( { select, clientIds } ) {
 			0
 	);
 	const canRemove = canRemoveBlocks( clientIds );
-
+	const canEdit = clientIds.every( ( clientId ) => canEditBlock( clientId ) );
 	const isDefaultEditingMode =
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
-	const _hideTransformsForSections =
-		window?.__experimentalContentOnlyPatternInsertion &&
-		hasPatternNameInSelection;
+	const _hideTransformsForSections = hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
 		( hasBlockStyles || canRemove ) &&
-		! hasTemplateLock;
+		! hasTemplateLock &&
+		canEdit;
 
 	const _showPatternOverrides = hasPatternOverrides && hasParentPattern;
 
@@ -84,11 +84,7 @@ function getBlockIcon( { select, clientIds } ) {
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
 	const blockAttributes = getBlockAttributes( firstClientId );
-	if (
-		_isSingleBlock &&
-		blockAttributes?.metadata?.patternName &&
-		window?.__experimentalContentOnlyPatternInsertion
-	) {
+	if ( _isSingleBlock && blockAttributes?.metadata?.patternName ) {
 		return symbol;
 	}
 

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';
@@ -116,14 +116,8 @@ export function PrivateBlockToolbar( {
 		);
 
 		const _isZoomOut = isZoomOut();
-
 		const _isSectionBlock = isSectionBlock( selectedBlockClientId );
-
-		// The switch style button appears more prominently with the
-		// content only pattern experiment.
-		const _showSwitchSectionStyleButton =
-			window?.__experimentalContentOnlyPatternInsertion &&
-			( _isZoomOut || _isSectionBlock );
+		const _showSwitchSectionStyleButton = _isZoomOut || _isSectionBlock;
 
 		return {
 			blockClientId: selectedBlockClientId,
@@ -213,7 +207,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-variation-transforms/index.js

@@ -205,10 +205,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	const hideVariationsForSections =
-		window?.__experimentalContentOnlyPatternInsertion && isSection;
-
-	if ( ! variations?.length || isContentOnly || hideVariationsForSections ) {
+	if ( ! variations?.length || isContentOnly || isSection ) {
 		return null;
 	}
 

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();