@wordpress/block-editor 15.7.0 → 15.8.0

package/src/hooks/test/allowed-blocks.js

@@ -0,0 +1,278 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { addTransforms } from '../allowed-blocks';
+
+describe( 'allowedBlocks', () => {
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'addTransforms()', () => {
+		it( 'should not preserve allowedBlocks in wrapping transforms', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/paragraph', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/paragraph' ] },
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: source,
+			};
+
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.allowedBlocks ).toBeUndefined();
+		} );
+
+		it( 'should not preserve allowedBlocks in one-to-many transforms', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/paragraph', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+			];
+
+			const transformed = addTransforms(
+				results[ 0 ],
+				source,
+				0,
+				results
+			);
+
+			expect( transformed.attributes.allowedBlocks ).toBeUndefined();
+		} );
+
+		it( 'should not preserve allowedBlocks in many-to-one transforms', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/paragraph', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/paragraph' ] },
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.allowedBlocks ).toBeUndefined();
+		} );
+
+		it( 'should not preserve allowedBlocks in many-to-many transforms with different counts', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/paragraph', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/paragraph' ] },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/heading' ] },
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+			];
+
+			const [ firstTransformed, secondTransformed ] = results.map(
+				( result, index ) =>
+					addTransforms( result, source, index, results )
+			);
+
+			expect( firstTransformed.attributes.allowedBlocks ).toBeUndefined();
+			expect(
+				secondTransformed.attributes.allowedBlocks
+			).toBeUndefined();
+		} );
+
+		it( 'should preserve allowedBlocks in many-to-many transforms with same counts', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/image', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/paragraph' ] },
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+				{ name: 'core/bar', attributes: {}, innerBlocks: [] },
+			];
+
+			const [ firstTransformed, secondTransformed ] = results.map(
+				( result, index ) =>
+					addTransforms( result, source, index, results )
+			);
+
+			expect( firstTransformed.attributes.allowedBlocks ).toEqual( [
+				'core/image',
+				'core/heading',
+			] );
+			expect( secondTransformed.attributes.allowedBlocks ).toEqual( [
+				'core/paragraph',
+			] );
+		} );
+
+		it( "should filter allowedBlocks based on destination block's allowedBlocks", () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+				allowedBlocks: [ 'core/paragraph' ],
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [
+							'core/paragraph',
+							'core/heading',
+							'core/image',
+						],
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.allowedBlocks ).toEqual( [
+				'core/paragraph',
+			] );
+		} );
+
+		it( 'should not override existing allowedBlocks in target block', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: { allowedBlocks: true },
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { allowedBlocks: [ 'core/paragraph' ] },
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: { allowedBlocks: [ 'core/heading' ] },
+				innerBlocks: [],
+			};
+
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.allowedBlocks ).toEqual( [
+				'core/heading',
+			] );
+		} );
+
+		it( 'should not preserve allowedBlocks when target block does not support allowedBlocks', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						allowedBlocks: [ 'core/paragraph', 'core/heading' ],
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.allowedBlocks ).toBeUndefined();
+		} );
+	} );
+} );

package/src/hooks/typography.js

@@ -115,31 +115,36 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 }
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
-	function selector( select ) {
-		const { style, fontFamily, fontSize, fitText } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize, fitText };
-	}
-	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
-		clientId,
-	] );
 	const isEnabled = useHasTypographyPanel( settings );
+
+	const { style, fontFamily, fontSize, fitText } = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled.
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			} = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return {
+				style: _style,
+				fontFamily: _fontFamily,
+				fontSize: _fontSize,
+				fitText: _fitText,
+			};
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
 		[ style, fontSize, fontFamily ]
 	);
 
 	const onChange = ( newStyle ) => {
-		const newAttributes = styleToAttributes( newStyle );
-
-		// If setting a font size and fitText is currently enabled, disable it
-		const hasFontSize =
-			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
-		if ( hasFontSize && fitText ) {
-			newAttributes.fitText = undefined;
-		}
-
-		setAttributes( newAttributes );
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
 	if ( ! isEnabled ) {
@@ -159,6 +164,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 			value={ value }
 			onChange={ onChange }
 			defaultControls={ defaultControls }
+			fitText={ fitText }
 		/>
 	);
 }

package/src/layouts/grid.js

