Editor: Deprecate layout attribute

docs/data/data-core-editor.md

@@ -1512,7 +1512,7 @@ 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.
+ * indexOrDeprecatedLayout: The index to move the block into.
  * index: The index to move the block into.
 
 ### insertBlock

docs/reference/deprecated.md

@@ -6,6 +6,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 - `wp.compose.remountOnPropChange` has been removed.
 - The following editor store actions have been removed: `createNotice`, `removeNotice`, `createSuccessNotice`, `createInfoNotice`, `createErrorNotice`, `createWarningNotice`. Use the equivalent actions by the same name from the `@wordpress/notices` module.
 - The id prop of wp.nux.DotTip has been removed. Please use the tipId prop instead.
+- Block `layout` support has been removed, including the `InnerBlocks` `layouts` prop. See: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/inner-blocks/README.md#usage
 
 ## 4.3.0
 

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

@@ -151,7 +151,11 @@ export default compose(
 			},
 			moveBlockToPosition( srcClientId, srcRootClientId, dstIndex ) {
 				const { rootClientId: dstRootClientId, layout } = ownProps;
-				moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, layout, dstIndex );
+				if ( layout === undefined ) {
+					moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, dstIndex );
+				} else {
+					moveBlockToPosition( srcClientId, srcRootClientId, dstRootClientId, layout, dstIndex );
+				}
 			},
 		};
 	} ),

packages/editor/src/components/inner-blocks/README.md

