@webikon/webentor-core 0.9.14 → 0.10.1

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

@@ -0,0 +1,96 @@
+/**
+ * SizingSettings — width, height, min/max dimension controls.
+ *
+ * Rendered inside the DisplayLayoutPanel at order: 20.
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { Fragment, useMemo } from '@wordpress/element';
+
+import { camelize } from '../../../../_utils';
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { ResponsiveSelectGroup } from '../../components/ResponsiveSelectGroup';
+import {
+  PropertyDefinition,
+  SelectOptionGroup,
+  SettingsComponentProps,
+} from '../../types';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { createGroupedTwThemeValues } from '../shared/tw-values';
+import { getSizingProperties } from './properties';
+
+export const SizingSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  if (!attributes?.sizing) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+  const sizingProperties = getSizingProperties(twTheme);
+
+  /** Property name → [themeKey, prefix] for grouped value generation */
+  const themeKeyMap: Record<string, [string, string]> = {
+    height: ['height', 'h'],
+    'min-height': ['minHeight', 'min-h'],
+    'max-height': ['maxHeight', 'max-h'],
+    width: ['width', 'w'],
+    'min-width': ['minWidth', 'min-w'],
+    'max-width': ['maxWidth', 'max-w'],
+  };
+
+  const valueGroups = useMemo(() => {
+    const groups: Record<string, SelectOptionGroup[]> = {};
+    for (const prop of sizingProperties) {
+      if (!prop.groupedValues) continue;
+      const mapping = themeKeyMap[prop.name];
+      if (mapping) {
+        groups[prop.name] = createGroupedTwThemeValues(
+          twTheme,
+          mapping[0],
+          mapping[1],
+        );
+      }
+    }
+    return groups;
+  }, [twTheme]);
+
+  const webentorSupports = getBlockSupport(name, 'webentor') as
+    | Record<string, any>
+    | undefined;
+  const supports = webentorSupports?.sizing;
+
+  const isPropertyVisible = (property: PropertyDefinition) => {
+    if (supports === true) return true;
+    return supports?.[camelize(property.name)] === true;
+  };
+
+  const attributeKey = 'sizing';
+
+  return (
+    <Fragment>
+      <div style={{ marginTop: '16px' }}>
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey={attributeKey}
+          properties={sizingProperties}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+          isPropertyVisible={isPropertyVisible}
+          valueGroups={valueGroups}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

@@ -1,3 +1,8 @@
-export { SpacingPanel } from './panel';
+import './registration';
+
 export { SpacingSettings } from './settings';
-export { getSpacingProperties } from './properties';
+export {
+  getSpacingProperties,
+  getMarginSides,
+  getPaddingSides,
+} from './properties';

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

@@ -1,45 +1,5 @@
-import { PanelBody, TabPanel } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
-
-import { SpacingSettings } from './settings';
-
-export const SpacingPanel = (props: BlockPanelProps) => {
-  const { attributes, breakpoints, twTheme } = props;
-
-  if (!attributes?.spacing) {
-    return null;
-  }
-
-  const hasSpacingSettingsForBreakpoint = (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]
-    );
-  };
-
-  return (
-    <PanelBody title={__('Spacing Settings', 'webentor')} initialOpen={false}>
-      <TabPanel
-        activeClass="is-active"
-        className="w-responsive-settings-tabs"
-        initialTabName={breakpoints[0]}
-        tabs={breakpoints.map((breakpoint) => ({
-          name: breakpoint,
-          title: `${breakpoint}${hasSpacingSettingsForBreakpoint(breakpoint) ? '*' : ''}`, // Add * if spacing is set on this breakpoint
-        }))}
-      >
-        {(tab) => (
-          <SpacingSettings {...props} breakpoint={tab.name} twTheme={twTheme} />
-        )}
-      </TabPanel>
-    </PanelBody>
-  );
-};
+/**
+ * @deprecated — SpacingPanel is now provided by panels/SpacingPanel.tsx.
+ * This file is kept for backward compat with any external imports.
+ */
+export { SpacingPanel } from '../../panels/SpacingPanel';

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[];
+}