Editor: Deprecate layout attribute

docs/data/data-core-editor.md

@@ -930,8 +930,7 @@ be placed. Defaults to the last index.
 
 *Returns*
 
-Insertion point object with `rootClientId`, `layout`,
-`index`.
+Insertion point object with `rootClientId`, `index`.
 
 ### isBlockInsertionPointVisible
 
@@ -1512,7 +1511,6 @@ to a new index.
  * clientId: The client ID of the block.
  * fromRootClientId: Root client ID source.
  * toRootClientId: Root client ID destination.
- * layout: Layout to move the block into.
  * index: The index to move the block into.
 
 ### insertBlock

packages/block-library/src/columns/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { times, property, omit } from 'lodash';
+import { times } from 'lodash';
 import classnames from 'classnames';
 import memoize from 'memize';
 
@@ -39,6 +39,32 @@ const getColumnsTemplate = memoize( ( columns ) => {
 	return times( columns, () => [ 'core/column' ] );
 } );
 
+/**
+ * Given an HTML string for a deprecated columns inner block, returns the
+ * column index to which the migrated inner block should be assigned. Returns
+ * undefined if the inner block was not assigned to a column.
+ *
+ * @param {string} originalContent Deprecated Columns inner block HTML.
+ *
+ * @return {?number} Column to which inner block is to be assigned.
+ */
+function getDeprecatedLayoutColumn( originalContent ) {
+	let { doc } = getDeprecatedLayoutColumn;
+	if ( ! doc ) {
+		doc = document.implementation.createHTMLDocument( '' );
+		getDeprecatedLayoutColumn.doc = doc;
+	}
+
+	let columnMatch;
+
+	doc.body.innerHTML = originalContent;
+	for ( const classListItem of doc.body.firstChild.classList ) {
+		if ( ( columnMatch = classListItem.match( /^layout-column-(\d+)$/ ) ) ) {
+			return Number( columnMatch[ 1 ] ) - 1;
+		}
+	}
+}
+
 export const name = 'core/columns';
 
 export const settings = {
@@ -70,31 +96,38 @@ export const settings = {
 				},
 			},
 			isEligible( attributes, innerBlocks ) {
-				return innerBlocks.some( property( [ 'attributes', 'layout' ] ) );
-			},
-			migrate( attributes, innerBlocks ) {
-				function withoutLayout( block ) {
-					return {
-						...block,
-						attributes: omit( block.attributes, [ 'layout' ] ),
-					};
+				// Since isEligible is called on every valid instance of the
+				// Columns block and a deprecation is the unlikely case due to
+				// its subsequent migration, optimize for the `false` condition
+				// by performing a naive, inaccurate pass at inner blocks.
+				const isFastPassEligible = innerBlocks.some( ( innerBlock ) => (
+					/layout-column-\d+/.test( innerBlock.originalContent )
+				) );
+
+				if ( ! isFastPassEligible ) {
+					return false;
 				}
 
+				// Only if the fast pass is considered eligible is the more
+				// accurate, durable, slower condition performed.
+				return innerBlocks.some( ( innerBlock ) => (
+					getDeprecatedLayoutColumn( innerBlock.originalContent ) !== undefined
+				) );
+			},
+			migrate( attributes, innerBlocks ) {
 				const columns = innerBlocks.reduce( ( result, innerBlock ) => {
-					const { layout } = innerBlock.attributes;
+					const { originalContent } = innerBlock;
 
-					let columnIndex, columnMatch;
-					if ( layout && ( columnMatch = layout.match( /^column-(\d+)$/ ) ) ) {
-						columnIndex = Number( columnMatch[ 1 ] ) - 1;
-					} else {
+					let columnIndex = getDeprecatedLayoutColumn( originalContent );
+					if ( columnIndex === undefined ) {
 						columnIndex = 0;
 					}
 
 					if ( ! result[ columnIndex ] ) {
 						result[ columnIndex ] = [];
 					}
 
-					result[ columnIndex ].push( withoutLayout( innerBlock ) );
+					result[ columnIndex ].push( innerBlock );
 
 					return result;
 				}, [] );

packages/editor/src/components/block-drop-zone/index.js

@@ -1,7 +1,6 @@
 /**
  * External Dependencies
  */
-import { castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -10,7 +9,6 @@ import classnames from 'classnames';
 import { DropZone } from '@wordpress/components';
 import {
 	rawHandler,
-	cloneBlock,
 	getBlockTransforms,
 	findTransform,
 } from '@wordpress/blocks';
@@ -132,26 +130,16 @@ export default compose(
 
 		return {
 			insertBlocks( blocks, index ) {
-				const { rootClientId, layout } = ownProps;
-
-				if ( layout ) {
-					// A block's transform function may return a single
-					// transformed block or an array of blocks, so ensure
-					// to first coerce to an array before mapping to inject
-					// the layout attribute.
-					blocks = castArray( blocks ).map( ( block ) => (
-						cloneBlock( block, { layout } )
-					) );
-				}
+				const { rootClientId } = ownProps;
 
 				insertBlocks( blocks, index, rootClientId );
 			},
 			updateBlockAttributes( ...args ) {
 				updateBlockAttributes( ...args );
 			},
 			moveBlockToPosition( srcClientId, srcRootClientId, dstIndex ) {
-				const { rootClientId: dstRootClientId, layout } = ownProps;
-				moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, layout, dstIndex );
+				const { rootClientId: dstRootClientId } = ownProps;
+				moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, dstIndex );
 			},
 		};
 	} ),

packages/editor/src/components/block-list-appender/index.js

@@ -20,8 +20,6 @@ import Inserter from '../inserter';
 
 function BlockListAppender( {
 	blockClientIds,
-	layout,
-	isGroupedByLayout,
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
@@ -30,15 +28,12 @@ function BlockListAppender( {
 		return null;
 	}
 
-	const defaultLayout = isGroupedByLayout ? layout : undefined;
-
 	if ( canInsertDefaultBlock ) {
 		return (
 			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
 				<DefaultBlockAppender
 					rootClientId={ rootClientId }
 					lastBlockClientId={ last( blockClientIds ) }
-					layout={ defaultLayout }
 				/>
 			</IgnoreNestedEvents>
 		);
@@ -48,7 +43,6 @@ function BlockListAppender( {
 		<div className="block-list-appender">
 			<Inserter
 				rootClientId={ rootClientId }
-				layout={ defaultLayout }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
 						aria-label={ __( 'Add block' ) }

packages/editor/src/components/block-list/block.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, reduce, size, castArray, first, last } from 'lodash';
+import { get, reduce, size, first, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,6 @@ import {
 } from '@wordpress/dom';
 import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
 import {
-	cloneBlock,
 	getBlockType,
 	getSaveElement,
 	isReusableBlock,
@@ -367,7 +366,6 @@ export class BlockListBlock extends Component {
 			isLast,
 			clientId,
 			rootClientId,
-			layout,
 			isSelected,
 			isPartOfMultiSelection,
 			isFirstMultiSelected,
@@ -492,7 +490,6 @@ export class BlockListBlock extends Component {
 					<BlockInsertionPoint
 						clientId={ clientId }
 						rootClientId={ rootClientId }
-						layout={ layout }
 						canShowInserter={ canShowInBetweenInserter }
 						onInsert={ this.hideHoverEffects }
 					/>
@@ -501,7 +498,6 @@ export class BlockListBlock extends Component {
 					index={ order }
 					clientId={ clientId }
 					rootClientId={ rootClientId }
-					layout={ layout }
 				/>
 				{ shouldRenderMovers && (
 					<BlockMover
@@ -560,7 +556,6 @@ export class BlockListBlock extends Component {
 							<InserterWithShortcuts
 								clientId={ clientId }
 								rootClientId={ rootClientId }
-								layout={ layout }
 								onToggle={ this.selectOnOpen }
 							/>
 						</div>
@@ -655,8 +650,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 			selectBlock( clientId, initialPosition );
 		},
 		onInsertBlocks( blocks, index ) {
-			const { rootClientId, layout } = ownProps;
-			blocks = blocks.map( ( block ) => cloneBlock( block, { layout } ) );
+			const { rootClientId } = ownProps;
 			insertBlocks( blocks, index, rootClientId );
 		},
 		onInsertDefaultBlockAfter() {
@@ -670,10 +664,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 			mergeBlocks( ...args );
 		},
 		onReplace( blocks ) {
-			const { layout } = ownProps;
-			blocks = castArray( blocks ).map( ( block ) => (
-				cloneBlock( block, { layout } )
-			) );
 			replaceBlocks( [ ownProps.clientId ], blocks );
 		},
 		onMetaChange( meta ) {

packages/editor/src/components/block-list/index.js

@@ -9,7 +9,6 @@ import {
 	sortBy,
 	throttle,
 } from 'lodash';
-import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -188,23 +187,12 @@ class BlockList extends Component {
 	render() {
 		const {
 			blockClientIds,
-			layout,
-			isGroupedByLayout,
 			rootClientId,
 			isDraggable,
 		} = this.props;
 
-		let defaultLayout;
-		if ( isGroupedByLayout ) {
-			defaultLayout = layout;
-		}
-
-		const classes = classnames( 'editor-block-list__layout', {
-			[ `layout-${ layout }` ]: layout,
-		} );
-
 		return (
-			<div className={ classes }>
+			<div className="editor-block-list__layout">
 				{ map( blockClientIds, ( clientId, blockIndex ) => (
 					<BlockListBlock
 						key={ 'block-' + clientId }
@@ -214,18 +202,12 @@ class BlockList extends Component {
 						onSelectionStart={ this.onSelectionStart }
 						onShiftSelection={ this.onShiftSelection }
 						rootClientId={ rootClientId }
-						layout={ defaultLayout }
 						isFirst={ blockIndex === 0 }
 						isLast={ blockIndex === blockClientIds.length - 1 }
 						isDraggable={ isDraggable }
 					/>
 				) ) }
-
-				<BlockListAppender
-					rootClientId={ rootClientId }
-					layout={ layout }
-					isGroupedByLayout={ isGroupedByLayout }
-				/>
+				<BlockListAppender rootClientId={ rootClientId } />
 			</div>
 		);
 	}

packages/editor/src/components/block-list/insertion-point.js

@@ -42,8 +42,8 @@ class BlockInsertionPoint extends Component {
 	}
 
 	onClick() {
-		const { layout, rootClientId, index, ...props } = this.props;
-		props.insertDefaultBlock( { layout }, rootClientId, index );
+		const { rootClientId, index, ...props } = this.props;
+		props.insertDefaultBlock( undefined, rootClientId, index );
 		props.startTyping();
 		this.onBlurInserter();
 		if ( props.onInsert ) {

packages/editor/src/components/default-block-appender/index.js

@@ -25,7 +25,6 @@ export function DefaultBlockAppender( {
 	onAppend,
 	showPrompt,
 	placeholder,
-	layout,
 	rootClientId,
 } ) {
 	if ( isLocked || ! isVisible ) {
@@ -51,7 +50,7 @@ export function DefaultBlockAppender( {
 
 	return (
 		<div data-root-client-id={ rootClientId || '' } className="wp-block editor-default-block-appender">
-			<BlockDropZone rootClientId={ rootClientId } layout={ layout } />
+			<BlockDropZone rootClientId={ rootClientId } />
 			<input
 				role="button"
 				aria-label={ __( 'Add block' ) }
@@ -61,7 +60,7 @@ export function DefaultBlockAppender( {
 				onFocus={ onAppend }
 				value={ showPrompt ? value : '' }
 			/>
-			<InserterWithShortcuts rootClientId={ rootClientId } layout={ layout } />
+			<InserterWithShortcuts rootClientId={ rootClientId } />
 			<Inserter position="top right" />
 		</div>
 	);
@@ -91,14 +90,9 @@ export default compose(
 
 		return {
 			onAppend() {
-				const { layout, rootClientId } = ownProps;
+				const { rootClientId } = ownProps;
 
-				let attributes;
-				if ( layout ) {
-					attributes = { layout };
-				}
-
-				insertDefaultBlock( attributes, rootClientId );
+				insertDefaultBlock( undefined, rootClientId );
 				startTyping();
 			},
 		};