@webikon/webentor-core 0.9.14 → 0.10.1

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

@@ -0,0 +1,86 @@
+/**
+ * Display value helpers.
+ *
+ * Generic (non-display) cascade utilities live in utils.ts.
+ */
+
+/**
+ * Resolve the "display" value for a given breakpoint (explicit only, no cascade).
+ *
+ * This is the canonical way to read the display mode for modules that need it
+ * (flexbox, grid, flex-item, grid-item).
+ */
+export const getDisplayValue = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): string | undefined => {
+  return attributes?.layout?.display?.value?.[breakpoint];
+};
+
+/**
+ * Resolve the parent display value for a given breakpoint (explicit only).
+ */
+export const getParentDisplayValue = (
+  parentAttributes: Record<string, any> | undefined,
+  breakpoint: string,
+): string | undefined => {
+  if (!parentAttributes) return undefined;
+  return getDisplayValue(parentAttributes, breakpoint);
+};
+
+// ─── Display-specific cascade ───────────────────────────────────────
+
+/**
+ * Cascaded display value — walks breakpoints and returns the effective
+ * display mode at the given breakpoint.
+ */
+export const getEffectiveDisplayValue = (
+  attributes: Record<string, any>,
+  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 = getDisplayValue(attributes, breakpoints[i]);
+    if (val !== undefined && val !== '') effective = val;
+  }
+  return effective;
+};
+
+/**
+ * Cascaded parent display value — same cascade logic applied to
+ * the parent block's attributes.
+ */
+export const getEffectiveParentDisplayValue = (
+  parentAttributes: Record<string, any> | undefined,
+  breakpoint: string,
+  breakpoints: string[],
+): string | undefined => {
+  if (!parentAttributes) return undefined;
+  return getEffectiveDisplayValue(parentAttributes, breakpoint, breakpoints);
+};
+
+/**
+ * Display-specific inheritance source.
+ * Returns the breakpoint name the display value cascades from,
+ * or null if explicitly set at the current breakpoint.
+ */
+export const getDisplayInheritedFromBreakpoint = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  breakpoints: string[],
+): string | null => {
+  const targetIndex = breakpoints.indexOf(breakpoint);
+  if (targetIndex === -1) return null;
+
+  const explicitVal = getDisplayValue(attributes, breakpoint);
+  if (explicitVal !== undefined && explicitVal !== '') return null;
+
+  for (let i = targetIndex - 1; i >= 0; i--) {
+    const val = getDisplayValue(attributes, breakpoints[i]);
+    if (val !== undefined && val !== '') return breakpoints[i];
+  }
+  return null;
+};

package/core-js/blocks-filters/responsive-settings/panels/BlockLinkPanel.tsx

