Blocks: Render columns as nested column (wrapper)

core-blocks/columns/column.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import './editor.scss';
+
+export const name = 'core/column';
+
+export const settings = {
+	title: __( 'Column' ),
+
+	supportedBlocks: [ 'core/columns' ],
+
+	icon: 'columns',
+
+	description: __( 'A single column within a columns block.' ),
+
+	category: 'common',
+
+	edit() {
+		return <InnerBlocks />;
+	},
+
+	save() {
+		return <div><InnerBlocks.Content /></div>;
+	},
+};

core-blocks/columns/editor.scss

@@ -41,14 +41,12 @@
 .wp-block-columns {
 	display: block;
 
-	.editor-inner-blocks {
-		display: grid;
-		grid-auto-flow: dense;
-	}
+	> .editor-inner-blocks > .editor-block-list__layout {
+		display: flex;
 
-	@for $i from 2 through 6 {
-		&.has-#{ $i }-columns .editor-inner-blocks {
-			grid-auto-columns: #{ 100% / $i };
+		> [data-type="core/column"] {
+			flex: 1;
+			width: 0;
 		}
 	}
 }

core-blocks/columns/index.js

@@ -29,12 +29,8 @@ import './editor.scss';
  *
  * @return {Object[]} Columns layout configuration.
  */
-const getColumnLayouts = memoize( ( columns ) => {
-	return times( columns, ( n ) => ( {
-		name: `column-${ n + 1 }`,
-		label: sprintf( __( 'Column %d' ), n + 1 ),
-		icon: 'columns',
-	} ) );
+const getColumnsTemplate = memoize( ( columns ) => {
+	return times( columns, () => [ 'core/column' ] );
 } );
 
 export const name = 'core/columns';
@@ -86,7 +82,10 @@ export const settings = {
 					</PanelBody>
 				</InspectorControls>
 				<div className={ classes }>
-					<InnerBlocks layouts={ getColumnLayouts( columns ) } />
+					<InnerBlocks
+						template={ getColumnsTemplate( columns ) }
+						templateLock
+						allowedBlocks={ [ 'core/column' ] } />
 				</div>
 			</Fragment>
 		);

core-blocks/columns/style.scss

@@ -1,16 +1,7 @@
 .wp-block-columns {
-	display: grid;
-	grid-auto-flow: dense;
-
-	@for $i from 2 through 6 {
-		&.has-#{ $i }-columns {
-			grid-auto-columns: #{ 100% / $i };
-		}
-	}
+	display: flex;
+}
 
-	@for $i from 1 through 6 {
-		.layout-column-#{ $i } {
-			grid-column: #{ $i };
-		}
-	}
+.wp-block-column {
+	flex: 1;
 }

core-blocks/index.js

@@ -21,6 +21,7 @@ import * as button from './button';
 import * as categories from './categories';
 import * as code from './code';
 import * as columns from './columns';
+import * as column from './columns/column';
 import * as coverImage from './cover-image';
 import * as embed from './embed';
 import * as freeform from './freeform';
@@ -59,6 +60,7 @@ export const registerCoreBlocks = () => {
 		categories,
 		code,
 		columns,
+		column,
 		coverImage,
 		embed,
 		...embed.common,

editor/components/block-list/index.js

@@ -19,11 +19,15 @@ import { withSelect } from '@wordpress/data';
 import './style.scss';
 import BlockListLayout from './layout';
 
-const UngroupedLayoutBlockList = withSelect(
-	( select, ownProps ) => ( {
-		blockUIDs: select( 'core/editor' ).getBlockOrder( ownProps.rootUID ),
-	} )
-)( BlockListLayout );
+const UngroupedLayoutBlockList = withSelect( ( select, ownProps ) => {
+	const { getBlockOrder, getEditorSettings } = select( 'core/editor' );
+	const { templateLock = getEditorSettings().templateLock } = ownProps;
+
+	return {
+		blockUIDs: getBlockOrder( ownProps.rootUID ),
+		templateLock,
+	};
+} )( BlockListLayout );
 
 const GroupedLayoutBlockList = withSelect(
 	( select, ownProps ) => ( {

editor/components/block-list/layout.js

@@ -194,6 +194,7 @@ class BlockListLayout extends Component {
 			isGroupedByLayout,
 			rootUID,
 			renderBlockMenu,
+			templateLock,
 		} = this.props;
 
 		let defaultLayout;
@@ -227,6 +228,7 @@ class BlockListLayout extends Component {
 						rootUID={ rootUID }
 						lastBlockUID={ last( blockUIDs ) }
 						layout={ defaultLayout }
+						isLocked={ templateLock }
 					/>
 				</IgnoreNestedEvents>
 			</div>

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

@@ -73,12 +73,11 @@ export default compose(
 		const isEmpty = ! getBlockCount( ownProps.rootUID );
 		const lastBlock = getBlock( ownProps.lastBlockUID );
 		const isLastBlockDefault = get( lastBlock, [ 'name' ] ) === getDefaultBlockName();
-		const { templateLock, bodyPlaceholder } = getEditorSettings();
+		const { bodyPlaceholder } = getEditorSettings();
 
 		return {
 			isVisible: isEmpty || ! isLastBlockDefault,
 			showPrompt: isEmpty,
-			isLocked: !! templateLock,
 			placeholder: bodyPlaceholder,
 			hasTip: isTipVisible( 'core/editor.inserter' ),
 		};

editor/components/inner-blocks/index.js

@@ -21,6 +21,7 @@ function InnerBlocks( {
 	layouts,
 	allowedBlocks,
 	template,
+	templateLock,
 	isSmallScreen,
 	isSelectedBlockInRoot,
 } ) {
@@ -30,7 +31,7 @@ function InnerBlocks( {
 
 	return (
 		<div className={ classes }>
-			<BlockList { ...{ layouts, allowedBlocks, template } } />
+			<BlockList { ...{ layouts, allowedBlocks, template, templateLock } } />
 		</div>
 	);
 }