Simulate amp-fit-text in regular block editor

[swissspidy]

Feature description

This has previously been explored in #1342.

For the AMP Stories editor we copied the logic of the amp-fit-text component so it can be used in the editor:

amp-wp/assets/src/stories-editor/helpers/calculateFontSize.js

Lines 1 to 45 in 910eb10

	/**
	* Calculates font size that fits to the text element based on the element's size.
	* Replicates amp-fit-text's logic in the editor.
	*
	* @see https://github.com/ampproject/amphtml/blob/e7a1b3ff97645ec0ec482192205134bd0735943c/extensions/amp-fit-text/0.1/amp-fit-text.js
	*
	* @param {Object} measurer HTML element.
	* @param {number} expectedHeight Maximum height.
	* @param {number} expectedWidth Maximum width.
	* @param {number} maxFontSize Maximum font size.
	* @param {number} minFontSize Minimum font size.
	*
	* @return {number|boolean} Calculated font size. False if calculation wasn't possible.
	*/
	const calculateFontSize = ( measurer, expectedHeight, expectedWidth, maxFontSize, minFontSize ) => {
	// Return false if calculation is not possible due to width and height missing, e.g. in disabled preview.
	if ( ! measurer.offsetHeight || ! measurer.offsetWidth ) {
	return false;
	}
	measurer.classList.toggle( 'is-measuring' );
	maxFontSize++;
	// Binomial search for the best font size.
	while ( maxFontSize - minFontSize > 1 ) {
	const mid = Math.floor( ( minFontSize + maxFontSize ) / 2 );
	measurer.style.fontSize = mid + 'px';
	const currentHeight = measurer.offsetHeight;
	const currentWidth = measurer.offsetWidth;
	if ( currentHeight > expectedHeight || currentWidth > expectedWidth ) {
	maxFontSize = mid;
	} else {
	minFontSize = mid;
	}
	}
	// Let's restore the correct font size, too.
	measurer.style.fontSize = minFontSize + 'px';
	measurer.classList.toggle( 'is-measuring' );
	return minFontSize;
	};
	export default calculateFontSize;

This helper function can also be used in the regular block editor, where text blocks already have a toggle to turn on amp-fit-text, but users have to view the frontend to see it in action.

Currently, the following blocks are considered text blocks and thus have this feature:

amp-wp/assets/src/block-editor/constants.js

Lines 1 to 7 in 910eb10

	export const TEXT_BLOCKS = [
	'core/paragraph',
	'core/heading',
	'core/code',
	'core/quote',
	'core/subhead',
	];

Worth noting that core/subhead doesn't actually exist, as it has been deprecated a long time ago.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When amp-fit-text is being turned on for a text block, the displayed text should match the frontend presentation (WYSIWYG), i.e. the font size should match

Implementation brief

QA testing instructions

Demo

Changelog entry

[swissspidy]

Closing in favor of removal, #4557