@webikon/webentor-core 0.9.13 → 0.10.0

package/core-js/blocks-filters/responsive-settings/settings/spacing/properties.ts

@@ -1,24 +1,15 @@
 import { __ } from '@wordpress/i18n';
 
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { createTwThemeValues, spacingLabel } from '../shared/tw-values';
 
-const getSpacingValues = (property = '', twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.spacing)
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${Number(key) * 4}px`,
-      value: `${property}-${key}`,
-    }));
-
-  values.unshift({
-    label: __('None selected', 'webentor'),
-    value: '',
+const getSpacingValues = (property: string, twTheme: WebentorConfig['theme']) =>
+  createTwThemeValues(twTheme, 'spacing', property, {
+    labelFormatter: spacingLabel,
   });
 
-  return values;
-};
-
-export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
+/** Margin sides for BoxModelControl (includes Auto option) */
+export const getMarginSides = (twTheme: WebentorConfig['theme']) => [
   {
     label: __('Margin Top', 'webentor'),
     name: 'margin-top',
@@ -27,14 +18,6 @@ export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
       { label: 'Auto', value: 'mt-auto' },
     ],
   },
-  {
-    label: __('Margin Left', 'webentor'),
-    name: 'margin-left',
-    values: [
-      ...getSpacingValues('ml', twTheme),
-      { label: 'Auto', value: 'ml-auto' },
-    ],
-  },
   {
     label: __('Margin Right', 'webentor'),
     name: 'margin-right',
@@ -51,16 +34,23 @@ export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
       { label: 'Auto', value: 'mb-auto' },
     ],
   },
+  {
+    label: __('Margin Left', 'webentor'),
+    name: 'margin-left',
+    values: [
+      ...getSpacingValues('ml', twTheme),
+      { label: 'Auto', value: 'ml-auto' },
+    ],
+  },
+];
+
+/** Padding sides for BoxModelControl */
+export const getPaddingSides = (twTheme: WebentorConfig['theme']) => [
   {
     label: __('Padding Top', 'webentor'),
     name: 'padding-top',
     values: getSpacingValues('pt', twTheme),
   },
-  {
-    label: __('Padding Left', 'webentor'),
-    name: 'padding-left',
-    values: getSpacingValues('pl', twTheme),
-  },
   {
     label: __('Padding Right', 'webentor'),
     name: 'padding-right',
@@ -71,4 +61,36 @@ export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
     name: 'padding-bottom',
     values: getSpacingValues('pb', twTheme),
   },
+  {
+    label: __('Padding Left', 'webentor'),
+    name: 'padding-left',
+    values: getSpacingValues('pl', twTheme),
+  },
+];
+
+/** Flat list of all spacing properties (backward compat for getSpacingProperties) */
+export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
+  ...getMarginSides(twTheme),
+  ...getPaddingSides(twTheme),
 ];
+
+const SPACING_PROPERTY_NAMES = [
+  'margin-top',
+  'margin-bottom',
+  'margin-left',
+  'margin-right',
+  'padding-top',
+  'padding-bottom',
+  'padding-left',
+  'padding-right',
+];
+
+/** Check if any spacing value is set for a given breakpoint */
+export const hasSpacingSettingsForBreakpoint = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): boolean => {
+  return SPACING_PROPERTY_NAMES.some(
+    (prop) => !!attributes?.spacing?.[prop]?.value?.[breakpoint],
+  );
+};

package/core-js/blocks-filters/responsive-settings/settings/spacing/registration.ts

@@ -0,0 +1,53 @@
+/**
+ * Spacing module registration.
+ *
+ * panelGroup: spacing, order: 10
+ * Handles margin and padding properties.
+ * Unchanged between v1 and v2 — attribute key 'spacing' stays the same.
+ */
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { hasSpacingSettingsForBreakpoint } from './properties';
+import { SpacingSettings } from './settings';
+
+const generateSpacingClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  _context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+
+  if (!attributes.spacing) return classes;
+
+  for (const [propName, prop] of Object.entries(attributes.spacing)) {
+    if (propName.startsWith('_')) continue;
+    const propData = prop as any;
+    if (!propData?.value) continue;
+    const bpValue = propData.value[breakpoint];
+    if (!bpValue) continue;
+
+    if (attributes?.slider?.enabled?.value?.[breakpoint]) continue;
+
+    const twBreakpoint = breakpoint === 'basic' ? '' : `${breakpoint}:`;
+    classes.push(`${twBreakpoint}${bpValue}`);
+  }
+
+  return classes;
+};
+
+registry.register({
+  name: 'spacing',
+  panelGroup: 'spacing',
+  order: 10,
+  attributeKey: 'spacing',
+  supportKey: 'spacing',
+  attributeSchema: {
+    spacing: {
+      type: 'object',
+      default: {},
+    },
+  },
+  SettingsComponent: SpacingSettings,
+  generateClasses: generateSpacingClasses,
+  hasActiveSettings: hasSpacingSettingsForBreakpoint,
+});

package/core-js/blocks-filters/responsive-settings/settings/spacing/settings.tsx

@@ -1,11 +1,8 @@
-import { SelectControl } from '@wordpress/components';
-
-import { setImmutably } from '@webentorCore/_utils';
-import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
-
+import { BoxModelControl } from '../../components/BoxModelControl';
 import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { BlockPanelProps } from '../../types';
 import { isSliderEnabledForBreakpoint } from '../../utils';
-import { getSpacingProperties } from './properties';
+import { getMarginSides, getPaddingSides } from './properties';
 
 interface SpacingSettingsProps extends BlockPanelProps {
   breakpoint: string;
@@ -16,6 +13,7 @@ export const SpacingSettings = ({
   setAttributes,
   name,
   breakpoint,
+  breakpoints,
   twTheme,
 }: SpacingSettingsProps) => {
   if (!attributes?.spacing) {
@@ -28,58 +26,31 @@ export const SpacingSettings = ({
     breakpoint,
   );
 
-  const spacingProperties = getSpacingProperties(twTheme);
-
   return (
-    <div
-      style={{
-        marginTop: '16px',
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        gap: '16px',
-      }}
-    >
+    <div style={{ marginTop: '16px' }}>
       {isSliderEnabled && <DisabledSliderInfo />}
 
-      {spacingProperties.map((property) => (
-        <div
-          key={property.name + breakpoint}
-          style={{
-            margin:
-              property.name.includes('top') || property.name.includes('bottom')
-                ? '0 auto'
-                : undefined,
-            width:
-              property.name.includes('top') || property.name.includes('bottom')
-                ? '75%'
-                : property.name.includes('left') ||
-                    property.name.includes('right')
-                  ? '40%'
-                  : undefined,
-          }}
-        >
-          <SelectControl
-            label={property.label}
-            value={attributes.spacing?.[property.name]?.value?.[breakpoint]}
-            help={property?.help}
-            disabled={isSliderEnabled}
-            options={property.values}
-            onChange={(selected) =>
-              setAttributes(
-                setImmutably(
-                  attributes,
-                  ['spacing', property.name, 'value', breakpoint],
-                  selected,
-                ),
-              )
-            }
-          />
-
-          {/* Horizontal line between margin & padding settings */}
-          {property.name.includes('margin-bottom') && <hr />}
-        </div>
-      ))}
+      <BoxModelControl
+        type="margin"
+        sides={getMarginSides(twTheme)}
+        attributes={attributes}
+        setAttributes={setAttributes}
+        attributeKey="spacing"
+        breakpoint={breakpoint}
+        breakpoints={breakpoints}
+        disabled={isSliderEnabled}
+      />
+
+      <BoxModelControl
+        type="padding"
+        sides={getPaddingSides(twTheme)}
+        attributes={attributes}
+        setAttributes={setAttributes}
+        attributeKey="spacing"
+        breakpoint={breakpoint}
+        breakpoints={breakpoints}
+        disabled={isSliderEnabled}
+      />
     </div>
   );
 };

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

@@ -1,68 +1,214 @@
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+import { WebentorConfig } from '../../../types/_webentor-config';
+
+// ─── Panel groups ────────────────────────────────────────────────────
+// Each setting module declares which panel group it renders in.
+// The panel components query the registry by this key.
+export type PanelGroup = 'spacing' | 'displayLayout' | 'border' | 'blockLink';
+
+// ─── Primitive value types ───────────────────────────────────────────
 
 export interface SelectOption {
   label: string;
   value: string;
 }
 
+/**
+ * A single responsive property value.
+ * Keys are breakpoint names ('basic', 'sm', 'md', 'lg', 'xl', '2xl').
+ */
 export interface ResponsiveValue {
   value: {
-    [key: string]: string;
+    [breakpoint: string]: string;
   };
 }
 
+/**
+ * A group of responsive properties keyed by CSS property name.
+ * e.g. { 'margin-top': { value: { basic: 'mt-4', md: 'md:mt-8' } } }
+ */
 export interface ResponsiveAttribute {
-  [key: string]: ResponsiveValue;
+  [propertyName: string]: ResponsiveValue;
+}
+
+// ─── Border-specific value types ─────────────────────────────────────
+
+export interface BorderSideValue {
+  width: string;
+  color: string;
+  style: string;
 }
 
 export interface BorderValue {
-  top: {
-    width: string;
-    color: string;
-    style: string;
-  };
-  right: {
-    width: string;
-    color: string;
-    style: string;
-  };
-  bottom: {
-    width: string;
-    color: string;
-    style: string;
-  };
-  left: {
-    width: string;
-    color: string;
-    style: string;
-  };
+  top: BorderSideValue;
+  right: BorderSideValue;
+  bottom: BorderSideValue;
+  left: BorderSideValue;
+  linked?: boolean;
 }
 
 export interface ResponsiveBorderValue {
   value: {
-    [key: string]: BorderValue;
+    [breakpoint: string]: BorderValue;
+  };
+}
+
+export interface BorderRadiusValue {
+  topLeft: string;
+  topRight: string;
+  bottomRight: string;
+  bottomLeft: string;
+  linked?: boolean;
+}
+
+export interface ResponsiveBorderRadiusValue {
+  value: {
+    [breakpoint: string]: BorderRadiusValue;
   };
 }
 
+export interface BorderAttribute {
+  border?: ResponsiveBorderValue;
+  borderRadius?: ResponsiveBorderRadiusValue;
+}
+
+// ─── Grouped select options ──────────────────────────────────────────
+
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+// ─── Property definition ─────────────────────────────────────────────
+
+export interface PropertyDefinition {
+  label: string;
+  name: string;
+  help?: string;
+  values: SelectOption[];
+  /** When true, values are split into optgroups (numeric vs keyword) in the select */
+  groupedValues?: boolean;
+}
+
+// ─── Block attributes & panel props ──────────────────────────────────
+
+/**
+ * Block attributes shape for responsive settings.
+ */
 export interface BlockAttributes {
   blockLink?: any;
   spacing?: ResponsiveAttribute;
-  display?: ResponsiveAttribute;
+  layout?: ResponsiveAttribute;
+  sizing?: ResponsiveAttribute;
+  flexItem?: ResponsiveAttribute;
   grid?: ResponsiveAttribute;
   gridItem?: ResponsiveAttribute;
   flexbox?: ResponsiveAttribute;
-  flexboxItem?: ResponsiveAttribute;
-  border?: ResponsiveBorderValue;
+  border?: BorderAttribute;
   slider?: {
     enabled?: ResponsiveValue;
   };
+  _preset?: string;
+  _presetClasses?: string[];
 }
 
 export interface BlockPanelProps {
   attributes: BlockAttributes;
-  setAttributes: (attributes: BlockAttributes) => void;
+  setAttributes: (attributes: Partial<BlockAttributes>) => void;
   name: string;
   clientId: string;
   breakpoints: string[];
   twTheme: WebentorConfig['theme'];
 }
+
+// ─── Class generation context ────────────────────────────────────────
+
+/**
+ * Context passed to generateClasses() so modules can inspect
+ * parent block state, slider status, and support flags.
+ */
+export interface ClassGenContext {
+  blockName: string;
+  supports: Record<string, any>;
+  parentBlockAttributes?: Record<string, any>;
+  /** Ordered breakpoint names for cascade resolution (min-width inheritance) */
+  breakpoints: string[];
+}
+
+// ─── Setting definition (registry contract) ──────────────────────────
+
+/**
+ * Each setting module implements this interface and registers itself
+ * with the SettingsRegistry. The panelGroup determines which panel
+ * wrapper renders it; order determines render sequence within the panel.
+ */
+export interface SettingDefinition {
+  /** Unique identifier, e.g. 'layout', 'sizing', 'flexbox' */
+  name: string;
+  /** Which UI panel this setting renders in */
+  panelGroup: PanelGroup;
+  /** Render order within the panel group (lower = higher) */
+  order: number;
+  /** WP block attribute key(s) this module reads/writes */
+  attributeKey: string;
+  /** webentor.* support flag(s) checked against block.json supports */
+  supportKey: string | string[];
+  /** Attribute schema merged into blocks.registerBlockType */
+  attributeSchema: Record<string, any>;
+  /** Optional custom attribute initialiser (e.g. display flex default) */
+  initAttributes?: (
+    settings: Record<string, any>,
+    name: string,
+  ) => Record<string, any>;
+  /** React component rendered inline within the panel (NOT a PanelBody) */
+  SettingsComponent: React.FC<SettingsComponentProps>;
+  /** Generates Tailwind class array for a given breakpoint */
+  generateClasses: (
+    attributes: Record<string, any>,
+    breakpoint: string,
+    context: ClassGenContext,
+  ) => string[];
+  /** Returns true when at least one value is set for the breakpoint (tab indicator) */
+  hasActiveSettings: (
+    attributes: Record<string, any>,
+    breakpoint: string,
+    context?: ClassGenContext,
+  ) => boolean;
+  /** Optional v1→v2 migration for this module's attributes */
+  migrateFromV1?: (oldAttrs: Record<string, any>) => Record<string, any>;
+}
+
+/**
+ * Props passed to each setting module's SettingsComponent.
+ * The panel wrapper provides these after resolving the active breakpoint.
+ */
+export interface SettingsComponentProps extends BlockPanelProps {
+  breakpoint: string;
+}
+
+// ─── Layout preset ───────────────────────────────────────────────────
+
+/**
+ * A preset provides one-click layout configuration.
+ * Selecting a preset fills in the underlying attribute values
+ * and optionally attaches custom CSS classes for edge cases.
+ */
+export interface LayoutPresetValue {
+  value: Record<string, unknown>;
+}
+
+export interface LayoutPresetApplies {
+  [attributeKey: string]: {
+    [propertyName: string]: LayoutPresetValue;
+  };
+}
+
+export interface LayoutPreset {
+  id: string;
+  label: string;
+  icon?: string;
+  description: string;
+  /** Attribute values keyed by module attribute key, then property name */
+  applies: LayoutPresetApplies;
+  /** Non-TW custom classes for edge cases (e.g. flex-wrap + gap calc) */
+  customClasses?: string[];
+}