feat: added totalColumns and totalRows to Twig and GraphQL

Author: wbrowar

CHANGELOG.md

@@ -4,16 +4,17 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## 1.3.0 - 2022-12-04
+## 2.0.0 - 2022-12-05
 ### Added
 - Added field setting to add icons to Little Layout field boxes.
 - Added field setting to set the height and width of Little Layout field boxes, using CSS values.
-- Updated doc blocks and added return types to all PHP files.
+- Added ability to get column and row settings from a field in your Twig templates and GraphQL queries.
 
 ### Changed
 - Improved performance by refactoring Little Layout field from a Vue app to a Web Component.
 - Refactored field settings from a Vue app to a Web Component.
 - Changed layout boxes in field from clickable div elements to `button` elements.
+- Updated doc blocks and added return types to all PHP files.
 - Updated JS bundler to Vite 5.x.
 - Bumped NodeJS to Node 20.x.
 

README.md

@@ -44,18 +44,20 @@ Use the Empty Layout setting to determine if authors can clear out the layouts t
 
 The following data can be retrieved in your Twig- or GraphQL-based templates:
 
-| Property | Description |
-|---|---|
-| **empty** | Determine if field has a value. |
-| **gridColumnStart** | Value for CSS Grid’s `grid-column-start` and `grid-column` properties. |
-| **gridColumnEnd** | Value for CSS Grid’s `grid-column-end` and `grid-column` properties. |
-| **gridRowStart** | Value for CSS Grid’s `grid-row-start` and `grid-row` properties. |
-| **gridRowEnd** | Value for CSS Grid’s `grid-row-end` and `grid-row` properties. |
-| **gridColumnSpan** | Value for CSS Grid’s `grid-column` property. |
-| **gridRowSpan** | Value for CSS Grid’s `grid-row` property. |
-| **selectedColumns** | Array of columns selected in the layout field. |
-| **selectedRows** | Array of rows selected in the layout field. |
-| **selectedCoordinates** | Array of coordinates* selected in the layout field. |
+| Property                | Description                                                            |
+|-------------------------|------------------------------------------------------------------------|
+| **empty**               | Determine if field has a value.                                        |
+| **gridColumnStart**     | Value for CSS Grid’s `grid-column-start` and `grid-column` properties. |
+| **gridColumnEnd**       | Value for CSS Grid’s `grid-column-end` and `grid-column` properties.   |
+| **gridRowStart**        | Value for CSS Grid’s `grid-row-start` and `grid-row` properties.       |
+| **gridRowEnd**          | Value for CSS Grid’s `grid-row-end` and `grid-row` properties.         |
+| **gridColumnSpan**      | Value for CSS Grid’s `grid-column` property.                           | 
+| **gridRowSpan**         | Value for CSS Grid’s `grid-row` property.                              |
+| **selectedColumns**     | Array of columns selected in the layout field.                         |
+| **selectedRows**        | Array of rows selected in the layout field.                            |
+| **selectedCoordinates** | Array of coordinates* selected in the layout field.                    |
+| **totalColumns**        | The columns setting for this field.                                    |
+| **totalRows**           | The rows setting for this field.                                       |
 
 _*Coordinates are formatted in `'x|y'` format._
 
@@ -105,7 +107,7 @@ With CSS that looks like this:
 If you use a CSS framework, like Tailwind CSS, you could do something like this:
 
 ```twig
-<div class="col-start-{{ element.fieldHandle.gridColumnStart }} col-span-{{ element.fieldHandle.gridColumnSpan }} row-start-{{ element.fieldHandle.gridRowStart }} row-span-{{ element.fieldHandle.gridRowSpan }}"></div>
+<div class="col-start-[{{ element.fieldHandle.gridColumnStart }}] col-span-[{{ element.fieldHandle.gridColumnSpan }}] row-start-[{{ element.fieldHandle.gridRowStart }}] row-span-[{{ element.fieldHandle.gridRowSpan }}]"></div>
 ```
 
 If your Twig template files are included in your Tailwind confguration’s `content` patterns, you may prefer to preserve full class names using logic and a lookup table:

composer.json

@@ -2,7 +2,7 @@
     "name": "wbrowar/craft-little-layout",
     "description": "A compact, visual way to lay out fields, elements, and Matrix blocks.",
     "type": "craft-plugin",
-    "version": "1.2.0",
+    "version": "2.0.0",
     "keywords": [
         "craft",
         "cms",

src/fields/Layout.php

@@ -202,10 +202,18 @@ public function normalizeValue($value, ?ElementInterface $element = null): Layou
             $value = Json::decodeIfJson($value);
         }
         if (\is_array($value)) {
+            // Field data passed to Twig and GraphQL.
+
+            $settings = $this->getSettings();
+
             $model = new LayoutModel($value);
+            $model->columns = $settings['cols'];
+            $model->rows = $settings['rows'];
         } elseif ($value instanceof LayoutModel) {
+            // Field data used when saving the field.
             $model = $value;
         } else {
+            // Field data used in field inputs.
             $model = new LayoutModel(['raw' => $value]);
         }
 

src/gql/types/LittleLayoutType.php

@@ -67,6 +67,16 @@ public static function getFieldDefinitions(): array
                 'type' => Type::listOf(Type::string()),
                 'description' => 'Array of coordinates selected in the layout field. Coordinates are formatted in `x|y` format.',
             ],
+            'totalColumns' => [
+                'name' => 'totalColumns',
+                'type' => Type::int(),
+                'description' => 'The columns setting for this field.',
+            ],
+            'totalRows' => [
+                'name' => 'totalRows',
+                'type' => Type::int(),
+                'description' => 'The rows setting for this field.',
+            ],
         ];
     }
 }

src/models/LayoutModel.php

@@ -22,11 +22,21 @@ class LayoutModel extends Model
     // Public Properties
     // =========================================================================
 
+    /**
+     * @var int
+     */
+    public $columns = 1;
+
     /**
      * @var string
      */
     public $raw = '';
 
+    /**
+     * @var int
+     */
+    public $rows = 1;
+
     // Public Methods
     // =========================================================================
 
@@ -151,6 +161,26 @@ public function getSelectedRows():array
         return [];
     }
 
+    /**
+     * The columns setting for this field.
+     *
+     * @return int
+     */
+    public function getTotalColumns(): int
+    {
+        return $this->columns;
+    }
+
+    /**
+     * The rows setting for this field.
+     *
+     * @return int
+     */
+    public function getTotalRows(): int
+    {
+        return $this->rows;
+    }
+
     /**
      * Array of coordinates selected in the layout field.
      * Coordinates are formatted in `x|y` format.

src/templates/_components/fields/Layout_input.twig

@@ -42,4 +42,4 @@
         name: name,
         value: startingValue,
     }) }}
-</little-layout-field>
+</little-layout-field>