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

package/src/store/private-actions.js

@@ -6,12 +6,6 @@ import deprecated from '@wordpress/deprecated';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from './index';
-import { unlock } from '../lock-unlock';
-
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -324,29 +318,6 @@ export function setLastFocus( lastFocus = null ) {
 	};
 }
 
-/**
- * Action that stops temporarily editing as blocks.
- *
- * @param {string} clientId The block's clientId.
- */
-export function stopEditingAsBlocks( clientId ) {
-	return ( { select, dispatch, registry } ) => {
-		const focusModeToRevert = unlock(
-			registry.select( blockEditorStore )
-		).getTemporarilyEditingFocusModeToRevert();
-		dispatch.__unstableMarkNextChangeAsNotPersistent();
-		dispatch.updateBlockAttributes( clientId, {
-			templateLock: 'contentOnly',
-		} );
-		dispatch.updateBlockListSettings( clientId, {
-			...select.getBlockListSettings( clientId ),
-			templateLock: 'contentOnly',
-		} );
-		dispatch.updateSettings( { focusMode: focusModeToRevert } );
-		dispatch.__unstableSetTemporarilyEditingAsBlocks();
-	};
-}
-
 /**
  * Returns an action object used in signalling that the user has begun to drag.
  *
@@ -396,29 +367,25 @@ export function setInsertionPoint( value ) {
 }
 
 /**
- * Temporarily modify/unlock the content-only block for editions.
+ * Mark a contentOnly section as being edited.
  *
  * @param {string} clientId The client id of the block.
  */
-export const modifyContentLockBlock =
-	( clientId ) =>
-	( { select, dispatch } ) => {
-		dispatch.selectBlock( clientId );
-		dispatch.__unstableMarkNextChangeAsNotPersistent();
-		dispatch.updateBlockAttributes( clientId, {
-			templateLock: undefined,
-		} );
-		dispatch.updateBlockListSettings( clientId, {
-			...select.getBlockListSettings( clientId ),
-			templateLock: false,
-		} );
-		const focusModeToRevert = select.getSettings().focusMode;
-		dispatch.updateSettings( { focusMode: true } );
-		dispatch.__unstableSetTemporarilyEditingAsBlocks(
-			clientId,
-			focusModeToRevert
-		);
+export function editContentOnlySection( clientId ) {
+	return {
+		type: 'EDIT_CONTENT_ONLY_SECTION',
+		clientId,
+	};
+}
+
+/**
+ * Action that stops editing a contentOnly section.
+ */
+export function stopEditingContentOnlySection() {
+	return {
+		type: 'EDIT_CONTENT_ONLY_SECTION',
 	};
+}
 
 /**
  * Sets the zoom level.

package/src/store/private-selectors.js

@@ -488,7 +488,7 @@ export const getContentLockingParent = ( state, clientId ) => {
  * @param {Object} state    Global application state.
  * @param {string} clientId Client Id of the block.
  *
- * @return {?string} Client ID of the ancestor block that is content locking the block.
+ * @return {?string} Client ID of the ancestor block that is a contentOnly section.
  */
 export const getParentSectionBlock = ( state, clientId ) => {
 	let current = clientId;
@@ -502,12 +502,12 @@ export const getParentSectionBlock = ( state, clientId ) => {
 };
 
 /**
- * Retrieves the client ID is a content locking parent
+ * Returns whether the block is a contentOnly section.
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId Client Id of the block.
  *
- * @return {boolean} Whether the block is a content locking parent.
+ * @return {boolean} Whether the block is a contentOnly section.
  */
 export function isSectionBlock( state, clientId ) {
 	const blockName = getBlockName( state, clientId );
@@ -530,27 +530,15 @@ export function isSectionBlock( state, clientId ) {
 }
 
 /**
- * Retrieves the client ID of the block that is content locked but is
- * currently being temporarily edited as a non-locked block.
+ * Retrieves the client ID of the block that is a contentOnly section but is
+ * currently being temporarily edited (contentOnly is deactivated).
  *
  * @param {Object} state Global application state.
  *
- * @return {?string} The client ID of the block being temporarily edited as a non-locked block.
+ * @return {?string} The client ID of the block being temporarily edited.
  */
-export function getTemporarilyEditingAsBlocks( state ) {
-	return state.temporarilyEditingAsBlocks;
-}
-
-/**
- * Returns the focus mode that should be reapplied when the user stops editing
- * a content locked blocks as a block without locking.
- *
- * @param {Object} state Global application state.
- *
- * @return {?string} The focus mode that should be re-set when temporarily editing as blocks stops.
- */
-export function getTemporarilyEditingFocusModeToRevert( state ) {
-	return state.temporarilyEditingFocusModeRevert;
+export function getEditedContentOnlySection( state ) {
+	return state.editedContentOnlySection;
 }
 
 /**
@@ -695,12 +683,15 @@ export const isBlockHidden = ( state, clientId ) => {
 };
 
 /**
- * Returns true if the current spotlighted block matches the block clientId.
+ * Returns true if there is a spotlighted block.
+ *
+ * The spotlight is also active when a contentOnly section is being edited, the selector
+ * also returns true if this is the case.
  *
  * @param {Object} state Global application state.
  *
  * @return {boolean} Whether the block is currently spotlighted.
  */
 export function hasBlockSpotlight( state ) {
-	return !! state.hasBlockSpotlight;
+	return !! state.hasBlockSpotlight || !! state.editedContentOnlySection;
 }

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 {Object} state  Current state.
- * @param {Object} action Dispatched action.
+ * @param {string|undefined} 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,26 @@ 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;
+			}
+		}
+
 		// If the block already has an explicit block editing mode set,
 		// don't override it.
 		if ( state.blockEditingModes.has( clientId ) ) {
@@ -2817,6 +2821,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;
 }
 
 /**
@@ -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/style.scss

@@ -20,6 +20,7 @@
 @use "./components/block-patterns-paging/style.scss" as *;
 @use "./components/block-popover/style.scss" as *;
 @use "./components/block-preview/style.scss" as *;
+@use "./components/block-quick-navigation/style.scss" as *;
 @use "./components/block-rename/style.scss" as *;
 @use "./components/block-styles/style.scss" as *;
 @use "./components/block-switcher/style.scss" as *;

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();
+					}
+				};
+			}
+		},
+	},
+} );