@wordpress/block-editor 10.0.5 → 10.0.7

package/build-style/style.css

@@ -1068,6 +1068,7 @@
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
   margin-bottom: 24px;
+  position: relative;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
@@ -1712,10 +1713,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1726,7 +1727,7 @@
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 
@@ -4273,7 +4274,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
-  grid-template-rows: 25px auto;
+  grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4296,15 +4297,16 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 1/1;
   justify-content: left;
   height: 16px;
-  margin-top: 12px;
+  margin-top: 16px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__side-label {
   grid-column: 1/1;
   justify-self: left;
   margin-bottom: 0;
 }
-.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control {
-  margin-top: 12px;
+.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
+.component-spacing-sizes-control.is-unlinked .components-spacing-sizes-control__custom-value-input {
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
@@ -4322,12 +4324,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 2/2;
   grid-row: 1/1;
   justify-self: end;
-  padding: 0;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
+  margin-top: -4px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-right: 4px;
@@ -4335,29 +4332,37 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
   grid-column: 3/3;
   justify-self: end;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
-  padding: 0;
-  min-width: 24px;
-  height: 16px;
   margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
   grid-row: 1/1;
   justify-self: end;
+  line-height: 0;
+  margin-top: -4px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
-  margin-left: 8px;
-  height: 30px;
+  margin-left: 16px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
   width: 124px;
+  margin-top: 8px;
+}
+.component-spacing-sizes-control .components-range-control {
+  height: 40px;
+  /* Vertically center the RangeControl until it has true 40px height. */
+  display: flex;
+  align-items: center;
+}
+.component-spacing-sizes-control .components-range-control > .components-base-control__field {
+  /* Fixes RangeControl contents when the outer wrapper is flex */
+  flex: 1;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  height: 40px;
+  margin-top: 8px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4376,6 +4381,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
+  margin-top: 8px;
 }
 
 body.admin-color-light {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.0.5",
+	"version": "10.0.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,7 +37,7 @@
 		"@wordpress/api-fetch": "^6.14.1",
 		"@wordpress/blob": "^3.17.1",
 		"@wordpress/blocks": "^11.16.4",
-		"@wordpress/components": "^21.0.4",
+		"@wordpress/components": "^21.0.6",
 		"@wordpress/compose": "^5.15.2",
 		"@wordpress/data": "^7.1.3",
 		"@wordpress/date": "^4.17.1",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "06334a7bd943f2345f15b8d2f427721d6878e6c1"
+	"gitHead": "84269cffad0bab2b10e6b6da8e275716fcc8c57b"
 }

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

@@ -144,6 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
+			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -157,9 +158,11 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock: __unstableGetContentLockingParent(
-				_selectedBlockClientId
-			),
+			topLevelLockedBlock:
+				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+					? _selectedBlockClientId
+					: undefined ),
 		};
 	}, [] );
 

package/src/components/block-patterns-list/style.scss

@@ -2,6 +2,11 @@
 	cursor: pointer;
 	margin-bottom: $grid-unit-30;
 
+	// The list item contains absolutely positioned visually hidden text,
+	// so make this container relative. This prevents the bug experienced in
+	// https://github.com/WordPress/gutenberg/issues/44842.
+	position: relative;
+
 	&.is-placeholder {
 		min-height: 100px;
 	}

package/src/components/button-block-appender/style.scss

