@wordpress/block-editor 14.1.0 → 14.2.0

package/src/components/inserter/style.scss

@@ -44,12 +44,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
-				border-radius: $radius-block-ui $radius-block-ui 0 0;
+				border-radius: $radius-medium $radius-medium 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
-				border-radius: 0 0 $radius-block-ui $radius-block-ui;
+				border-radius: 0 0 $radius-medium $radius-medium;
 			}
 
 			&.components-button {
@@ -276,7 +276,7 @@ $block-inserter-tabs-height: 44px;
 				bottom: 0;
 				left: 0;
 				right: 0;
-				border-radius: $radius-block-ui;
+				border-radius: $radius-small;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
 				height: 100%;
@@ -285,7 +285,7 @@ $block-inserter-tabs-height: 44px;
 
 		&:focus-visible,
 		&:focus:not(:disabled) {
-			border-radius: 2px;
+			border-radius: $radius-small;
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			// Windows high contrast mode.
 			outline: 2px solid transparent;
@@ -359,7 +359,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 }
 
 .block-editor-inserter__tips {
@@ -577,7 +577,6 @@ $block-inserter-tabs-height: 44px;
 
 		> button {
 			background: $white;
-			border-radius: $radius-block-ui;
 			display: none;
 
 			// These styles are important so as focus isn't lost
@@ -604,14 +603,13 @@ $block-inserter-tabs-height: 44px;
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 2px;
+		border-radius: $radius-small;
 
 		> * {
 			margin: 0 auto;
 			max-width: 100%;
 			outline: $border-width solid rgba($black, 0.1);
 			outline-offset: -$border-width;
-			border-radius: $radius-block-ui;
 		}
 
 		.block-editor-inserter__media-list__item-preview-spinner {

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

@@ -32,7 +32,7 @@ function InserterListItem( {
 	isDraggable,
 	...props
 } ) {
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const itemIconStyle = item.icon
 		? {
 				backgroundColor: item.icon.background,
@@ -70,14 +70,14 @@ function InserterListItem( {
 					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
-						isDragging.current = true;
+						isDraggingRef.current = true;
 						if ( onDragStart ) {
 							onHover( null );
 							onDragStart( event );
 						}
 					} }
 					onDragEnd={ ( event ) => {
-						isDragging.current = false;
+						isDraggingRef.current = false;
 						if ( onDragEnd ) {
 							onDragEnd( event );
 						}
@@ -110,7 +110,7 @@ function InserterListItem( {
 							}
 						} }
 						onMouseEnter={ () => {
-							if ( isDragging.current ) {
+							if ( isDraggingRef.current ) {
 								return;
 							}
 							onHover( item );

package/src/components/inserter-list-item/style.scss

@@ -43,7 +43,6 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	border-radius: $radius-block-ui;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -72,7 +71,7 @@
 				bottom: 0;
 				left: 0;
 				right: 0;
-				border-radius: $radius-block-ui;
+				border-radius: $radius-small;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
 				// This fixes drag-and-drop in Firefox.
@@ -97,7 +96,6 @@
 
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
-	border-radius: $radius-block-ui;
 	color: $gray-900;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");

package/src/components/inserter-listbox/index.js

@@ -12,17 +12,11 @@ export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
-const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
-	unlock( componentsPrivateApis );
+const { CompositeV2: Composite } = unlock( componentsPrivateApis );
 
 function InserterListbox( { children } ) {
-	const store = useCompositeStore( {
-		focusShift: true,
-		focusWrap: 'horizontal',
-	} );
-
 	return (
-		<Composite store={ store } render={ <></> }>
+		<Composite focusShift focusWrap="horizontal" render={ <></> }>
 			{ children }
 		</Composite>
 	);

package/src/components/inserter-listbox/item.js

@@ -42,7 +42,15 @@ function InserterListboxItem(
 				if ( typeof children === 'function' ) {
 					return children( propsWithTabIndex );
 				}
-				return <Button { ...propsWithTabIndex }>{ children }</Button>;
+				return (
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						{ ...propsWithTabIndex }
+					>
+						{ children }
+					</Button>
+				);
 			} }
 		/>
 	);

package/src/components/inspector-controls/groups.js

@@ -5,6 +5,7 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBindings = createSlotFill( 'InspectorControlsBindings' );
 const InspectorControlsBackground = createSlotFill(
 	'InspectorControlsBackground'
 );
@@ -26,6 +27,7 @@ const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	background: InspectorControlsBackground,
+	bindings: InspectorControlsBindings,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,

package/src/components/inspector-controls-tabs/index.js

@@ -49,6 +49,8 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									icon={
 										! showIconLabels ? tab.icon : undefined
 									}

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

@@ -9,6 +9,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
 		<InspectorControls.Slot />
 		<PositionControls />
+		<InspectorControls.Slot group="bindings" />
 		{ showAdvancedControls && (
 			<div>
 				<AdvancedControls />

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -32,6 +32,7 @@ function getShowTabs( blockName, tabSettings = {} ) {
 export default function useInspectorControlsTabs( blockName ) {
 	const tabs = [];
 	const {
+		bindings: bindingsGroup,
 		border: borderGroup,
 		color: colorGroup,
 		default: defaultGroup,
@@ -64,8 +65,10 @@ export default function useInspectorControlsTabs( blockName ) {
 	// (i.e. both list view and styles), check only the default and position
 	// InspectorControls slots. If we have multiple tabs, we'll need to check
 	// the advanced controls slot as well to ensure they are rendered.
-	const advancedFills =
-		useSlotFills( InspectorAdvancedControls.slotName ) || [];
+	const advancedFills = [
+		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+		...( useSlotFills( bindingsGroup.Slot.__unstableName ) || [] ),
+	];
 
 	const settingsFills = [
 		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),

package/src/components/inspector-popover-header/index.js

@@ -31,6 +31,8 @@ export default function InspectorPopoverHeader( {
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
@@ -43,6 +45,8 @@ export default function InspectorPopoverHeader( {
 				) ) }
 				{ onClose && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="block-editor-inspector-popover-header__action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }

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

@@ -38,13 +38,20 @@ The current value of the letter spacing setting.
 
 A callback function invoked when the value is changed.
 
-### `_unstableInputWidth`
+### `__unstableInputWidth`
 
 -   **Type:** `string|number|undefined`
 -   **Default:** `undefined`
 
 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

@@ -15,14 +15,16 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}                  props                      Component props.
- * @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',
@@ -35,6 +37,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }

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

@@ -180,10 +180,10 @@ function LinkControl( {
 	// Therefore a local state is used as a fallback.
 	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
 
-	const isMounting = useRef( true );
+	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
-	const isEndingEditWithFocus = useRef( false );
+	const isEndingEditWithFocusRef = useRef( false );
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
@@ -219,7 +219,7 @@ function LinkControl( {
 		// We don't auto focus into the Link UI on mount
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
-		if ( isMounting.current ) {
+		if ( isMountingRef.current ) {
 			return;
 		}
 
@@ -234,16 +234,16 @@ function LinkControl( {
 
 		nextFocusTarget.focus();
 
-		isEndingEditWithFocus.current = false;
+		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
 	// The component mounting reference is maintained separately
 	// to correctly reset values in `StrictMode`.
 	useEffect( () => {
-		isMounting.current = false;
+		isMountingRef.current = false;
 
 		return () => {
-			isMounting.current = true;
+			isMountingRef.current = true;
 		};
 	}, [] );
 
@@ -254,7 +254,7 @@ function LinkControl( {
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
 	const stopEditing = () => {
-		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
+		isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
@@ -408,6 +408,8 @@ function LinkControl( {
 						{ ! showActions && (
 							<div className="block-editor-link-control__search-enter">
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									onClick={ isDisabled ? noop : handleSubmit }
 									label={ __( 'Submit' ) }
 									icon={ keyboardReturn }
@@ -467,10 +469,17 @@ function LinkControl( {
 					justify="right"
 					className="block-editor-link-control__search-actions"
 				>
-					<Button variant="tertiary" onClick={ handleCancel }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="tertiary"
+						onClick={ handleCancel }
+					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"

package/src/components/link-control/settings-drawer.js

@@ -25,6 +25,8 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }

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

@@ -78,7 +78,6 @@ $block-editor-link-control-number-of-actions: 1;
 		@include input-control;
 		display: block;
 		border: $border-width solid $gray-600;
-		border-radius: $radius-block-ui;
 		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
 		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
@@ -230,7 +229,7 @@ $block-editor-link-control-number-of-actions: 1;
 		background-color: $gray-100;
 		width: $grid-unit-40;
 		height: $grid-unit-40;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	.block-editor-link-control__search-item-icon {
@@ -252,7 +251,6 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 
 	.block-editor-link-control__search-item-title {
-		border-radius: $radius-block-ui;
 		line-height: 1.1;
 
 

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

@@ -83,6 +83,8 @@ function ListViewBlockSelectButton(
 
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className

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

@@ -101,16 +101,16 @@
 
 	// Border radius for corners of the selected item.
 	&.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
 	}
 	&.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
+		border-top-right-radius: $radius-small;
 	}
 	&.is-last-selected td:first-child {
-		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-left-radius: $radius-small;
 	}
 	&.is-last-selected td:last-child {
-		border-bottom-right-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-small;
 	}
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
@@ -119,23 +119,23 @@
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
 	}
 	&.is-branch-selected.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
+		border-top-right-radius: $radius-small;
 	}
 	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
-			border-top-left-radius: $radius-block-ui;
+			border-top-left-radius: $radius-small;
 		}
 		&.is-branch-selected.is-first-selected td:last-child {
-			border-top-right-radius: $radius-block-ui;
+			border-top-right-radius: $radius-small;
 		}
 		&.is-branch-selected.is-last-selected td:first-child {
-			border-bottom-left-radius: $radius-block-ui;
+			border-bottom-left-radius: $radius-small;
 		}
 		&.is-branch-selected.is-last-selected td:last-child {
-			border-bottom-right-radius: $radius-block-ui;
+			border-bottom-right-radius: $radius-small;
 		}
 	}
 	&.is-branch-selected:not(.is-selected) td {
@@ -214,7 +214,6 @@
 		height: $grid-unit-40;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
 
@@ -406,7 +405,7 @@
 		right: 0;
 		transform: translateY(-50%);
 		background: rgba($black, 0.1);
-		border-radius: $radius-block-ui;
+		border-radius: $radius-x-small;
 		padding: 2px 6px;
 		max-width: 100%;
 		box-sizing: border-box;
@@ -429,10 +428,10 @@
 		background-size: cover;
 		width: 18px;
 		height: 18px;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-x-small;
 
 		&:not(:only-child) {
-			box-shadow: 0 0 0 $radius-block-ui $white;
+			box-shadow: 0 0 0 $radius-small $white;
 		}
 
 		&:not(:first-child) {
@@ -442,7 +441,7 @@
 
 	&.is-selected .block-editor-list-view-block-select-button__image {
 		&:not(:only-child) {
-			box-shadow: 0 0 0 $radius-block-ui var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 $radius-small var(--wp-admin-theme-color);
 		}
 	}
 }
@@ -553,7 +552,6 @@ svg {
 	background-color: #1e1e1e;
 	color: #fff;
 	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
 	height: 24px;
 	min-width: 24px;
 	padding: 0;

package/src/components/media-placeholder/index.js

@@ -51,6 +51,8 @@ const InsertFromURLPopover = ( {
 				value={ src }
 			/>
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				className="block-editor-media-placeholder__url-input-submit-button"
 				icon={ keyboardReturn }
 				label={ __( 'Apply' ) }
@@ -85,6 +87,8 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -382,6 +386,8 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -410,6 +416,8 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -425,6 +433,8 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -464,6 +474,8 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
+										// TODO: Switch to `true` (40px size) if possible
+										__next40pxDefaultSize={ false }
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -493,6 +505,8 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						render={ ( { openFileDialog } ) => (
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								onClick={ openFileDialog }
 								variant="primary"
 								className={ clsx(

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

@@ -48,6 +48,7 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onReset,
 	onToggleFeaturedImage,
 	useFeaturedImage,
 	onFilesUpload = noop,
@@ -75,7 +76,7 @@ const MediaReplaceFlow = ( {
 		}
 		// We need to set a timeout for showing the notice
 		// so that VoiceOver and possibly other screen readers
-		// can announce the error afer the toolbar button
+		// can announce the error after the toolbar button
 		// regains focus once the upload dialog closes.
 		// Otherwise VO simply skips over the notice and announces
 		// the focused element and the open menu.
@@ -202,6 +203,16 @@ const MediaReplaceFlow = ( {
 								{ __( 'Use featured image' ) }
 							</MenuItem>
 						) }
+						{ mediaURL && onReset && (
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+							>
+								{ __( 'Reset' ) }
+							</MenuItem>
+						) }
 						{ typeof children === 'function'
 							? children( { onClose } )
 							: children }