add css class name helper functions for blocks

web/app/themes/badegg/app/Utilities/RestAPI.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Utilities;
+
+class RestAPI
+{
+    public function __construct()
+    {
+        add_action( 'rest_api_init', [$this, 'blocks']);
+    }
+
+    public function blocks( )
+    {
+        $restBase = 'badegg/v1';
+
+        register_rest_route($restBase, '/blocks/container-widths', [
+            'methods' => 'GET',
+            'callback' => [ $this, 'containerWidths'],
+            'permission_callback' => function(){
+                return true;
+            },
+        ]);
+    }
+
+    public function containerWidths()
+    {
+        $containerWidths = [
+            [ 'label' => __('Auto', 'badegg'),          'value' => 0        ],
+            [ 'label' => __('Narrow', 'badegg'),        'value' => 'narrow' ],
+            [ 'label' => __('Small', 'badegg'),         'value' => 'small'  ],
+            [ 'label' => __('Medium', 'badegg'),        'value' => 'medium' ],
+            [ 'label' => __('Large', 'badegg'),         'value' => 'large'  ],
+            [ 'label' => __('Edge to edge', 'badegg'),  'value' => 'full'   ],
+        ];
+
+        return rest_ensure_response($containerWidths);
+    }
+}

web/app/themes/badegg/functions.php

@@ -57,21 +57,7 @@ autoload_psr4('PostTypes');
 autoload_psr4('ACF');
 autoload_psr4('Utilities');
 autoload_psr4('Admin');
-autoload_psr4('Ajax');
 
