@webikon/webentor-core 0.9.14 → 0.10.0

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

@@ -1,7 +1,23 @@
+/**
+ * Responsive Settings — Utility functions.
+ *
+ * Class generation delegates to the SettingsRegistry: each registered
+ * module's generateClasses() is called per breakpoint, and the results
+ * are concatenated.
+ *
+ * Also contains generic breakpoint cascade utilities (getEffectiveValue,
+ * getInheritedFromBreakpoint, etc.) for min-width inheritance lookups.
+ *
+ * Border helpers are kept here for backward compat (used by border
+ * settings panel for preview classes).
+ */
 import { useBlockProps } from '@wordpress/block-editor';
 import { getBlockType } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
 
-import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+import { useBlockParent } from '../../blocks-utils/_use-block-parent';
+import { registry } from './registry';
+import { ClassGenContext } from './types';
 
 export const getPixelFromRemValue = (value: string): string => {
   if (value.includes('rem')) {
@@ -11,22 +27,6 @@ export const getPixelFromRemValue = (value: string): string => {
   return value;
 };
 
-export const hasSpacingSettingsForBreakpoint = (
-  attributes: any,
-  breakpoint: string,
-): boolean => {
-  return (
-    attributes?.spacing?.['margin-top']?.value?.[breakpoint] ||
-    attributes?.spacing?.['margin-bottom']?.value?.[breakpoint] ||
-    attributes?.spacing?.['margin-left']?.value?.[breakpoint] ||
-    attributes?.spacing?.['margin-right']?.value?.[breakpoint] ||
-    attributes?.spacing?.['padding-top']?.value?.[breakpoint] ||
-    attributes?.spacing?.['padding-bottom']?.value?.[breakpoint] ||
-    attributes?.spacing?.['padding-left']?.value?.[breakpoint] ||
-    attributes?.spacing?.['padding-right']?.value?.[breakpoint]
-  );
-};
-
 export const isSliderEnabledForBreakpoint = (
   blockName: string,
   attributes: any,
@@ -38,78 +38,41 @@ export const isSliderEnabledForBreakpoint = (
   );
 };
 
-export const prepareTailwindClassesFromSettings = (
-  settings: any,
-  type: string,
+/**
+ * Border class helpers — exported for border settings panel (preview).
+ */
+export const prepareTailwindBorderClassesForSide = (
+  value: any,
+  side: string,
+  twBreakpoint: string,
 ): string[] => {
   const classes: string[] = [];
 
-  const parentBlock = useBlockParent();
-  const parentBlockAttributes = parentBlock?.attributes;
-
-  if (settings[type]) {
-    Object.entries(settings[type]).forEach(([, prop]: [string, any]) => {
-      if (prop?.value) {
-        Object.entries(prop?.value).forEach(
-          ([bpName, bpPropValue]: [string, any]) => {
-            // Skip flex related settings when display is not flex
-            if (type === 'flex') {
-              if (settings?.display?.display?.value?.[bpName] !== 'flex') {
-                return;
-              }
-            }
-
-            // Skip flex item related settings when parent display is not flex
-            if (type === 'flexItem') {
-              if (
-                parentBlockAttributes?.display?.display?.value?.[bpName] !==
-                'flex'
-              ) {
-                return;
-              }
-            }
-
-            // Skip grid related settings when display is not grid
-            if (type === 'grid') {
-              if (settings?.display?.display?.value?.[bpName] !== 'grid') {
-                return;
-              }
-            }
-
-            // Skip grid item related settings when parent display is not grid
-            if (type === 'gridItem') {
-              if (
-                parentBlockAttributes?.display?.display?.value?.[bpName] !=
-                'grid'
-              ) {
-                return;
-              }
-            }
-
-            // Skip when slider is enabled
-            if (settings?.slider?.enabled?.value?.[bpName]) {
-              return;
-            }
-
-            if (bpPropValue) {
-              const twBreakpoint = bpName === 'basic' ? '' : `${bpName}:`;
+  const borderMapping = {
+    top: 'border-t',
+    right: 'border-r',
+    bottom: 'border-b',
+    left: 'border-l',
+  };
 
-              if (bpPropValue === 'hidden') {
-                // Hidden items should be semi-transparent to indicate that they are hidden but still present
-                classes.push(`${twBreakpoint}opacity-30`);
-              } else {
-                classes.push(`${twBreakpoint}${bpPropValue}`);
-              }
-            }
-          },
-        );
-      }
-    });
+  if (value) {
+    if (value?.width) {
+      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.width}`);
+    }
+    if (value?.style) {
+      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.style}`);
+    }
+    if (value?.color) {
+      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.color}`);
+    }
   }
 
   return classes;
 };
 
+/**
+ * Border class generation for full attribute set (border settings preview).
+ */
 export const prepareTailwindBorderClassesFromSettings = (
   settings: any,
   type: string,
@@ -127,20 +90,13 @@ export const prepareTailwindBorderClassesFromSettings = (
 
                 Object.entries(bpPropValue).forEach(
                   ([valueSide, value]: [string, any]) => {
-                    if (valueSide === 'linked') {
-                      return;
-                    }
+                    if (valueSide === 'linked') return;
 
                     if (propName === 'border') {
-                      // Check if side classes should be processed as we can in some cases get only one side of the border
-                      if (Array.isArray(side) && !side.includes(valueSide)) {
+                      if (Array.isArray(side) && !side.includes(valueSide))
                         return;
-                      }
-
-                      if (typeof side === 'string' && side !== valueSide) {
+                      if (typeof side === 'string' && side !== valueSide)
                         return;
-                      }
-
                       classes.push(
                         ...prepareTailwindBorderClassesForSide(
                           value,
@@ -149,13 +105,17 @@ export const prepareTailwindBorderClassesFromSettings = (
                         ),
                       );
                     } else if (propName === 'borderRadius') {
-                      classes.push(
-                        ...prepareTailwindBorderRadiusClassesForCorner(
-                          value,
-                          valueSide,
-                          twBreakpoint,
-                        ),
-                      );
+                      const radiusMapping = {
+                        topLeft: 'rounded-tl',
+                        topRight: 'rounded-tr',
+                        bottomRight: 'rounded-br',
+                        bottomLeft: 'rounded-bl',
+                      };
+                      if (value) {
+                        classes.push(
+                          `${twBreakpoint}${radiusMapping[valueSide]}-${value}`,
+                        );
+                      }
                     }
                   },
                 );
@@ -166,83 +126,27 @@ export const prepareTailwindBorderClassesFromSettings = (
       },
     );
   }
-
-  return classes;
-};
-
-const prepareTailwindBorderRadiusClassesForCorner = (
-  value: any,
-  corner: string,
-  twBreakpoint: string,
-): string[] => {
-  const classes: string[] = [];
-
-  const radiusMapping = {
-    topLeft: 'rounded-tl',
-    topRight: 'rounded-tr',
-    bottomRight: 'rounded-br',
-    bottomLeft: 'rounded-bl',
-  };
-
-  if (value) {
-    classes.push(`${twBreakpoint}${radiusMapping[corner]}-${value}`);
-  }
-
-  return classes;
-};
-
-export const prepareTailwindBorderClassesForSide = (
-  value: any,
-  side: string,
-  twBreakpoint: string,
-): string[] => {
-  const classes: string[] = [];
-
-  const borderMapping = {
-    top: 'border-t',
-    right: 'border-r',
-    bottom: 'border-b',
-    left: 'border-l',
-  };
-
-  if (value) {
-    if (value?.width) {
-      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.width}`);
-    }
-
-    if (value?.style) {
-      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.style}`);
-    }
-
-    if (value?.color) {
-      classes.push(`${twBreakpoint}${borderMapping[side]}-${value.color}`);
-    }
-  }
-
   return classes;
 };
 
+/**
+ * Check if any registered responsive setting attribute is present on the block.
+ * Used as a fast guard before running class generation.
+ */
 export const applyResponsiveSettings = (attributes: any): boolean => {
-  if (
-    !attributes?.blockLink &&
-    !attributes?.spacing &&
-    !attributes?.display &&
-    !attributes?.grid &&
-    !attributes?.gridItem &&
-    !attributes?.flexbox &&
-    !attributes?.flexboxItem
-  ) {
-    return false;
-  }
-
-  return true;
+  return registry
+    .getAll()
+    .some((def) =>
+      Object.keys(def.attributeSchema).some((key) => !!attributes?.[key]),
+    );
 };
 
 /**
- * Automatically generates the class names for the block based on the attributes if they are supported.
+ * Generates Tailwind class names from block attributes using the SettingsRegistry.
+ * Each registered setting's generateClasses() is called per breakpoint.
  *
- * @param attributes - The attributes of the block
- * @returns The class names of the block
+ * This function is called as a classNameGenerator hook from registerBlockExtension.
+ * useBlockParent/useBlockProps are called at top level to comply with Rules of Hooks.
  */
 export const generateClassNames = (attributes: any): string => {
   if (!applyResponsiveSettings(attributes)) {
@@ -250,72 +154,199 @@ export const generateClassNames = (attributes: any): string => {
   }
 
   const blockProps = useBlockProps();
-  // const settings = useSettings();
   const blockName = blockProps['data-type'];
-
   const blockSettings = getBlockType(blockName);
   const supports = blockSettings?.supports;
 
-  const classes: string[] = [];
+  // useBlockParent hoisted to top level (hook-safe)
+  const parentBlock = useBlockParent();
 
-  // Prepare all Tailwind classes
-  if (supports?.webentor?.spacing) {
-    const spacingClasses = prepareTailwindClassesFromSettings(
-      attributes,
-      'spacing',
-    );
-    classes.push(...spacingClasses);
-  }
+  // Resolve ordered breakpoints for cascade logic
+  const orderedBreakpoints: string[] = applyFilters(
+    'webentor.core.twBreakpoints',
+    ['basic'],
+  ) as string[];
+
+  const context: ClassGenContext = {
+    blockName,
+    supports,
+    parentBlockAttributes: parentBlock?.attributes,
+    breakpoints: orderedBreakpoints,
+  };
 
-  if (supports?.webentor?.display) {
-    const displayClasses = prepareTailwindClassesFromSettings(
-      attributes,
-      'display',
-    );
-    classes.push(...displayClasses);
+  const classes: string[] = [];
+  const allSettings = registry.getAll();
+
+  // Collect all breakpoints present in any attribute
+  const breakpoints = new Set<string>();
+  for (const def of allSettings) {
+    if (!registry.isSupported(supports, def)) continue;
+
+    // Check all attribute keys declared by this module
+    for (const attrKey of Object.keys(def.attributeSchema)) {
+      const attrGroup = attributes[attrKey];
+      if (!attrGroup || typeof attrGroup !== 'object') continue;
+
+      for (const prop of Object.values(attrGroup)) {
+        const propData = prop as any;
+        if (propData?.value) {
+          for (const bp of Object.keys(propData.value)) {
+            breakpoints.add(bp);
+          }
+        }
+      }
+    }
   }
 
-  if (supports?.webentor?.flexbox) {
-    const flexboxClasses = prepareTailwindClassesFromSettings(
-      attributes,
-      'flexbox',
-    );
-    classes.push(...flexboxClasses);
+  // Generate classes per breakpoint per registered setting
+  for (const bp of breakpoints) {
+    for (const def of allSettings) {
+      if (!registry.isSupported(supports, def)) continue;
+      classes.push(...def.generateClasses(attributes, bp, context));
+    }
   }
 
-  if (supports?.webentor?.flexboxItem) {
-    const flexboxItemClasses = prepareTailwindClassesFromSettings(
-      attributes,
-      'flexboxItem',
-    );
-    classes.push(...flexboxItemClasses);
-  }
+  return classes.join(' ') ?? '';
+};
 
-  if (supports?.webentor?.grid) {
-    const gridClasses = prepareTailwindClassesFromSettings(attributes, 'grid');
-    classes.push(...gridClasses);
-  }
+export const inlineStyleGenerator = (): Record<string, any> => {
+  return {};
+};
 
-  if (supports?.webentor?.gridItem) {
-    const gridItemClasses = prepareTailwindClassesFromSettings(
-      attributes,
-      'gridItem',
-    );
-    classes.push(...gridItemClasses);
+// ─── Breakpoint cascade utilities ───────────────────────────────────
+//
+// Generic min-width inheritance helpers: walk breakpoints 0..target and
+// return the last explicitly set value. These work on the standard
+// attributes[attrKey][propName].value[bp] shape (no v1/v2 awareness).
+
+/**
+ * Generic cascade: walk breakpoints 0..target and return the last
+ * explicitly set value (min-width inheritance).
+ */
+export const getEffectiveValue = (
+  attributes: Record<string, any>,
+  attributeKey: string,
+  propertyName: string,
+  breakpoint: string,
+  breakpoints: string[],
+): string | undefined => {
+  const targetIndex = breakpoints.indexOf(breakpoint);
+  if (targetIndex === -1) return undefined;
+  let effective: string | undefined;
+  for (let i = 0; i <= targetIndex; i++) {
+    const val =
+      attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoints[i]];
+    if (val !== undefined && val !== '') effective = val;
   }
+  return effective;
+};
 
-  if (supports?.webentor?.border || supports?.webentor?.borderRadius) {
-    const borderClasses = prepareTailwindBorderClassesFromSettings(
-      attributes,
-      'border',
-      ['top', 'right', 'bottom', 'left'],
-    );
-    classes.push(...borderClasses);
+/**
+ * Returns the breakpoint name a value was inherited from, or null if the
+ * value is explicitly set at the current breakpoint (or no value exists).
+ * Used by InheritedIndicator to show "Inherited from basic" etc.
+ */
+export const getInheritedFromBreakpoint = (
+  attributes: Record<string, any>,
+  attributeKey: string,
+  propertyName: string,
+  breakpoint: string,
+  breakpoints: string[],
+): string | null => {
+  const targetIndex = breakpoints.indexOf(breakpoint);
+  if (targetIndex === -1) return null;
+
+  // If explicit value exists at this breakpoint, it's not inherited
+  const explicitVal =
+    attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoint];
+  if (explicitVal !== undefined && explicitVal !== '') return null;
+
+  // Walk backwards from the previous breakpoint to find the source
+  for (let i = targetIndex - 1; i >= 0; i--) {
+    const val =
+      attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoints[i]];
+    if (val !== undefined && val !== '') return breakpoints[i];
   }
+  return null;
+};
 
-  return classes.join(' ') ?? '';
+// ─── Object value cascade (borders, border-radius) ─────────────────
+
+/**
+ * Check whether an object value has meaningful content.
+ * Filters out metadata keys ('linked') and considers empty strings as
+ * non-meaningful. Handles both flat values (border-radius: { topLeft: "lg" })
+ * and nested values (border: { top: { width: "1" } }).
+ */
+const hasObjectContent = (val: Record<string, any>): boolean => {
+  return Object.entries(val).some(([key, v]) => {
+    if (key === 'linked') return false;
+    if (v === undefined || v === null || v === '') return false;
+    if (typeof v === 'object') {
+      return Object.values(v).some(
+        (sv) => sv !== undefined && sv !== null && sv !== '',
+      );
+    }
+    return true;
+  });
 };
 
-export const inlineStyleGenerator = (): Record<string, any> => {
-  return {};
+/**
+ * Generic cascade for object-typed property values (e.g. border sides,
+ * border-radius corners). Walks breakpoints 0..target and returns the
+ * last non-empty object value.
+ */
+export const getEffectiveObjectValue = <T = Record<string, any>>(
+  attributes: Record<string, any>,
+  attributeKey: string,
+  propertyName: string,
+  breakpoint: string,
+  breakpoints: string[],
+): T | undefined => {
+  const targetIndex = breakpoints.indexOf(breakpoint);
+  if (targetIndex === -1) return undefined;
+  let effective: T | undefined;
+  for (let i = 0; i <= targetIndex; i++) {
+    const val =
+      attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoints[i]];
+    if (val !== undefined && val !== null && typeof val === 'object') {
+      if (hasObjectContent(val)) effective = val;
+    }
+  }
+  return effective;
+};
+
+/**
+ * Returns the source breakpoint for an inherited object value, or null
+ * if the value is explicitly set at the current breakpoint.
+ */
+export const getObjectInheritedFromBreakpoint = (
+  attributes: Record<string, any>,
+  attributeKey: string,
+  propertyName: string,
+  breakpoint: string,
+  breakpoints: string[],
+): string | null => {
+  const targetIndex = breakpoints.indexOf(breakpoint);
+  if (targetIndex === -1) return null;
+
+  const explicitVal =
+    attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoint];
+  if (
+    explicitVal !== undefined &&
+    explicitVal !== null &&
+    typeof explicitVal === 'object' &&
+    hasObjectContent(explicitVal)
+  ) {
+    return null;
+  }
+
+  for (let i = targetIndex - 1; i >= 0; i--) {
+    const val =
+      attributes?.[attributeKey]?.[propertyName]?.value?.[breakpoints[i]];
+    if (val !== undefined && val !== null && typeof val === 'object') {
+      if (hasObjectContent(val)) return breakpoints[i];
+    }
+  }
+  return null;
 };

package/core-js/config/index.ts

@@ -0,0 +1,6 @@
+export {
+  buildSafelist,
+  customTypographyKeys,
+  spacing,
+} from './webentor-config';
+export { default as webentorDefaultConfig } from './webentor-config';

package/core-js/config/webentor-config.ts

@@ -1,4 +1,4 @@
-import type { WebentorConfig } from '@webentorCore/types/_webentor-config';
+import type { WebentorConfig } from '../types/_webentor-config';
 
 // Inspired by Tailwind BlockConfiguration
 // See: https://github.com/tailwindlabs/tailwindcss/blob/v3.4.17/stubs/config.full.js
@@ -698,7 +698,10 @@ export const buildSafelist = (config: WebentorConfig) => {
     }),
 
     // Opacity for hidden block
-    ...breakpointsPrefixes.flatMap((bp) => [`${bp}opacity-30`]),
+    ...breakpointsPrefixes.flatMap((bp) => [
+      `${bp}opacity-30`,
+      `${bp}opacity-100`,
+    ]),
 
     // Orders
     ...Object.keys(config.theme.order).flatMap((i) => {
@@ -709,6 +712,45 @@ export const buildSafelist = (config: WebentorConfig) => {
     ...Object.keys(config.theme.aspectRatio).flatMap((i) => {
       return breakpointsPrefixes.flatMap((bp) => [`${bp}aspect-${i}`]);
     }),
+
+    // Custom flexbox grid
+    ...[
+      'w-flex-cols',
+      'w-flex-cols-2',
+      'w-flex-cols-3',
+      'w-flex-cols-4',
+      'w-flex-cols-5',
+      'w-flex-cols-6',
+      'w-flex-cols-7',
+      'w-flex-cols-8',
+      'w-flex-cols-9',
+      'w-flex-cols-10',
+      'w-flex-cols-11',
+      'w-flex-cols-12',
+      'w-gap-0',
+      'w-gap-0.5',
+      'w-gap-1',
+      'w-gap-1.5',
+      'w-gap-2',
+      'w-gap-2.5',
+      'w-gap-3',
+      'w-gap-3.5',
+      'w-gap-4',
+      'w-gap-5',
+      'w-gap-6',
+      'w-gap-7',
+      'w-gap-8',
+      'w-gap-9',
+      'w-gap-10',
+      'w-gap-11',
+      'w-gap-12',
+      'w-gap-14',
+      'w-gap-15',
+      'w-gap-16',
+      'w-gap-20',
+    ].flatMap((i) => {
+      return breakpointsPrefixes.flatMap((bp) => [`${bp}${i}`]);
+    }),
   ];
 };
 

package/core-js/index.ts

@@ -1,14 +1,12 @@
 export {
-  WebentorBlockAppender,
-  WebentorButton,
-  WebentorTypographyPickerSelect,
-} from './blocks-components';
-export { initCustomTypographyFilter } from './blocks-filters';
-export { useBlockParent, usePostTypes, useTaxonomies } from './blocks-utils';
-
-export { Alpine } from './_alpine';
-export { SliderComponent, Swiper } from './_slider';
-export { setImmutably, debounce, throttle, camelize } from './_utils';
+  camelize,
+  debounce,
+  getColorBySlug,
+  getColorSlugByColor,
+  isEmpty,
+  setImmutably,
+  throttle,
+} from './_utils';
 
 export type { ButtonAttributes } from './types/_block-components';
 export type { WebentorConfig } from './types/_webentor-config';

package/core-js/types/index.ts

@@ -0,0 +1,6 @@
+export type { ButtonAttributes } from './_block-components';
+export type {
+  ResolvableTo,
+  ThemeConfig,
+  WebentorConfig,
+} from './_webentor-config';