@wordpress/block-editor 14.2.1-next.1f6eadc42.0 → 14.3.0

package/src/components/background-image-control/style.scss

@@ -0,0 +1,170 @@
+.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/background-image-control/test/index.js

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+
+import { backgroundPositionToCoords, coordsToBackgroundPosition } from '../';
+
+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();
+	} );
+} );

package/src/components/block-card/index.js

@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -22,7 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType, className } ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -65,7 +65,16 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			) }
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">{ title }</h2>
+				<h2 className="block-editor-block-card__title">
+					{ name?.length
+						? sprintf(
+								// translators:  %1$s: Custom block name. %2$s: Block title.
+								__( '%1$s (%2$s)' ),
+								name,
+								title
+						  )
+						: title }
+				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">
 						{ description }

package/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -16,10 +16,7 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useZoomOutModeExit( { editorMode } ) {
-	const getSettings = useSelect(
-		( select ) => select( blockEditorStore ).getSettings
-	);
-
+	const { getSettings } = useSelect( blockEditorStore );
 	const { __unstableSetEditorMode } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -51,6 +48,6 @@ export function useZoomOutModeExit( { editorMode } ) {
 				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
-		[ editorMode, __unstableSetEditorMode ]
+		[ editorMode, getSettings, __unstableSetEditorMode ]
 	);
 }