Tweak: Add responsive grid defaults

tomusborne · Dec 10, 2024 · 5b7735b · 5b7735b
1 parent 6472502
commit 5b7735b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/blocks/element/index.js b/src/blocks/element/index.js
@@ -1,10 +1,13 @@
 import { registerBlockType, registerBlockVariation } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+
 import { Edit } from './edit';
 import metadata from './block.json';
 import { Save } from './save';
 import { getElementType } from './utils/getElementType';
 import { getIcon } from '@utils';
+import { mobileAtRule } from '@utils/mobileAtRule';
+
 import './editor.scss';
 
 registerBlockType( metadata, {
@@ -66,6 +69,11 @@ registerBlockVariation(
 			styles: {
 				display: 'grid',
 				gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+				columnGap: '1em',
+				rowGap: '1em',
+				[ mobileAtRule ]: {
+					gridTemplateColumns: '1fr',
+				},
 			},
 		},
 		innerBlocks: [

diff --git a/src/utils/mobileAtRule.jsx b/src/utils/mobileAtRule.jsx
@@ -0,0 +1,3 @@
+import { defaultAtRules } from '@edge22/styles-builder';
+
+export const mobileAtRule = defaultAtRules.find( ( rule ) => 'smallWidth' === rule.id )?.value ?? '@media (max-width:767px)';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { defaultAtRules } from '@edge22/styles-builder';

		export const mobileAtRule = defaultAtRules.find( ( rule ) => 'smallWidth' === rule.id )?.value ?? '@media (max-width:767px)';