@wordpress/block-library 7.11.0 → 7.13.0

package/src/media-text/edit.js

@@ -293,6 +293,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					slug={ mediaSizeSlug }
 					imageSizeOptions={ imageSizeOptions }
 					isResizable={ false }
+					imageSizeHelp={ __( 'Select which image size to load.' ) }
 				/>
 			) }
 			{ mediaUrl && (

package/src/media-text/media-container.js

@@ -36,7 +36,9 @@ export function imageFillStyles( url, focalPoint ) {
 		? {
 				backgroundImage: `url(${ url })`,
 				backgroundPosition: focalPoint
-					? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
 					: `50% 50%`,
 		  }
 		: {};

package/src/media-text/style.scss

@@ -6,6 +6,8 @@
 	display: grid;
 	grid-template-columns: 50% 1fr;
 	grid-template-rows: auto;
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	&.has-media-on-the-right {
 		grid-template-columns: 1fr 50%;

package/src/media-text/test/media-container.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from '../media-container';
+
+describe( 'imageFillStyles()', () => {
+	it( 'should return image url', () => {
+		const { backgroundImage } = imageFillStyles( 'image.jpg' );
+		expect( backgroundImage ).toBe( 'url(image.jpg)' );
+	} );
+
+	it( 'should return centered background position', () => {
+		const { backgroundPosition } = imageFillStyles( 'image.jpg' );
+		expect( backgroundPosition ).toBe( '50% 50%' );
+	} );
+
+	it( 'should return custom background position', () => {
+		const { backgroundPosition } = imageFillStyles( 'image.jpg', {
+			x: 0.56,
+			y: 0.57,
+		} );
+		expect( backgroundPosition ).toBe( '56% 57%' );
+	} );
+} );

package/src/navigation/block.json

@@ -94,6 +94,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
 			"__experimentalFontFamily": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalSkipSerialization": [ "textDecoration" ],
 			"__experimentalDefaultControls": {

package/src/navigation/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mapValues, omit } from 'lodash';
+import { mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -552,8 +552,10 @@ const deprecated = [
 			inserter: true,
 		},
 		migrate: compose( migrateIdToRef, ( attributes ) => {
+			const { rgbTextColor, rgbBackgroundColor, ...restAttributes } =
+				attributes;
 			return {
-				...omit( attributes, [ 'rgbTextColor', 'rgbBackgroundColor' ] ),
+				...restAttributes,
 				customTextColor: attributes.textColor
 					? undefined
 					: attributes.rgbTextColor,