@@ -36,8 +36,9 @@
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
+	// Legacy groups have an inner container so need to be targeted separately
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {

package/src/components/font-sizes/fluid-utils.js

@@ -0,0 +1,221 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+// Defaults.
+const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_SCALE_FACTOR = 1;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
+
+/**
+ * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * font size OR a single font size can be specified.
+ *
+ * If a single font size is specified, it is scaled up and down by
+ * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
+ * maximum sizes.
+ *
+ * @example
+ * ```js
+ * // Calculate fluid font-size value from a minimum and maximum value.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     minimumFontSize: '20px',
+ *     maximumFontSize: '45px'
+ * } );
+ * // Calculate fluid font-size value from a single font size.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     fontSize: '30px',
+ * } );
+ * ```
+ *
+ * @param {Object}        args
+ * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
+ * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
+ * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @param {?number}       args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+export function getComputedFluidTypographyValue( {
+	minimumFontSize,
+	maximumFontSize,
+	fontSize,
+	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+	scaleFactor = DEFAULT_SCALE_FACTOR,
+	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
+	maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
+} ) {
+	// Calculate missing minimumFontSize and maximumFontSize from
+	// defaultFontSize if provided.
+	if ( fontSize && ( ! minimumFontSize || ! maximumFontSize ) ) {
+		// Parse default font size.
+		const fontSizeParsed = getTypographyValueAndUnit( fontSize );
+
+		// Protect against invalid units.
+		if ( ! fontSizeParsed?.unit ) {
+			return null;
+		}
+
+		// If no minimumFontSize is provided, derive using min scale factor.
+		if ( ! minimumFontSize ) {
+			minimumFontSize =
+				fontSizeParsed.value * minimumFontSizeFactor +
+				fontSizeParsed.unit;
+		}
+
+		// If no maximumFontSize is provided, derive using max scale factor.
+		if ( ! maximumFontSize ) {
+			maximumFontSize =
+				fontSizeParsed.value * maximumFontSizeFactor +
+				fontSizeParsed.unit;
+		}
+	}
+
+	// Return early if one of the provided inputs is not provided.
+	if ( ! minimumFontSize || ! maximumFontSize ) {
+		return null;
+	}
+
+	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
+
+	// We get a 'preferred' unit to keep units consistent when calculating,
+	// otherwise the result will not be accurate.
+	const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';
+
+	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	const maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {
+		coerceTo: fontSizeUnit,
+	} );
+
+	// Protect against unsupported units.
+	if ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {
+		return null;
+	}
+
+	// Use rem for accessible fluid target font scaling.
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
+
+	// Viewport widths defined for fluid typography. Normalize units
+	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
+		maximumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
+		minimumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+
+	// Protect against unsupported units.
+	if (
+		! maximumViewPortWidthParsed ||
+		! minumumViewPortWidthParsed ||
+		! minimumFontSizeRem
+	) {
+		return null;
+	}
+
+	// Build CSS rule.
+	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	const minViewPortWidthOffsetValue = roundToPrecision(
+		minumumViewPortWidthParsed.value / 100,
+		3
+	);
+
+	const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
+	let linearFactor =
+		100 *
+		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
+			( maximumViewPortWidthParsed.value -
+				minumumViewPortWidthParsed.value ) );
+	linearFactor = roundToPrecision( linearFactor, 3 ) || 1;
+	const linearFactorScaled = linearFactor * scaleFactor;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+}
+
+/**
+ * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.
+ *
+ * @param {string|number}    rawValue Raw size value from theme.json.
+ * @param {Object|undefined} options  Calculation options.
+ *
+ * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
+ */
+export function getTypographyValueAndUnit( rawValue, options = {} ) {
+	if ( typeof rawValue !== 'string' && typeof rawValue !== 'number' ) {
+		return null;
+	}
+
+	// Converts numeric values to pixel values by default.
+	if ( isFinite( rawValue ) ) {
+		rawValue = `${ rawValue }px`;
+	}
+
+	const { coerceTo, rootSizeValue, acceptableUnits } = {
+		coerceTo: '',
+		// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+		rootSizeValue: 16,
+		acceptableUnits: [ 'rem', 'px', 'em' ],
+		...options,
+	};
+
+	const acceptableUnitsGroup = acceptableUnits?.join( '|' );
+	const regexUnits = new RegExp(
+		`^(\\d*\\.?\\d+)(${ acceptableUnitsGroup }){1,1}$`
+	);
+
+	const matches = rawValue.match( regexUnits );
+
+	// We need a number value and a unit.
+	if ( ! matches || matches.length < 3 ) {
+		return null;
+	}
+
+	let [ , value, unit ] = matches;
+
+	let returnValue = parseFloat( value );
+
+	if ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {
+		returnValue = returnValue * rootSizeValue;
+		unit = coerceTo;
+	}
+
+	if ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {
+		returnValue = returnValue / rootSizeValue;
+		unit = coerceTo;
+	}
+
+	return {
+		value: returnValue,
+		unit,
+	};
+}
+
+/**
+ * Returns a value rounded to defined precision.
+ * Returns `undefined` if the value is not a valid finite number.
+ *
+ * @param {number} value  Raw value.
+ * @param {number} digits The number of digits to appear after the decimal point
+ *
+ * @return {number|undefined} Value rounded to standard precision.
+ */
+export function roundToPrecision( value, digits = 3 ) {
+	return Number.isFinite( value )
+		? parseFloat( value.toFixed( digits ) )
+		: undefined;
+}

package/src/components/font-sizes/index.js

@@ -3,5 +3,6 @@ export {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 } from './utils';
+export { getComputedFluidTypographyValue } from './fluid-utils';
 export { default as FontSizePicker } from './font-size-picker';
 export { default as withFontSizes } from './with-font-sizes';

package/src/components/font-sizes/test/fluid-utils.js

@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+import { logged } from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getComputedFluidTypographyValue,
+	getTypographyValueAndUnit,
+} from '../fluid-utils';
+
+describe( 'getComputedFluidTypographyValue()', () => {
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
+	} );
+
+	it( 'should return a fluid font size when given a min and max font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			minimumFontSize: '20px',
+			maximumFontSize: '45px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 2.704), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size based on px when given a numerical font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 2.704), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a min and max viewport width', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			minimumViewPortWidth: '500px',
+			maximumViewPortWidth: '1000px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 5px) * 4.5), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a scale factor', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			scaleFactor: '2',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 5.408), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a min and max font size factor', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			minimumFontSizeFactor: '0.5',
+			maximumFontSizeFactor: '2',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)'
+		);
+	} );
+
+	describe( 'getTypographyValueAndUnit', () => {
+		it( 'should return the expected return values', () => {
+			[
+				{
+					value: null,
+					expected: null,
+				},
+				{
+					value: false,
+					expected: null,
+				},
+				{
+					value: true,
+					expected: null,
+				},
+				{
+					value: [ '10' ],
+					expected: null,
+				},
+				{
+					value: '10vh',
+					expected: null,
+				},
+				{
+					value: 'calc(2 * 10px)',
+					expected: null,
+				},
+				{
+					value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
+					expected: null,
+				},
+				{
+					value: '10',
+					expected: {
+						value: 10,
+						unit: 'px',
+					},
+				},
+				{
+					value: 11,
+					expected: {
+						value: 11,
+						unit: 'px',
+					},
+				},
+				{
+					value: 11.234,
+					expected: {
+						value: 11.234,
+						unit: 'px',
+					},
+				},
+				{
+					value: '12rem',
+					expected: {
+						value: 12,
+						unit: 'rem',
+					},
+				},
+				{
+					value: '12px',
+					expected: {
+						value: 12,
+						unit: 'px',
+					},
+				},
+				{
+					value: '12em',
+					expected: {
+						value: 12,
+						unit: 'em',
+					},
+				},
+				{
+					value: '12.74em',
+					expected: {
+						value: 12.74,
+						unit: 'em',
+					},
+				},
+			].forEach( ( { value, expected } ) => {
+				expect( getTypographyValueAndUnit( value ) ).toEqual(
+					expected
+				);
+			} );
+		} );
+	} );
+} );

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -40,7 +40,7 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition } =
+	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
 		useSelect( blockEditorStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const innerBlocks = useSelect(
@@ -86,7 +86,8 @@ export default function useInnerBlockTemplateSync(
 					nextBlocks,
 					currentInnerBlocks.length === 0 &&
 						templateInsertUpdatesSelection &&
-						nextBlocks.length !== 0,
+						nextBlocks.length !== 0 &&
+						isBlockSelected( clientId ),
 					// This ensures the "initialPosition" doesn't change when applying the template
 					// If we're supposed to focus the block, we'll focus the first inner block
 					// otherwise, we won't apply any auto-focus.

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

@@ -221,6 +221,7 @@ export default function SpacingInputControl( {
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
 						style={ { gridColumn: '1' } }
+						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
@@ -279,6 +280,7 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
 				/>
 			) }
 		</>