#281

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
-];
+];

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}>
+  `;
+}

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 };

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(

views/blocks/layout-gutters.twig

@@ -0,0 +1 @@
+<div class="{{attributes.narrow ? 'l-gutter--narrow' : 'l-gutter'}}">{{content}}</div>