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

package/src/components/inserter/style.scss

@@ -469,14 +469,31 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+// On mobile the media category renders inside a `Navigator.Screen`. The screen
+// is a grid item the navigator aligns to the start (so it's content-height by
+// default); stretch it to full height and make it a flex column so the panel
+// below the back-button header fills the remaining space rather than overflowing.
+.block-editor-inserter__media-mobile-screen {
+	display: flex;
+	flex-direction: column;
+	align-self: stretch;
+}
+
 .block-editor-inserter__media-panel {
-	min-height: 100%;
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
+	// Mobile: fill the height left below the screen's back-button header so the
+	// results scroll internally and the attach footer stays on-screen.
+	flex: 1;
+	min-height: 0;
 
 	@include break-medium {
 		padding: 0;
+		// Desktop: the panel lives in the absolutely-positioned category panel,
+		// so fill its height directly instead.
+		flex: 0 1 auto;
+		min-height: 100%;
 	}
 
 	.block-editor-inserter__media-panel-spinner {
@@ -494,6 +511,90 @@ $block-inserter-tabs-height: 44px;
 			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
 		}
 	}
+
+	// The empty state grows to fill, alongside `-results`/`-spinner`, so the
+	// attach footer below stays pinned to the bottom in every state.
+	.block-editor-inserter__no-results {
+		flex-grow: 1;
+	}
+
+	.block-editor-inserter__media-panel-attach {
+		// Match the padding (and so the height) of the "Open Media Library"
+		// footer button in the adjacent column, so the two line up.
+		&.components-button {
+			justify-content: center;
+			padding: $grid-unit-20;
+		}
+		// Balanced breathing room above and below the footer button.
+		// `flex-shrink: 0` keeps it full height as a flex child rather than
+		// collapsing to its content.
+		flex-shrink: 0;
+		margin-top: $grid-unit-20;
+		margin-bottom: $grid-unit-20;
+		@include break-medium() {
+			margin-left: $grid-unit-30;
+			margin-right: $grid-unit-30;
+		}
+	}
+
+	.block-editor-inserter__media-panel-results {
+		// Take over the scroll host role the media list had when it was a direct
+		// flex child of the panel: grow to fill and constrain height
+		// (`min-height: 0` lets the inner list's `overflow-y: auto` engage).
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		min-height: 0;
+
+		// While an attach/detach refetch is in flight, dim the existing grid (and
+		// gently pulse it) rather than clearing it or blocking it with a spinner.
+		// Mirrors the DataViews "refreshing" treatment; the delayed `is-loading`
+		// class (see `useDelayedLoading`) means quick refetches show nothing.
+		&.is-loading .block-editor-inserter__media-list {
+			opacity: 0.5;
+			pointer-events: none;
+
+			@media not ( prefers-reduced-motion ) {
+				opacity: 1;
+				animation: inserter-media-panel-pulse 1s ease-in-out infinite;
+			}
+		}
+	}
+
+	// When the attach footer is present it supplies the breathing room beneath
+	// the grid, so drop the list's own bottom padding — otherwise scrolling to
+	// the end leaves a doubled gap before the footer.
+	&.has-attach-footer .block-editor-inserter__media-list {
+		padding-bottom: 0;
+	}
+}
+
+@keyframes inserter-media-panel-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.block-editor-inserter__media-panel-detach-modal {
+	// Render above the ellipsis dropdown (a `.components-popover`) it opens from,
+	// which otherwise stacks over the modal. Matches other dropdown-triggered
+	// modals (e.g. block rename).
+	z-index: z-index(".block-editor-inserter__media-panel-detach-modal");
+
+	p {
+		margin-top: 0;
+	}
+}
+
+.block-editor-inserter__media-panel-detach-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: $grid-unit-10;
+	margin-top: $grid-unit-20;
 }
 
 .block-editor-inserter__media-list__list-item {
@@ -513,7 +614,15 @@ $block-inserter-tabs-height: 44px;
 		.block-editor-inserter__media-list__item-preview > * {
 			outline-color: rgba($black, 0.3);
 		}
+	}
 