@@ -181,8 +181,6 @@ export default {
 		}
 
 		if ( rules.length ) {
-			// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
-			// eslint-disable-next-line prettier/prettier
 			output = `${ appendSelectors( selector ) } { ${ rules.join(
 				'; '
 			) }; }`;

package/src/store/actions.js

@@ -34,6 +34,7 @@ import {
 import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
+	editContentOnlySection,
 } from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -104,7 +105,6 @@ export const validateBlocksToTemplate =
  * @property {WPBlockSelection} end   The selection end.
  */
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that selection state should be
  * reset to the specified selection.
@@ -120,7 +120,6 @@ export function resetSelection(
 	selectionEnd,
 	initialPosition
 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'RESET_SELECTION',
 		selectionStart,
@@ -194,7 +193,6 @@ export function updateBlock( clientId, updates ) {
 	};
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that the block with the
  * specified client ID has been selected, optionally accepting a position
@@ -208,7 +206,6 @@ export function updateBlock( clientId, updates ) {
  * @return {Object} Action object.
  */
 export function selectBlock( clientId, initialPosition = 0 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'SELECT_BLOCK',
 		initialPosition,
@@ -355,7 +352,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Action that replaces given blocks with one or more replacement blocks.
  *
@@ -370,7 +366,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 export const replaceBlocks =
 	( clientIds, blocks, indexToSelect, initialPosition = 0, meta ) =>
 	( { select, dispatch, registry } ) => {
-		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
 		blocks = castArray( blocks );
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
@@ -540,7 +535,6 @@ export function insertBlock(
 	);
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
@@ -566,7 +560,6 @@ export const insertBlocks =
 		meta
 	) =>
 	( { select, dispatch } ) => {
-		/* eslint-enable jsdoc/valid-types */
 		if ( initialPosition !== null && typeof initialPosition === 'object' ) {
 			meta = initialPosition;
 			initialPosition = 0;
@@ -1400,7 +1393,6 @@ export function removeBlock( clientId, selectPrevious ) {
 	return removeBlocks( [ clientId ], selectPrevious );
 }
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns an action object used in signalling that the inner blocks with the
  * specified client ID should be replaced.
@@ -1417,7 +1409,6 @@ export function replaceInnerBlocks(
 	updateSelection = false,
 	initialPosition = 0
 ) {
-	/* eslint-enable jsdoc/valid-types */
 	return {
 		type: 'REPLACE_INNER_BLOCKS',
 		rootClientId,
@@ -1909,18 +1900,16 @@ export function setBlockVisibility( updates ) {
  * This action is created for internal/experimental only usage and may be
  * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
  *
- * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporarily edited as blocks.
- * @param {?string} focusModeToRevert          The focus mode to revert after temporarily edit as blocks finishes.
+ * @param {?string} clientId The clientId of the block being temporarily edited.
  */
-export function __unstableSetTemporarilyEditingAsBlocks(
-	temporarilyEditingAsBlocks,
-	focusModeToRevert
-) {
-	return {
-		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
-		temporarilyEditingAsBlocks,
-		focusModeToRevert,
-	};
+export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
+	deprecated(
+		"wp.data.dispatch( 'core/block-editor' ).__unstableSetTemporarilyEditingAsBlocks",
+		{
+			since: '7.0',
+		}
+	);
+	return editContentOnlySection( clientId );
 }
 
 /**

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,12 +488,15 @@ 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;
 	let result;
-	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+
+	// If sections are nested, return the top level section block.
+	// Don't return early.
+	while ( ( current = state.blocks.parents.get( current ) ) ) {
 		if ( isSectionBlock( state, current ) ) {
 			result = current;
 		}
@@ -502,14 +505,18 @@ 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 ) {
+	if ( clientId === state.editedContentOnlySection ) {
+		return false;
+	}
+
 	const blockName = getBlockName( state, clientId );
 	if (
 		blockName === 'core/block' ||
@@ -530,27 +537,33 @@ 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;
+export function getEditedContentOnlySection( state ) {
+	return state.editedContentOnlySection;
 }
 
-/**
- * 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 isWithinEditedContentOnlySection( state, clientId ) {
+	if ( ! state.editedContentOnlySection ) {
+		return false;
+	}
+
+	if ( state.editedContentOnlySection === clientId ) {
+		return true;
+	}
+
+	let current = clientId;
+	while ( ( current = state.blocks.parents.get( current ) ) ) {
+		if ( state.editedContentOnlySection === current ) {
+			return true;
+		}
+	}
+	return false;
 }
 
 /**
@@ -695,12 +708,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;
 }