@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/inserter/style.scss

@@ -1,5 +1,5 @@
 $block-inserter-preview-height: 350px;
-$block-inserter-width: 350px;
+$block-quick-inserter-width: 350px;
 $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter {
@@ -24,6 +24,12 @@ $block-inserter-tabs-height: 44px;
 	&.show-as-tabs {
 		gap: 0;
 	}
+
+	.block-editor-tabbed-sidebar {
+		@include break-medium() {
+			width: $secondary-sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -85,6 +91,12 @@ $block-inserter-tabs-height: 44px;
 	height: 100%;
 	position: relative;
 	overflow: visible;
+
+	&.show-panel {
+		@include break-medium() {
+			width: $secondary-sidebar-width + $sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__inline-elements {
@@ -228,6 +240,13 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
+	// Temporarily disable the component's indicator animation.
+	// TODO: remove in favor of using the native component's styles and behavior,
+	// see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
+	&[aria-orientation="vertical"]::after {
+		content: none;
+	}
+
 	.block-editor-inserter__category-tab {
 		// Account for the icon on the right so that it's visually balanced.
 		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
@@ -284,34 +303,34 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__category-panel {
-	background: $gray-100;
-	border-top: $border-width solid $gray-200;
-	box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-	position: absolute;
-	top: -$border-width;
-	left: 0;
-	height: calc(100% + #{$border-width});
-	width: 100%;
-	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
+	padding: 0 $grid-unit-20;
 
 	@include break-medium {
 		border-left: $border-width solid $gray-200;
 		padding: 0;
-		left: 100%;
-		width: 300px;
-	}
-
-	.block-editor-inserter__media-list,
-	.block-editor-block-patterns-list {
-		padding: 0 $grid-unit-30 $grid-unit-20;
+		left: $secondary-sidebar-width;
+		width: $sidebar-width;
+		position: absolute;
+		top: -$border-width;
+		height: calc(100% + #{$border-width});
+		background: $gray-100;
+		border-top: $border-width solid $gray-200;
+
+		.block-editor-inserter__media-list,
+		.block-editor-block-patterns-list {
+			padding: 0 $grid-unit-30 $grid-unit-20;
+		}
 	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-	padding: $grid-unit-10 $grid-unit-30;
+	padding: $grid-unit-10 0;
+	@include break-medium {
+		padding: $grid-unit-10 $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -326,7 +345,6 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__preview-content {
-	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
 	display: grid;
 	flex-grow: 1;
@@ -359,7 +377,7 @@ $block-inserter-tabs-height: 44px;
 	max-width: 100%;
 
 	@include break-medium {
-		width: $block-inserter-width;
+		width: $block-quick-inserter-width;
 	}
 }
 
@@ -516,10 +534,15 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
+		margin-bottom: $grid-unit-30;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
-		&:not(:focus-within) {
-			--wp-components-color-background: #{$white};
+		@include break-medium() {
+			margin-bottom: 0;
+			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
+
+			&:not(:focus-within) {
+				--wp-components-color-background: #{$white};
+			}
 		}
 	}
 }
@@ -643,30 +666,6 @@ $block-inserter-tabs-height: 44px;
 	margin: $grid-unit-20 $grid-unit-20 0;
 }
 
-.reusable-blocks-menu-items__rename-hint {
-	align-items: top;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-	color: $gray-900;
-	display: flex;
-	flex-direction: row;
-	max-width: 380px;
-}
-
-.reusable-blocks-menu-items__rename-hint-content {
-	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
-}
-
-.reusable-blocks-menu-items__rename-hint-dismiss {
-	// The dismiss button has a lot of empty space through its padding.
-	// Apply margin to visually align the icon with the top of the text to its left.
-	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
-}
-
-.components-menu-group .reusable-blocks-menu-items__rename-hint {
-	margin: 0;
-}
-
 .block-editor-patterns__sync-status-filter {
 	.components-input-control__container {
 		select.components-select-control__input {
@@ -692,3 +691,23 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.show-icon-labels {
+	@media (max-width: #{ ($break-large - 1) }) {
+		.block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
+			flex-direction: column;
+			.block-editor-patterns__grid-pagination-previous,
+			.block-editor-patterns__grid-pagination-next {
+				flex-direction: column;
+			}
+		}
+	}
+
+	.block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
+		flex-direction: column;
+		.block-editor-patterns__grid-pagination-previous,
+		.block-editor-patterns__grid-pagination-next {
+			flex-direction: column;
+		}
+	}
+}

package/src/components/inserter-draggable-blocks/index.js

@@ -43,6 +43,14 @@ const InserterDraggableBlocks = ( {
 		useDispatch( blockEditorStore )
 	);
 
+	if ( ! isEnabled ) {
+		return children( {
+			draggable: false,
+			onDragStart: undefined,
+			onDragEnd: undefined,
+		} );
+	}
+
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
@@ -72,9 +80,9 @@ const InserterDraggableBlocks = ( {
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
-					draggable: isEnabled,
-					onDragStart: isEnabled ? onDraggableStart : undefined,
-					onDragEnd: isEnabled ? onDraggableEnd : undefined,
+					draggable: true,
+					onDragStart: onDraggableStart,
+					onDragEnd: onDraggableEnd,
 				} );
 			} }
 		</Draggable>

package/src/components/inspector-controls/README.md

@@ -96,6 +96,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -114,6 +115,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
+							__nextHasNoMarginBottom
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -121,12 +123,14 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
+							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -203,6 +207,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {

package/src/components/inspector-controls-tabs/settings-tab.js

@@ -4,7 +4,6 @@
 import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
-import SettingsTabHint from './settings-tab-hint';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
@@ -15,7 +14,6 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 				<AdvancedControls />
 			</div>
 		) }
-		<SettingsTabHint />
 	</>
 );
 

package/src/components/inspector-controls-tabs/style.scss

@@ -5,24 +5,3 @@
 		}
 	}
 }
-
-.block-editor-inspector-controls-tabs__hint {
-	align-items: flex-start;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-	color: $gray-900;
-	display: flex;
-	flex-direction: row;
-	margin: $grid-unit-20;
-	font-size: $default-font-size;
-}
-
-.block-editor-inspector-controls-tabs__hint-content {
-	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
-}
-
-.block-editor-inspector-controls-tabs__hint-dismiss {
-	// The dismiss button has a lot of empty space through its padding.
-	// Apply margin to visually align the icon with the top of the text to its left.
-	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
-}

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

@@ -18,7 +18,6 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__nextHasNoMarginBottom={ true }
 	/>
 );
 ```
@@ -37,13 +36,6 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
-#### `__nextHasNoMarginBottom`
-
--   **Type:** `boolean`
--   **Default:** `false`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
 ## 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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
@@ -19,8 +18,6 @@ import {
 const LineHeightControl = ( {
 	value: lineHeight,
 	onChange,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
 	...otherProps
 } ) => {
@@ -76,20 +73,6 @@ const LineHeightControl = ( {
 
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.blockEditor.LineHeightControl',
-			{
-				since: '6.0',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-	const deprecatedStyles = __nextHasNoMarginBottom
-		? undefined
-		: { marginBottom: 24 };
-
 	const handleOnChange = ( nextValue, { event } ) => {
 		if ( nextValue === '' ) {
 			onChange();
@@ -105,10 +88,7 @@ const LineHeightControl = ( {
 	};
 
 	return (
-		<div
-			className="block-editor-line-height-control"
-			style={ deprecatedStyles }
-		>
+		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }

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

@@ -22,7 +22,6 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: 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 }
-			__nextHasNoMarginBottom
-		/>
-	);
+	return <LineHeightControl value={ value } onChange={ setValue } />;
 };
 
 describe( 'LineHeightControl', () => {

package/src/components/link-control/search-input.js

@@ -119,7 +119,6 @@ const LinkControlSearchInput = forwardRef(
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					__nextHasNoMarginBottom
 					label={ __( 'Link' ) }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }

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

@@ -10,12 +10,10 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -65,14 +63,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	const positionLabel = blockInformation?.positionLabel
-		? sprintf(
-				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
-				__( 'Position: %1$s' ),
-				blockInformation.positionLabel
-		  )
-		: '';
-
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
 	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
@@ -136,10 +126,10 @@ function ListViewBlockSelectButton(
 						</Truncate>
 					</span>
 				) }
-				{ positionLabel && isSticky && (
-					<Tooltip text={ positionLabel }>
+				{ isSticky && (
+					<span className="block-editor-list-view-block-select-button__sticky">
 						<Icon icon={ pinSmall } />
-					</Tooltip>
+					</span>
 				) }
 				{ images.length ? (
 					<span

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

@@ -465,8 +465,10 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockPropertiesDescription =
-		getBlockPropertiesDescription( isLocked );
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -562,7 +564,12 @@ function ListViewBlock( {
 							ariaDescribedBy={ descriptionId }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
 						</AriaReferencedText>
 					</div>
 				) }

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

@@ -416,7 +416,8 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock {
+	.block-editor-list-view-block-select-button__lock,
+	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
 

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

@@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 		level
 	);
 
-export const getBlockPropertiesDescription = ( isLocked ) =>
-	isLocked ? __( 'This block is locked.' ) : '';
+export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
+	[
+		blockInformation?.positionLabel
+			? `${ sprintf(
+					// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
+					__( 'Position: %s' ),
+					blockInformation.positionLabel
+			  ) }.`
+			: undefined,
+		isLocked ? __( 'This block is locked.' ) : undefined,
+	]
+		.filter( Boolean )
+		.join( ' ' );
 
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,

package/src/components/media-replace-flow/README.md

@@ -91,3 +91,10 @@ Removes a media replace notice.
 -   Required: No
 
 If passed, children are rendered inside the dropdown.
+
+### children
+
+-   Type: `Element | func`
+-   Required: No
+
+If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.

package/src/components/media-replace-flow/index.js

@@ -202,7 +202,9 @@ const MediaReplaceFlow = ( {
 								{ __( 'Use featured image' ) }
 							</MenuItem>
 						) }
-						{ children }
+						{ typeof children === 'function'
+							? children( { onClose } )
+							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

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

@@ -44,6 +44,7 @@ export default function ResolutionTool( {
 			panelId={ panelId }
 		>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'Resolution' ) }
 				value={ displayValue }
 				options={ options }

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

@@ -39,7 +39,11 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl label={ labelComponent } options={ sizeOptions } />
+			<SelectControl
+				label={ labelComponent }
+				options={ sizeOptions }
+				__nextHasNoMarginBottom
+			/>
 			<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/rich-text/format-toolbar/index.js

@@ -52,7 +52,7 @@ const FormatToolbar = () => {
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
-										describedBy: __(
+										description: __(
 											'Displays more block tools'
 										),
 									} }

package/src/components/rich-text/index.js

@@ -188,7 +188,7 @@ export function RichTextWrapper(
 						binding.source
 					);
 					if (
-						! blockBindingsSource?.canUserEditValue( {
+						! blockBindingsSource?.canUserEditValue?.( {
 							select,
 							context: blockContext,
 							args: binding.args,

package/src/components/skip-to-selected-block/index.js

@@ -4,12 +4,13 @@
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
@@ -19,9 +20,10 @@ export default function SkipToSelectedBlock() {
 		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
 		[]
 	);
-	const ref = useBlockRef( selectedBlockClientId );
+	const ref = useRef();
+	useBlockElementRef( selectedBlockClientId, ref );
 	const onClick = () => {
-		ref.current.focus();
+		ref.current?.focus();
 	};
 
 	return selectedBlockClientId ? (

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -9,7 +9,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -31,11 +31,6 @@ import {
 	getPresetValueFromCustomValue,
 	isValueSpacingPreset,
 } from '../utils';
-import { unlock } from '../../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 
 const CUSTOM_VALUE_SETTINGS = {
 	px: { max: 300, steps: 1 },
@@ -266,6 +261,8 @@ export default function SpacingInputControl( {
 						onChange={ handleCustomValueSliderChange }
 						className="spacing-sizes-control__custom-value-range"
 						__nextHasNoMarginBottom
+						label={ ariaLabel }
+						hideLabelFromVision
 					/>
 				</>
 			) }
@@ -303,9 +300,11 @@ export default function SpacingInputControl( {
 				<CustomSelectControl
 					className="spacing-sizes-control__custom-select-control"
 					value={
+						// passing empty string as a fallback to continue using the
+						// component in controlled mode
 						options.find(
 							( option ) => option.key === currentValue
-						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
+						) || ''
 					}
 					onChange={ ( selection ) => {
 						onChange(

package/src/components/tabbed-sidebar/style.scss

@@ -1,13 +1,10 @@
 .block-editor-tabbed-sidebar {
+	background-color: $white;
 	height: 100%;
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	overflow: hidden;
-
-	@include break-medium() {
-		width: 350px;
-	}
 }
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {
@@ -26,22 +23,7 @@
 }
 
 .block-editor-tabbed-sidebar__tablist {
-	box-sizing: border-box;
-	flex-grow: 1;
 	margin-bottom: -$border-width;
-	width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-	flex-grow: 1;
-	margin-bottom: -$border-width;
-
-	&[id$="reusable"] {
-		flex-grow: inherit;
-		// These are to align the `reusable` icon with the search icon.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-	}
 }
 
 .block-editor-tabbed-sidebar__tabpanel {