@wordpress/block-editor 15.7.0 → 15.8.0

package/src/store/reducer.js

@@ -1963,31 +1963,16 @@ export function lastBlockInserted( state = {}, action ) {
 }
 
 /**
- * Reducer returning the block that is eding temporarily edited as blocks.
+ * Reducer returning the contentOnly block that is being edited.
  *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function temporarilyEditingAsBlocks( state = '', action ) {
-	if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
-		return action.temporarilyEditingAsBlocks;
-	}
-	return state;
-}
-
-/**
- * Reducer returning the focus mode that should be used when temporarily edit as blocks finishes.
+ * @param {string|undefined} state  Current state.
+ * @param {Object}           action Dispatched action.
  *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
+ * @return {string|undefined} Updated state.
  */
-export function temporarilyEditingFocusModeRevert( state = '', action ) {
-	if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
-		return action.focusModeToRevert;
+export function editedContentOnlySection( state, action ) {
+	if ( action.type === 'EDIT_CONTENT_ONLY_SECTION' ) {
+		return action.clientId;
 	}
 	return state;
 }
@@ -2154,8 +2139,7 @@ const combinedReducers = combineReducers( {
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
-	temporarilyEditingAsBlocks,
-	temporarilyEditingFocusModeRevert,
+	editedContentOnlySection,
 	blockVisibility,
 	blockEditingModes,
 	styleOverrides,
@@ -2329,6 +2313,32 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	traverseBlockTree( state, treeClientId, ( block ) => {
 		const { clientId, name: blockName } = block;
 
+		// Set the edited section and all blocks within it to 'default', so that all changes can be made.
+		if ( state.editedContentOnlySection ) {
+			// If this is the edited section, use the default mode.
+			if ( state.editedContentOnlySection === clientId ) {
+				derivedBlockEditingModes.set( clientId, 'default' );
+				return;
+			}
+
+			// If the block is within the edited section also use the default mode.
+			const parentTempEditedClientId = findParentInClientIdsList(
+				state,
+				clientId,
+				[ state.editedContentOnlySection ]
+			);
+			if ( parentTempEditedClientId ) {
+				derivedBlockEditingModes.set( clientId, 'default' );
+				return;
+			}
+
+			// For the content only pattern experiment, disable blocks that are outside of the edited section.
+			if ( window?.__experimentalContentOnlyPatternInsertion ) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
+		}
+
 		// If the block already has an explicit block editing mode set,
 		// don't override it.
 		if ( state.blockEditingModes.has( clientId ) ) {
@@ -2817,6 +2827,7 @@ export function withDerivedBlockEditingModes( reducer ) {
 				break;
 			}
 			case 'RESET_BLOCKS':
+			case 'EDIT_CONTENT_ONLY_SECTION':
 			case 'SET_EDITOR_MODE':
 			case 'RESET_ZOOM_LEVEL':
 			case 'SET_ZOOM_LEVEL': {

package/src/store/selectors.js

@@ -37,8 +37,7 @@ import { unlock } from '../lock-unlock';
 
 import {
 	getContentLockingParent,
-	getTemporarilyEditingAsBlocks,
-	getTemporarilyEditingFocusModeToRevert,
+	getEditedContentOnlySection,
 	getSectionRootClientId,
 	isSectionBlock,
 	getParentSectionBlock,
@@ -788,7 +787,6 @@ export function getNextBlockClientId( state, startClientId ) {
 	return getAdjacentBlockClientId( state, startClientId, 1 );
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns the initial caret position for the selected block.
  * This position is to used to position the caret properly when the selected block changes.
@@ -799,7 +797,6 @@ export function getNextBlockClientId( state, startClientId ) {
  * @return {0|-1|null} Initial position.
  */
 export function getSelectedBlocksInitialCaretPosition( state ) {
-	/* eslint-enable jsdoc/valid-types */
 	return state.initialPosition;
 }
 
@@ -1576,7 +1573,21 @@ export function getTemplateLock( state, rootClientId ) {
 		return state.settings.templateLock ?? false;
 	}
 
-	return getBlockListSettings( state, rootClientId )?.templateLock ?? false;
+	const blockListTemplateLock = getBlockListSettings(
+		state,
+		rootClientId
+	)?.templateLock;
+
+	// If this is a contentOnly template locked block that's in the process
+	// of being edited, consider the template lock as temporarily inactive.
+	if (
+		blockListTemplateLock === 'contentOnly' &&
+		state.editedContentOnlySection === rootClientId
+	) {
+		return false;
+	}
+
+	return blockListTemplateLock ?? false;
 }
 
 /**
@@ -2263,6 +2274,8 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 					} ) );
 			}
 
+			// Hardcode: Collect stretch variations separately to add at the end
+			const stretchVariations = [];
 			const items = blockTypeInserterItems.reduce(
 				( accumulator, item ) => {
 					const { variations = [] } = item;
@@ -2275,14 +2288,26 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							state,
 							item
 						);
-						accumulator.push(
-							...variations.map( variationMapper )
-						);
+						variations
+							.map( variationMapper )
+							.forEach( ( variation ) => {
+								if (
+									variation.id ===
+										'core/paragraph/stretchy-paragraph' ||
+									variation.id ===
+										'core/heading/stretchy-heading'
+								) {
+									stretchVariations.push( variation );
+								} else {
+									accumulator.push( variation );
+								}
+							} );
 					}
 					return accumulator;
 				},
 				[]
 			);
+			items.push( ...stretchVariations );
 
 			// Ensure core blocks are prioritized in the returned results,
 			// because third party blocks can be registered earlier than
@@ -3210,25 +3235,5 @@ export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 			version: '6.7',
 		}
 	);
-	return getTemporarilyEditingAsBlocks( state );
-}
-
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- *
- * @deprecated
- *
- * @param {Object} state Global application state.
- */
-export function __unstableGetTemporarilyEditingFocusModeToRevert( state ) {
-	deprecated(
-		"wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingFocusModeToRevert",
-		{
-			since: '6.5',
-			version: '6.7',
-		}
-	);
-	return getTemporarilyEditingFocusModeToRevert( state );
+	return getEditedContentOnlySection( state );
 }

package/src/store/test/reducer.js

@@ -41,6 +41,7 @@ import {
 	openedBlockSettingsMenu,
 	expandedBlock,
 	zoomLevel,
+	editedContentOnlySection,
 	withDerivedBlockEditingModes,
 } from '../reducer';
 
@@ -3577,6 +3578,7 @@ describe( 'state', () => {
 				zoomLevel,
 				blockListSettings,
 				blockEditingModes,
+				editedContentOnlySection,
 			} )
 		);
 
@@ -3968,6 +3970,150 @@ describe( 'state', () => {
 					)
 				);
 			} );
+			it( 'the editContentOnlySection action switches the section and all children to default mode when editing, then restores contentOnly modes when stopped', () => {
+				// Initial state should match the contentOnly template locking test
+				expect( initialState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'paragraph-1': 'contentOnly',
+							'group-2': 'disabled',
+							'paragraph-2': 'contentOnly',
+						} )
+					)
+				);
+
+				// Start editing the content-only section
+				const editingState = dispatchActions(
+					[
+						{
+							type: 'EDIT_CONTENT_ONLY_SECTION',
+							clientId: 'group-1',
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				// All blocks in the section should now be in default mode
+				expect( editingState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'group-1': 'default',
+							'paragraph-1': 'default',
+							'group-2': 'default',
+							'paragraph-2': 'default',
+						} )
+					)
+				);
+
+				// Stop editing the content-only section
+				const restoredState = dispatchActions(
+					[
+						{
+							type: 'EDIT_CONTENT_ONLY_SECTION',
+						},
+					],
+					testReducer,
+					editingState
+				);
+
+				// Should restore to original contentOnly modes
+				expect( restoredState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'paragraph-1': 'contentOnly',
+							'group-2': 'disabled',
+							'paragraph-2': 'contentOnly',
+						} )
+					)
+				);
+			} );
+
+			it( 'editContentOnlySection only affects the edited section, not other blocks', () => {
+				// Set up a state with two separate contentOnly sections
+				const stateWithTwoSections = dispatchActions(
+					[
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'section-1',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'section-1-paragraph',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+								{
+									name: 'core/group',
+									clientId: 'section-2',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'section-2-paragraph',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+						{
+							type: 'UPDATE_BLOCK_LIST_SETTINGS',
+							clientId: 'section-1',
+							settings: {
+								templateLock: 'contentOnly',
+							},
+						},
+						{
+							type: 'UPDATE_BLOCK_LIST_SETTINGS',
+							clientId: 'section-2',
+							settings: {
+								templateLock: 'contentOnly',
+							},
+						},
+					],
+					testReducer
+				);
+
+				// Both sections should be in contentOnly mode initially
+				expect( stateWithTwoSections.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'section-1-paragraph': 'contentOnly',
+							'section-2-paragraph': 'contentOnly',
+						} )
+					)
+				);
+
+				// Start editing only section-1
+				const editingSection1 = dispatchActions(
+					[
+						{
+							type: 'EDIT_CONTENT_ONLY_SECTION',
+							clientId: 'section-1',
+						},
+					],
+					testReducer,
+					stateWithTwoSections
+				);
+
+				expect( editingSection1.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'section-1': 'default',
+							'section-1-paragraph': 'default',
+							'section-2-paragraph': 'contentOnly',
+						} )
+					)
+				);
+			} );
 		} );
 
 		describe( 'zoom out mode', () => {

package/src/store/test/selectors.js

@@ -3879,6 +3879,19 @@ describe( 'selectors', () => {
 
 			expect( getTemplateLock( state, 'chicken' ) ).toBe( 'insert' );
 		} );
+
+		it( 'should return false if the block has contentOnly template lock and is an edited section', () => {
+			const state = {
+				editedContentOnlySection: 'chicken',
+				blockListSettings: {
+					chicken: {
+						templateLock: 'contentOnly',
+					},
+				},
+			};
+
+			expect( getTemplateLock( state, 'chicken' ) ).toBe( false );
+		} );
 	} );
 
 	describe( 'getBlockListSettings', () => {

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

@@ -1,84 +1,52 @@
 /**
  * Frontend fit text functionality.
  * Automatically detects and initializes fit text on blocks with the has-fit-text class.
+ * Supports both initial page load and Interactivity API client-side navigation.
  */
 
 /**
- * Internal dependencies
- */
-import { optimizeFitText } from './fit-text-utils';
-
-/**
- * Counter for generating unique element IDs.
- */
-let idCounter = 0;
-
-/**
- * Get or create a unique style element for a fit text element.
- *
- * @param {string} elementId Unique identifier for the element.
- * @return {HTMLElement} Style element.
- */
-function getOrCreateStyleElement( elementId ) {
-	const styleId = `fit-text-${ elementId }`;
-	let styleElement = document.getElementById( styleId );
-	if ( ! styleElement ) {
-		styleElement = document.createElement( 'style' );
-		styleElement.id = styleId;
-		document.head.appendChild( styleElement );
-	}
-	return styleElement;
-}
-
-/**
- * Generate a unique identifier for a fit text element.
- *
- * @param {HTMLElement} element The element to identify.
- * @return {string} Unique identifier.
+ * WordPress dependencies
  */
-function getElementIdentifier( element ) {
-	if ( ! element.dataset.fitTextId ) {
-		element.dataset.fitTextId = `fit-text-${ ++idCounter }`;
-	}
-	return element.dataset.fitTextId;
-}
+import { store, getElement, getContext } from '@wordpress/interactivity';
 
 /**
- * Initialize fit text functionality for a single element.
- *
- * @param {HTMLElement} element Element with fit text enabled.
- */
-function initializeFitText( element ) {
-	const elementId = getElementIdentifier( element );
-
-	const applyFitText = () => {
-		const styleElement = getOrCreateStyleElement( elementId );
-		const elementSelector = `[data-fit-text-id=\"${ elementId }\"]`;
-
-		// Style management callback
-		const applyStylesFn = ( css ) => {
-			styleElement.textContent = css;
-		};
-
-		optimizeFitText( element, elementSelector, applyStylesFn );
-	};
-
-	// Initial sizing
-	applyFitText();
-
-	// Watch for parent container resize
-	if ( window.ResizeObserver && element.parentElement ) {
-		const resizeObserver = new window.ResizeObserver( applyFitText );
-		resizeObserver.observe( element.parentElement );
-	}
-}
-
-/**
- * Initialize fit text on all elements with the has-fit-text class.
+ * Internal dependencies
  */
-function initializeAllFitText() {
-	const elements = document.querySelectorAll( '.has-fit-text' );
-	elements.forEach( initializeFitText );
-}
+import { optimizeFitText } from './fit-text-utils';
 
-window.addEventListener( 'load', initializeAllFitText );
+// Initialize via Interactivity API for client-side navigation
+store( 'core/fit-text', {
+	callbacks: {
+		init() {
+			const context = getContext();
+			const { ref } = getElement();
+
+			const applyFontSize = ( fontSize ) => {
+				if ( fontSize === 0 ) {
+					ref.style.fontSize = '';
+				} else {
+					ref.style.fontSize = `${ fontSize }px`;
+				}
+			};
+
+			// Initial fit text optimization.
+			context.fontSize = optimizeFitText( ref, applyFontSize );
+
+			// Starts ResizeObserver to handle dynamic resizing.
+			if ( window.ResizeObserver && ref.parentElement ) {
+				const resizeObserver = new window.ResizeObserver( () => {
+					context.fontSize = optimizeFitText( ref, applyFontSize );
+				} );
+				resizeObserver.observe( ref.parentElement );
+				resizeObserver.observe( ref );
+
+				// Return cleanup function to be called when element is removed.
+				return () => {
+					if ( resizeObserver ) {
+						resizeObserver.disconnect();
+					}
+				};
+			}
+		},
+	},
+} );

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

@@ -3,35 +3,23 @@
  * Uses callback-based approach for maximum code reuse between editor and frontend.
  */
 
-/**
- * Generate CSS rule for single text element.
- *
- * @param {string} elementSelector CSS selector for the text element
- * @param {number} fontSize        Font size in pixels
- * @return {string} CSS rule string
- */
-function generateCSSRule( elementSelector, fontSize ) {
-	return `${ elementSelector } { font-size: ${ fontSize }px !important; }`;
-}
-
 /**
  * Find optimal font size using simple binary search between 5-600px.
  *
- * @param {HTMLElement} textElement     The text element
- * @param {string}      elementSelector CSS selector for the text element
- * @param {Function}    applyStylesFn   Function to apply test styles
+ * @param {HTMLElement} textElement   The text element
+ * @param {Function}    applyFontSize Function that receives font size in pixels
  * @return {number} Optimal font size
  */
-function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
+function findOptimalFontSize( textElement, applyFontSize ) {
 	const alreadyHasScrollableHeight =
 		textElement.scrollHeight > textElement.clientHeight;
 	let minSize = 5;
-	let maxSize = 600;
+	let maxSize = 2400;
 	let bestSize = minSize;
 
 	while ( minSize <= maxSize ) {
 		const midSize = Math.floor( ( minSize + maxSize ) / 2 );
-		applyStylesFn( generateCSSRule( elementSelector, midSize ) );
+		applyFontSize( midSize );
 
 		const fitsWidth = textElement.scrollWidth <= textElement.clientWidth;
 		const fitsHeight =
@@ -51,25 +39,20 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
 
 /**
  * Complete fit text optimization for a single text element.
- * Handles the full flow using callbacks for style management.
+ * Handles the full flow using callbacks for font size application.
  *
- * @param {HTMLElement} textElement     The text element (paragraph, heading, etc.)
- * @param {string}      elementSelector CSS selector for the text element
- * @param {Function}    applyStylesFn   Function to apply CSS styles (pass empty string to clear)
+ * @param {HTMLElement} textElement   The text element (paragraph, heading, etc.)
+ * @param {Function}    applyFontSize Function that receives font size in pixels (0 to clear, >0 to apply)
  */
-export function optimizeFitText( textElement, elementSelector, applyStylesFn ) {
+export function optimizeFitText( textElement, applyFontSize ) {
 	if ( ! textElement ) {
 		return;
 	}
 
-	applyStylesFn( '' );
+	applyFontSize( 0 );
 
-	const optimalSize = findOptimalFontSize(
-		textElement,
-		elementSelector,
-		applyStylesFn
-	);
+	const optimalSize = findOptimalFontSize( textElement, applyFontSize );
 
-	const cssRule = generateCSSRule( elementSelector, optimalSize );
-	applyStylesFn( cssRule );
+	applyFontSize( optimalSize );
+	return optimalSize;
 }

package/tsconfig.json

@@ -22,6 +22,7 @@
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../interactivity" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../keycodes" },
 		{ "path": "../notices" },