@wordpress/block-editor 15.7.0 → 15.7.1-next.2f1c7c01b.0

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;
 }
 
 /**
@@ -3210,25 +3221,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,51 @@
 /**
  * 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 );
+
+				// Return cleanup function to be called when element is removed.
+				return () => {
+					if ( resizeObserver ) {
+						resizeObserver.disconnect();
+					}
+				};
+			}
+		},
+	},
+} );

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

@@ -3,26 +3,14 @@
  * 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;
@@ -31,7 +19,7 @@ function findOptimalFontSize( textElement, elementSelector, applyStylesFn ) {
 
 	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" },