@webikon/webentor-core 0.9.13 → 0.10.0

package/public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "__utils-PDaZ1Dn1.js": {
-    "file": "assets/_utils-PDaZ1Dn1.js",
+  "__utils-CzK6Vfiv.js": {
+    "file": "assets/_utils-CzK6Vfiv.js",
     "name": "_utils"
   },
   "resources/blocks/e-accordion/script.ts": {
@@ -28,12 +28,12 @@
     ]
   },
   "resources/blocks/e-table/script.ts": {
-    "file": "assets/resources/blocks/e-table/script-BIchbcPK.js",
+    "file": "assets/resources/blocks/e-table/script-C_Z50hjm.js",
     "name": "resources/blocks/e-table/script",
     "src": "resources/blocks/e-table/script.ts",
     "isEntry": true,
     "imports": [
-      "__utils-PDaZ1Dn1.js"
+      "__utils-CzK6Vfiv.js"
     ]
   },
   "resources/blocks/l-mobile-nav/style.css": {
@@ -55,12 +55,12 @@
     ]
   },
   "resources/core-components/slider/slider.script.ts": {
-    "file": "assets/sliderJs-Ch69_tVA.js",
+    "file": "assets/sliderJs-CyGnrv0Q.js",
     "name": "sliderJs",
     "src": "resources/core-components/slider/slider.script.ts",
     "isEntry": true,
     "imports": [
-      "__utils-PDaZ1Dn1.js"
+      "__utils-CzK6Vfiv.js"
     ]
   },
   "resources/core-components/slider/slider.style.css": {
@@ -73,16 +73,16 @@
     ]
   },
   "resources/scripts/editor.ts": {
-    "file": "assets/coreEditorJs-Cyc87wTo.js",
+    "file": "assets/coreEditorJs-DYd3ZopL.js",
     "name": "coreEditorJs",
     "src": "resources/scripts/editor.ts",
     "isEntry": true,
     "imports": [
-      "__utils-PDaZ1Dn1.js"
+      "__utils-CzK6Vfiv.js"
     ]
   },
   "resources/styles/app.css": {
-    "file": "assets/coreAppStyles-Dp0WYk4N.css",
+    "file": "assets/coreAppStyles-Bvp3emQy.css",
     "src": "resources/styles/app.css",
     "isEntry": true,
     "name": "coreAppStyles",
@@ -91,7 +91,7 @@
     ]
   },
   "resources/styles/editor.css": {
-    "file": "assets/coreEditorStyles-D8-nNpQG.css",
+    "file": "assets/coreEditorStyles-BzlB6eA_.css",
     "src": "resources/styles/editor.css",
     "isEntry": true,
     "name": "coreEditorStyles",

package/resources/blocks/e-accordion-group/block.json

@@ -12,7 +12,7 @@
       "type": "array",
       "default": null
     },
