part 2 spacers

solidbunch · Dec 18, 2023 · 016561b · 016561b
1 parent 207b3ec
commit 016561b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 21 deletions.
diff --git a/blocks/Container/block.json b/blocks/Container/block.json
@@ -33,5 +33,5 @@
   },
   "editorScript": "file:build/index.js",
   "editorStyle": "file:build/editor.css",
-  "style": ""
+  "style": "file:build/style.css"
 }
diff --git a/blocks/Container/src/index.jsx b/blocks/Container/src/index.jsx
@@ -10,12 +10,24 @@ const { registerBlockType } = wp.blocks;
 const { useSelect } = wp.data;
 const { InspectorControls, useBlockProps, InnerBlocks } = wp.blockEditor;
 const { PanelBody, SelectControl, RangeControl, CheckboxControl } = wp.components;
-const numberOfGrid = 6;
+const numberOfGrid = 5;
 const spacers = ['m', 'p'];
 const spacersName = ['t', 'b', 'e', 's'];
 registerBlockType(
   metadata,
   {
+    getEditWrapperProps(attributes) {
+      const { size } = attributes;
+      const classes = [];
+      Object.values(size).forEach((item) => {
+        if (item.valueRange) {
+          Object.keys(item.valueRange).forEach(i => {
+            classes.push(`${i}-${item.valueRange[i]}`);
+          });
+        }
+      });
+      return { className: classes.join(' ') };
+    },
     edit: props => {
       const { attributes, setAttributes, clientId } = props;
 
@@ -28,7 +40,7 @@ registerBlockType(
           hasChildBlocks: getBlockOrder(clientId).length > 0,
         };
       });
-      console.log(attributes);
+
       return [
         <InspectorControls key="controls">
           <PanelBody title="Container responsive type">
@@ -53,53 +65,81 @@ registerBlockType(
           <PanelBody title="Spacers">
             {Object.keys(attributes.size).map((breakpoint) => (
 
-              <div key={breakpoint} title={`breakpoint settings - ${breakpoint}`} className={`box_breakpoint ${attributes.size[breakpoint].mod !== undefined && attributes.size[breakpoint].mod !== '' ? 'active' : ''}`}>
+              <div key={breakpoint} title={`breakpoint settings - ${breakpoint}`} className={`box_breakpoint ${attributes.size[breakpoint].valueRange !== undefined && attributes.size[breakpoint].valueRange !== '' ? 'active' : ''}`}>
                 <CheckboxControl
                   label={`Enable ${breakpoint}`}
                   checked={
-                    attributes.size && attributes.size[breakpoint].mod !== undefined && attributes.size[breakpoint].mod !== ""
+                    attributes.size && attributes.size[breakpoint].valueRange !== undefined && attributes.size[breakpoint].valueRange !== ""
                   }
                   onChange={(isChecked) => {
                     const sizeObject = { ...attributes.size };
                     if (isChecked) {
-                      sizeObject[breakpoint] = { ...sizeObject[breakpoint], mod: "default" };
+                      sizeObject[breakpoint] = { ...sizeObject[breakpoint], valueRange: {} };
                     } else {
-                      sizeObject[breakpoint] = { ...sizeObject[breakpoint], mod: "" };
+                      // sizeObject[breakpoint] = { ...sizeObject[breakpoint], valueRange: "" };
+                      delete sizeObject[breakpoint].valueRange;
                     }
                     setAttributes({ ...attributes, size: sizeObject });
                   }}
                 />
 
-                {attributes.size && attributes.size[breakpoint].mod !== undefined && attributes.size[breakpoint].mod !== "" && (
+                {attributes.size && attributes.size[breakpoint].valueRange !== undefined && attributes.size[breakpoint].valueRange !== "" && (
                   <>
                     {spacers.map((spacer, index) => (
                       spacersName.map((spacerName, innerIndex) => {
                         const uniqueKey = `${spacer}${spacerName}-${breakpoint}`;
                         return (
                           <RangeControl
                             key={uniqueKey}
-                            label={`${spacer}${spacerName}`}
+                            allowReset={false}
+                            label={
+                              (() => {
+                                let labelValue;
+                                if (attributes.size[breakpoint]?.valueRange?.[uniqueKey] !== undefined) {
+                                  if (attributes.size[breakpoint].valueRange[uniqueKey] === (numberOfGrid + 1)) {
+                                    labelValue = "auto";
+                                  } else {
+                                    labelValue = attributes.size[breakpoint].valueRange[uniqueKey];
+                                  }
+                                } else {
+                                  labelValue = "none";
+                                }
+                                return `${uniqueKey}-${labelValue}`;
+                              })()
+                            }
+
+
                             value={
                               (() => {
-                                if (attributes.size[breakpoint]?.valueRange !== undefined) {
-                                  return attributes.size[breakpoint].valueRange[uniqueKey] || 0;
+                                if (attributes.size[breakpoint]?.valueRange?.[uniqueKey] !== undefined) {
+                                  return attributes.size[breakpoint].valueRange[uniqueKey];
                                 }
-                                return attributes.size[breakpoint].valueRange = { [uniqueKey]: 0 };
+                                return -1;
                               })()
                             }
+
                             onChange={value => {
                               const sizeObject = { ...attributes.size };
-                              sizeObject[breakpoint] = {
-                                ...sizeObject[breakpoint],
-                                valueRange: {
-                                  ...sizeObject[breakpoint].valueRange,
-                                  [uniqueKey]: value,
-                                },
-                              };
+
+                              if (value === -1) {
+
+                                delete sizeObject[breakpoint].valueRange[uniqueKey];
+                              } else {
+
+                                sizeObject[breakpoint] = {
+                                  ...sizeObject[breakpoint],
+                                  valueRange: {
+                                    ...sizeObject[breakpoint].valueRange,
+
+                                    [uniqueKey]: value,
+                                  },
+                                };
+                              }
                               setAttributes({ ...attributes, size: sizeObject });
                             }}
-                            min={0}
-                            max={numberOfGrid}
+
+                            min={-1}
+                            max={numberOfGrid + 1}
                             {...props}
                           />
                         );