+	// Reveal the per-item options button on hover, and — so keyboard users can
+	// reach it — whenever focus is within the item (e.g. its preview is
+	// focused). The button is `display: none` by default, which can never
+	// receive focus, so without `:focus-within` the detach/report action is
+	// unreachable by keyboard.
+	&.is-hovered,
+	&:focus-within {
 		.block-editor-inserter__media-list__item-preview-options > button {
 			display: block;
 		}

package/src/components/inserter-list-item/index.js

@@ -44,10 +44,16 @@ function InserterListItem( {
 			createBlock(
 				item.name,
 				item.initialAttributes,
-				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
+				createBlocksFromInnerBlocksTemplate( item.innerBlocks ),
+				item.innerContent
 			),
 		],
-		[ item.name, item.initialAttributes, item.innerBlocks ]
+		[
+			item.name,
+			item.initialAttributes,
+			item.innerBlocks,
+			item.innerContent,
+		]
 	);
 
 	const isSynced =

package/src/components/letter-spacing-control/README.md

@@ -19,7 +19,6 @@ const MyLetterSpacingControl = () => (
 		value={ value }
 		onChange={ onChange }
 		__unstableInputWidth="auto"
-		__next40pxDefaultSize
 	/>
 );
 ```
@@ -46,13 +45,6 @@ A callback function invoked when the value is changed.
 
 Input width to pass through to inner UnitControl. Should be a valid CSS value.
 
-#### `__next40pxDefaultSize`
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/letter-spacing-control/index.js

@@ -5,7 +5,6 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -16,16 +15,15 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for letter-spacing.
  *
- * @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 letter-spacing.
- * @param {Function}                props.onChange              Handles change in letter-spacing selection.
- * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @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 letter-spacing.
+ * @param {Function}                props.onChange                Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth    Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
  * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
-	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -37,24 +35,8 @@ export default function LetterSpacingControl( {
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalLetterSpacingControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		<UnitControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }

package/src/components/letter-spacing-control/stories/index.story.jsx

@@ -46,24 +46,12 @@ const meta = {
 				defaultValue: { summary: '60px' },
 			},
 		},
-		__next40pxDefaultSize: {
-			control: 'boolean',
-			description:
-				'Start opting into the larger default height that will become the default size in a future version.',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-			},
-		},
 	},
 };
 
 export default meta;
 
 export const Default = {
-	args: {
-		__next40pxDefaultSize: true,
-	},
 	render: function Template( { onChange, ...args } ) {
 		const [ value, setValue ] = useState( '' );
 		return (

package/src/components/line-height-control/README.md

@@ -18,7 +18,6 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__next40pxDefaultSize
 	/>
 );
 ```
@@ -37,13 +36,6 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
-#### `__next40pxDefaultSize`
-
-- **Type:** `boolean`
-- **Default:** `false`
-
-Start opting into the larger default height that will become the default size in a future version.
-
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/line-height-control/index.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -17,8 +16,12 @@ import {
 } from './utils';
 
 const LineHeightControl = ( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next40pxDefaultSize = false,
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 */
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	value: lineHeight,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -90,23 +93,11 @@ const LineHeightControl = ( {
 		onChange( `${ nextValue }` );
 	};
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated( `36px default size for wp.blockEditor.LineHeightControl`, {
-			since: '6.8',
-			version: '7.1',
-			hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-		} );
-	}
-
 	return (
 		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
-				__shouldNotWarnDeprecated36pxSize
-				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__next40pxDefaultSize
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ handleOnChange }

package/src/components/line-height-control/stories/index.story.jsx

@@ -22,7 +22,6 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__next40pxDefaultSize: true,
 	__unstableInputWidth: '100px',
 };
 

package/src/components/line-height-control/test/index.js

@@ -19,13 +19,7 @@ const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl
-			value={ value }
-			onChange={ setValue }
-			__next40pxDefaultSize
-		/>
-	);
+	return <LineHeightControl value={ value } onChange={ setValue } />;
 };
 
 describe( 'LineHeightControl', () => {

package/src/components/link-picker/test/index.js

@@ -141,7 +141,9 @@ describe( 'LinkPicker', () => {
 			);
 
 			const button = screen.getByRole( 'button' );
-			const image = within( button ).getByRole( 'img', { hidden: true } );
+			const image = within( button ).getByRole( 'presentation', {
+				hidden: true,
+			} );
 
 			expect( image ).toHaveAttribute(
 				'src',

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

@@ -46,6 +46,7 @@ function ListViewBlockSelectButton(
 		isExpanded,
 		ariaDescribedBy,
 		visibilityLabel,
+		isDisabled = false,
 	},
 	ref
 ) {
@@ -79,6 +80,8 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
+		// Disabled list view items intentionally omit href so TreeGrid skips them.
+		// eslint-disable-next-line jsx-a11y/anchor-is-valid
 		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
@@ -94,7 +97,8 @@ function ListViewBlockSelectButton(
 			onDragStart={ onDragStartHandler }
 			onDragEnd={ onDragEnd }
 			draggable={ draggable }
-			href={ `#block-${ clientId }` }
+			href={ isDisabled ? undefined : `#block-${ clientId }` }
+			aria-disabled={ isDisabled ? true : undefined }
 			aria-describedby={ ariaDescribedBy }
 			aria-expanded={ isExpanded }
 		>

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