@wordpress/block-editor 15.23.0 → 16.0.0

package/src/components/keyboard-shortcuts/index.js

@@ -6,13 +6,21 @@ import { useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../use-settings';
+
 function KeyboardShortcuts() {
 	return null;
 }
 
 function KeyboardShortcutsRegister() {
 	// Registering the shortcuts.
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/block-editor/copy',
@@ -208,15 +216,24 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/block-editor/toggle-block-visibility',
-			category: 'block',
-			description: __( 'Show or hide the selected block(s).' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'h',
-			},
-		} );
+		// Keep the block visibility shortcut in sync with the theme.json
+		// setting. The setting resolves asynchronously, so the shortcut may be
+		// registered before its value arrives; it must be removed once the
+		// value is known to be `false`, otherwise it lingers in the keyboard
+		// shortcut help list while doing nothing.
+		if ( blockVisibility === false ) {
+			unregisterShortcut( 'core/block-editor/toggle-block-visibility' );
+		} else {
+			registerShortcut( {
+				name: 'core/block-editor/toggle-block-visibility',
+				category: 'block',
+				description: __( 'Show or hide the selected block(s).' ),
+				keyCombination: {
+					modifier: 'primaryShift',
+					character: 'h',
+				},
+			} );
+		}
 
 		registerShortcut( {
 			name: 'core/block-editor/rename',
@@ -227,7 +244,7 @@ function KeyboardShortcutsRegister() {
 				character: 'r',
 			},
 		} );
-	}, [ registerShortcut ] );
+	}, [ registerShortcut, unregisterShortcut, blockVisibility ] );
 
 	return null;
 }

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,10 @@ 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 }
 				__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-control/style.scss

@@ -151,7 +151,7 @@ $block-editor-link-control-number-of-actions: 1;
 		width: 100%;
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}
@@ -227,7 +227,7 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		mark {
-			font-weight: 600;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 			color: inherit;
 			background-color: transparent;
 		}

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

@@ -3278,7 +3278,7 @@ describe( 'URL validation', () => {
 	] )(
 		'should prevent submission for $description',
 		async ( { inputUrl } ) => {
-			render(
+			const { container } = render(
 				<LinkControl
 					value={ { url: '' } }
 					forceIsEditingLink
@@ -3295,7 +3295,7 @@ describe( 'URL validation', () => {
 			// Wait for validation error to appear
 			await waitFor( () => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeInTheDocument();
 			} );
 
@@ -3407,7 +3407,7 @@ describe( 'URL validation', () => {
 	it( 'should show validation error when clicking Apply button with invalid URL', async () => {
 		// When editing an existing link, use Apply button
 		const existingLink = { url: 'https://example.com', title: 'Example' };
-		render(
+		const { container } = render(
 			<LinkControl
 				value={ existingLink }
 				forceIsEditingLink
@@ -3428,7 +3428,7 @@ describe( 'URL validation', () => {
 		await waitFor(
 			() => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeVisible();
 			},
 			{ timeout: 100 }
@@ -3441,7 +3441,7 @@ describe( 'URL validation', () => {
 	it( 'should show validation error when pressing Enter to submit with an invalid URL', async () => {
 		// When editing an existing link, use Apply button
 		const existingLink = { url: 'https://example.com', title: 'Example' };
-		render(
+		const { container } = render(
 			<LinkControl
 				value={ existingLink }
 				forceIsEditingLink
@@ -3460,7 +3460,7 @@ describe( 'URL validation', () => {
 		await waitFor(
 			() => {
 				expect(
-					screen.getByText( 'Please enter a valid URL.' )
+					within( container ).getByText( 'Please enter a valid URL.' )
 				).toBeVisible();
 			},
 			{ timeout: 100 }

package/src/components/link-picker/style.scss

@@ -10,7 +10,6 @@
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-15;
-	box-shadow: inset 0 0 0 1px $gray-600;
 	border-color: $gray-600;
 }
 
@@ -51,7 +50,7 @@
 
 .link-preview-button__title {
 	margin-top: $grid-unit-05;
-	font-weight: 500;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	display: block;
 }

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,41 @@ function ListViewBlock( {
 
 	const pasteStyles = usePasteStyles();
 
-	const { block, blockName, allowRightClickOverrides } = useSelect(
+	const {
+		block,
+		blockName,
+		blockEditingMode,
+		allowRightClickOverrides,
+		editedSection,
+		viewportSettings,
+		blockVisibilitySetting,
+	} = useSelect(
 		( select ) => {
-			const { getBlock, getBlockName, getSettings } = unlock(
-				select( blockEditorStore )
-			);
+			const {
+				getBlock,
+				getBlockName,
+				getBlockEditingMode: getBlockEditingModeForClientId,
+				getSettings,
+				getEditedContentOnlySection,
+			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
 
 			return {
 				block: getBlock( clientId ),
 				blockName: getBlockName( clientId ),
-				allowRightClickOverrides:
-					getSettings().allowRightClickOverrides,
+				blockEditingMode: getBlockEditingModeForClientId( clientId ),
+				allowRightClickOverrides: settings.allowRightClickOverrides,
+				editedSection: getEditedContentOnlySection(),
+				viewportSettings: settings.__experimentalFeatures?.viewport,
+				blockVisibilitySetting:
+					settings.__experimentalFeatures?.blockVisibility
+						?.allowEditing,
 			};
 		},
 		[ clientId ]
 	);
+
+	const isDisabled = blockEditingMode === 'disabled';
 	const { canRename } = useBlockRename( blockName );
 
 	const showBlockActions =
@@ -202,6 +223,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
@@ -370,6 +398,9 @@ function ListViewBlock( {
 		} else if (
 			isMatch( 'core/block-editor/toggle-block-visibility', event )
 		) {
+			if ( blockVisibilitySetting === false ) {
+				return;
+			}
 			event.preventDefault();
 			const { blocksToUpdate } = getBlocksToUpdate();
 			const blocks = getBlocksByClientId( blocksToUpdate );
@@ -535,11 +566,13 @@ function ListViewBlock( {
 
 	// Determine label based on where block is hidden (not when/current viewport)
 	const blockVisibilityDescription = getBlockVisibilityLabel(
-		block?.attributes?.metadata?.blockVisibility
+		block?.attributes?.metadata?.blockVisibility,
+		viewportSettings
 	);
 
 	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 +586,7 @@ function ListViewBlock( {
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
-	} else if ( ! showBlockActions ) {
+	} else if ( ! canShowBlockActions ) {
 		colSpan = 3;
 	}
 
@@ -566,12 +599,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 +616,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 +658,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 +722,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

@@ -95,7 +95,7 @@
 			box-shadow:
 				inset 0 0 0 1px $white,
 				0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				var(--wpds-color-stroke-focus);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
@@ -272,7 +272,7 @@
 			border-radius: inherit;
 			box-shadow:
 				inset 0 0 0 var(--wp-admin-border-width-focus)
-				var(--wp-admin-theme-color);
+				var(--wpds-color-stroke-focus);
 			z-index: 2;
 			pointer-events: none;
 		}
@@ -283,11 +283,10 @@
 		right: 0;
 	}
 
-	&.is-nesting .block-editor-list-view__menu,
-	.block-editor-list-view-block__menu:focus {
+	&.is-nesting .block-editor-list-view__menu {
 		box-shadow:
 			inset 0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
+			var(--wpds-color-stroke-focus);
 		z-index: 1;
 	}
 
@@ -447,6 +446,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 ]