-function autoload_psr4_blocks() {
-    $path = __dir__ . '/resources/views/acf-blocks/*';
-    $namespace = 'Blocks\\';
-
-    foreach(glob($path, GLOB_ONLYDIR) as $directory) {
-        $name = basename($directory);
-        $class = $namespace . $name . '\\' . $name;
-
-        new $class();
-    }
-}
-
-autoload_psr4_blocks();
 
 /*
 |--------------------------------------------------------------------------

web/app/themes/badegg/resources/css/editor.scss

@@ -20,20 +20,6 @@
 }
 
 .editor-visual-editor {
-  .wp-block {
-    max-width: none;
-  }
-
-  .is-root-container > .wp-block:not(.block-list-appender) {
-    margin: 0;
-  }
-
-  .block-list-appender {
-    width: 350px;
-    max-width: 90%;
-    margin: 1em auto;
-  }
-
   &__post-title-wrapper {
     position: sticky;
     top: 0;
@@ -43,26 +29,41 @@
     background: white;
     box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
   }
+}
 
-  .wp-block-post-title {
-    position: relative;
-    padding: 0.5rem;
-    border: 1px solid rgba(black, 0.3);
-    margin: 0;
+.editor-styles-wrapper {
+  background: colours.$grey-lightest;
 
-    &::before {
-      content: 'Page Title';
-      position: absolute;
-      top: -0.5rem;
-      left: 0.5rem;
-      color: rgba(black, 0.3);
-      font-size: 0.8rem;
-      display: block;
-      padding: 0 0.5rem;
-      margin: 0;
-      background: white;
-      line-height: 1;
-      font-weight: 400;
-    }
+  .block-list-appender {
+    width: 350px;
+    max-width: 90%;
+    margin: 1em auto;
   }
 }
+
+.wp-block-post-title {
+  position: relative;
+  padding: 0.5rem;
+  border: 1px solid rgba(black, 0.3);
+  margin: 0;
+
+  &::before {
+    content: 'Page Title';
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    color: rgba(black, 0.3);
+    font-size: 0.8rem;
+    display: block;
+    padding: 0 0.5rem;
+    margin: 0;
+    background: white;
+    line-height: 1;
+    font-weight: 400;
+  }
+}
+
+.is-root-container > .wp-block:not(.block-list-appender) {
+  max-width: none;
+  margin: 0;
+}

web/app/themes/badegg/resources/css/global/_typography.scss

@@ -142,11 +142,7 @@ hr {
 }
 
 .align {
-  &-centre {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: right;
-  }
+  &-left { text-align: left; }
+  &-centre, &-center { text-align: center; }
+  &-right { text-align: right; }
 }

web/app/themes/badegg/resources/js/lib/blocks/classNames.js

@@ -0,0 +1,39 @@
+export function containerClassNames(attributes, bgProps)
+{
+
+  let classNames = [
+    'container',
+  ];
+
+  if('container_width' in attributes)
+    classNames.push(`container-${attributes.container_width}`);
+
+  if('alignment' in attributes)
+    classNames.push(`align-${attributes.alignment}`);
+
+  return classNames;
+}
+
+export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
+{
+  defaultClasses = defaultClasses.split(' ');
+
+  let classNames = [
+    'section',
+  ];
+
+  if('padding_top'in attributes && !attributes.padding_top)
+    classNames.push('section-zero-top');
+
+  if('padding_bottom'in attributes && !attributes.padding_bottom)
+    classNames.push('section-zero-bottom');
+
+
+  // combine arrays
+  classNames = classNames.concat(defaultClasses).concat(extraClasses);
+
+  // remove duplicate items
+  classNames = [ ...new Set(classNames) ];
+
+  return classNames;
+}

web/app/themes/badegg/resources/views/blocks/acfdemo/block.json

@@ -1,4 +1,5 @@
 {
+  "apiVersion": 3,
   "name": "badegg/acfdemo",
   "title": "ACF Demo",
   "category": "badegg",

web/app/themes/badegg/resources/views/blocks/acfdemo/index.js

@@ -1,2 +1 @@
 // block.json's editorScript, loaded only in the block editor
-console.log('loaded: resources/views/blocks/acfdemo/index.js')

web/app/themes/badegg/resources/views/blocks/acfdemo/script.js

@@ -1,2 +1 @@
 // block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/acf-demo/script.js')

web/app/themes/badegg/resources/views/blocks/acfdemo/view.js

@@ -1,2 +1 @@
 // block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/acf-demo/view.js')

web/app/themes/badegg/resources/views/blocks/article/block.json

@@ -8,9 +8,25 @@
     "foreground": "#f58762"
   },
   "description": "A wrapper to contain core blocks",
+  "attributes": {
+    "container_width": {
+      "type": "string",
+      "default": 0
+    },
+    "alignment": {
+      "type": "string"
+    },
+    "padding_top": {
+      "type": "boolean",
+      "default": true
+    },
+    "padding_bottom": {
+      "type": "boolean",
+      "default": true
+    }
+  },
   "supports": {
     "html": true,
-    "align": ["wide", "full"],
     "color": {
       "background": true,
       "text": false

web/app/themes/badegg/resources/views/blocks/article/index.jsx

@@ -1,17 +1,102 @@
 // block.json's editorScript, loaded only in the block editor
 
+import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+import {
+  useBlockProps,
+  InnerBlocks,
+  InspectorControls,
+  BlockControls,
+  AlignmentToolbar,
+} from '@wordpress/block-editor';
+
+import {
+  Panel,
+  PanelBody,
+  PanelRow,
+  SelectControl,
+  ToggleControl,
+} from '@wordpress/components';
+
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
 import metadata from './block.json';
 import allowedBlocks from '../../../json/core-block-whitelist.json';
+import { containerClassNames, sectionClassNames } from '../../../js/lib/blocks/classNames';
 
 registerBlockType(metadata.name, {
   edit({ attributes, setAttributes }) {
     const blockProps = useBlockProps();
+    const [ isLoading, setIsLoading ] = useState( true );
+
+    const {
+      container_width,
+      alignment,
+      padding_top,
+      padding_bottom,
+    } = attributes;
+
+    const [
+      containerWidthOptions, setContainerWidthOptions,
+    ] = useState( [] );
+
+    useEffect( () => {
+      apiFetch( { path: '/badegg/v1/blocks/container-widths' } )
+        .then( ( data ) => {
+          setContainerWidthOptions( data );
+          setIsLoading( false );
+        } )
+        .catch( () => {
+          setContainerWidthOptions( [] );
+          setIsLoading( false );
+        } );
+    }, [] );
+
+    blockProps.className = sectionClassNames(
+      attributes,
+      blockProps.className,
+      [
+        'wysiwyg'
+      ]).join(' ');
+
+    console.log(blockProps.className);
 
     return (
       <div { ...blockProps }>
-        <div className="container">
+        <BlockControls>
+          <AlignmentToolbar
+            value={ alignment }
+            onChange={(value) => setAttributes({alignment: value})}
+          />
+        </BlockControls>
+        <InspectorControls>
+          <Panel>
+            <PanelBody title={ __("Settings", "badegg") }>
+              <SelectControl
+                label={ __("Container Width", "badegg") }
+                value={ container_width }
+                options={ containerWidthOptions }
+                onChange={ (value) => setAttributes({ container_width: value }) }
+                __next40pxDefaultSize={ true }
+                __nextHasNoMarginBottom={ true }
+              />
+              <ToggleControl
+                label={ __('Top Padding', 'badegg') }
+                checked={ padding_top }
+                onChange={(value) => setAttributes({ padding_top: value }) }
+                __nextHasNoMarginBottom
+              />
+              <ToggleControl
+                label={ __('Bottom Padding', 'badegg') }
+                checked={ padding_bottom }
+                onChange={(value) => setAttributes({ padding_bottom: value }) }
+                __nextHasNoMarginBottom
+              />
+            </PanelBody>
+          </Panel>
+        </InspectorControls>
+        <div className={ containerClassNames(attributes).join(' ') }>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -27,10 +112,10 @@ registerBlockType(metadata.name, {
       </div>
     );
   },
-  save() {
+  save({ attributes }) {
     return (
       <div { ...useBlockProps.save() }>
-        <div className="container">
+        <div className={ containerClassNames(attributes).join() }>
           <InnerBlocks.Content />
         </div>
       </div>

web/app/themes/badegg/resources/views/blocks/article/script.js

@@ -1,2 +1 @@
 // block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/article/script.js')

web/app/themes/badegg/resources/views/blocks/article/view.js

@@ -1,2 +1 @@
 // block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/article/view.js')

web/app/themes/badegg/resources/views/blocks/example/script.js

@@ -1,2 +1 @@
 // block.json's script, loaded in block editor and front end
-console.log('loaded: resources/views/blocks/example/script.js')

web/app/themes/badegg/resources/views/blocks/example/view.js

@@ -1,2 +1 @@
 // block.json's viewScript, applied on front end only
-console.log('loaded: resources/views/blocks/example/view.js')