@wordpress/block-editor 15.7.0 → 15.7.1-next.2f1c7c01b.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/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,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': {