Mobile: Add simple layout grid controls

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-
 import {
 	InnerBlocks,
 	InspectorControls,
@@ -18,14 +17,15 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { withSelect } from '@wordpress/data';
 import { PanelBody, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getPaddingValues } from '../constants';
+import { withUpdateAlignment } from './hooks/with-update-alignment';
 
 class Edit extends Component {
 	constructor( props ) {
@@ -151,26 +151,5 @@ export default compose(
 			hasChildBlocks: getBlockOrder( clientId ).length > 0,
 		};
 	} ),
-	withDispatch( ( dispatch, ownProps, registry ) => {
-		return {
-			updateAlignment( verticalAlignment ) {
-				const { clientId, setAttributes } = ownProps;
-				const { updateBlockAttributes } = dispatch(
-					'core/block-editor'
-				);
-				const { getBlockRootClientId } = registry.select(
-					'core/block-editor'
-				);
-
-				// Update own alignment.
-				setAttributes( { verticalAlignment } );
-
-				// Reset Parent Columns Block
-				const rootClientId = getBlockRootClientId( clientId );
-				updateBlockAttributes( rootClientId, {
-					verticalAlignment: null,
-				} );
-			},
-		};
-	} )
+	withUpdateAlignment(),
 )( Edit );

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

@@ -6,27 +6,228 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
+import {
+	PanelBody,
+	BottomSheetSelectControl,
+	alignmentHelpers,
+} from '@wordpress/components';
+import { withViewportMatch } from '@wordpress/viewport';
+import {
+	InnerBlocks,
+	InspectorControls,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 
-class Edit extends Component {
-	constructor( props ) {
-		super( props );
+/**
+ * Internal dependencies
+ */
+import { getPaddingValues } from '../constants';
+import { withUpdateAlignment } from './hooks/with-update-alignment';
+import styles from './edit.native.scss';
+
+/**
+ * Calculate the column styles.
+ *
+ * @param {int} columns
+ * @param {int} index
+ * @param {int} fullWidth
+ * @param {string} viewport
+ * @return {object}
+ */
+function getColumnStyles( columns, index, fullWidth, viewport ) {
+	// Default widths for 1 column layout.
+	let widths = {
+		mobile: fullWidth,
+		tablet: fullWidth,
+		desktop: fullWidth,
+	};
+	const TWO_COLUMN_MARGIN = 16;
+	const THREE_COLUMN_MARGIN = 22;
+	const FOUR_COLUMN_MARGIN = 24;
+
+	switch ( columns ) {
+		case 2:
+			widths = {
+				mobile: fullWidth,
+				tablet: Math.floor( fullWidth / 2 ) - TWO_COLUMN_MARGIN,
+				desktop: Math.floor( fullWidth / 2 ) - TWO_COLUMN_MARGIN,
+			};
+			break;
+		case 3:
+			widths = {
+				mobile: fullWidth,
+				tablet: Math.floor( fullWidth / 2 ) - TWO_COLUMN_MARGIN,
+				desktop: Math.floor( fullWidth / 3 ) - THREE_COLUMN_MARGIN,
+			};
+			if ( index === 2 ) {
+				widths.tablet = fullWidth;
+			}
+			break;
+		case 4:
+			widths = {
+				mobile: fullWidth,
+				tablet: Math.floor( fullWidth / 2 ) - TWO_COLUMN_MARGIN,
+				desktop: Math.floor( fullWidth / 4 ) - FOUR_COLUMN_MARGIN,
+			};
+			break;
 	}
 
-	render() {
+	return { width: widths[ viewport ] };
+}
+
+function ColumnsEdit( {
+	hasChildren,
+	attributes,
+	isSelected,
+	setAttributes,
+	updateAlignment,
+	isParentSelected,
+	selectedColumnIndex,
+	contentStyle,
+	isMobile,
+	isTablet,
+	parentAlign,
+	parentColumnCount,
+} ) {
+	const { padding, verticalAlignment } = attributes;
+
+	const { isFullWidth } = alignmentHelpers;
+
+	let viewportSize = 'desktop';
+	if ( isTablet ) {
+		viewportSize = 'tablet';
+	}
+	if ( isMobile ) {
+		viewportSize = 'mobile';
+	}
+
+	const stylePlaceholder = usePreferredColorSchemeStyle(
+		styles.column__placeholder,
+		styles[ 'column__placeholder-dark' ]
+	);
+
+	const calculatedColumnStyles = getColumnStyles(
+		parentColumnCount,
+		selectedColumnIndex,
+		contentStyle.width,
+		viewportSize
+	);
+
+	if ( ! isSelected && ! hasChildren ) {
 		return (
-			<View>
+			<View
+				style={ [
+					! isParentSelected && stylePlaceholder,
+					styles[ 'column__placeholder-not-selected' ],
+					calculatedColumnStyles,
+				] }
+			/>
+		);
+	}
+
+	const columnPadding =
+		isSelected && 'none' === padding
+			? styles[ 'column__padding-none-is-selected' ]
+			: styles[ 'column__padding-' + padding ];
+
+	const appenderStyle = hasChildren
+		? styles[ 'column__appender-has-children' ]
+		: styles.column__appender;
+
+	return (
+		<>
+			<View style={ [ columnPadding, calculatedColumnStyles ] }>
 				<InnerBlocks
 					templateLock={ false }
-					renderAppender={ this.props.hasChildBlocks
-						? undefined
-						: () => <InnerBlocks.ButtonBlockAppender />
+					renderAppender={
+						! hasChildren || isSelected
+							? () => (
+									<View
+										style={
+											isFullWidth( parentAlign )
+												? appenderStyle
+												: [
+														appenderStyle,
+														styles[
+															'column__appender-not-full-width'
+														],
+												  ]
+										}
+									>
+										<InnerBlocks.ButtonBlockAppender />
+									</View>
+							  )
+							: undefined
 					}
+					parentWidth={ calculatedColumnStyles.width }
+					blockWidth={ calculatedColumnStyles.width }
 				/>
 			</View>
-		);
-	}
+			<InspectorControls>
+				<PanelBody title={ __( 'Column Settings', 'layout-grid' ) }>
+					<BottomSheetSelectControl
+						label={ __( 'Padding', 'layout-grid' ) }
+						value={ padding }
+						onChange={ ( newValue ) =>
+							setAttributes( { padding: newValue } )
+						}
+						options={ getPaddingValues() }
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
+		</>
+	);
 }
 
-export default Edit;
+export default compose(
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientId,
+			getBlocks,
+			getBlockOrder,
+			getBlockAttributes,
+		} = select( blockEditorStore );
+
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const isSelected = selectedBlockClientId === clientId;
+
+		const parentId = getBlockRootClientId( clientId );
+		const hasChildren = !! getBlockCount( clientId );
+		const isParentSelected =
+			selectedBlockClientId && selectedBlockClientId === parentId;
+
+		const blockOrder = getBlockOrder( parentId );
+
+		const selectedColumnIndex = blockOrder.indexOf( clientId );
+		const columns = getBlocks( parentId );
+
+		const parentAlign = getBlockAttributes( parentId )?.align;
+		const parentColumnCount = getBlockCount( parentId );
+
+		return {
+			hasChildren,
+			isParentSelected,
+			isSelected,
+			selectedColumnIndex,
+			columns,
+			parentAlign,
+			parentColumnCount,
+		};
+	} ),
+	withUpdateAlignment(),
+	withViewportMatch( { isMobile: '< small', isTablet: '< large' } )
+)( ColumnsEdit );

