Merge pull request #161 from Automattic/add/layout-grid-render-mobile…

…-mode Layout Grid: Enable mobile rendering in mobile editor.
Automattic · Feb 4, 2021 · 1974e98 · 1974e98
2 parents 6c8cd5f + ea1bde6
commit 1974e98
Show file tree

Hide file tree

Showing 6 changed files with 374 additions and 132 deletions.
diff --git a/blocks/layout-grid/front.scss b/blocks/layout-grid/front.scss
@@ -135,5 +135,5 @@
 
 // Ensure inner blocks with deliberate overflows are still constrained to column.
 .wp-block-jetpack-layout-grid-column {
-	max-width: 100%; 
+	max-width: 100%;
 }
diff --git a/blocks/layout-grid/src/constants.js b/blocks/layout-grid/src/constants.js
@@ -14,15 +14,17 @@ function getSpacingValues() {
 	];
 }
 
-export const getPaddingValues = () => (	[
-	{ value: 'none', label: __( 'No padding', 'layout-grid' ) },
-].concat( getSpacingValues() ) );
+export const getPaddingValues = () =>
+	[ { value: 'none', label: __( 'No padding', 'layout-grid' ) } ].concat(
+		getSpacingValues()
+	);
 
-export const getGutterValues = () => ( [
-	{ value: 'none', label: __( 'No gutter', 'layout-grid' ) },
-].concat( getSpacingValues() ) );
+export const getGutterValues = () =>
+	[ { value: 'none', label: __( 'No gutter', 'layout-grid' ) } ].concat(
+		getSpacingValues()
+	);
 
-export const getColumns = () => ( [
+export const getColumns = () => [
 	{
 		label: __( '1 column', 'layout-grid' ),
 		value: 1,
@@ -39,17 +41,29 @@ export const getColumns = () => ( [
 		label: __( '4 columns', 'layout-grid' ),
 		value: 4,
 	},
-] );
+];
 
 export const DEVICE_DESKTOP = 'Desktop';
 export const DEVICE_TABLET = 'Tablet';
 export const DEVICE_MOBILE = 'Mobile';
 
-export const getLayouts = () => ( [
-	{ value: DEVICE_DESKTOP, label: __( 'Desktop', 'layout-grid' ), icon: desktop },
-	{ value: DEVICE_TABLET, label: __( 'Tablet', 'layout-grid' ), icon: tablet  },
-	{ value: DEVICE_MOBILE, label: __( 'Mobile', 'layout-grid' ), icon: mobile },
-] );
+export const getLayouts = () => [
+	{
+		value: DEVICE_DESKTOP,
+		label: __( 'Desktop', 'layout-grid' ),
+		icon: desktop,
+	},
+	{
+		value: DEVICE_TABLET,
+		label: __( 'Tablet', 'layout-grid' ),
+		icon: tablet,
+	},
+	{
+		value: DEVICE_MOBILE,
+		label: __( 'Mobile', 'layout-grid' ),
+		icon: mobile,
+	},
+];
 
 export const MAX_COLUMNS = 4;