@wordpress/block-editor 15.6.7 → 15.6.9

package/src/store/test/registry-selectors.js

@@ -12,6 +12,7 @@ import { store } from '../';
 describe( 'selectors', () => {
 	beforeEach( () => {
 		registerBlockType( 'core/test-block-a', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'design',
 			title: 'Test Block A',
@@ -20,6 +21,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-b', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block B',

package/src/store/test/selectors.js

@@ -85,6 +85,7 @@ describe( 'selectors', () => {
 
 	beforeEach( () => {
 		registerBlockType( 'core/block', {
+			apiVersion: 3,
 			save: () => null,
 			category: 'reusable',
 			title: 'Reusable Block Stub',
@@ -94,6 +95,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-a', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'design',
 			title: 'Test Block A',
@@ -102,6 +104,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-b', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block B',
@@ -113,6 +116,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-c', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block C',
@@ -122,6 +126,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/freeform', {
+			apiVersion: 3,
 			save: ( props ) => <RawHTML>{ props.attributes.content }</RawHTML>,
 			category: 'text',
 			title: 'Test Freeform Content Handler',
@@ -134,6 +139,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/post-content-child', {
+			apiVersion: 3,
 			save: () => null,
 			category: 'text',
 			title: 'Test Block Post Content Child',
@@ -143,6 +149,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-ancestor', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block required as ancestor',
@@ -151,6 +158,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-parent', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block required as parent',
@@ -159,6 +167,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-requires-ancestor', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block that requires ancestor',
@@ -168,6 +177,7 @@ describe( 'selectors', () => {
 		} );
 
 		registerBlockType( 'core/test-block-requires-ancestor-parent', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'text',
 			title: 'Test Block that requires both ancestor and parent',
@@ -3548,6 +3558,7 @@ describe( 'selectors', () => {
 	describe( 'getBlockTransformItems', () => {
 		beforeAll( () => {
 			registerBlockType( 'core/with-tranforms-a', {
+				apiVersion: 3,
 				category: 'text',
 				title: 'Transforms a',
 				edit: () => {},
@@ -3577,6 +3588,7 @@ describe( 'selectors', () => {
 				},
 			} );
 			registerBlockType( 'core/with-tranforms-b', {
+				apiVersion: 3,
 				category: 'text',
 				title: 'Transforms b',
 				edit: () => {},
@@ -3592,6 +3604,7 @@ describe( 'selectors', () => {
 				},
 			} );
 			registerBlockType( 'core/with-tranforms-c', {
+				apiVersion: 3,
 				category: 'text',
 				title: 'Transforms c',
 				edit: () => {},
@@ -4246,18 +4259,21 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 	// the core blocks (usually by using the `init` action), thus affecting the display order.
 	beforeEach( () => {
 		registerBlockType( 'plugin/block-a', {
+			apiVersion: 3,
 			save() {},
 			category: 'text',
 			title: 'Plugin Block A',
 			icon: 'test',
 		} );
 		registerBlockType( 'another-plugin/block-b', {
+			apiVersion: 3,
 			save() {},
 			category: 'text',
 			title: 'Another Plugin Block B',
 			icon: 'test',
 		} );
 		registerBlockType( 'plugin/block-c-with-variations', {
+			apiVersion: 3,
 			save() {},
 			category: 'text',
 			title: 'Plugin Block C with variations',
@@ -4265,11 +4281,13 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 			variations: [ { name: 'variation-a' }, { name: 'variation-b' } ],
 		} );
 		registerBlockType( 'core/block', {
+			apiVersion: 3,
 			save() {},
 			category: 'text',
 			title: 'Core Block A',
 		} );
 		registerBlockType( 'core/test-block-a', {
+			apiVersion: 3,
 			save: ( props ) => props.attributes.text,
 			category: 'design',
 			title: 'Core Block B',
@@ -4277,6 +4295,7 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 			keywords: [ 'testing' ],
 		} );
 		registerBlockType( 'core/test-block-with-variations', {
+			apiVersion: 3,
 			save() {},
 			category: 'text',
 			title: 'Core Block C with variations',

package/src/utils/fit-text-utils.js

@@ -18,11 +18,26 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 	let bestSize = minSize;
 
 	const computedStyle = window.getComputedStyle( textElement );
-	const paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
-	const paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
+	let paddingLeft = parseFloat( computedStyle.paddingLeft ) || 0;
+	let paddingRight = parseFloat( computedStyle.paddingRight ) || 0;
 	const range = document.createRange();
 	range.selectNodeContents( textElement );
 
+	let referenceElement = textElement;
+	const parentElement = textElement.parentElement;
+	if ( parentElement ) {
+		const parentElementComputedStyle =
+			window.getComputedStyle( parentElement );
+		if ( parentElementComputedStyle?.display === 'flex' ) {
+			referenceElement = parentElement;
+			paddingLeft +=
+				parseFloat( parentElementComputedStyle.paddingLeft ) || 0;
+			paddingRight +=
+				parseFloat( parentElementComputedStyle.paddingRight ) || 0;
+		}
+	}
+	let maxclientHeight = referenceElement.clientHeight;
+
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
 		applyFontSize( midSize );
@@ -36,12 +51,23 @@ function findOptimalFontSize( textElement, applyFontSize ) {
 		// Check if text fits within the element's width and is not
 		// overflowing into the padding area.
 		const fitsWidth =
-			textElement.scrollWidth <= textElement.clientWidth &&
-			textWidth <= textElement.clientWidth - paddingLeft - paddingRight;
+			textElement.scrollWidth <= referenceElement.clientWidth &&
+			textWidth <=
+				referenceElement.clientWidth - paddingLeft - paddingRight;
 		// Check if text fits within the element's height.
 		const fitsHeight =
 			alreadyHasScrollableHeight ||
-			textElement.scrollHeight <= textElement.clientHeight;
+			textElement.scrollHeight <= referenceElement.clientHeight ||
+			textElement.scrollHeight <= maxclientHeight;
+
+		// When there are calculated line heights, text may jump in height
+		// the available space may decrease while the font size decreases,
+		// making text not fit.
+		// We store a maximum reference height: the maximum reference element height that was observed
+		// during the loop to avoid issues with such jumps.
+		if ( referenceElement.clientHeight > maxclientHeight ) {
+			maxclientHeight = referenceElement.clientHeight;
+		}
 
 		if ( fitsWidth && fitsHeight ) {
 			bestSize = midSize;