@wordpress/block-editor 14.2.1-next.5368f64a9.0 → 14.3.0

package/src/components/global-styles/dimensions-panel.js

@@ -531,6 +531,7 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
+							__next40pxDefaultSize
 							values={ paddingValues }
 							onChange={ setPaddingValues }
 							label={ __( 'Padding' ) }
@@ -571,6 +572,7 @@ export default function DimensionsPanel( {
 				>
 					{ ! showSpacingPresetsControl && (
 						<BoxControl
+							__next40pxDefaultSize
 							values={ marginValues }
 							onChange={ setMarginValues }
 							inputProps={ inputProps }
@@ -617,6 +619,7 @@ export default function DimensionsPanel( {
 					{ ! showSpacingPresetsControl &&
 						( isAxialGap ? (
 							<BoxControl
+								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
 								min={ 0 }
 								onChange={ setGapValues }

package/src/components/global-styles/style.scss

@@ -70,171 +70,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-
-.block-editor-global-styles-background-panel__inspector-media-replace-container {
-	border: $border-width solid $gray-300;
-	border-radius: $radius-small;
-	// Full width. ToolsPanel lays out children in a grid.
-	grid-column: 1 / -1;
-
-	&.is-open {
-		background-color: $gray-100;
-	}
-
-	.block-editor-global-styles-background-panel__image-tools-panel-item {
-		flex-grow: 1;
-		border: 0;
-		.components-dropdown {
-			display: block;
-		}
-	}
-
-	.block-editor-global-styles-background-panel__inspector-preview-inner {
-		height: 100%;
-	}
-
-	.components-dropdown {
-		display: block;
-		height: 36px;
-	}
-}
-
-.block-editor-global-styles-background-panel__image-tools-panel-item {
-	border: $border-width solid $gray-300;
-
-	// Full width. ToolsPanel lays out children in a grid.
-	grid-column: 1 / -1;
-
-	// Ensure the dropzone is positioned to the size of the item.
-	position: relative;
-
-	// Since there is no option to skip rendering the drag'n'drop icon in drop
-	// zone, we hide it for now.
-	.components-drop-zone__content-icon {
-		display: none;
-	}
-
-	.components-dropdown {
-		display: block;
-		height: 36px;
-	}
-
-	button.components-button {
-		color: $gray-900;
-		width: 100%;
-		display: block;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-
-	.block-editor-global-styles-background-panel__loading {
-		height: 100%;
-		position: absolute;
-		z-index: 1;
-		width: 100%;
-		padding: 10px 0 0 0;
-		svg {
-			margin: 0;
-		}
-	}
-}
-
-.block-editor-global-styles-background-panel__image-preview-content,
-.block-editor-global-styles-background-panel__dropdown-toggle {
-	height: 100%;
-	width: 100%;
-	padding-left: $grid-unit-15;
-}
-
-.block-editor-global-styles-background-panel__dropdown-toggle {
-	cursor: pointer;
-	background: transparent;
-	border: none;
-}
-
-.block-editor-global-styles-background-panel__inspector-media-replace-title {
-	word-break: break-all;
-	// The Button component is white-space: nowrap, and that won't work with line-clamp.
-	white-space: normal;
-
-	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-	text-align: start;
-	text-align-last: center;
-}
-
-.block-editor-global-styles-background-panel__inspector-preview-inner {
-	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
-		width: 20px;
-		height: 20px;
-		min-width: auto;
-	}
-}
-
-.block-editor-global-styles-background-panel__inspector-image-indicator {
-	background-size: cover;
-	border-radius: $radius-round;
-	width: 20px;
-	height: 20px;
-	display: block;
-	position: relative;
-}
-
-.block-editor-global-styles-background-panel__inspector-image-indicator::after {
-	content: "";
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	bottom: -1px;
-	right: -1px;
-	border-radius: $radius-round;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
-	border: 1px solid transparent;
-	box-sizing: inherit;
-}
-
-.block-editor-global-styles-background-panel__dropdown-content-wrapper {
-	min-width: 260px;
-	overflow-x: hidden;
-
-	.components-focal-point-picker-wrapper {
-		background-color: $gray-100;
-		width: 100%;
-		border-radius: $radius-small;
-		border: $border-width solid $gray-300;
-	}
-
-	.components-focal-point-picker__media--image {
-		max-height: 180px;
-	}
-
-	// Override focal picker to avoid a double border.
-	.components-focal-point-picker::after {
-		content: none;
-	}
-}
-
-// Push control panel into the background when the media modal is open.
-.modal-open .block-editor-global-styles-background-panel__popover {
-	z-index: z-index(".block-editor-global-styles-background-panel__popover");
-}
-
-.block-editor-global-styles-background-panel__media-replace-popover {
-	.components-popover__content {
-		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
-		width: 226px;
-	}
-	.components-button {
-		padding: 0 $grid-unit-10;
-	}
-	.components-button .components-menu-items__item-icon.has-icon-right {
-		margin-left: $grid-unit-30 - $grid-unit-10;
-	}
-}

package/src/components/global-styles/test/background-panel.js

@@ -2,53 +2,7 @@
  * Internal dependencies
  */
 
-import {
-	backgroundPositionToCoords,
-	coordsToBackgroundPosition,
-	hasBackgroundImageValue,
-} from '../background-panel';
-
-describe( 'backgroundPositionToCoords', () => {
-	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
-		expect( backgroundPositionToCoords( '25% 75%' ) ).toEqual( {
-			x: 0.25,
-			y: 0.75,
-		} );
-	} );
-
-	it( 'should return the correct coordinates for a percentage using 1-value syntax', () => {
-		expect( backgroundPositionToCoords( '50%' ) ).toEqual( {
-			x: 0.5,
-			y: 0.5,
-		} );
-	} );
-
-	it( 'should return undefined coords in given an empty value', () => {
-		expect( backgroundPositionToCoords( '' ) ).toEqual( {
-			x: undefined,
-			y: undefined,
-		} );
-	} );
-
-	it( 'should return undefined coords in given a string that cannot be converted', () => {
-		expect( backgroundPositionToCoords( 'apples' ) ).toEqual( {
-			x: undefined,
-			y: undefined,
-		} );
-	} );
-} );
-
-describe( 'coordsToBackgroundPosition', () => {
-	it( 'should return the correct background position for a set of coordinates', () => {
-		expect( coordsToBackgroundPosition( { x: 0.25, y: 0.75 } ) ).toBe(
-			'25% 75%'
-		);
-	} );
-
-	it( 'should return undefined if no coordinates are provided', () => {
-		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
-	} );
-} );
+import { hasBackgroundImageValue } from '../background-panel';
 
 describe( 'hasBackgroundImageValue', () => {
 	it( 'should return `true` when id and url exist', () => {

package/src/components/grid/grid-item-resizer.js

@@ -73,8 +73,8 @@ function GridItemResizerInner( {
 	}, [ blockElement, rootBlockElement ] );
 
 	const justification = {
-		right: 'flex-start',
-		left: 'flex-end',
+		right: 'left',
+		left: 'right',
 	};
 
 	const alignment = {

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

@@ -54,6 +54,13 @@ export default function useSaveImage( {
 			} );
 		}
 
+		if ( modifiers.length === 0 ) {
+			// No changes to apply.
+			setIsInProgress( false );
+			onFinishEditing();
+			return;
+		}
+
 		apiFetch( {
 			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',

package/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js

@@ -15,8 +15,7 @@ function PatternCategoriesList( {
 			{ patternCategories.map( ( { name, label } ) => {
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						key={ name }
 						label={ label }
 						className={ `${ baseClassName }__categories-list__item` }

package/src/components/inserter/block-patterns-tab/index.js

@@ -61,8 +61,7 @@ function BlockPatternsTab( {
 						{ children }
 					</CategoryTabs>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"

package/src/components/inserter/media-tab/media-preview.js

@@ -100,8 +100,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 			>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ onClose }
 					>
@@ -110,8 +109,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 				</FlexItem>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ onSubmit }
 					>

package/src/components/inserter/media-tab/media-tab.js

@@ -71,8 +71,7 @@ function MediaTab( {
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							render={ ( { open } ) => (
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									onClick={ ( event ) => {
 										// Safari doesn't emit a focus event on button elements when
 										// clicked and we need to manually focus the button here.

package/src/components/inserter/quick-inserter.js

@@ -138,8 +138,7 @@ export default function QuickInserter( {
 
 			{ setInserterIsOpened && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(

package/src/components/inserter/style.scss

@@ -155,15 +155,6 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	margin: auto $grid-unit-20 $grid-unit-20;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-	justify-content: center;
-	width: 100%;
-}
-
 .block-editor-inserter__no-results,
 .block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
@@ -419,7 +410,6 @@ $block-inserter-tabs-height: 44px;
 	background: $gray-900;
 	color: $white;
 	width: 100%;
-	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
 
 	&:hover {

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

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

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

@@ -12,6 +12,7 @@ import {
 	Notice,
 	TextControl,
 	__experimentalHStack as HStack,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -383,7 +384,7 @@ function LinkControl( {
 								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
-								size="__unstable-large"
+								__next40pxDefaultSize
 							/>
 						) }
 						<LinkControlSearchInput
@@ -404,20 +405,24 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							hideLabelFromVision={ ! showTextControl }
+							suffix={
+								showActions ? undefined : (
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											onClick={
+												isDisabled ? noop : handleSubmit
+											}
+											label={ __( 'Submit' ) }
+											icon={ keyboardReturn }
+											className="block-editor-link-control__search-submit"
+											aria-disabled={ isDisabled }
+											size="small"
+										/>
+									</InputControlSuffixWrapper>
+								)
+							}
+							props
 						/>
-						{ ! 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 }
-									className="block-editor-link-control__search-submit"
-									aria-disabled={ isDisabled }
-								/>
-							</div>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice

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

@@ -43,6 +43,7 @@ const LinkControlSearchInput = forwardRef(
 			withURLSuggestion = true,
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
+			suffix,
 		},
 		ref
 	) => {
@@ -147,6 +148,7 @@ const LinkControlSearchInput = forwardRef(
 						}
 					} }
 					ref={ ref }
+					suffix={ suffix }
 				/>
 				{ children }
 			</div>

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

@@ -72,34 +72,12 @@ $block-editor-link-control-number-of-actions: 1;
 		color: $gray-900;
 	}
 
-	input[type="text"],
-	// Specificity overide of URLInput defaults.
-	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
-		@include input-control;
-		display: block;
-		border: $border-width solid $gray-600;
-		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;
-		position: relative;
-		width: 100%;
-
-		.has-actions & {
-			padding-right: $grid-unit-20;
-		}
-	}
 }
 
 .block-editor-link-control__search-error {
 	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
-.block-editor-link-control__search-enter {
-	position: absolute;
-	right: 19px; // specific to place the button properly.
-	top: 3px;
-}
-
 .block-editor-link-control__search-actions {
 	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 }

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

@@ -272,7 +272,7 @@
 
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
-		@include edit-post__fade-in-animation;
+		@include animation__fade-in;
 	}
 
 	.block-editor-block-icon {

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

@@ -125,6 +125,7 @@ export function RichTextWrapper(
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
 	const blockContext = useContext( BlockContext );
+	const registry = useRegistry();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -178,6 +179,10 @@ export function RichTextWrapper(
 			const blockBindingsSource = getBlockBindingsSource(
 				relatedBinding.source
 			);
+			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+				registry,
+				context: blockContext,
+			} );
 
 			const _disableBoundBlock =
 				! blockBindingsSource?.canUserEditValue?.( {
@@ -186,12 +191,16 @@ export function RichTextWrapper(
 					args: relatedBinding.args,
 				} );
 
+			const bindingKey =
+				fieldsList?.[ relatedBinding?.args?.key ]?.label ??
+				blockBindingsSource?.label;
+
 			const _bindingsPlaceholder = _disableBoundBlock
-				? relatedBinding?.args?.key || blockBindingsSource?.label
+				? bindingKey
 				: sprintf(
-						/* translators: %s: source label or key */
+						/* translators: %s: connected field label or source label */
 						__( 'Add %s' ),
-						relatedBinding?.args?.key || blockBindingsSource?.label
+						bindingKey
 				  );
 
 			return {
@@ -201,7 +210,14 @@ export function RichTextWrapper(
 					_bindingsPlaceholder,
 			};
 		},
-		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
+		[
+			blockBindings,
+			identifier,
+			blockName,
+			blockContext,
+			registry,
+			adjustedValue,
+		]
 	);
 
 	const shouldDisableEditing = readOnly || disableBoundBlock;
@@ -371,7 +387,6 @@ export function RichTextWrapper(
 		element.focus();
 	}
 
-	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>

package/src/components/spacing-sizes-control/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import AxialInputControls from './input-controls/axial';
 import SeparatedInputControls from './input-controls/separated';
 import SingleInputControl from './input-controls/single';
-import SidesDropdown from './sides-dropdown';
+import LinkedButton from './linked-button';
 import useSpacingSizes from './hooks/use-spacing-sizes';
 import {
 	ALL_SIDES,
@@ -47,6 +47,10 @@ export default function SpacingSizesControl( {
 
 	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
+	const toggleLinked = () => {
+		setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );
+	};
+
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
 		onChange( newValues );
@@ -91,12 +95,6 @@ export default function SpacingSizesControl( {
 		sideLabel
 	).trim();
 
-	const dropdownLabelText = sprintf(
-		// translators: %s: The current spacing property e.g. "Padding", "Margin".
-		_x( '%s options', 'Button label to reveal side configuration options' ),
-		labelProp
-	);
-
 	return (
 		<fieldset className="spacing-sizes-control">
 			<HStack className="spacing-sizes-control__header">
@@ -107,11 +105,10 @@ export default function SpacingSizesControl( {
 					{ label }
 				</BaseControl.VisualLabel>
 				{ ! hasOneSide && ! hasOnlyAxialSides && (
-					<SidesDropdown
-						label={ dropdownLabelText }
-						onChange={ setView }
-						sides={ sides }
-						value={ view }
+					<LinkedButton
+						label={ labelProp }
+						onClick={ toggleLinked }
+						isLinked={ view === VIEWS.axial }
 					/>
 				) }
 			</HStack>

package/src/components/spacing-sizes-control/linked-button.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip } from '@wordpress/components';
+import { link, linkOff } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function LinkedButton( { isLinked, ...props } ) {
+	const label = isLinked
+		? sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Unlink %1$s' ),
+				props.label.toLowerCase()
+		  ).trim()
+		: sprintf(
+				// translators: 1. Type of spacing being modified (padding, margin, etc).
+				__( 'Link %1$s' ),
+				props.label.toLowerCase()
+		  ).trim();
+
+	return (
+		<Tooltip text={ label }>
+			<Button
+				{ ...props }
+				size="small"
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
+		</Tooltip>
+	);
+}