From e15452f897418231b79ca46ea4202513b199bff7 Mon Sep 17 00:00:00 2001
From: spelkey-ucd <spelkey@ucdavis.edu>
Date: Thu, 8 Feb 2024 13:20:49 -0500
Subject: [PATCH] #281

---
 src/editor/lib/blocks/index.js                |  4 ++-
 .../blocks/ucd-theme-layout-gutters/edit.js   | 36 +++++++++++++++++++
 .../blocks/ucd-theme-layout-gutters/index.js  | 26 ++++++++++++++
 theme/includes/classes/blocks.php             |  1 +
 views/blocks/layout-gutters.twig              |  1 +
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/editor/lib/blocks/ucd-theme-layout-gutters/edit.js
 create mode 100644 src/editor/lib/blocks/ucd-theme-layout-gutters/index.js
 create mode 100644 views/blocks/layout-gutters.twig

diff --git a/src/editor/lib/blocks/index.js b/src/editor/lib/blocks/index.js
index 334ab1d..fff06b6 100644
--- a/src/editor/lib/blocks/index.js
+++ b/src/editor/lib/blocks/index.js
@@ -22,6 +22,7 @@ import landerNav from "./ucd-theme-lander-nav";
 import layoutColumn from "./ucd-theme-layout-column";
 import layoutColumns from "./ucd-theme-layout-columns";
 import layoutContainer from "./ucd-theme-layout-container";
+import layoutGutters from "./ucd-theme-layout-gutters";
 import layoutBasic from "./ucd-theme-layout-basic";
 import layoutShrink from "./ucd-theme-layout-shrink";
 import layoutQuad from "./ucd-theme-layout-quad";
@@ -78,6 +79,7 @@ export default [
   layoutColumn,
   layoutColumns,
   layoutContainer,
+  layoutGutters,
   layoutBasic,
   layoutShrink,
   layoutQuad,
@@ -108,4 +110,4 @@ export default [
   trumba,
   trumbaUpcoming,
   trumbaFilter
-];
\ No newline at end of file
+];
diff --git a/src/editor/lib/blocks/ucd-theme-layout-gutters/edit.js b/src/editor/lib/blocks/ucd-theme-layout-gutters/edit.js
new file mode 100644
index 0000000..40151f0
--- /dev/null
+++ b/src/editor/lib/blocks/ucd-theme-layout-gutters/edit.js
@@ -0,0 +1,36 @@
+import { html, UCDIcons } from "../../utils";
+import {
+  useBlockProps,
+  BlockControls,
+  useInnerBlocksProps
+} from '@wordpress/block-editor';
+import { Fragment } from "@wordpress/element";
+import { ToolbarButton } from '@wordpress/components';
+
+export default ( props ) => {
+  const { attributes, setAttributes } = props;
+
+  const classes = attributes.narrow ? 'l-gutter--narrow' : 'l-gutter';
+
+  const blockProps = useBlockProps( {
+    className: classes
+  } );
+
+  const innerBlocksProps = useInnerBlocksProps( blockProps, {
+    templateLock: false,
+  } );
+
+  return html`
+    <${Fragment}>
+      <${BlockControls} group="block">
+      <${ToolbarButton}
+        icon=${UCDIcons.renderPublic('fa-minimize')}
+        onClick=${ () => {setAttributes({'narrow': !attributes.narrow})}}
+        isPressed=${attributes.narrow}
+        label="Toggle 'narrow' setting"/>
+      </${BlockControls}>
+      <div ...${ innerBlocksProps } >
+      </div>
+    </${Fragment}>
+  `;
+}
diff --git a/src/editor/lib/blocks/ucd-theme-layout-gutters/index.js b/src/editor/lib/blocks/ucd-theme-layout-gutters/index.js
new file mode 100644
index 0000000..99214d0
--- /dev/null
+++ b/src/editor/lib/blocks/ucd-theme-layout-gutters/index.js
@@ -0,0 +1,26 @@
+import { UCDIcons, Save } from "../../utils";
+import Edit from './edit';
+
+const name = 'ucd-theme/layout-gutters';
+const settings = {
+  api_version: 2,
+	title: "Gutters",
+	description: "Adds spacing to the left and right of the content.",
+	icon: UCDIcons.renderPublic('fa-arrows-left-right-to-line'),
+	category: 'ucd-layout',
+	keywords: [ 'gutter', 'margin', 'left', 'right' ],
+  supports: {
+    "html": false,
+    "customClassName": false
+  },
+  attributes: {
+    narrow: {
+      type: 'boolean',
+      default: false
+    }
+  },
+  edit: Edit,
+  save: Save
+};
+
+export default { name, settings };
diff --git a/theme/includes/classes/blocks.php b/theme/includes/classes/blocks.php
index 6fb741e..dfe0244 100644
--- a/theme/includes/classes/blocks.php
+++ b/theme/includes/classes/blocks.php
@@ -167,6 +167,7 @@ function __construct($editor_script_slug, $settings=array()) {
     "ucd-theme/column" => array("twig" => "@ucd/blocks/layout-column.twig"),
     "ucd-theme/layout-columns" => array("twig" => "@ucd/blocks/layout-columns.twig"),
     "ucd-theme/layout-container" => array("twig" => "@ucd/blocks/layout-container.twig"),
+    "ucd-theme/layout-gutters" => ['twig' => "@ucd/blocks/layout-gutters.twig"],
     "ucd-theme/layout-shrink" => array("twig" => "@ucd/blocks/layout-shrink.twig"),
     "ucd-theme/layout-quad" => array("twig" => "@ucd/blocks/layout-quad.twig"),
     "ucd-theme/manual-subnav" => array(
diff --git a/views/blocks/layout-gutters.twig b/views/blocks/layout-gutters.twig
new file mode 100644
index 0000000..6f7f492
--- /dev/null
+++ b/views/blocks/layout-gutters.twig
@@ -0,0 +1 @@
+<div class="{{attributes.narrow ? 'l-gutter--narrow' : 'l-gutter'}}">{{content}}</div>