blocks/layout-grid/src/grid-column/edit.native.scss

@@ -0,0 +1,54 @@
+.column__placeholder {
+	flex: 1;
+	padding: $block-selected-to-content;
+	background-color: $white;
+	border: $border-width dashed $gray;
+	border-radius: 4px;
+}
+
+.column__placeholder-dark {	
+	background-color: $black;
+	border: $border-width dashed $gray-70;
+}
+
+.column__placeholder-not-selected {
+	padding-top: $block-selected-to-content;
+}
+
+.column__appender {
+	margin-left: 8px;
+	margin-right: 8px;
+	margin-bottom: -10px; 
+}
+
+.column__appender-has-children {
+	margin-left: 16px;
+	margin-right: 16px;
+	margin-bottom: 6px; 
+}
+
+.column__appender-not-full-width {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.column__padding-none {
+	padding: 0;
+}
+/* Add extra space to the bottom of the column block make sure that the there is enough space between column block and the settings cog. */
+.column__padding-none-is-selected {
+	padding: 0 0 10px;
+}
+
+.column__padding-small {
+	padding: 10px 8px 10px; 
+}
+.column__padding-medium {
+	padding: 16px;
+}
+.column__padding-large {
+	padding: 24px;
+}
+.column__padding-huge {
+	padding: 48px;
+}

blocks/layout-grid/src/grid-column/hooks/with-update-alignment.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { withDispatch } from '@wordpress/data';
+
+export function withUpdateAlignment() {
+	return withDispatch( ( dispatch, ownProps, registry ) => {
+		return {
+			updateAlignment( verticalAlignment ) {
+				const { clientId, setAttributes } = ownProps;
+				const { updateBlockAttributes } = dispatch(
+					'core/block-editor'
+				);
+				const { getBlockRootClientId } = registry.select(
+					'core/block-editor'
+				);
+
+				// Update own alignment.
+				setAttributes( { verticalAlignment } );
+
+				// Reset Parent Columns Block
+				const rootClientId = getBlockRootClientId( clientId );
+				updateBlockAttributes( rootClientId, {
+					verticalAlignment: null,
+				} );
+			},
+		};
+	} );
+}