@wordpress/block-editor 16.2.0 → 17.0.0

package/src/components/block-tools/style.scss

@@ -119,6 +119,14 @@
 				margin-left: 0;
 			}
 		}
+
+		// Make room for the inserter next to the parent selector.
+		&.has-parent:has(.block-editor-block-parent-selector__inserter) {
+			margin-left: calc(#{$grid-unit-60} + #{$grid-unit-30} + #{$grid-unit-15} + #{$grid-unit-10} + 2 * #{$border-width});
+			.show-icon-labels & {
+				margin-left: 0;
+			}
+		}
 	}
 
 	.block-editor-block-toolbar {
@@ -149,6 +157,92 @@
 		position: absolute;
 		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
 
+		// With the inserter next to the parent button, the border moves to
+		// the shared container so the pair reads as one toolbar segment.
+		// The toolbar group sizing comes from the components-toolbar-group
+		// class the container carries when the inserter is in it; only the
+		// detached position and the full border are its own.
+		&:has(.block-editor-block-parent-selector__inserter) {
+			left: calc(-#{$grid-unit-60} - #{$grid-unit-30} - #{$grid-unit-15} - #{$grid-unit-10} - 3 * #{$border-width});
+			border: $border-width solid $gray-900;
+			border-radius: $radius-small;
+			// The box paints the background, like the toolbar box does for
+			// its groups.
+			background-color: $white;
+
+			// The same rule the Toolbar container has for its last group;
+			// this box stands in for it here.
+			> .components-toolbar-group:last-child {
+				border-right: none;
+			}
+
+			.block-editor-block-parent-selector__button {
+				// Buttons in a toolbar are transparent; the box paints the
+				// background and border behind them.
+				border: none;
+				background: none;
+			}
+		}
+
+		.block-editor-block-parent-selector__inserter.components-button.has-icon {
+			color: $white;
+			background: transparent;
+
+			// The black square every other inserter has, drawn under the
+			// icon in the middle of the target.
+			&::after {
+				content: "";
+				position: absolute;
+				z-index: -1;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: $button-size-small;
+				height: $button-size-small;
+				border-radius: $radius-small;
+				background: $gray-900;
+			}
+
+			&:hover {
+				color: $white;
+
+				&::after {
+					background: var(--wp-admin-theme-color);
+				}
+			}
+
+			// With the text labels preference, the button shows its label
+			// like every other toolbar button, not the black square.
+			.show-icon-labels & {
+				width: auto;
+				padding: 0 $grid-unit-15;
+				color: inherit;
+
+				svg {
+					display: none;
+				}
+
+				&::after {
+					content: attr(aria-label);
+					position: static;
+					transform: none;
+					width: auto;
+					height: auto;
+					border-radius: 0;
+					background: none;
+					white-space: nowrap;
+				}
+
+				&:hover {
+					color: var(--wp-admin-theme-color);
+
+					&::after {
+						background: none;
+					}
+				}
+			}
+		}
+
 		&::before {
 			content: "";
 		}

package/src/components/block-visibility/constants.ts

@@ -10,9 +10,10 @@ export type BlockVisibilityViewport = 'desktop' | 'tablet' | 'mobile';
 /**
  * The choices for the block visibility.
  *
- * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices array)
- * and packages/edit-site/src/components/block-editor/use-viewport-sync.js
- * (VALID_DEVICE_TYPES). Update all three when adding new viewport types.
+ * Duplicated in packages/editor/src/components/preview-dropdown/index.js (choices
+ * array), packages/edit-site/src/components/block-editor/viewport.js and
+ * packages/boot/src/components/canvas/viewport.ts (VALID_VIEWPORTS). Update all
+ * four when adding new viewport types.
  *
  * @todo create a single source of truth for the viewport types.
  */

package/src/components/child-layout-control/index.js

@@ -2,7 +2,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
-	__experimentalInputControl as InputControl,
+	__experimentalInputControl as WCInputControl,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -298,7 +298,7 @@ function GridControls( {
 				panelId={ panelId }
 			>
 				<FlexItem style={ { width: '50%' } }>
-					<InputControl
+					<WCInputControl
 						label={ __( 'Column span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -322,7 +322,7 @@ function GridControls( {
 					/>
 				</FlexItem>
 				<FlexItem style={ { width: '50%' } }>
-					<InputControl
+					<WCInputControl
 						label={ __( 'Row span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -359,7 +359,7 @@ function GridControls( {
 					panelId={ panelId }
 				>
 					<FlexItem style={ { width: '50%' } }>
-						<InputControl
+						<WCInputControl
 							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -393,7 +393,7 @@ function GridControls( {
 						/>
 					</FlexItem>
 					<FlexItem style={ { width: '50%' } }>
-						<InputControl
+						<WCInputControl
 							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -1,38 +1,12 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
-.emotion-0 {
-  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: calc(4px * 2);
-  padding: 0;
-}
-
 <div>
   <div
-    class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
+    class="style-wrapper components-base-control block-editor-color-gradient-control"
   >
     <div
-      class="components-base-control__field emotion-2 emotion-3"
+      class="style-field components-base-control__field"
     >
       <fieldset
         class="block-editor-color-gradient-control__fieldset"
@@ -48,7 +22,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               class="block-editor-color-gradient-control__color-indicator"
             >
               <span
-                class="components-base-control__label emotion-4 emotion-5"
+                class="style-label components-base-control__label"
               >
                 Test Color
               </span>

package/src/components/colors/test/with-colors.js

@@ -17,17 +17,16 @@ describe( 'createCustomColorsHOC', () => {
 
 		expect( BaseComponent ).toHaveBeenCalledWith(
 			expect.objectContaining( {
-				attributes: {
+				attributes: expect.objectContaining( {
 					backgroundColor: null,
-				},
-				backgroundColor: {
+				} ),
+				backgroundColor: expect.objectContaining( {
 					class: undefined,
 					color: undefined,
-				},
-				colorUtils: {
+				} ),
+				colorUtils: expect.objectContaining( {
 					getMostReadableColor: expect.any( Function ),
-				},
-				colors: undefined,
+				} ),
 				setBackgroundColor: expect.any( Function ),
 			} ),
 			expect.anything()

package/src/components/colors/with-colors.js

@@ -1,4 +1,4 @@
-import { useMemo, Component } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
 import { kebabCase } from '@wordpress/kebab-case';
 import {
@@ -87,119 +87,93 @@ function createColorHOC( colorTypes, withColorPalette ) {
 	return compose( [
 		withColorPalette,
 		( WrappedComponent ) => {
-			return class WithColors extends Component {
-				constructor( props ) {
-					super( props );
+			return function WithColors( props ) {
+				const { colors: _colors, ...passedProps } = props;
+				const { attributes, setAttributes } = passedProps;
+				const prevColorPropsRef = useRef( null );
 
-					this.setters = this.createSetters();
-					this.colorUtils = {
-						getMostReadableColor:
-							this.getMostReadableColor.bind( this ),
-					};
+				const colorProps = useMemo( () => {
+					const prevColorProps = prevColorPropsRef.current;
 
-					this.state = {};
-				}
+					const result = Object.fromEntries(
+						Object.entries( colorMap ).flatMap(
+							( [ colorAttributeName, colorContext ] ) => {
+								const customAttr = `custom${ upperFirst(
+									colorAttributeName
+								) }`;
+								const upperFirstColorAttributeName =
+									upperFirst( colorAttributeName );
 
-				getMostReadableColor( colorValue ) {
-					const { colors } = this.props;
-					return getMostReadableColor( colors, colorValue );
-				}
+								const colorObject =
+									getColorObjectByAttributeValues(
+										_colors,
+										attributes[ colorAttributeName ],
+										attributes[ customAttr ]
+									);
 
-				createSetters() {
-					return Object.keys( colorMap ).reduce(
-						( settersAccumulator, colorAttributeName ) => {
-							const upperFirstColorAttributeName =
-								upperFirst( colorAttributeName );
-							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
-							settersAccumulator[
-								`set${ upperFirstColorAttributeName }`
-							] = this.createSetColor(
-								colorAttributeName,
-								customColorAttributeName
-							);
-							return settersAccumulator;
-						},
-						{}
-					);
-				}
-
-				createSetColor( colorAttributeName, customColorAttributeName ) {
-					return ( colorValue ) => {
-						const colorObject = getColorObjectByColorValue(
-							this.props.colors,
-							colorValue
-						);
-						this.props.setAttributes( {
-							[ colorAttributeName ]:
-								colorObject && colorObject.slug
-									? colorObject.slug
-									: undefined,
-							[ customColorAttributeName ]:
-								colorObject && colorObject.slug
-									? undefined
-									: colorValue,
-						} );
-					};
-				}
-
-				static getDerivedStateFromProps(
-					{ attributes, colors },
-					previousState
-				) {
-					return Object.entries( colorMap ).reduce(
-						( newState, [ colorAttributeName, colorContext ] ) => {
-							const colorObject = getColorObjectByAttributeValues(
-								colors,
-								attributes[ colorAttributeName ],
-								attributes[
-									`custom${ upperFirst(
-										colorAttributeName
-									) }`
-								]
-							);
+								const prevColorValue =
+									prevColorProps?.[ colorAttributeName ];
+								const colorValue =
+									prevColorValue?.color ===
+										colorObject.color && prevColorValue
+										? prevColorValue
+										: {
+												...colorObject,
+												class: getColorClassName(
+													colorContext,
+													colorObject.slug
+												),
+										  };
 
-							const previousColorObject =
-								previousState[ colorAttributeName ];
-							const previousColor = previousColorObject?.color;
-							/**
-							 * The "and previousColorObject" condition checks that a previous color object was already computed.
-							 * At the start previousColorObject and colorValue are both equal to undefined
-							 * bus as previousColorObject does not exist we should compute the object.
-							 */
-							if (
-								previousColor === colorObject.color &&
-								previousColorObject
-							) {
-								newState[ colorAttributeName ] =
-									previousColorObject;
-							} else {
-								newState[ colorAttributeName ] = {
-									...colorObject,
-									class: getColorClassName(
-										colorContext,
-										colorObject.slug
-									),
+								const setter = ( newColorValue ) => {
+									const resolvedColorObject =
+										getColorObjectByColorValue(
+											_colors,
+											newColorValue
+										);
+									setAttributes( {
+										[ colorAttributeName ]:
+											resolvedColorObject?.slug ||
+											undefined,
+										[ customAttr ]:
+											resolvedColorObject?.slug
+												? undefined
+												: newColorValue,
+									} );
 								};
+
+								return [
+									[ colorAttributeName, colorValue ],
+									[
+										`set${ upperFirstColorAttributeName }`,
+										setter,
+									],
+								];
 							}
-							return newState;
-						},
-						{}
+						)
 					);
-				}
 
-				render() {
-					return (
-						<WrappedComponent
-							{ ...{
-								...this.props,
-								colors: undefined,
-								...this.state,
-								...this.setters,
-								colorUtils: this.colorUtils,
-							} }
-						/>
-					);
-				}
+					prevColorPropsRef.current = result;
+					return result;
+				}, [ attributes, _colors, setAttributes ] );
+
+				const colorUtils = useMemo(
+					() => ( {
+						getMostReadableColor: ( colorValue ) =>
+							getMostReadableColor( _colors, colorValue ),
+					} ),
+					[ _colors ]
+				);
+
+				return (
+					<WrappedComponent
+						{ ...{
+							...passedProps,
+							...colorProps,
+							colorUtils,
+						} }
+					/>
+				);
 			};
 		},
 	] );

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -2,6 +2,7 @@ import { SelectControl } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 import { InheritanceToolsPanelItem } from '../global-styles/inheritance';
+import { findAspectRatioOption } from './utils';
 
 /**
  * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
@@ -38,9 +39,6 @@ export default function AspectRatioTool( {
 	isInherited,
 	hasLocalOverride,
 } ) {
-	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
-	const displayValue = value ?? 'auto';
-
 	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
 		'dimensions.aspectRatios.default',
 		'dimensions.aspectRatios.theme',
@@ -75,6 +73,20 @@ export default function AspectRatioTool( {
 		},
 	];
 
+	const resolvedOptions = options ?? aspectRatioOptions;
+
+	// The value is free-form CSS, so it doesn't necessarily match an option as
+	// written, e.g. '1/1' and '1' describe the same ratio. Resolve it to the
+	// option that represents it, falling back to 'custom' so that a ratio
+	// without a matching preset isn't displayed as one of the presets. Values
+	// that are empty match the CSS default, so if the value is used directly in
+	// CSS it will look correct in the control.
+	const displayValue =
+		value === undefined || value === null || value === 'auto'
+			? 'auto'
+			: findAspectRatioOption( value, resolvedOptions )?.value ??
+			  'custom';
+
 	return (
 		<InheritanceToolsPanelItem
 			className={ className }
@@ -91,7 +103,7 @@ export default function AspectRatioTool( {
 			<SelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ displayValue }
-				options={ options ?? aspectRatioOptions }
+				options={ resolvedOptions }
 				onChange={ onChange }
 			/>
 		</InheritanceToolsPanelItem>

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

@@ -1,4 +1,4 @@
-import { useState } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import AspectRatioTool from './aspect-ratio-tool';
 import ScaleTool from './scale-tool';
 import WidthHeightTool from './width-height-tool';
@@ -68,13 +68,33 @@ function DimensionsTool( {
 			: value.aspectRatio;
 	const scale = value.scale === undefined ? null : value.scale;
 
-	// Keep track of state internally, so when the value is cleared by means
-	// other than directly editing that field, it's easier to restore the
-	// previous value.
-	const [ lastScale, setLastScale ] = useState( scale );
-	const [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );
 	const hasCustomAspectRatio = !! ( width && height );
 
+	// Keep track of the previous values, so when a value is cleared by means
+	// other than directly editing that field, it's easier to restore it. These
+	// are only ever read while handling a change, so they're kept in refs and
+	// synced from the value to stay correct when it is updated externally, e.g.
+	// by undo or by another client.
+	const lastScaleRef = useRef( scale );
+	const lastAspectRatioRef = useRef( aspectRatio );
+
+	useEffect( () => {
+		// Scale is cleared alongside the aspect ratio, so only remember the
+		// values it is actually set to.
+		if ( scale ) {
+			lastScaleRef.current = scale;
+		}
+	}, [ scale ] );
+
+	useEffect( () => {
+		// A custom aspect ratio, i.e. both a width and a height, clears the
+		// aspect ratio value. Keep the remembered one so it can be restored
+		// once the custom aspect ratio is removed.
+		if ( ! hasCustomAspectRatio ) {
+			lastAspectRatioRef.current = aspectRatio;
+		}
+	}, [ aspectRatio, hasCustomAspectRatio ] );
+
 	// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
 	// dropdown to indicate that setting both the width and height is the same
 	// as a custom aspect ratio.
@@ -97,8 +117,6 @@ function DimensionsTool( {
 						nextAspectRatio =
 							nextAspectRatio === 'auto' ? null : nextAspectRatio;
 
-						setLastAspectRatio( nextAspectRatio );
-
 						// Update aspectRatio.
 						if ( ! nextAspectRatio ) {
 							delete nextValue.aspectRatio;
@@ -109,11 +127,9 @@ function DimensionsTool( {
 						// Auto-update scale.
 						if ( ! nextAspectRatio ) {
 							delete nextValue.scale;
-						} else if ( lastScale ) {
-							nextValue.scale = lastScale;
 						} else {
-							nextValue.scale = defaultScale;
-							setLastScale( defaultScale );
+							nextValue.scale =
+								lastScaleRef.current ?? defaultScale;
 						}
 
 						// Auto-update width and height.
@@ -154,8 +170,8 @@ function DimensionsTool( {
 						// Auto-update aspectRatio.
 						if ( nextWidth && nextHeight ) {
 							delete nextValue.aspectRatio;
-						} else if ( lastAspectRatio ) {
-							nextValue.aspectRatio = lastAspectRatio;
+						} else if ( lastAspectRatioRef.current ) {
+							nextValue.aspectRatio = lastAspectRatioRef.current;
 						} else {
 							// No setting defaultAspectRatio here, because
 							// aspectRatio is optional in this scenario,
@@ -164,15 +180,13 @@ function DimensionsTool( {
 
 						// Auto-update scale.
 						if (
-							! lastAspectRatio &&
+							! lastAspectRatioRef.current &&
 							!! nextWidth !== !! nextHeight
 						) {
 							delete nextValue.scale;
-						} else if ( lastScale ) {
-							nextValue.scale = lastScale;
 						} else {
-							nextValue.scale = defaultScale;
-							setLastScale( defaultScale );
+							nextValue.scale =
+								lastScaleRef.current ?? defaultScale;
 						}
 
 						onChange( nextValue );
@@ -184,12 +198,10 @@ function DimensionsTool( {
 					panelId={ panelId }
 					options={ scaleOptions }
 					defaultValue={ defaultScale }
-					value={ lastScale }
+					value={ scale }
 					onChange={ ( nextScale ) => {
 						const nextValue = { ...value };
 
-						setLastScale( nextScale );
-
 						// Update scale.
 						if ( ! nextScale ) {
 							delete nextValue.scale;