From 706f04d91d1792673d68896c19580d5fc5bffa7a Mon Sep 17 00:00:00 2001
From: Steve Ross <steve.ds.ross@gmail.com>
Date: Fri, 19 Dec 2025 12:29:38 +0000
Subject: [PATCH] add css class name helper functions for blocks

---
 .../resources/js/lib/blocks/classNames.js     | 39 +++++++++++++++++++
 .../js/lib/blocks/cssClassContainer.js        |  0
 .../resources/views/blocks/article/index.jsx  | 33 ++++++++++------
 3 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 web/app/themes/badegg/resources/js/lib/blocks/classNames.js
 delete mode 100644 web/app/themes/badegg/resources/js/lib/blocks/cssClassContainer.js

diff --git a/web/app/themes/badegg/resources/js/lib/blocks/classNames.js b/web/app/themes/badegg/resources/js/lib/blocks/classNames.js
new file mode 100644
index 0000000..bf0e541
--- /dev/null
+++ b/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;
+}
diff --git a/web/app/themes/badegg/resources/js/lib/blocks/cssClassContainer.js b/web/app/themes/badegg/resources/js/lib/blocks/cssClassContainer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/web/app/themes/badegg/resources/views/blocks/article/index.jsx b/web/app/themes/badegg/resources/views/blocks/article/index.jsx
index 1c7849c..8757304 100644
--- a/web/app/themes/badegg/resources/views/blocks/article/index.jsx
+++ b/web/app/themes/badegg/resources/views/blocks/article/index.jsx
@@ -18,10 +18,12 @@ import {
   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 }) {
@@ -40,18 +42,25 @@ registerBlockType(metadata.name, {
     ] = useState( [] );
 
     useEffect( () => {
-        apiFetch( { path: '/badegg/v1/blocks/container_width' } )
-            .then( ( data ) => {
-                setContainerWidthOptions( data );
-                setIsLoading( false );
-            } )
-            .catch( () => {
-                setContainerWidthOptions( [] );
-                setIsLoading( false );
-            } );
+      apiFetch( { path: '/badegg/v1/blocks/container-widths' } )
+        .then( ( data ) => {
+          setContainerWidthOptions( data );
+          setIsLoading( false );
+        } )
+        .catch( () => {
+          setContainerWidthOptions( [] );
+          setIsLoading( false );
+        } );
     }, [] );
 
-    console.log(attributes);
+    blockProps.className = sectionClassNames(
+      attributes,
+      blockProps.className,
+      [
+        'wysiwyg'
+      ]).join(' ');
+
+    console.log(blockProps.className);
 
     return (
       <div { ...blockProps }>
@@ -87,7 +96,7 @@ registerBlockType(metadata.name, {
             </PanelBody>
           </Panel>
         </InspectorControls>
-        <div className={`container container-${ attributes.container_width } align-${ attributes.alignment }`}>
+        <div className={ containerClassNames(attributes).join(' ') }>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -106,7 +115,7 @@ registerBlockType(metadata.name, {
   save({ attributes }) {
     return (
       <div { ...useBlockProps.save() }>
-        <div className={`container container-${attributes.container_width} align-${ attributes.alignment }`}>
+        <div className={ containerClassNames(attributes).join() }>
           <InnerBlocks.Content />
         </div>
       </div>