@@ -0,0 +1,38 @@
+/**
+ * BlockLinkPanel — Standalone panel for block link settings.
+ *
+ * Block link is non-responsive, so this panel renders without
+ * breakpoint tabs. Separated from DisplayLayoutPanel to avoid
+ * confusion about its scope.
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { registry } from '../registry';
+import { BlockPanelProps } from '../types';
+
+export const BlockLinkPanel = (props: BlockPanelProps) => {
+  const { attributes } = props;
+  const modules = registry.getByPanelGroup('blockLink');
+
+  const hasAnyAttributes = modules.some((def) =>
+    Object.keys(def.attributeSchema).some((key) => !!attributes?.[key]),
+  );
+
+  if (!hasAnyAttributes) return null;
+
+  const hasNonDefaults = modules.some((def) =>
+    def.hasActiveSettings(attributes, 'basic'),
+  );
+
+  return (
+    <PanelBody
+      title={__('Block Link', 'webentor') + (hasNonDefaults ? ' *' : '')}
+      initialOpen={false}
+    >
+      {modules.map((def) => (
+        <def.SettingsComponent key={def.name} {...props} breakpoint="basic" />
+      ))}
+    </PanelBody>
+  );
+};

package/core-js/blocks-filters/responsive-settings/panels/BorderPanel.tsx

@@ -0,0 +1,61 @@
+/**
+ * BorderPanel — Thin panel wrapper for panelGroup='border'.
+ *
+ * Renders border + border-radius settings within a single PanelBody
+ * with responsive breakpoint tabs.
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { BreakpointResetButton } from '../components/BreakpointResetButton';
+import { ResponsiveTabPanel } from '../components/ResponsiveTabPanel';
+import { registry } from '../registry';
+import { BlockPanelProps } from '../types';
+
+export const BorderPanel = (props: BlockPanelProps) => {
+  const { attributes, setAttributes, breakpoints } = props;
+  const modules = registry.getByPanelGroup('border');
+
+  const hasAnyAttributes = modules.some((def) =>
+    Object.keys(def.attributeSchema).some((key) => !!attributes?.[key]),
+  );
+
+  if (!hasAnyAttributes) return null;
+
+  const hasActiveSettings = (breakpoint: string): boolean => {
+    return modules.some((def) => def.hasActiveSettings(attributes, breakpoint));
+  };
+
+  const hasNonDefaults = breakpoints.some((bp) => hasActiveSettings(bp));
+
+  return (
+    <PanelBody
+      title={__('Border Settings', 'webentor') + (hasNonDefaults ? ' *' : '')}
+      initialOpen={false}
+    >
+      <ResponsiveTabPanel
+        breakpoints={breakpoints}
+        hasActiveSettings={hasActiveSettings}
+        screens={props.twTheme?.screens as Record<string, any>}
+      >
+        {(breakpoint) => (
+          <>
+            <BreakpointResetButton
+              panelGroup="border"
+              breakpoint={breakpoint}
+              attributes={attributes}
+              setAttributes={setAttributes}
+            />
+            {modules.map((def) => (
+              <def.SettingsComponent
+                key={def.name}
+                {...props}
+                breakpoint={breakpoint}
+              />
+            ))}
+          </>
+        )}
+      </ResponsiveTabPanel>
+    </PanelBody>
+  );
+};

package/core-js/blocks-filters/responsive-settings/panels/DisplayLayoutPanel.tsx

@@ -0,0 +1,92 @@
+/**
+ * DisplayLayoutPanel — Thin panel wrapper for panelGroup='displayLayout'.
+ *
+ * Groups presets, layout, sizing, flexbox, grid, flex-item, and grid-item
+ * into a single "Display & Layout Settings" panel. Each module renders
+ * conditionally (e.g. flexbox only shows when display=flex).
+ *
+ * The panel also supports a filter hook for injecting content before tabs
+ * (e.g. preset buttons or block-specific UI).
+ */
+import { PanelBody } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '../../../blocks-utils/_use-block-parent';
+import { BreakpointResetButton } from '../components/BreakpointResetButton';
+import { ResponsiveTabPanel } from '../components/ResponsiveTabPanel';
+import { registry } from '../registry';
+import { PresetSettings } from '../settings/presets/settings';
+import { BlockPanelProps, ClassGenContext } from '../types';
+
+export const DisplayLayoutPanel = (props: BlockPanelProps) => {
+  const { attributes, setAttributes, breakpoints } = props;
+  const modules = registry.getByPanelGroup('displayLayout');
+
+  const parentBlock = useBlockParent();
+
+  const hasAnyAttributes = modules.some((def) =>
+    Object.keys(def.attributeSchema).some((key) => !!attributes?.[key]),
+  );
+
+  if (!hasAnyAttributes) return null;
+
+  const context: ClassGenContext = {
+    blockName: props.name,
+    supports: {},
+    parentBlockAttributes: parentBlock?.attributes,
+  };
+
+  const hasActiveSettings = (breakpoint: string): boolean => {
+    return modules.some((def) =>
+      def.hasActiveSettings(attributes, breakpoint, context),
+    );
+  };
+
+  const hasNonDefaults = breakpoints.some((bp) => hasActiveSettings(bp));
+
+  const beforeTabsContent = applyFilters(
+    'webentor.displayLayoutPanel.beforeTabs',
+    null,
+    props,
+  );
+
+  // Show presets above tabs (they apply globally, not per-breakpoint)
+  const showPresets = !!attributes?._preset || attributes?._preset === '';
+
+  return (
+    <PanelBody
+      title={
+        __('Display & Layout Settings', 'webentor') +
+        (hasNonDefaults ? ' *' : '')
+      }
+      initialOpen={true}
+    >
+      {showPresets && <PresetSettings {...props} />}
+      {beforeTabsContent}
+      <ResponsiveTabPanel
+        breakpoints={breakpoints}
+        hasActiveSettings={hasActiveSettings}
+        screens={props.twTheme?.screens as Record<string, any>}
+      >
+        {(breakpoint) => (
+          <>
+            <BreakpointResetButton
+              panelGroup="displayLayout"
+              breakpoint={breakpoint}
+              attributes={attributes}
+              setAttributes={setAttributes}
+            />
+            {modules.map((def) => (
+              <def.SettingsComponent
+                key={def.name}
+                {...props}
+                breakpoint={breakpoint}
+              />
+            ))}
+          </>
+        )}
+      </ResponsiveTabPanel>
+    </PanelBody>
+  );
+};