@@ -7,9 +7,7 @@ Refer to the [implementation of the Columns block](https://github.com/WordPress/
 
 ## Usage
 
-In a block's `edit` implementation, render `InnerBlocks`, optionally with `layouts` of available nest areas:
-
-Then, in the `save` implementation, render `InnerBlocks.Content`. This will be replaced automatically with the content of the nested blocks.
+In a block's `edit` implementation, render `InnerBlocks`. Then, in the `save` implementation, render `InnerBlocks.Content`. This will be replaced automatically with the content of the nested blocks.
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
@@ -36,7 +34,7 @@ registerBlockType( 'my-plugin/my-block', {
 } );
 ```
 
-_Note:_ A block can render at most a single `InnerBlocks` and `InnerBlocks.Content` element in `edit` and `save` respectively. To create distinct arrangements of nested blocks, refer to the `layouts` prop documented below.
+_Note:_ A block can render at most a single `InnerBlocks` and `InnerBlocks.Content` element in `edit` and `save` respectively. To create distinct arrangements of nested blocks, create a separate block type which renders its own `InnerBlocks` and assign as the sole `allowedBlocks` type.
 
 _Note:_ Because the save step will automatically apply props to the element returned by `save`, it is important to include the wrapping `div` in the above simple example even though we are applying no props of our own. In a real-world example, you may have your own attributes to apply to the saved markup, or sibling content adjacent to the rendered nested blocks.
 
@@ -107,25 +105,3 @@ Template locking allows locking the `InnerBlocks` area for the current template.
 If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
-
-### `layouts`
-* **Type:** `Array<Object>|Object`
-
-To achieve distinct arrangements of nested blocks, you may assign layout as an object. When assigned, the rendered output will assign a layout-specific class which can be used in your block stylesheet to effect the visual arrangement of nested blocks.
-
-A layout is an object where each key is the `slug` of the layout and its value an object consisting of:
-
-- Icon (`icon: string`): The slug of the Dashicon to use in controls presented to the user in moving between layouts
-   - Reference: https://developer.wordpress.org/resource/dashicons/
-- Label (`label: string`): The text to display in the controls presented to the user in moving between layouts
-
-The `slug` is also used to create the class name for the block. A slug of `normal` would output the class `"layout-normal"`.
-
-**Example:**
-
-```jsx
-<InnerBlocks layouts={ {
-	normal: { label: 'Normal Width', icon: 'align-center' },
-	wide: { label: 'Width Width', icon: 'align-wide' },
-} } />
-```

packages/editor/src/components/inner-blocks/index.js

@@ -13,6 +13,7 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { compose } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -105,6 +106,14 @@ class InnerBlocks extends Component {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
+		if ( layouts !== undefined ) {
+			deprecated( 'InnerBlocks `layouts` prop', {
+				plugin: 'Gutenberg',
+				version: '2.4.0',
+				hint: 'Layout has been deprecated. The prop should be removed.',
+			} );
+		}
+
 		return (
 			<div className={ classes }>
 				<BlockList

packages/editor/src/store/actions.js

@@ -133,6 +133,14 @@ export function receiveBlocks( blocks ) {
  * @return {Object} Action object.
  */
 export function updateBlockAttributes( clientId, attributes ) {
+	if ( attributes.layout !== undefined ) {
+		deprecated( 'updateBlockAttributes with `layout` attribute', {
+			plugin: 'Gutenberg',
+			version: '2.4.0',
+			hint: 'Layout has been deprecated. The attribute should be removed.',
+		} );
+	}
+
 	return {
 		type: 'UPDATE_BLOCK_ATTRIBUTES',
 		clientId,
@@ -228,10 +236,20 @@ export function toggleSelection( isSelectionEnabled = true ) {
  * @return {Object} Action object.
  */
 export function replaceBlocks( clientIds, blocks ) {
+	blocks = castArray( blocks );
+
+	if ( blocks.some( ( block ) => block.attributes.layout !== undefined ) ) {
+		deprecated( 'replaceBlocks with block including `layout` attribute', {
+			plugin: 'Gutenberg',
+			version: '2.4.0',
+			hint: 'Layout has been deprecated. The attribute should be removed.',
+		} );
+	}
+
 	return {
 		type: 'REPLACE_BLOCKS',
 		clientIds: castArray( clientIds ),
-		blocks: castArray( blocks ),
+		blocks,
 		time: Date.now(),
 	};
 }
@@ -274,15 +292,28 @@ export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
  * Returns an action object signalling that an indexed block should be moved
  * to a new index.
  *
- * @param  {?string} clientId         The client ID of the block.
- * @param  {?string} fromRootClientId Root client ID source.
- * @param  {?string} toRootClientId   Root client ID destination.
- * @param  {?string} layout           Layout to move the block into.
- * @param  {number}  index            The index to move the block into.
+ * @param {?string} clientId                The client ID of the block.
+ * @param {?string} fromRootClientId        Root client ID source.
+ * @param {?string} toRootClientId          Root client ID destination.
+ * @param {?string} indexOrDeprecatedLayout The index to move the block into.
+ * @param {?number} index                   The index to move the block into.
  *
  * @return {Object} Action object.
  */
-export function moveBlockToPosition( clientId, fromRootClientId, toRootClientId, layout, index ) {
+export function moveBlockToPosition( clientId, fromRootClientId, toRootClientId, indexOrDeprecatedLayout, index ) {
+	let layout;
+	if ( index === undefined ) {
+		index = indexOrDeprecatedLayout;
+	} else {
+		deprecated( 'moveBlockToPosition `layout` argument', {
+			plugin: 'Gutenberg',
+			version: '2.4.0',
+			hint: 'Layout has been deprecated. The argument should be removed.',
+		} );
+
+		layout = indexOrDeprecatedLayout;
+	}
+
 	return {
 		type: 'MOVE_BLOCK_TO_POSITION',
 		fromRootClientId,
@@ -320,6 +351,14 @@ export function insertBlock( block, index, rootClientId ) {
  * @return {Object} Action object.
  */
 export function insertBlocks( blocks, index, rootClientId ) {
+	if ( blocks.some( ( block ) => block.attributes.layout !== undefined ) ) {
+		deprecated( 'insertBlocks with block including `layout` attribute', {
+			plugin: 'Gutenberg',
+			version: '2.4.0',
+			hint: 'Layout has been deprecated. The attribute should be removed.',
+		} );
+	}
+
 	return {
 		type: 'INSERT_BLOCKS',
 		blocks: castArray( blocks ),

packages/editor/src/store/test/actions.js

@@ -150,6 +150,7 @@ describe( 'actions', () => {
 		it( 'should return the REPLACE_BLOCKS action', () => {
 			const block = {
 				clientId: 'ribs',
+				attributes: {},
 			};
 
 			expect( replaceBlock( [ 'chicken' ], block ) ).toEqual( {
@@ -165,6 +166,7 @@ describe( 'actions', () => {
 		it( 'should return the REPLACE_BLOCKS action', () => {
 			const blocks = [ {
 				clientId: 'ribs',
+				attributes: {},
 			} ];
 
 			expect( replaceBlocks( [ 'chicken' ], blocks ) ).toEqual( {
@@ -180,6 +182,7 @@ describe( 'actions', () => {
 		it( 'should return the INSERT_BLOCKS action', () => {
 			const block = {
 				clientId: 'ribs',
+				attributes: {},
 			};
 			const index = 5;
 			expect( insertBlock( block, index, 'testclientid' ) ).toEqual( {
@@ -196,6 +199,7 @@ describe( 'actions', () => {
 		it( 'should return the INSERT_BLOCKS action', () => {
 			const blocks = [ {
 				clientId: 'ribs',
+				attributes: {},
 			} ];
 			const index = 3;
 			expect( insertBlocks( blocks, index, 'testclientid' ) ).toEqual( {