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

package/src/components/list-view/block.js

@@ -98,6 +98,7 @@ function ListViewBlock( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		showViewportModal,
+		stopEditingContentOnlySection,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	const debouncedToggleBlockHighlight = useDebounce(
@@ -125,21 +126,36 @@ function ListViewBlock( {
 
 	const pasteStyles = usePasteStyles();
 
-	const { block, blockName, allowRightClickOverrides } = useSelect(
+	const {
+		block,
+		blockName,
+		blockEditingMode,
+		allowRightClickOverrides,
+		editedSection,
+	} = useSelect(
 		( select ) => {
-			const { getBlock, getBlockName, getSettings } = unlock(
-				select( blockEditorStore )
-			);
+			const {
+				getBlock,
+				getBlockName,
+				getBlockEditingMode: getBlockEditingModeForClientId,
+				getSettings,
+				getEditedContentOnlySection,
+			} = unlock( select( blockEditorStore ) );
 
 			return {
 				block: getBlock( clientId ),
 				blockName: getBlockName( clientId ),
+				blockEditingMode: getBlockEditingModeForClientId( clientId ),
 				allowRightClickOverrides:
 					getSettings().allowRightClickOverrides,
+				editedSection: getEditedContentOnlySection(),
 			};
 		},
 		[ clientId ]
 	);
+
+	const isDisabled = blockEditingMode === 'disabled';
+
 	const { canRename } = useBlockRename( blockName );
 
 	const showBlockActions =
@@ -202,6 +218,13 @@ function ListViewBlock( {
 			return;
 		}
 
+		if ( editedSection && isMatch( 'core/block-editor/unselect', event ) ) {
+			event.stopPropagation();
+			event.preventDefault();
+			stopEditingContentOnlySection();
+			return;
+		}
+
 		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
 
 		// If multiple blocks are selected, deselect all blocks when the user
@@ -539,7 +562,8 @@ function ListViewBlock( {
 	);
 
 	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
+	const canShowBlockActions = showBlockActions && ! isDisabled;
+	const hasRenderedMovers = showBlockMovers && hasSiblings && ! isDisabled;
 	const moverCellClassName = clsx(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
@@ -553,7 +577,7 @@ function ListViewBlock( {
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
-	} else if ( ! showBlockActions ) {
+	} else if ( ! canShowBlockActions ) {
 		colSpan = 3;
 	}
 
@@ -566,12 +590,13 @@ function ListViewBlock( {
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
-		'is-draggable': canMoveBlock,
+		'is-draggable': canMoveBlock && ! isDisabled,
 		'is-displacement-normal': displacement === 'normal',
 		'is-displacement-up': displacement === 'up',
 		'is-displacement-down': displacement === 'down',
 		'is-after-dragged-blocks': isAfterDraggedBlocks,
 		'is-nesting': isNesting,
+		'is-disabled': isDisabled,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -582,19 +607,28 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
-	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
-	const currentlyEditingBlockInCanvas =
-		isSelected && selectedClientIds.length === 1;
+	const getListViewBlockTabIndex = ( rovingTabIndex ) => {
+		if ( isDisabled ) {
+			return -1;
+		}
+
+		// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
+		if ( isSelected && selectedClientIds.length === 1 ) {
+			return 0;
+		}
+
+		return rovingTabIndex;
+	};
 
 	return (
 		<ListViewLeaf
 			className={ classes }
 			isDragged={ isDragged }
 			onKeyDown={ onKeyDown }
-			onMouseEnter={ onMouseEnter }
-			onMouseLeave={ onMouseLeave }
-			onFocus={ onMouseEnter }
-			onBlur={ onMouseLeave }
+			onMouseEnter={ isDisabled ? undefined : onMouseEnter }
+			onMouseLeave={ isDisabled ? undefined : onMouseLeave }
+			onFocus={ isDisabled ? undefined : onMouseEnter }
+			onBlur={ isDisabled ? undefined : onMouseLeave }
 			level={ level }
 			position={ position }
 			rowCount={ rowCount }
@@ -615,22 +649,25 @@ function ListViewBlock( {
 						<ListViewBlockContents
 							block={ block }
 							onClick={ selectEditorBlock }
-							onContextMenu={ onContextMenu }
+							onContextMenu={
+								isDisabled ? undefined : onContextMenu
+							}
 							onMouseDown={ onMouseDown }
-							onToggleExpanded={ toggleExpanded }
+							onToggleExpanded={
+								isDisabled ? undefined : toggleExpanded
+							}
 							isSelected={ isSelected }
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={
-								currentlyEditingBlockInCanvas ? 0 : tabIndex
-							}
+							tabIndex={ getListViewBlockTabIndex( tabIndex ) }
 							onFocus={ onFocus }
 							isExpanded={ canEditBlock ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
 							ariaDescribedBy={ descriptionId }
 							visibilityLabel={ blockVisibilityDescription }
+							isDisabled={ isDisabled }
 						/>
 						<AriaReferencedText id={ descriptionId }>
 							{ [
@@ -676,7 +713,7 @@ function ListViewBlock( {
 				</>
 			) }
 
-			{ showBlockActions && BlockSettingsMenu && (
+			{ canShowBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
 					aria-selected={ !! isSelected }

package/src/components/list-view/expander.js

@@ -15,7 +15,11 @@ export default function ListViewExpander( { onClick } ) {
 		// For the current tree grid implementation, please do not try to make this a button.
 		<span
 			className="block-editor-list-view__expander"
-			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
+			onClick={
+				onClick
+					? ( event ) => onClick( event, { forceToggle: true } )
+					: undefined
+			}
 			aria-hidden="true"
 			data-testid="list-view-expander"
 		>

package/src/components/list-view/style.scss

@@ -447,6 +447,25 @@
 			box-shadow: 0 0 0 $radius-small var(--wp-admin-theme-color);
 		}
 	}
+
+	&.is-disabled {
+		opacity: 0.2;
+		@media not ( prefers-reduced-motion ) {
+			transition: opacity 0.1s linear;
+		}
+
+		&:hover {
+			opacity: 0.2;
+		}
+
+		.block-editor-list-view__expander {
+			cursor: default;
+		}
+
+		.block-editor-list-view-block-select-button:hover {
+			color: inherit;
+		}
+	}
 }
 
 // First level of indentation is aria-level 2, max indent is 8.

package/src/components/list-view/use-list-view-client-ids.js

@@ -16,14 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				getEnabledClientIdsTree,
+				getListViewClientIdsTree,
 			} = unlock( select( blockEditorStore ) );
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
 				clientIdsTree:
-					blocks ?? getEnabledClientIdsTree( rootClientId ),
+					blocks ?? getListViewClientIdsTree( rootClientId ),
 			};
 		},
 		[ blocks, rootClientId ]

package/src/components/observe-typing/index.js

@@ -129,6 +129,12 @@ export function useTypingObserver() {
 			if ( isTyping ) {
 				let timerId;
 
+				// Capture the window reference while the node is still
+				// attached. Reusing the reference we held at mount keeps the
+				// cleanup and the handlers working against the same window
+				// we set things up on.
+				const { defaultView } = node.ownerDocument;
+
 				/**
 				 * Stops typing when focus transitions to a non-text field element.
 				 *
@@ -141,7 +147,7 @@ export function useTypingObserver() {
 					// before the keydown event, wait until after current stack
 					// before evaluating whether typing is to be stopped. Otherwise,
 					// typing will re-start.
-					timerId = node.ownerDocument.defaultView.setTimeout( () => {
+					timerId = defaultView.setTimeout( () => {
 						if ( ! isTextField( target ) ) {
 							stopTyping();
 						}
@@ -168,8 +174,7 @@ export function useTypingObserver() {
 				 * uncollapsed (shift) selection.
 				 */
 				function stopTypingOnSelectionUncollapse() {
-					const selection =
-						node.ownerDocument.defaultView.getSelection();
+					const selection = defaultView.getSelection();
 					if ( ! selection.isCollapsed ) {
 						stopTyping();
 					}
@@ -184,7 +189,7 @@ export function useTypingObserver() {
 				);
 
 				return () => {
-					node.ownerDocument.defaultView.clearTimeout( timerId );
+					defaultView.clearTimeout( timerId );
 					node.removeEventListener(
 						'focus',
 						stopTypingOnNonTextField

package/src/components/preset-input-control/custom-value-controls.js

@@ -71,7 +71,6 @@ export default function CustomValueControls( {
 			onFocus={ onMouseOver }
 			onMouseOut={ onMouseOut }
 			onMouseOver={ onMouseOver }
-			size="__unstable-large"
 			units={ units }
 			value={ [ parsedQuantity, computedUnit ].join( '' ) }
 			placeholder={ allPlaceholder }
@@ -126,7 +125,6 @@ export default function CustomValueControls( {
 				step={ step }
 				value={ parsedQuantity }
 				withInputField={ false }
-				__next40pxDefaultSize
 			/>
 		</>
 	);

package/src/components/preset-input-control/index.js

@@ -267,7 +267,6 @@ export default function PresetInputControl( {
 					step={ 1 }
 					value={ currentValue }
 					withInputField={ false }
-					__next40pxDefaultSize
 				/>
 			) }
 			{ hasPresets && ! showRangeControl && ! showCustomValueControl && (
@@ -295,7 +294,6 @@ export default function PresetInputControl( {
 					onMouseOut={ onMouseOut }
 					onMouseOver={ onMouseOver }
 					options={ options }
-					size="__unstable-large"
 					value={
 						// passing empty string as a fallback to continue using the
 						// component in controlled mode

package/src/components/resolution-tool/index.js

@@ -51,7 +51,6 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/responsive-block-control/test/index.js

@@ -39,11 +39,7 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl
-				__next40pxDefaultSize
-				label={ labelComponent }
-				options={ sizeOptions }
-			/>
+			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.

package/src/components/text-alignment-control/index.js

@@ -76,7 +76,6 @@ export default function TextAlignmentControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
 			className={ clsx(
 				'block-editor-text-alignment-control',

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,6 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
 			className={ clsx(
 				'block-editor-text-decoration-control',

package/src/components/text-indent-control/index.js

@@ -22,19 +22,17 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for line text indent.
  *
- * @param {Object}                  props                       Component props.
- * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
- * @param {string}                  props.value                 Currently selected text indent.
- * @param {Function}                props.onChange              Handles change in text indent selection.
- * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
- * @param {boolean}                 props.withSlider            Whether to show the slider control.
- * @param {boolean}                 props.hasBottomMargin       Whether to add bottom margin below the control.
- * @param {string}                  props.help                  Help text to display below the control.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected text indent.
+ * @param {Function}                props.onChange             Handles change in text indent selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {boolean}                 props.withSlider           Whether to show the slider control.
+ * @param {boolean}                 props.hasBottomMargin      Whether to add bottom margin below the control.
+ * @param {string}                  props.help                 Help text to display below the control.
  *
  * @return {Element} Text indent control.
  */
 export default function TextIndentControl( {
-	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -68,8 +66,6 @@ export default function TextIndentControl( {
 	if ( ! withSlider ) {
 		return (
 			<UnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				{ ...otherProps }
 				label={ __( 'Line indent' ) }
 				value={ value }
@@ -89,14 +85,11 @@ export default function TextIndentControl( {
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						__shouldNotWarnDeprecated36pxSize
 						label={ __( 'Line indent' ) }
 						labelPosition="top"
 						hideLabelFromVision
 						value={ value }
 						onChange={ onChange }
-						size={ otherProps.size }
 						units={ units }
 						__unstableInputWidth={ __unstableInputWidth }
 						min={ 0 }
@@ -106,8 +99,6 @@ export default function TextIndentControl( {
 					<FlexItem isBlock>
 						<Spacer marginX={ 2 } marginBottom={ 0 }>
 							<RangeControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Line indent' ) }
 								hideLabelFromVision
 								value={ valueQuantity }

package/src/components/text-transform-control/index.js

@@ -55,7 +55,6 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
 			className={ clsx(
 				'block-editor-text-transform-control',

package/src/components/use-block-display-information/index.js

@@ -16,7 +16,6 @@ import { symbol } from '@wordpress/icons';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { isIsolatedEditorKey } from '../../store/private-keys';
 
 /** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
 
@@ -78,8 +77,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			const {
 				getBlockName,
 				getBlockAttributes,
+				getBlock,
 				__experimentalGetParsedPattern,
-				getSettings,
 			} = blockEditorSelect;
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -89,20 +88,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
-			const { isWithinEditedContentOnlySection } =
-				unlock( blockEditorSelect );
-			const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+			const { isSectionBlock } = unlock( blockEditorSelect );
 
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
-			const isEditedContentOnlySection =
-				isWithinEditedContentOnlySection( clientId );
 
-			if (
-				patternName &&
-				! isEditedContentOnlySection &&
-				! isIsolatedEditor
-			) {
+			if ( patternName && isSectionBlock( clientId ) ) {
 				const pattern = __experimentalGetParsedPattern( patternName );
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {
@@ -118,7 +109,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				};
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const syncedTitle = isSynced

package/src/components/use-block-display-information/test/index.js

@@ -14,7 +14,6 @@ import { symbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import useBlockDisplayInformation from '../';
-import { isIsolatedEditorKey } from '../../../store/private-keys';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../../lock-unlock', () => ( {
@@ -26,6 +25,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 } ) );
 
 const groupIcon = 'group-icon';
+const templatePartIcon = 'template-part-icon';
 
 function TestComponent( { onChange } ) {
 	const blockInformation = useBlockDisplayInformation( 'client-id' );
@@ -56,19 +56,17 @@ function setupUseSelect( {
 		description: 'Gather blocks in a layout container.',
 	},
 	getActiveBlockVariation = () => null,
-	settings = {},
-	isWithinEditedSection = false,
+	isSectionBlock = true,
 } = {} ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
 			getBlockName: () => blockName,
 			getBlockAttributes: () => attributes,
-			getSettings: () => settings,
 			__experimentalGetParsedPattern: () => ( {
 				title: 'Hero pattern',
 				description: 'Pattern description.',
 			} ),
-			isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			isSectionBlock: () => isSectionBlock,
 			getBlockType: () => blockType,
 			getActiveBlockVariation,
 		} ) )
@@ -97,7 +95,7 @@ describe( 'useBlockDisplayInformation', () => {
 	} );
 
 	it( 'displays block information for a pattern section that is being edited', () => {
-		setupUseSelect( { isWithinEditedSection: true } );
+		setupUseSelect( { isSectionBlock: false } );
 		const onChange = jest.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
@@ -120,9 +118,7 @@ describe( 'useBlockDisplayInformation', () => {
 					patternName: 'theme/header-wrapper',
 				},
 			},
-			settings: {
-				[ isIsolatedEditorKey ]: true,
-			},
+			isSectionBlock: false,
 		} );
 		const onChange = jest.fn();
 
@@ -137,4 +133,46 @@ describe( 'useBlockDisplayInformation', () => {
 			} )
 		);
 	} );
+
+	it( 'displays block information for a pattern wrapper when content-only editing is disabled', () => {
+		setupUseSelect( {
+			isSectionBlock: false,
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for section blocks without pattern metadata', () => {
+		setupUseSelect( {
+			attributes: {},
+			blockName: 'core/template-part',
+			blockType: {
+				name: 'core/template-part',
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			},
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			} )
+		);
+	} );
 } );

package/src/components/use-on-block-drop/index.js

@@ -5,6 +5,7 @@ import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
 	createBlock,
+	__experimentalCloneSanitizedBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
@@ -266,13 +267,9 @@ export default function useOnBlockDrop(
 					blocks.unshift( targetBlock );
 				}
 
-				const groupInnerBlocks = blocks.map( ( block ) => {
-					return createBlock(
-						block.name,
-						block.attributes,
-						block.innerBlocks
-					);
-				} );
+				const groupInnerBlocks = blocks.map( ( block ) =>
+					__experimentalCloneSanitizedBlock( block )
+				);
 
 				const areAllImages = blocks.every( ( block ) => {
 					return block.name === 'core/image';