package/core-js/blocks-filters/responsive-settings/panels/SpacingPanel.tsx

@@ -0,0 +1,63 @@
+/**
+ * SpacingPanel — Thin panel wrapper for panelGroup='spacing'.
+ *
+ * Renders a single PanelBody with responsive breakpoint tabs,
+ * then loops over all setting modules registered to the 'spacing'
+ * panel group and renders each one's SettingsComponent inline.
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { BreakpointResetButton } from '../components/BreakpointResetButton';
+import { ResponsiveTabPanel } from '../components/ResponsiveTabPanel';
+import { registry } from '../registry';
+import { BlockPanelProps } from '../types';
+
+export const SpacingPanel = (props: BlockPanelProps) => {
+  const { attributes, setAttributes, breakpoints } = props;
+  const modules = registry.getByPanelGroup('spacing');
+
+  const hasAnyAttributes = modules.some((def) =>
+    Object.keys(def.attributeSchema).some((key) => !!attributes?.[key]),
+  );
+
+  if (!hasAnyAttributes) return null;
+
+  const hasActiveSettings = (breakpoint: string): boolean => {
+    return modules.some((def) => def.hasActiveSettings(attributes, breakpoint));
+  };
+
+  // Panel-level check: any breakpoint has non-default values
+  const hasNonDefaults = breakpoints.some((bp) => hasActiveSettings(bp));
+
+  return (
+    <PanelBody
+      title={__('Spacing Settings', 'webentor') + (hasNonDefaults ? ' *' : '')}
+      initialOpen={false}
+    >
+      <ResponsiveTabPanel
+        breakpoints={breakpoints}
+        hasActiveSettings={hasActiveSettings}
+        screens={props.twTheme?.screens as Record<string, any>}
+      >
+        {(breakpoint) => (
+          <>
+            <BreakpointResetButton
+              panelGroup="spacing"
+              breakpoint={breakpoint}
+              attributes={attributes}
+              setAttributes={setAttributes}
+            />
+            {modules.map((def) => (
+              <def.SettingsComponent
+                key={def.name}
+                {...props}
+                breakpoint={breakpoint}
+              />
+            ))}
+          </>
+        )}
+      </ResponsiveTabPanel>
+    </PanelBody>
+  );
+};

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

@@ -0,0 +1,4 @@
+export { SpacingPanel } from './SpacingPanel';
+export { DisplayLayoutPanel } from './DisplayLayoutPanel';
+export { BorderPanel } from './BorderPanel';
+export { BlockLinkPanel } from './BlockLinkPanel';

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

@@ -0,0 +1,88 @@
+/**
+ * SettingsRegistry — Central registry for responsive setting modules.
+ *
+ * Each setting module (layout, sizing, flexbox, etc.) self-registers via
+ * its registration.ts side-effect import. The registry provides lookup
+ * by name and by panelGroup for panel components to query.
+ *
+ * Architecture: Setting modules declare a panelGroup ('spacing' | 'displayLayout' | 'border')
+ * which determines which panel wrapper renders them. The panel wrapper
+ * queries getByPanelGroup() and renders each module's SettingsComponent
+ * in order.
+ */
+
+import { ClassGenContext, PanelGroup, SettingDefinition } from './types';
+
+export type { ClassGenContext, PanelGroup, SettingDefinition };
+
+// Re-export PropertyDefinition for backward compat with existing imports
+export type { PropertyDefinition } from './types';
+
+class SettingsRegistry {
+  private settings = new Map<string, SettingDefinition>();
+
+  /**
+   * Register a setting module. Called as a side-effect in each module's
+   * registration.ts file. Duplicate names will overwrite (useful for
+   * theme/plugin overrides).
+   */
+  register(def: SettingDefinition): void {
+    this.settings.set(def.name, def);
+  }
+
+  /** All registered settings sorted by panelGroup priority then order */
+  getAll(): SettingDefinition[] {
+    return Array.from(this.settings.values()).sort((a, b) => a.order - b.order);
+  }
+
+  /** Get a specific setting by name */
+  getByName(name: string): SettingDefinition | undefined {
+    return this.settings.get(name);
+  }
+
+  /**
+   * Get all settings for a given panel group, sorted by order.
+   * Panel components use this to discover which modules to render.
+   */
+  getByPanelGroup(group: PanelGroup): SettingDefinition[] {
+    return this.getAll().filter((def) => def.panelGroup === group);
+  }
+
+  /** Merge all attribute schemas into a single object */
+  getAllAttributeSchemas(): Record<string, any> {
+    const schemas: Record<string, any> = {};
+    for (const def of this.settings.values()) {
+      Object.assign(schemas, def.attributeSchema);
+    }
+    return schemas;
+  }
+
+  /**
+   * Check if a block supports a setting by matching its supportKey
+   * against the block's supports.webentor config.
+   */
+  isSupported(
+    supports: Record<string, any> | undefined,
+    def: SettingDefinition,
+  ): boolean {
+    const keys = Array.isArray(def.supportKey)
+      ? def.supportKey
+      : [def.supportKey];
+    return keys.some((key) => !!supports?.webentor?.[key]);
+  }
+
+  /**
+   * Get unique panel groups that have at least one registered setting.
+   * Useful for determining which panels to render.
+   */
+  getActivePanelGroups(): PanelGroup[] {
+    const groups = new Set<PanelGroup>();
+    for (const def of this.settings.values()) {
+      groups.add(def.panelGroup);
+    }
+    return Array.from(groups);
+  }
+}
+
+/** Singleton registry instance shared across all modules */
+export const registry = new SettingsRegistry();

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

