@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

package/src/store/test/reducer.js

@@ -3643,7 +3643,7 @@ describe( 'state', () => {
 				);
 			} );
 
-			it( 'returns no block editing modes when zoomed out / navigation mode are not active and there are no synced patterns', () => {
+			it( 'returns no block editing modes when zoomed out is not active and there are no synced patterns', () => {
 				expect( initialState.derivedBlockEditingModes ).toEqual(
 					new Map()
 				);
@@ -3815,28 +3815,6 @@ describe( 'state', () => {
 				);
 			} );
 
-			it( 'returns the expected block editing modes for synced patterns in navigation mode', () => {
-				expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'contentOnly', // Section root.
-							'group-1': 'contentOnly', // Section.
-							'paragraph-1': 'contentOnly', // Content block in section.
-							'group-2': 'disabled',
-							'paragraph-2': 'contentOnly', // Content block in section.
-							'root-pattern': 'contentOnly', // Section.
-							'pattern-paragraph': 'disabled',
-							'pattern-group': 'disabled',
-							'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
-							'nested-pattern': 'disabled',
-							'nested-paragraph': 'disabled',
-							'nested-group': 'disabled',
-							'nested-paragraph-with-overrides': 'disabled',
-						} )
-					)
-				);
-			} );
-
 			it( 'removes block editing modes when synced patterns are removed', () => {
 				const { derivedBlockEditingModes } = dispatchActions(
 					[
@@ -3992,328 +3970,6 @@ describe( 'state', () => {
 			} );
 		} );
 
-		describe( 'navigation mode', () => {
-			let initialState;
-
-			beforeAll( () => {
-				initialState = dispatchActions(
-					[
-						{
-							type: 'UPDATE_SETTINGS',
-							settings: {
-								[ sectionRootClientIdKey ]: 'section-root',
-							},
-						},
-						{
-							type: 'RESET_BLOCKS',
-							blocks: [
-								{
-									name: 'core/template-part',
-									clientId: 'header',
-									attributes: {},
-									innerBlocks: [],
-								},
-								{
-									name: 'core/group',
-									clientId: 'section-root',
-									attributes: {},
-									innerBlocks: [
-										{
-											name: 'core/group',
-											clientId: 'group-1',
-											attributes: {},
-											innerBlocks: [
-												{
-													name: 'core/paragraph',
-													clientId: 'paragraph-1',
-													attributes: {},
-													innerBlocks: [],
-												},
-												{
-													name: 'core/group',
-													clientId: 'group-2',
-													attributes: {},
-													innerBlocks: [
-														{
-															name: 'core/paragraph',
-															clientId:
-																'paragraph-2',
-															attributes: {},
-															innerBlocks: [],
-														},
-													],
-												},
-											],
-										},
-									],
-								},
-								{
-									name: 'core/template-part',
-									clientId: 'footer',
-									attributes: {},
-									innerBlocks: [],
-								},
-							],
-						},
-						{
-							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
-							clientId: 'header',
-							hasControlledInnerBlocks: true,
-						},
-						{
-							type: 'REPLACE_INNER_BLOCKS',
-							rootClientId: 'header',
-							blocks: [
-								{
-									name: 'core/group',
-									clientId: 'header-group',
-									attributes: {},
-									innerBlocks: [
-										{
-											name: 'core/paragraph',
-											clientId: 'header-paragraph',
-											attributes: {},
-											innerBlocks: [],
-										},
-									],
-								},
-							],
-						},
-						{
-							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
-							clientId: 'footer',
-							hasControlledInnerBlocks: true,
-						},
-						{
-							type: 'REPLACE_INNER_BLOCKS',
-							rootClientId: 'footer',
-							blocks: [
-								{
-									name: 'core/paragraph',
-									clientId: 'footer-paragraph',
-									attributes: {},
-									innerBlocks: [],
-								},
-							],
-						},
-					],
-					testReducer
-				);
-			} );
-
-			it( 'returns the expected block editing modes', () => {
-				expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled',
-							header: 'contentOnly', // Template part.
-							'header-group': 'disabled', // Content block in template part.
-							'header-paragraph': 'contentOnly', // Content block in template part.
-							footer: 'contentOnly', // Template part.
-							'footer-paragraph': 'contentOnly', // Content block in template part.
-							'section-root': 'contentOnly', // Section root.
-							'group-1': 'contentOnly', // Section block.
-							'paragraph-1': 'contentOnly', // Content block in section.
-							'group-2': 'disabled', // Non-content block in section.
-							'paragraph-2': 'contentOnly', // Content block in section.
-						} )
-					)
-				);
-			} );
-
-			it( 'allows content blocks to be disabled explicitly using the block editing mode', () => {
-				const {
-					derivedNavModeBlockEditingModes,
-					blockEditingModes: _blockEditingModes,
-				} = dispatchActions(
-					[
-						{
-							type: 'SET_BLOCK_EDITING_MODE',
-							clientId: 'paragraph-1',
-							mode: 'disabled',
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				// Paragraph 1 is explicitly disabled and omitted from the
-				// derived block editing modes.
-				expect( _blockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'paragraph-1': 'disabled',
-						} )
-					)
-				);
-				expect( derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled',
-							header: 'contentOnly',
-							'header-group': 'disabled',
-							'header-paragraph': 'contentOnly',
-							footer: 'contentOnly',
-							'footer-paragraph': 'contentOnly',
-							'section-root': 'contentOnly',
-							'group-1': 'contentOnly',
-							'group-2': 'disabled',
-							'paragraph-2': 'contentOnly',
-						} )
-					)
-				);
-			} );
-
-			it( 'removes block editing modes when blocks are removed', () => {
-				const { derivedNavModeBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'REMOVE_BLOCKS',
-							clientIds: [ 'group-2' ],
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled',
-							header: 'contentOnly', // Template part.
-							'header-group': 'disabled', // Content block in template part.
-							'header-paragraph': 'contentOnly', // Content block in template part.
-							footer: 'contentOnly', // Template part.
-							'footer-paragraph': 'contentOnly', // Content block in template part.
-							'section-root': 'contentOnly',
-							'group-1': 'contentOnly',
-							'paragraph-1': 'contentOnly',
-						} )
-					)
-				);
-			} );
-
-			it( 'updates block editing modes when new blocks are inserted', () => {
-				const { derivedNavModeBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'INSERT_BLOCKS',
-							rootClientId: 'section-root',
-							blocks: [
-								{
-									name: 'core/group',
-									clientId: 'group-3',
-									attributes: {},
-									innerBlocks: [
-										{
-											name: 'core/paragraph',
-											clientId: 'paragraph-3',
-											attributes: {},
-											innerBlocks: [],
-										},
-										{
-											name: 'core/group',
-											clientId: 'group-4',
-											attributes: {},
-											innerBlocks: [],
-										},
-									],
-								},
-							],
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled', // Section root.
-							header: 'contentOnly', // Template part.
-							'header-group': 'disabled', // Content block in template part.
-							'header-paragraph': 'contentOnly', // Content block in template part.
-							footer: 'contentOnly', // Template part.
-							'footer-paragraph': 'contentOnly', // Content block in template part.
-							'section-root': 'contentOnly', // Section root.
-							'group-1': 'contentOnly', // Section block.
-							'paragraph-1': 'contentOnly', // Content block in section.
-							'group-2': 'disabled', // Non-content block in section.
-							'paragraph-2': 'contentOnly', // Content block in section.
-							'group-3': 'contentOnly', // New section block.
-							'paragraph-3': 'contentOnly', // New content block in section.
-							'group-4': 'disabled', // Non-content block in section.
-						} )
-					)
-				);
-			} );
-
-			it( 'updates block editing modes when blocks are moved to a new position', () => {
-				const { derivedNavModeBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'MOVE_BLOCKS_TO_POSITION',
-							clientIds: [ 'group-2' ],
-							fromRootClientId: 'group-1',
-							toRootClientId: 'section-root',
-						},
-					],
-					testReducer,
-					initialState
-				);
-				expect( derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled', // Section root.
-							header: 'contentOnly', // Template part.
-							'header-group': 'disabled', // Content block in template part.
-							'header-paragraph': 'contentOnly', // Content block in template part.
-							footer: 'contentOnly', // Template part.
-							'footer-paragraph': 'contentOnly', // Content block in template part.
-							'section-root': 'contentOnly', // Section root.
-							'group-1': 'contentOnly', // Section block.
-							'paragraph-1': 'contentOnly', // Content block in section.
-							'group-2': 'contentOnly', // New section block.
-							'paragraph-2': 'contentOnly', // Still a content block in a section.
-						} )
-					)
-				);
-			} );
-
-			it( 'handles changes to the section root', () => {
-				const { derivedNavModeBlockEditingModes } = dispatchActions(
-					[
-						{
-							type: 'UPDATE_SETTINGS',
-							settings: {
-								[ sectionRootClientIdKey ]: 'group-1',
-							},
-						},
-					],
-					testReducer,
-					initialState
-				);
-
-				expect( derivedNavModeBlockEditingModes ).toEqual(
-					new Map(
-						Object.entries( {
-							'': 'disabled',
-							header: 'contentOnly', // Template part.
-							'header-group': 'disabled', // Content block in template part.
-							'header-paragraph': 'contentOnly', // Content block in template part.
-							footer: 'contentOnly', // Template part.
-							'footer-paragraph': 'contentOnly', // Content block in template part.
-							'section-root': 'disabled',
-							'group-1': 'contentOnly', // New section root.
-							'paragraph-1': 'contentOnly', // Section and content block
-							'group-2': 'contentOnly', // Section.
-							'paragraph-2': 'contentOnly', // Content block.
-						} )
-					)
-				);
-			} );
-		} );
-
 		describe( 'zoom out mode', () => {
 			let initialState;
 

package/src/store/test/selectors.js

@@ -2669,6 +2669,7 @@ describe( 'selectors', () => {
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlockType( state, 'core/invalid' ) ).toBe( false );
 		} );
@@ -2683,6 +2684,7 @@ describe( 'selectors', () => {
 				settings: {
 					allowedBlockTypes: [],
 				},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
 				false
@@ -2719,6 +2721,7 @@ describe( 'selectors', () => {
 				settings: {
 					templateLock: 'all',
 				},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
 				false
@@ -4394,7 +4397,6 @@ describe( 'getBlockEditingMode', () => {
 	const baseState = {
 		blockEditingModes: new Map( [] ),
 		derivedBlockEditingModes: new Map( [] ),
-		derivedNavModeBlockEditingModes: new Map( [] ),
 	};
 
 	const hasContentRoleAttribute = jest.fn( () => false );

package/src/store/utils.js

@@ -11,6 +11,7 @@ import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
 import { getSectionRootClientId } from './private-selectors';
+import { getBlockEditingMode } from './selectors';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
 export const isFiltered = Symbol( 'isFiltered' );
@@ -131,15 +132,13 @@ export const getAllPatternsDependants = ( select ) => ( state ) => {
 	];
 };
 
-export const getInsertBlockTypeDependants =
-	( select ) => ( state, rootClientId ) => {
-		return [
-			state.blockListSettings[ rootClientId ],
-			state.blocks.byClientId.get( rootClientId ),
-			state.settings.allowedBlockTypes,
-			state.settings.templateLock,
-			state.blockEditingModes,
-			select( STORE_NAME ).__unstableGetEditorMode( state ),
-			getSectionRootClientId( state ),
-		];
-	};
+export const getInsertBlockTypeDependants = () => ( state, rootClientId ) => {
+	return [
+		state.blockListSettings[ rootClientId ],
+		state.blocks.byClientId.get( rootClientId ),
+		state.settings.allowedBlockTypes,
+		state.settings.templateLock,
+		getBlockEditingMode( state, rootClientId ),
+		getSectionRootClientId( state ),
+	];
+};

package/src/style.scss

@@ -1,65 +1,67 @@
-@import "./autocompleters/style.scss";
-@import "./components/background-image-control/style.scss";
-@import "./components/block-alignment-control/style.scss";
-@import "./components/block-canvas/style.scss";
-@import "./components/block-icon/style.scss";
-@import "./components/block-inspector/style.scss";
-@import "./components/block-tools/style.scss";
-@import "./components/block-lock/style.scss";
-@import "./components/block-breadcrumb/style.scss";
-@import "./components/block-card/style.scss";
-@import "./components/block-compare/style.scss";
-@import "./components/block-draggable/style.scss";
-@import "./components/block-manager/style.scss";
-@import "./components/block-mover/style.scss";
-@import "./components/block-navigation/style.scss";
-@import "./components/block-patterns-list/style.scss";
-@import "./components/block-patterns-paging/style.scss";
-@import "./components/block-popover/style.scss";
-@import "./components/block-preview/style.scss";
-@import "./components/block-rename/style.scss";
-@import "./components/block-styles/style.scss";
-@import "./components/block-switcher/style.scss";
-@import "./components/block-types-list/style.scss";
-@import "./components/block-pattern-setup/style.scss";
-@import "./components/block-variation-transforms/style.scss";
-@import "./components/border-radius-control/style.scss";
-@import "./components/colors-gradients/style.scss";
-@import "./components/date-format-picker/style.scss";
-@import "./components/duotone-control/style.scss";
-@import "./components/font-appearance-control/style.scss";
-@import "./components/font-family/style.scss";
-@import "./components/global-styles/style.scss";
-@import "./components/grid/style.scss";
-@import "./components/height-control/style.scss";
-@import "./components/iframe/style.scss";
-@import "./components/inserter-list-item/style.scss";
-@import "./components/inspector-controls-tabs/style.scss";
-@import "./components/inspector-popover-header/style.scss";
-@import "./components/justify-content-control/style.scss";
-@import "./components/link-control/style.scss";
-@import "./components/list-view/style.scss";
-@import "./components/media-placeholder/style.scss";
-@import "./components/media-replace-flow/style.scss";
-@import "./components/multi-selection-inspector/style.scss";
-@import "./components/responsive-block-control/style.scss";
-@import "./components/rich-text/style.scss";
-@import "./components/skip-to-selected-block/style.scss";
-@import "./components/tabbed-sidebar/style.scss";
-@import "./components/tool-selector/style.scss";
-@import "./components/url-input/style.scss";
-@import "./components/url-popover/style.scss";
-@import "./hooks/block-hooks.scss";
-@import "./hooks/block-bindings.scss";
-@import "./hooks/border.scss";
-@import "./hooks/color.scss";
-@import "./hooks/dimensions.scss";
-@import "./hooks/layout.scss";
-@import "./hooks/spacing.scss";
-@import "./hooks/typography.scss";
+@use "@wordpress/base-styles/default-custom-properties";
+@use "@wordpress/base-styles/mixins" as *;
+@use "./autocompleters/style.scss" as *;
+@use "./components/background-image-control/style.scss" as *;
+@use "./components/block-alignment-control/style.scss" as *;
+@use "./components/block-canvas/style.scss" as *;
+@use "./components/block-icon/style.scss" as *;
+@use "./components/block-inspector/style.scss" as *;
+@use "./components/block-tools/style.scss" as *;
+@use "./components/block-lock/style.scss" as *;
+@use "./components/block-allowed-blocks/style.scss" as *;
+@use "./components/block-breadcrumb/style.scss" as *;
+@use "./components/block-card/style.scss" as *;
+@use "./components/block-compare/style.scss" as *;
+@use "./components/block-draggable/style.scss" as *;
+@use "./components/block-manager/style.scss" as *;
+@use "./components/block-mover/style.scss" as *;
+@use "./components/block-navigation/style.scss" as *;
+@use "./components/block-patterns-list/style.scss" as *;
+@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-rename/style.scss" as *;
+@use "./components/block-styles/style.scss" as *;
+@use "./components/block-switcher/style.scss" as *;
+@use "./components/block-types-list/style.scss" as *;
+@use "./components/block-pattern-setup/style.scss" as *;
+@use "./components/block-variation-transforms/style.scss" as *;
+@use "./components/border-radius-control/style.scss" as *;
+@use "./components/colors-gradients/style.scss" as *;
+@use "./components/date-format-picker/style.scss" as *;
+@use "./components/duotone-control/style.scss" as *;
+@use "./components/font-appearance-control/style.scss" as *;
+@use "./components/font-family/style.scss" as *;
+@use "./components/global-styles/style.scss" as *;
+@use "./components/grid/style.scss" as *;
+@use "./components/height-control/style.scss" as *;
+@use "./components/iframe/style.scss" as *;
+@use "./components/inserter-list-item/style.scss" as *;
+@use "./components/inspector-controls-tabs/style.scss" as *;
+@use "./components/inspector-popover-header/style.scss" as *;
+@use "./components/justify-content-control/style.scss" as *;
+@use "./components/link-control/style.scss" as *;
+@use "./components/list-view/style.scss" as *;
+@use "./components/media-placeholder/style.scss" as *;
+@use "./components/media-replace-flow/style.scss" as *;
+@use "./components/multi-selection-inspector/style.scss" as *;
+@use "./components/responsive-block-control/style.scss" as *;
+@use "./components/rich-text/style.scss" as *;
+@use "./components/skip-to-selected-block/style.scss" as *;
+@use "./components/tabbed-sidebar/style.scss" as *;
+@use "./components/url-input/style.scss" as *;
+@use "./components/url-popover/style.scss" as *;
+@use "./hooks/block-hooks.scss" as *;
+@use "./hooks/block-bindings.scss" as *;
+@use "./hooks/border.scss" as *;
+@use "./hooks/color.scss" as *;
+@use "./hooks/dimensions.scss" as *;
+@use "./hooks/layout.scss" as *;
+@use "./hooks/spacing.scss" as *;
+@use "./hooks/typography.scss" as *;
 
-@import "./components/block-toolbar/style.scss";
-@import "./components/inserter/style.scss";
-@import "./components/spacing-sizes-control/style.scss";
+@use "./components/block-toolbar/style.scss" as *;
+@use "./components/inserter/style.scss" as *;
+@use "./components/spacing-sizes-control/style.scss" as *;
 
 @include wordpress-admin-schemes();

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

@@ -0,0 +1,84 @@
+/**
+ * Frontend fit text functionality.
+ * Automatically detects and initializes fit text on blocks with the has-fit-text class.
+ */
+
+/**
+ * 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.
+ */
+function getElementIdentifier( element ) {
+	if ( ! element.dataset.fitTextId ) {
+		element.dataset.fitTextId = `fit-text-${ ++idCounter }`;
+	}
+	return element.dataset.fitTextId;
+}
+
+/**
+ * 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.
+ */
+function initializeAllFitText() {
+	const elements = document.querySelectorAll( '.has-fit-text' );
+	elements.forEach( initializeFitText );
+}
+
+window.addEventListener( 'load', initializeAllFitText );