Merge pull request #8 from elpuas/feature/add-grid-styles

Feature/Add Grid Layout

README.md

@@ -5,7 +5,7 @@
 - Contributors: [ElPuas Digital Crafts](https://elpuas.com)
 - Tags: block
 - Tested up to: 6.1.1
-- Stable tag: 1.0.2
+- Stable tag: 2.0.0
 - License: GPL-2.0-or-later
 - License URI:[https://www.gnu.org/licenses/gpl-2.0.html](https://www.gnu.org/licenses/gpl-2.0.html)
 
@@ -32,26 +32,28 @@
 3. Use the Gridify block settings to easily build grids.
 ![Block Settings](https://user-images.githubusercontent.com/3707088/210089256-4ea04000-a6a0-4597-aca9-5552fd084716.jpg)
 
-4. Open the Chrome Inspector tools to review your layout.
-![Block Settings](https://user-images.githubusercontent.com/3707088/210089258-4d3a6dba-9ed3-4558-9aa8-7ae2df4fafc7.jpg)
-
-5. Use the Gridify Block settings to move items across the grid.
+4. Use the Gridify Block settings to move items across the grid.
 ![Block Settings](https://user-images.githubusercontent.com/3707088/210089259-5003fe2a-40c2-491d-a7d5-1631d445a8e5.jpg)
 
-6. Use the Gridify Block settings to freely arrange items inside the block and display them seamlessly on the frontend.
+5. Use the Gridify Block settings to freely arrange items inside the block and display them seamlessly on the frontend.
 ![Block Settings](https://user-images.githubusercontent.com/3707088/210089262-cd78a8ff-5250-4e7e-a450-2985b4dc300b.jpg)
 
 **NOTE**: Gridify items will always start at column and row 1. To see your grid layout in a more structured way, use the [Document overview / List](https://learn.wordpress.org/tutorial/how-to-use-the-list-view/) view option in the editor.
+Click the Show Grid Layout toggle to review your Grid.
 
 ## Changelog
 
+- 2.0.0
+    - - Add a Toggle Control to show your grid layout.
+    - - Change from inline styles to set the columns and rows, to use only CSS Variables.
+
 - 1.0.2
-  - - Update Readme file.
-  - - Lint Css and JS.
-  - - Add Banner to assets folder.
+    - - Update Readme file.
+    - - Lint Css and JS.
+    - - Add Banner to assets folder.
 
 - 1.0.1
-  - - Update Readme files and Description.
+    - - Update Readme files and Description.
 
 - 1.0.0
-  - - Release
+    - - Release

build/gridify/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '521b3d3a78185352d8a9');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9e90872c240cbd5bc167');

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gridify",
-	"version": "1.0.2",
+	"version": "2.0.0",
 	"description": "A block that allows you to set a CSS Grid layout and arrange child blocks within it.",
 	"author": "ElPuas Digital Crafts",
 	"license": "GPL-2.0-or-later",

readme.txt

@@ -28,14 +28,18 @@ A block that allows you to set a CSS Grid layout and arrange child blocks within
 
 3. Use the Gridify block settings to easily build grids.
 
-4. Open the Chrome Inspector tools to review your layout.
+4. Click the Show Grid Layout toggle to review your Grid.
 
 5. Use the Gridify Block settings to move items across the grid.
 
 6. Use the Gridify Block settings to freely arrange items inside the block and display them seamlessly on the frontend.
 
 == Changelog ==
 
+= 2.0.0 =
+* Add a Toggle Control to show your grid layout.
+* Change from inline styles to set the columns and rows, to use only CSS Variables.
+
 = 1.0.2 =
 * Update Tested Up WordPress version to Latest.
 

src/gridify/edit.js

@@ -12,7 +12,7 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
 import './editor.scss';
 
 /**
@@ -30,20 +30,25 @@ import './editor.scss';
  */
 export default function Edit( { attributes, setAttributes, clientId } ) {
 	const { column, row, stackOnMobile, mobileColumns, gap } = attributes;
+	const [ lineColor, setLineColor ] = useState( 'transparent' );
+	const [showLayout, setShowLayout] = useState(false);
 	const innerBlockCount = useSelect(
 		( select ) =>
 			select( 'core/block-editor' ).getBlock( clientId ).innerBlocks
 	);
 	const classes = useBlockProps().className;
 	const mobileClasses = stackOnMobile
 		? 'is-stack-on-mobile'
-		: `mobile-columns-${ mobileColumns }`;
+		: 'mobile-columns';
 	const styles = useBlockProps( {
 		style: {
-			display: 'grid',
-			gridTemplateColumns: `repeat(${ column }, 1fr)`,
-			gridTemplateRows: `repeat(${ row }, 1fr)`,
-			gap: `${ gap }px`,
+			'--grid-columns': `${ column }`,
+			'--grid-rows': `${ row }`,
+			'--grid-gap': `${ gap }px`,
+			'--cols': `${ column }`,
+			'--rows': `${ row }`,
+			'--line-color': `${ lineColor }`,
+			'--mobile-columns': `${ mobileColumns }`,
 		},
 	} );
 
@@ -124,6 +129,19 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 						) }
 					</PanelBody>
 				</Panel>
+				<Panel>
+					<PanelBody>
+						<ToggleControl
+							label={ __( 'Show Grid Layout', 'gridify' ) }
+							checked={ showLayout }
+							onChange={ () => {
+									setShowLayout(!showLayout);
+									setLineColor(showLayout ? 'transparent' : 'rgba(0, 0, 0, .08)');
+								}
+							}
+						/>
+					</PanelBody>
+				</Panel>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
 		</Fragment>

src/gridify/editor.scss

@@ -4,3 +4,20 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+:root {
+	--cols: 1;
+	--rows: 1;
+	--line-color: rgba(0, 0, 0, .08);
+}
+
+.wp-block-elpuas-gridify {
+	border: 1px solid var(--line-color);
+	background:
+		linear-gradient(-90deg, var(--line-color) 1px, transparent 1px),
+		linear-gradient(var(--line-color) 1px, transparent 1px),
+		transparent;
+	background-size:
+		calc(100% / var(--cols)) calc(100% / var(--cols)),
+		calc(100% / var(--rows)) calc(100% / var(--rows)),
+}
+

src/gridify/save.js

@@ -4,14 +4,14 @@ export default function Save( { attributes } ) {
 	const { column, row, stackOnMobile, mobileColumns, gap } = attributes;
 	const mobileClasses = stackOnMobile
 		? 'is-stack-on-mobile'
-		: `mobile-columns-${ mobileColumns }`;
+		: 'mobile-columns';
 	const blockProps = useBlockProps.save( {
 		className: `elpuas-gridify ${ mobileClasses }`,
 		style: {
-			display: 'grid',
-			gridTemplateColumns: `repeat(${ column }, 1fr)`,
-			gridTemplateRows: `repeat(${ row }, 1fr)`,
-			gap: `${ gap }px`,
+			'--grid-columns': `${ column }`,
+			'--grid-rows': `${ row }`,
+			'--grid-gap': `${ gap }px`,
+			'--mobile-columns': `${ mobileColumns }`,
 		},
 	} );
 

src/gridify/style.scss

@@ -5,28 +5,26 @@
  * Replace them with your own styles or remove the file completely.
  */
 
+:root {
+	--mobile-columns: 1;
+	--grid-columns: 2;
+	--grid-rows: 2;
+	--grid-gap: 16px;
+}
+
 .wp-block-elpuas-gridify {
+	display: grid;
+	grid-template-columns: repeat( var(--grid-columns), 1fr );
+	grid-template-rows: repeat( var(--grid-rows), 1fr );
+	gap: var(--grid-gap);
 
 	@media screen and (max-width: 768px) {
-
 		&.is-stack-on-mobile {
-			grid-template-columns: repeat(1, 1fr) !important;
-		}
-
-		&.mobile-columns-1 {
-			grid-template-columns: repeat(1, 1fr) !important;
-		}
-
-		&.mobile-columns-2 {
-			grid-template-columns: repeat(2, 1fr) !important;
-		}
-
-		&.mobile-columns-3 {
-			grid-template-columns: repeat(3, 1fr) !important;
+			grid-template-columns: repeat(1, 1fr);
 		}
 
-		&.mobile-columns-4 {
-			grid-template-columns: repeat(4, 1fr) !important;
+		&.mobile-columns {
+			grid-template-columns: repeat( var(--mobile-columns), 1fr);
 		}
 	}
 }