@wordpress/block-editor 12.3.1 → 12.3.3

package/src/components/dimensions-tool/width-height-tool.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
+`;
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolValue
+ * @property {string} [width]  Width CSS value.
+ * @property {string} [height] Height CSS value.
+ */
+
+/**
+ * @callback WidthHeightToolOnChange
+ * @param {WidthHeightToolValue} nextValue Next dimensions value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolProps
+ * @property {string}                  [panelId]          ID of the panel that contains the controls.
+ * @property {WidthHeightToolValue}    [value]            Current dimensions values.
+ * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.
+ * @property {WPUnitControlUnit[]}     [units]            Units options.
+ * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {WidthHeightToolProps} props The component props.
+ *
+ * @return {import('@wordpress/element').WPElement} The width and height tool.
+ */
+export default function WidthHeightTool( {
+	panelId,
+	value = {},
+	onChange = () => {},
+	units,
+	isShownByDefault = true,
+} ) {
+	// null, undefined, and 'auto' all represent the default value.
+	const width = value.width === 'auto' ? '' : value.width ?? '';
+	const height = value.height === 'auto' ? '' : value.height ?? '';
+
+	const onDimensionChange = ( dimension ) => ( nextDimension ) => {
+		const nextValue = { ...value };
+		// Empty strings or undefined may be passed and both represent removing the value.
+		if ( ! nextDimension ) {
+			delete nextValue[ dimension ];
+		} else {
+			nextValue[ dimension ] = nextDimension;
+		}
+		onChange( nextValue );
+	};
+
+	return (
+		<>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Width' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => width !== '' }
+				onDeselect={ onDimensionChange( 'width' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Width' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ width }
+					onChange={ onDimensionChange( 'width' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Height' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => height !== '' }
+				onDeselect={ onDimensionChange( 'height' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ height }
+					onChange={ onDimensionChange( 'height' ) }
+					size={ '__unstable-large' }
+				/>
+			</SingleColumnToolsPanelItem>
+		</>
+	);
+}

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -54,7 +54,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
-							// All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
+							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
 								title: __( 'Original' ),
 								aspect: defaultAspect,

package/src/components/image-editor/use-save-image.js

@@ -66,7 +66,6 @@ export default function useSaveImage( {
 				onSaveImage( {
 					id: response.id,
 					url: response.source_url,
-					height: height && width ? width / aspect : undefined,
 				} );
 			} )
 			.catch( ( error ) => {

package/src/components/image-size-control/index.js

@@ -8,6 +8,7 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -30,6 +31,11 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
+	deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
+		since: '6.3',
+		alternative:
+			'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
+	} );
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 

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

@@ -292,7 +292,8 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
+	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -322,6 +323,18 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
+						{ showTextControl && (
+							<TextControl
+								__nextHasNoMarginBottom
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+								size="__unstable-large"
+							/>
+						) }
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -339,19 +352,8 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
-							useLabel={ showTextControl }
+							hideLabelFromVision={ ! showTextControl }
 						/>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label={ __( 'Text' ) }
-								value={ internalControlValue?.title }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -376,9 +378,9 @@ function LinkControl( {
 				/>
 			) }
 
-			{ isEditing && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					{ showSettings && (
+					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
@@ -392,20 +394,22 @@ function LinkControl( {
 							/>
 						</LinkControlSettingsDrawer>
 					) }
+				</div>
+			) }
 
-					<div className="block-editor-link-control__search-actions">
-						<Button
-							variant="primary"
-							onClick={ isDisabled ? noop : handleSubmit }
-							className="block-editor-link-control__search-submit"
-							aria-disabled={ isDisabled }
-						>
-							{ __( 'Save' ) }
-						</Button>
-						<Button variant="tertiary" onClick={ handleCancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</div>
+			{ showActions && (
+				<div className="block-editor-link-control__search-actions">
+					<Button
+						variant="primary"
+						onClick={ isDisabled ? noop : handleSubmit }
+						className="block-editor-link-control__search-submit"
+						aria-disabled={ isDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 				</div>
 			) }
 

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

@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
 		},
 		ref
 	) => {
@@ -120,7 +120,7 @@ const LinkControlSearchInput = forwardRef(
 		};
 
 		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
+			// 'has-no-label': ! hideLabelFromVision,
 		} );
 
 		return (
@@ -128,7 +128,8 @@ const LinkControlSearchInput = forwardRef(
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
-					label={ useLabel ? 'URL' : undefined }
+					label={ __( 'Link' ) }
+					hideLabelFromVision={ hideLabelFromVision }
 					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }

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

@@ -6,9 +6,9 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { settings as settingsIcon } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { _x, isRTL } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
 function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
@@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
-				icon={ settingsIcon }
-				label={ __( 'Link Settings' ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 				aria-controls={ settingsDrawerId }
-			/>
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
 			<MaybeAnimatePresence>
 				{ settingsOpen && (
 					<MaybeMotionDiv

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

@@ -59,29 +59,18 @@ $preview-image-height: 140px;
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
-	// Element wrapping the label and input.
-	> .components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		margin-right: $grid-unit-20;
-		margin-bottom: 0;
-		min-width: 29px; // align with search results.
-	}
-
 	input[type="text"],
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
-		padding: 11px $grid-unit-20;
+		border: 1px 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 $grid-unit-20;
 		position: relative;
-		border: 1px solid $gray-300;
-		border-radius: $radius-block-ui;
+		width: 100%;
 	}
 }
 
@@ -94,12 +83,12 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	padding: $grid-unit-10;
 	order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
-	margin-top: -$grid-unit-20 + 1px;
 
 	&::before,
 	&::after {
@@ -440,36 +429,7 @@ $preview-image-height: 140px;
 	display: flex; // allow for ordering.
 	flex-direction: column;
 	flex-basis: 100%; // occupy full width.
-	margin-top: $grid-unit-20;
-	padding-top: $grid-unit-20;
 	position: relative;
-
-	&::after {
-		content: "";
-		display: block;
-		height: 1px;
-		background-color: $gray-300;
-		position: absolute;
-		left: -$grid-unit-20;
-		right: -$grid-unit-20;
-		top: 0;
-	}
-}
-
-.block-editor-link-control__tools {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	padding: $grid-unit-20;
-
-	// To hide the horizontal scrollbar on toggle.
-	// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
-	// See: https://github.com/WordPress/gutenberg/pull/47986
-	margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-	padding-top: var(--wp-admin-border-width-focus);
-	overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -477,17 +437,10 @@ $preview-image-height: 140px;
 	padding-right: $grid-unit-20;
 }
 
-.block-editor-link-control__settings {
-	flex: 1;
-	margin: 0;
-
-	.is-alternate & {
-		border-top: $border-width solid $gray-900;
-	}
-}
-
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
+	flex: 1;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
@@ -499,6 +452,31 @@ $preview-image-height: 140px;
 	}
 }
 
+.block-editor-link-control__tools {
+	padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
+	margin-top: #{$grid-unit-20 * -1};
+
+	.components-button.block-editor-link-control__drawer-toggle {
+		padding-left: 0;
+		gap: 0;
+
+		// Point downwards when open (same as list view expander)
+		&[aria-expanded="true"] svg {
+			visibility: visible;
+			transition: transform 0.1s ease;
+			transform: rotate(90deg);
+			@include reduce-motion("transition");
+		}
+		// Point rightwards when closed (same as list view expander)
+		&[aria-expanded="false"] svg {
+			visibility: visible;
+			transform: rotate(0deg);
+			transition: transform 0.1s ease;
+			@include reduce-motion("transition");
+		}
+	}
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
 	display: block;