@@ -1 +1,4 @@
+// Side-effect: registers with SettingsRegistry
+import './registration';
+
 export { BlockLinkPanel } from './panel';

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

@@ -1,8 +1,11 @@
-import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import * as BlockEditor from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-import { setImmutably } from '@webentorCore/_utils';
-import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+import { setImmutably } from '../../../../_utils';
+import { BlockPanelProps } from '../../types';
+
+// WordPress ships this control, but the package typings still expose it as experimental.
+const LinkControl = (BlockEditor as any).__experimentalLinkControl;
 
 export const BlockLinkPanel = ({
   attributes,
@@ -14,9 +17,6 @@ export const BlockLinkPanel = ({
 
   return (
     <div className="w-link-settings" style={{ marginBottom: '16px' }}>
-      <h3 style={{ padding: '16px', paddingBottom: '0px' }}>
-        {__('Block Link', 'webentor')}
-      </h3>
       <div style={{ padding: '16px', paddingTop: '0px', fontSize: '12px' }}>
         {__('This whole block can act like a link', 'webentor')}
       </div>

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

@@ -0,0 +1,35 @@
+/**
+ * Block link module registration.
+ *
+ * Block link is non-responsive and doesn't generate Tailwind classes.
+ * Uses its own panelGroup 'blockLink' with a standalone panel wrapper
+ * (panels/BlockLinkPanel.tsx) that renders without breakpoint tabs.
+ */
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { BlockLinkPanel } from './panel';
+
+registry.register({
+  name: 'blockLink',
+  panelGroup: 'blockLink',
+  order: 100,
+  attributeKey: 'blockLink',
+  supportKey: 'blockLink',
+  attributeSchema: {
+    blockLink: { type: 'object', default: {} },
+  },
+  SettingsComponent: BlockLinkPanel,
+  generateClasses: (
+    _attributes: Record<string, any>,
+    _breakpoint: string,
+    _context: ClassGenContext,
+  ): string[] => {
+    return [];
+  },
+  hasActiveSettings: (
+    attributes: Record<string, any>,
+    _breakpoint: string,
+  ): boolean => {
+    return !!attributes?.blockLink?.url;
+  },
+});

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

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
-
+import { WebentorConfig } from '../../../../../types/_webentor-config';
 import { getPixelFromRemValue } from '../../../utils';
 
 export const getBorderProperties = (twTheme: WebentorConfig['theme']) => [

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

@@ -15,10 +15,13 @@ import {
   getColorSlugByColor,
   isEmpty,
   setImmutably,
-} from '@webentorCore/_utils';
-
+} from '../../../../../_utils';
+import { InheritedIndicator } from '../../../components/InheritedIndicator';
 import { BlockPanelProps } from '../../../types';
-import { prepareTailwindBorderClassesFromSettings } from '../../../utils';
+import {
+  getObjectInheritedFromBreakpoint,
+  prepareTailwindBorderClassesFromSettings,
+} from '../../../utils';
 import { getBorderProperties } from './properties';
 
 interface BorderSettingsProps extends BlockPanelProps {
@@ -78,6 +81,7 @@ const WebentorBorderControl = ({
                 label={property.label}
                 value={value?.[property.name]}
                 options={property.values}
+                __nextHasNoMarginBottom
                 onChange={(selectValue) =>
                   onChange({ ...value, [property.name]: selectValue })
                 }
@@ -111,6 +115,7 @@ export const BorderSettings = ({
   setAttributes,
   name,
   breakpoint,
+  breakpoints,
   twTheme,
 }: BorderSettingsProps) => {
   if (!attributes?.border) {
@@ -220,9 +225,22 @@ export const BorderSettings = ({
     justifyItems: 'center',
   };
 
+  const borderInheritedFrom = breakpoints?.length
+    ? getObjectInheritedFromBreakpoint(
+        attributes,
+        'border',
+        'border',
+        breakpoint,
+        breakpoints,
+      )
+    : null;
+
   return (
     <div className="wbtr:my-2 wbtr:flex wbtr:flex-col wbtr:gap-2 wbtr:border wbtr:border-editor-border wbtr:p-2">
       <p className="wbtr:text-12 wbtr:uppercase">{__('Border', 'webentor')}</p>
+      {borderInheritedFrom && (
+        <InheritedIndicator fromBreakpoint={borderInheritedFrom} />
+      )}
 
       <div style={containerStyle}>
         {isLinked ? (

package/core-js/blocks-filters/responsive-settings/settings/border/border-radius/index.tsx

@@ -1 +1,2 @@
-export { BorderRadiusPanel } from './panel';
+export { BorderRadiusSettings } from './settings';
+export { getBorderRadiusValues } from './properties';

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

@@ -1,31 +1,8 @@
-import { __ } from '@wordpress/i18n';
+import { WebentorConfig } from '../../../../../types/_webentor-config';
+import { createTwThemeValues } from '../../shared/tw-values';
 
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
-
-export const getBorderRadiusValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.borderRadius).map((key) => ({
-    label: `${key} (${twTheme?.borderRadius[key]})`,
-    value: key,
-  }));
-
-  values.unshift({
-    label: __('None selected', 'webentor'),
-    value: '',
+export const getBorderRadiusValues = (twTheme: WebentorConfig['theme']) =>
+  createTwThemeValues(twTheme, 'borderRadius', '', {
+    sort: false,
+    labelFormatter: (key, rawValue) => `${key} (${rawValue})`,
   });
-
-  return values;
-};
-
-// export const getBorderRadiusProperties = (twTheme: WebentorConfig['theme']) => [
-//   {
-//     name: 'radius',
-//     label: __('Radius', 'webentor'),
-//     values: [
-//       { label: __('None selected', 'webentor'), value: '' },
-//       ...Object.keys(twTheme?.borderRadius || {}).map((key) => ({
-//         label: key,
-//         value: key,
-//       })),
-//     ],
-//   },
-// ];