-    "display": {
+    "sizing": {
       "type": "object",
       "default": {
         "width": {
@@ -41,15 +41,17 @@
   "supports": {
     "anchor": true,
     "webentor": {
-      "display": {
-        "display": true,
+      "layout": {
+        "display": true
+      },
+      "sizing": {
         "minHeight": true,
         "width": true
       },
       "grid": true,
       "gridItem": true,
       "flexbox": true,
-      "flexboxItem": true,
+      "flexItem": true,
       "spacing": true
     }
   }

package/resources/blocks/e-gallery/block.json

@@ -44,7 +44,7 @@
       "type": "object",
       "default": {}
     },
-    "display": {
+    "layout": {
       "type": "object",
       "default": {
         "display": {
@@ -80,7 +80,7 @@
   "supports": {
     "webentor": {
       "spacing": true,
-      "display": {
+      "layout": {
         "display": true
       },
       "flexbox": true,

package/resources/blocks/e-gallery/e-gallery.block.tsx

@@ -191,6 +191,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Aspect Ratio', 'webentor')}
               value={attributes.aspectRatio}
+              __nextHasNoMarginBottom
               options={[
                 { label: 'Auto', value: 'auto' },
                 { label: 'Square', value: 'square' },
@@ -205,6 +206,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Object Fit', 'webentor')}
               value={attributes.objectFit}
+              __nextHasNoMarginBottom
               options={[
                 { label: 'None', value: 'none' },
                 { label: 'Fill', value: 'fill' },
@@ -222,6 +224,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
               <SelectControl
                 label={__('Object Position', 'webentor')}
                 value={attributes.objectPosition}
+                __nextHasNoMarginBottom
                 options={[
                   { label: 'Top', value: 'top' },
                   { label: 'Right Top', value: 'right-top' },
@@ -243,6 +246,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Image Size', 'webentor')}
               value={attributes.imageSize}
+              __nextHasNoMarginBottom
               options={imageSizeOptions}
               onChange={(imageSize) => setAttributes({ imageSize })}
               help={__(

package/resources/blocks/e-image/e-image.block.tsx

@@ -212,6 +212,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Aspect Ratio', 'webentor')}
               value={attributes.aspectRatio}
+              __nextHasNoMarginBottom
               options={[
                 { label: 'Auto', value: 'auto' },
                 { label: 'Square', value: 'square' },
@@ -226,6 +227,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Object Fit', 'webentor')}
               value={attributes.objectFit}
+              __nextHasNoMarginBottom
               options={[
                 { label: 'None', value: 'none' },
                 { label: 'Fill', value: 'fill' },
@@ -243,6 +245,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
               <SelectControl
                 label={__('Object Position', 'webentor')}
                 value={attributes.objectPosition}
+                __nextHasNoMarginBottom
                 options={[
                   { label: 'Top', value: 'top' },
                   { label: 'Right Top', value: 'right-top' },
@@ -264,6 +267,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Image Size', 'webentor')}
               value={attributes.imageSize}
+              __nextHasNoMarginBottom
               options={imageSizeOptions}
               onChange={(imageSize) => setAttributes({ imageSize })}
               help={__(

package/resources/blocks/e-slider/block.json

@@ -32,11 +32,12 @@
     },
     "webentor": {
       "spacing": true,
-      "display": true,
+      "layout": true,
+      "sizing": true,
       "grid": true,
       "gridItem": true,
       "flexbox": true,
-      "flexboxItem": true
+      "flexItem": true
     }
   }
 }

package/resources/blocks/e-tab-container/block.json

@@ -43,7 +43,8 @@
   },
   "supports": {
     "webentor": {
-      "display": true
+      "layout": true,
+      "sizing": true
     }
   }
 }

package/resources/blocks/e-tabs/block.json

@@ -20,7 +20,8 @@
   "supports": {
     "anchor": true,
     "webentor": {
-      "display": true,
+      "layout": true,
+      "sizing": true,
       "spacing": true
     }
   }

package/resources/blocks/l-flexible-container/block.json

@@ -21,11 +21,12 @@
     },
     "webentor": {
       "spacing": true,
-      "display": true,
+      "layout": true,
+      "sizing": true,
       "grid": true,
       "gridItem": true,
       "flexbox": true,
-      "flexboxItem": true,
+      "flexItem": true,
       "blockLink": true,
       "border": true,
       "borderRadius": true

package/resources/blocks/l-mobile-nav/block.json

@@ -9,7 +9,8 @@
   "attributes": {},
   "supports": {
     "webentor": {
-      "display": true
+      "layout": true,
+      "sizing": true
     }
   }
 }

package/resources/blocks/l-nav-menu/block.json

@@ -21,7 +21,8 @@
   },
   "supports": {
     "webentor": {
-      "display": true
+      "layout": true,
+      "sizing": true
     }
   }
 }

package/resources/blocks/l-nav-menu/l-nav-menu.block.tsx

@@ -60,6 +60,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Nav Menu', 'webentor')}
               value={attributes.menuId}
+              __nextHasNoMarginBottom
               options={menuOptions}
               onChange={(menuId) => setAttributes({ menuId })}
             />
@@ -69,6 +70,7 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
             <SelectControl
               label={__('Direction', 'webentor')}
               value={attributes.direction}
+              __nextHasNoMarginBottom
               options={[
                 { label: 'Row', value: 'direction-row' },
                 { label: 'Column', value: 'direction-col' },

package/resources/blocks/l-section/block.json

@@ -41,7 +41,7 @@
         }
       }
     },
-    "display": {
+    "layout": {
       "type": "object",
       "default": {
         "display": {
@@ -74,13 +74,15 @@
     },
     "webentor": {
       "spacing": true,
-      "display": {
-        "height": true,
-        "minHeight": true,
+      "layout": {
         "display": true
       },
+      "sizing": {
+        "height": true,
+        "minHeight": true
+      },
       "flexbox": true,
-      "flexboxItem": true,
+      "flexItem": true,
       "grid": true,
       "border": true,
       "borderRadius": true

package/resources/blocks/l-section/l-section.block.tsx

@@ -262,40 +262,49 @@ const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
         </PanelBody>
       </InspectorControls>
 
-      <div {...blockProps} className={`w-section ${blockProps.className}`}>
-        <div
-          {...innerBlocksProps}
-          className={`${innerBlocksProps.className} container wbtr:relative wbtr:z-[2] wbtr:flex wbtr:flex-col`}
-        >
-          {children}
+      {
+        applyFilters(
+          'webentor.core.l-section.output',
+          <div {...blockProps} className={`w-section ${blockProps.className}`}>
+            <div
+              {...innerBlocksProps}
+              className={`${innerBlocksProps.className} container wbtr:relative wbtr:z-[2] wbtr:flex wbtr:flex-col`}
+            >
+              {children}
 
-          {/* Only show appender if no inner blocks or if the block is selected */}
-          {(!hasInnerBlocks || isSelected) && (
-            <div className="wbtr:my-2 wbtr:flex wbtr:items-center wbtr:justify-center">
-              <WebentorBlockAppender
-                rootClientId={props.clientId}
-                text={__('Add Section Content', 'webentor')}
-              />
+              {/* Only show appender if no inner blocks or if the block is selected */}
+              {(!hasInnerBlocks || isSelected) && (
+                <div className="wbtr:my-2 wbtr:flex wbtr:items-center wbtr:justify-center">
+                  <WebentorBlockAppender
+                    rootClientId={props.clientId}
+                    text={__('Add Section Content', 'webentor')}
+                  />
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {attributes?.img?.id && (
-          <>
-            <div className="wbtr:absolute wbtr:inset-0 wbtr:z-[1] wbtr:bg-black wbtr:opacity-20"></div>
-            <img
-              src={attributes.img.url}
-              alt="banner-img"
-              className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:hidden wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:block"
-            />
-            <img
-              src={attributes.mobileImg?.url || attributes.img.url}
-              alt="banner-img"
-              className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:block wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:hidden"
-            />
-          </>
-        )}
-      </div>
+            {attributes?.img?.id && (
+              <>
+                <div className="wbtr:absolute wbtr:inset-0 wbtr:z-[1] wbtr:bg-black wbtr:opacity-20"></div>
+                <img
+                  src={attributes.img.url}
+                  alt="banner-img"
+                  className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:hidden wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:block"
+                />
+                <img
+                  src={attributes.mobileImg?.url || attributes.img.url}
+                  alt="banner-img"
+                  className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:block wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:hidden"
+                />
+              </>
+            )}
+          </div>,
+          props,
+          blockProps,
+          innerBlocksProps,
+          children,
+        ) as React.ReactNode
+      }
     </>
   );
 };

package/resources/scripts/editor.ts

@@ -1,3 +1,5 @@
+// Core block-editor filters (self-registering on import)
+import '@webentorCore/blocks-filters/_wrap-with-container';
 // Import all core blocks
 // TODO: maybe add filter to customize this list
 import '@blocks/e-accordion/e-accordion.block';

package/resources/styles/common/_editor.css

@@ -78,9 +78,31 @@
   .components-tab-panel__tabs-item {
     padding: 0 6px;
     flex-shrink: 0;
+    /* Override WP icon-button min-width so tabs stay compact */
+    min-width: unset;
 
     &.is-active {
       font-weight: bold;
     }
+
+    /* Let SVG text inherit bold weight from .is-active */
+    svg text {
+      font-weight: inherit;
+    }
+  }
+}
+
+/* Cascade indicator: style selects showing inherited (not explicit) values */
+.wbtr-inherited-value select {
+  font-style: italic;
+  color: #757575;
+  opacity: 0.7;
+}
+
+/* Extend width of Gutenberg sidebar */
+.interface-complementary-area__fill,
+.interface-complementary-area {
+  @media (min-width: 768px) {
+    width: 350px !important;
   }
 }

package/resources/styles/common/_utilities.css

@@ -31,3 +31,213 @@
 @utility border-l-* {
   border-left-style: --value('none', 'solid', 'dashed', 'dotted', 'double');
 }
+
+/*
+ * Flex-wrap + gap + equal columns utilities.
+ *
+ * Solves the problem where pure Tailwind can't create a flex-wrap layout
+ * with N equal columns that account for gap in their width calc.
+ * Each .w-flex-cols-N sets --w-cols and child width via calc().
+ * The .w-gap-* classes set both gap and --w-col-gap CSS var.
+ *
+ * Usage: class="w-flex-cols w-flex-cols-3 w-gap-4"
+ * Responsive: class="md:w-flex-cols-3 md:w-gap-4"
+ */
+@utility w-flex-cols {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@utility w-flex-cols-2 {
+  --w-cols: 2;
+
+  > * {
+    width: calc(50% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-3 {
+  --w-cols: 3;
+
+  > * {
+    width: calc(33.333% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-4 {
+  --w-cols: 4;
+
+  > * {
+    width: calc(25% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-5 {
+  --w-cols: 5;
+
+  > * {
+    width: calc(20% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-6 {
+  --w-cols: 6;
+
+  > * {
+    width: calc(16.666% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-7 {
+  --w-cols: 7;
+
+  > * {
+    width: calc(14.285714% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-8 {
+  --w-cols: 8;
+
+  > * {
+    width: calc(12.5% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-9 {
+  --w-cols: 9;
+
+  > * {
+    width: calc(11.111111% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-10 {
+  --w-cols: 10;
+
+  > * {
+    width: calc(10% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-11 {
+  --w-cols: 11;
+
+  > * {
+    width: calc(9.090909% - var(--w-col-gap, 0px));
+  }
+}
+
+@utility w-flex-cols-12 {
+  --w-cols: 12;
+
+  > * {
+    width: calc(8.333333% - var(--w-col-gap, 0px));
+  }
+}
+
+/* Gap utilities that also set --w-col-gap for flex-cols width calculation */
+@utility w-gap-0 {
+  gap: 0;
+  --w-col-gap: 0px;
+}
+
+@utility w-gap-0.5 {
+  gap: 0.125rem;
+  --w-col-gap: calc(0.125rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-1 {
+  gap: 0.25rem;
+  --w-col-gap: calc(0.25rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-1.5 {
+  gap: 0.375rem;
+  --w-col-gap: calc(0.375rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-2 {
+  gap: 0.5rem;
+  --w-col-gap: calc(0.5rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-2.5 {
+  gap: 0.625rem;
+  --w-col-gap: calc(0.625rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-3 {
+  gap: 0.75rem;
+  --w-col-gap: calc(0.75rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-3.5 {
+  gap: 0.875rem;
+  --w-col-gap: calc(0.875rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-4 {
+  gap: 1rem;
+  --w-col-gap: calc(1rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-5 {
+  gap: 1.25rem;
+  --w-col-gap: calc(1.25rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-6 {
+  gap: 1.5rem;
+  --w-col-gap: calc(1.5rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-7 {
+  gap: 1.75rem;
+  --w-col-gap: calc(1.75rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-8 {
+  gap: 2rem;
+  --w-col-gap: calc(2rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-9 {
+  gap: 2.25rem;
+  --w-col-gap: calc(2.25rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-10 {
+  gap: 2.5rem;
+  --w-col-gap: calc(2.5rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-11 {
+  gap: 2.75rem;
+  --w-col-gap: calc(2.75rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-12 {
+  gap: 3rem;
+  --w-col-gap: calc(3rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-14 {
+  gap: 3.5rem;
+  --w-col-gap: calc(3.5rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-15 {
+  gap: 3.75rem;
+  --w-col-gap: calc(3.75rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-16 {
+  gap: 4rem;
+  --w-col-gap: calc(4rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}
+
+@utility w-gap-20 {
+  gap: 5rem;
+  --w-col-gap: calc(5rem * (var(--w-cols, 1) - 1) / var(--w-cols, 1));
+}

package/core-js/blocks-filters/responsive-settings/constants.ts

@@ -1,11 +0,0 @@
-export const includedBlocks = {
-  blockLink: [],
-  spacing: [],
-  display: [],
-  grid: [],
-  gridItem: [],
-  flexbox: [],
-  flexboxItem: [],
-  border: [],
-  borderRadius: [],
-};

package/core-js/blocks-filters/responsive-settings/settings/container/display/index.ts

@@ -1,2 +0,0 @@
-export { DisplaySettings } from './settings';
-export { getDisplayProperties } from './properties';