@wordpress/block-editor 15.1.0 → 15.1.1-next.0f6f9d12c.0

package/build-style/style.css

@@ -1660,6 +1660,11 @@ iframe[name=editor-canvas] {
   min-width: 230px;
 }
 
+.components-border-radius-control__header {
+  height: 16px;
+  margin-bottom: 12px;
+}
+
 .components-border-radius-control {
   border: 0;
   padding: 0;
@@ -1667,22 +1672,7 @@ iframe[name=editor-canvas] {
   margin-bottom: 12px;
 }
 .components-border-radius-control legend {
-  margin-bottom: 8px;
-}
-.components-border-radius-control .components-border-radius-control__wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__unit-control {
-  width: calc((100% - 16px) / 2);
   margin-bottom: 0;
-  margin-right: 16px;
-  flex-shrink: 0;
-}
-.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control {
-  flex: 1;
-  margin-right: 12px;
 }
 .components-border-radius-control .components-border-radius-control__input-controls-wrapper {
   display: grid;
@@ -1690,15 +1680,23 @@ iframe[name=editor-canvas] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   margin-right: 12px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button {
+.components-border-radius-control .components-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
-  margin-top: 8px;
 }
-.components-border-radius-control .component-border-radius-control__linked-button svg {
+.components-border-radius-control .components-border-radius-control__linked-button svg {
   margin-right: 0;
 }
 
+.components-border-radius-control__custom-select-control,
+.components-border-radius-control__range-control {
+  flex: 1;
+}
+
+.components-border-radius-control__icon {
+  flex: 0 0 auto;
+}
+
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.1.0",
+	"version": "15.1.1-next.0f6f9d12c.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,38 +37,38 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.28.0",
-		"@wordpress/api-fetch": "^7.28.0",
-		"@wordpress/blob": "^4.28.0",
-		"@wordpress/block-serialization-default-parser": "^5.28.0",
-		"@wordpress/blocks": "^15.1.0",
-		"@wordpress/commands": "^1.28.0",
-		"@wordpress/components": "^30.1.0",
-		"@wordpress/compose": "^7.28.0",
-		"@wordpress/data": "^10.28.0",
-		"@wordpress/date": "^5.28.0",
-		"@wordpress/deprecated": "^4.28.0",
-		"@wordpress/dom": "^4.28.0",
-		"@wordpress/element": "^6.28.0",
-		"@wordpress/escape-html": "^3.28.0",
-		"@wordpress/hooks": "^4.28.0",
-		"@wordpress/html-entities": "^4.28.0",
-		"@wordpress/i18n": "^6.1.0",
-		"@wordpress/icons": "^10.28.0",
-		"@wordpress/is-shallow-equal": "^5.28.0",
-		"@wordpress/keyboard-shortcuts": "^5.28.0",
-		"@wordpress/keycodes": "^4.28.0",
-		"@wordpress/notices": "^5.28.0",
-		"@wordpress/preferences": "^4.28.0",
-		"@wordpress/priority-queue": "^3.28.0",
-		"@wordpress/private-apis": "^1.28.0",
-		"@wordpress/rich-text": "^7.28.0",
-		"@wordpress/style-engine": "^2.28.0",
-		"@wordpress/token-list": "^3.28.0",
-		"@wordpress/upload-media": "^0.13.0",
-		"@wordpress/url": "^4.28.0",
-		"@wordpress/warning": "^3.28.0",
-		"@wordpress/wordcount": "^4.28.0",
+		"@wordpress/a11y": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/api-fetch": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/blob": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/block-serialization-default-parser": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/blocks": "^15.1.1-next.0f6f9d12c.0",
+		"@wordpress/commands": "^1.28.1-next.0f6f9d12c.0",
+		"@wordpress/components": "^30.2.1-next.0f6f9d12c.0",
+		"@wordpress/compose": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/data": "^10.28.1-next.0f6f9d12c.0",
+		"@wordpress/date": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/deprecated": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/dom": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/element": "^6.28.1-next.0f6f9d12c.0",
+		"@wordpress/escape-html": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/hooks": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/html-entities": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/i18n": "^6.1.1-next.0f6f9d12c.0",
+		"@wordpress/icons": "^10.28.2-next.0f6f9d12c.0",
+		"@wordpress/is-shallow-equal": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/keyboard-shortcuts": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/keycodes": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/notices": "^5.28.1-next.0f6f9d12c.0",
+		"@wordpress/preferences": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/priority-queue": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/private-apis": "^1.28.1-next.0f6f9d12c.0",
+		"@wordpress/rich-text": "^7.28.1-next.0f6f9d12c.0",
+		"@wordpress/style-engine": "^2.28.1-next.0f6f9d12c.0",
+		"@wordpress/token-list": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/upload-media": "^0.13.1-next.0f6f9d12c.0",
+		"@wordpress/url": "^4.28.1-next.0f6f9d12c.0",
+		"@wordpress/warning": "^3.28.1-next.0f6f9d12c.0",
+		"@wordpress/wordcount": "^4.28.1-next.0f6f9d12c.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "28cc2098f5ee28f89096b638533796538f495f72"
+	"gitHead": "7d4f4367e2f76deddf4a09b540e6b2f9f4c3fe9f"
 }

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -88,6 +88,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
+		isNavigationMode,
 		isZoomOut,
 	} = useSelect(
 		( select ) => {
@@ -99,6 +100,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
+				isNavigationMode: _isNavigationMode,
 				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
@@ -124,6 +126,7 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+				isNavigationMode: _isNavigationMode(),
 				isZoomOut: _isZoomOut(),
 			};
 		},
@@ -155,6 +158,7 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
+	const isContentOnlyWriteMode = isNavigationMode && isContentOnly;
 
 	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
 		if ( ! __experimentalSelectBlock ) {
@@ -278,20 +282,24 @@ export function BlockSettingsDropdown( {
 											clientId={ firstBlockClientId }
 										/>
 									) }
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										shortcut={ shortcuts.copy }
-									/>
-									<CopyMenuItem
-										clientIds={ clientIds }
-										label={ __( 'Cut' ) }
-										eventType="cut"
-										shortcut={ shortcuts.cut }
-										__experimentalUpdateSelection={
-											! __experimentalSelectBlock
-										}
-									/>
+									{ ! isContentOnlyWriteMode && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ shortcuts.copy }
+										/>
+									) }
+									{ ! isContentOnlyWriteMode && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											label={ __( 'Cut' ) }
+											eventType="cut"
+											shortcut={ shortcuts.cut }
+											__experimentalUpdateSelection={
+												! __experimentalSelectBlock
+											}
+										/>
+									) }
 									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(

package/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -26,7 +26,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect, useSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { moreHorizontalMobile } from '@wordpress/icons';
+import { moreHorizontal } from '@wordpress/icons';
 import { useRef, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
@@ -255,7 +255,7 @@ const BlockActionsMenu = ( {
 			<ToolbarGroup>
 				<ToolbarButton
 					title={ __( 'Open Block Actions Menu' ) }
-					icon={ moreHorizontalMobile }
+					icon={ moreHorizontal }
 					disabled
 				/>
 			</ToolbarGroup>
@@ -298,7 +298,7 @@ const BlockActionsMenu = ( {
 			<ToolbarButton
 				title={ __( 'Open Block Actions Menu' ) }
 				onClick={ onPickerPresent }
-				icon={ moreHorizontalMobile }
+				icon={ moreHorizontal }
 				extraProps={ {
 					hint: accessibilityHint,
 				} }

package/src/components/border-radius-control/constants.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	cornerAll,
+	cornerBottomLeft,
+	cornerBottomRight,
+	cornerTopLeft,
+	cornerTopRight,
+} from '@wordpress/icons';
+
+export const DEFAULT_VALUES = {
+	topLeft: undefined,
+	topRight: undefined,
+	bottomLeft: undefined,
+	bottomRight: undefined,
+};
+
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
+export const EMPTY_ARRAY = [];
+
+export const CORNERS = {
+	all: __( 'Border radius' ),
+	topLeft: __( 'Top left' ),
+	topRight: __( 'Top right' ),
+	bottomLeft: __( 'Bottom left' ),
+	bottomRight: __( 'Bottom right' ),
+};
+
+export const ICONS = {
+	all: cornerAll,
+	topLeft: cornerTopLeft,
+	topRight: cornerTopRight,
+	bottomLeft: cornerBottomLeft,
+	bottomRight: cornerBottomRight,
+};
+
+export const MIN_BORDER_RADIUS_VALUE = 0;
+
+export const MAX_BORDER_RADIUS_VALUES = {
+	px: 100,
+	em: 20,
+	rem: 20,
+};

package/src/components/border-radius-control/index.js

@@ -3,39 +3,52 @@
  */
 import {
 	BaseControl,
-	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
 import LinkedButton from './linked-button';
 import { useSettings } from '../use-settings';
+import { hasDefinedValues, hasMixedValues } from './utils';
+import SingleInputControl from './single-input-control';
 import {
-	getAllValue,
-	getAllUnit,
-	hasDefinedValues,
-	hasMixedValues,
-} from './utils';
+	DEFAULT_VALUES,
+	RANGE_CONTROL_MAX_SIZE,
+	EMPTY_ARRAY,
+} from './constants';
 
-const DEFAULT_VALUES = {
-	topLeft: undefined,
-	topRight: undefined,
-	bottomLeft: undefined,
-	bottomRight: undefined,
-};
-const MIN_BORDER_RADIUS_VALUE = 0;
-const MAX_BORDER_RADIUS_VALUES = {
-	px: 100,
-	em: 20,
-	rem: 20,
-};
+function useBorderRadiusSizes( presets ) {
+	const defaultSizes = presets?.default ?? EMPTY_ARRAY;
+	const customSizes = presets?.custom ?? EMPTY_ARRAY;
+	const themeSizes = presets?.theme ?? EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		];
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: sizes;
+	}, [ customSizes, themeSizes, defaultSizes ] );
+}
 
 /**
  * Control to display border radius options.
@@ -43,14 +56,15 @@ const MAX_BORDER_RADIUS_VALUES = {
  * @param {Object}   props          Component props.
  * @param {Function} props.onChange Callback to handle onChange.
  * @param {Object}   props.values   Border radius values.
+ * @param {Object}   props.presets  Border radius presets.
  *
  * @return {Element}              Custom border radius control.
  */
-export default function BorderRadiusControl( { onChange, values } ) {
+export default function BorderRadiusControl( { onChange, values, presets } ) {
 	const [ isLinked, setIsLinked ] = useState(
 		! hasDefinedValues( values ) || ! hasMixedValues( values )
 	);
-
+	const options = useBorderRadiusSizes( presets );
 	// Tracking selected units via internal state allows filtering of CSS unit
 	// only values from being saved while maintaining preexisting unit selection
 	// behaviour. Filtering CSS unit only values prevents invalid style values.
@@ -72,64 +86,49 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
-	const unit = getAllUnit( selectedUnits );
-	const unitConfig = units && units.find( ( item ) => item.value === unit );
-	const step = unitConfig?.step || 1;
-
-	const [ allValue ] = parseQuantityAndUnitFromRawValue(
-		getAllValue( values )
-	);
-
 	const toggleLinked = () => setIsLinked( ! isLinked );
 
-	const handleSliderChange = ( next ) => {
-		onChange( next !== undefined ? `${ next }${ unit }` : undefined );
-	};
-
 	return (
 		<fieldset className="components-border-radius-control">
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Radius' ) }
-			</BaseControl.VisualLabel>
-			<div className="components-border-radius-control__wrapper">
-				{ isLinked ? (
-					<>
-						<AllInputControl
-							className="components-border-radius-control__unit-control"
-							values={ values }
-							min={ MIN_BORDER_RADIUS_VALUE }
-							onChange={ onChange }
-							selectedUnits={ selectedUnits }
-							setSelectedUnits={ setSelectedUnits }
-							units={ units }
-						/>
-						<RangeControl
-							__next40pxDefaultSize
-							label={ __( 'Border radius' ) }
-							hideLabelFromVision
-							className="components-border-radius-control__range-control"
-							value={ allValue ?? '' }
-							min={ MIN_BORDER_RADIUS_VALUE }
-							max={ MAX_BORDER_RADIUS_VALUES[ unit ] }
-							initialPosition={ 0 }
-							withInputField={ false }
-							onChange={ handleSliderChange }
-							step={ step }
-							__nextHasNoMarginBottom
-						/>
-					</>
-				) : (
-					<InputControls
-						min={ MIN_BORDER_RADIUS_VALUE }
+			<HStack className="components-border-radius-control__header">
+				<BaseControl.VisualLabel as="legend">
+					{ __( 'Radius' ) }
+				</BaseControl.VisualLabel>
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			</HStack>
+			{ isLinked ? (
+				<>
+					<SingleInputControl
 						onChange={ onChange }
 						selectedUnits={ selectedUnits }
 						setSelectedUnits={ setSelectedUnits }
-						values={ values || DEFAULT_VALUES }
+						values={ values }
 						units={ units }
+						corner="all"
+						presets={ options }
 					/>
-				) }
-				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
-			</div>
+				</>
+			) : (
+				<VStack>
+					{ [
+						'topLeft',
+						'topRight',
+						'bottomLeft',
+						'bottomRight',
+					].map( ( corner ) => (
+						<SingleInputControl
+							key={ corner }
+							onChange={ onChange }
+							selectedUnits={ selectedUnits }
+							setSelectedUnits={ setSelectedUnits }
+							values={ values || DEFAULT_VALUES }
+							units={ units }
+							corner={ corner }
+							presets={ options }
+						/>
+					) ) }
+				</VStack>
+			) }
 		</fieldset>
 	);
 }

package/src/components/border-radius-control/linked-button.js

@@ -11,7 +11,7 @@ export default function LinkedButton( { isLinked, ...props } ) {
 	return (
 		<Button
 			{ ...props }
-			className="component-border-radius-control__linked-button"
+			className="components-border-radius-control__linked-button"
 			size="small"
 			icon={ isLinked ? link : linkOff }
 			iconSize={ 24 }