Add variatioation picker for when block is first added.

blocks/layout-grid/src/grid/edit.native.js

@@ -2,12 +2,18 @@
  * External dependencies
  */
 import { View } from 'react-native';
+import { delay, flatMap } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
+import { InnerBlocks, BlockVariationPicker } from '@wordpress/block-editor';
+
+import { useEffect, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import variations from './variations';
 
 const ALLOWED_BLOCKS = [ 'jetpack/layout-grid-column' ];
 
@@ -16,20 +22,34 @@ const TEMPLATE = [
 	[ 'jetpack/layout-grid-column', {}, [] ],
 ];
 
-class Edit extends Component {
-	constructor( props ) {
-		super( props );
-	}
+const Edit = ( props ) => {
+	const { clientId, isSelected } = props;
+	const [ isVisible, setIsVisible ] = useState( false );
+	const isDefaultColumns = true;
+
+	useEffect( () => {
+		if ( isSelected && isDefaultColumns ) {
+			delay( () => setIsVisible( true ), 100 );
+		}
+	}, [] );
 
-	render() {
-		return <View>
+	return (
+		<>
+			<View>
 				<InnerBlocks
 					template={ TEMPLATE }
 					templateLock="all"
 					allowedBlocks={ ALLOWED_BLOCKS }
 				/>
-		</View>;
-	}
-}
+			</View>
+			<BlockVariationPicker
+				variations={ variations }
+				onClose={ () => setIsVisible( false ) }
+				clientId={ clientId }
+				isVisible={ isVisible }
+			/>
+		</>
+	);
+};
 
-export default Edit;
+export default Edit;

blocks/layout-grid/src/grid/variations.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+
+/**
+ * Internal dependencies
+ */
+import ColumnIcon from './../icons';
+/**
+ * Template option choices for predefined columns layouts.
+ *
+ * @type {WPBlockVariation[]}
+ */
+const variations = [
+	{
+		name: 'one-column',
+		title: __( 'One' ),
+		description: __( 'One column', 'layout-grid' ),
+		icon: ( <ColumnIcon columns={ 1 } /> ),
+		isDefault: true,
+		innerBlocks: [ [ 'jetpack/layout-grid-column' ] ],
+		scope: [ 'block' ],
+	},
+	{
+		name: 'two-columns',
+		title: __( 'Two' ),
+		description: __( 'Two columns', 'layout-grid' ),
+		icon: ( <ColumnIcon columns={ 2 } /> ),
+		innerBlocks: [
+			[ 'jetpack/layout-grid-column' ],
+			[ 'jetpack/layout-grid-column' ],
+		],
+		scope: [ 'block' ],
+	},
+	{
+		name: 'three-columns',
+		title: __( 'Three' ),
+		description: __( 'Three columns', 'layout-grid' ),
+		icon: ( <ColumnIcon columns={ 3 } /> ),
+		innerBlocks: [
+			[ 'jetpack/layout-grid-column' ],
+			[ 'jetpack/layout-grid-column' ],
+			[ 'jetpack/layout-grid-column' ],
+		],
+		scope: [ 'block' ],
+	},
+	{
+		name: 'four-columns',
+		title: __( 'Four' ),
+		description: __( 'Four columns', 'layout-grid' ),
+		icon: ( <ColumnIcon columns={ 4 } /> ),
+		innerBlocks: [
+			[ 'jetpack/layout-grid-column' ],
+			[ 'jetpack/layout-grid-column' ],
+            [ 'jetpack/layout-grid-column' ],
+            [ 'jetpack/layout-grid-column' ],
+		],
+		scope: [ 'block' ],
+	},
+];
+
+export default variations;