@webikon/webentor-core 0.9.13 → 0.10.0

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,
-//       })),
-//     ],
-//   },
-// ];

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

@@ -1,11 +1,15 @@
 import { getBlockType } from '@wordpress/blocks';
 import { Button, SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { link, linkOff } from '@wordpress/icons';
 
-import { isEmpty, setImmutably } from '@webentorCore/_utils';
-
+import { isEmpty, setImmutably } from '../../../../../_utils';
+import { InheritedIndicator } from '../../../components/InheritedIndicator';
 import { BlockPanelProps } from '../../../types';
+import {
+  getEffectiveObjectValue,
+  getObjectInheritedFromBreakpoint,
+} from '../../../utils';
 import { getBorderRadiusValues } from './properties';
 
 interface BorderRadiusSettingsProps extends BlockPanelProps {
@@ -20,26 +24,53 @@ interface BorderRadiusValue {
   linked?: boolean;
 }
 
+type CornerKey = 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
+
 const WebentorBorderRadiusControl = ({
   label,
   value,
   onChange,
   twTheme,
+  inheritedValue,
+  inheritedFrom,
 }: {
   label?: string;
   value?: string;
   onChange: (value: string) => void;
   twTheme: any;
+  inheritedValue?: string;
+  inheritedFrom?: string | null;
 }) => {
-  const values = getBorderRadiusValues(twTheme);
+  const allValues = getBorderRadiusValues(twTheme);
+  const isInherited = !value && !!inheritedValue && !!inheritedFrom;
+  const selectClassName = `wbtr:w-24${isInherited ? ' wbtr-inherited-value' : ''}`;
+
+  let options = allValues;
+  if (isInherited) {
+    const inheritedLabel =
+      allValues.find((o) => o.value === inheritedValue)?.label ??
+      inheritedValue;
+    options = [
+      {
+        label: sprintf(
+          __('%s (from %s)', 'webentor'),
+          inheritedLabel,
+          inheritedFrom,
+        ),
+        value: '',
+      },
+      ...allValues.filter((o) => o.value !== ''),
+    ];
+  }
 
   return (
     <SelectControl
       label={label}
       value={value ?? ''}
-      options={values}
+      options={options}
+      __nextHasNoMarginBottom
       onChange={onChange}
-      className="wbtr:w-24"
+      className={selectClassName}
     />
   );
 };
@@ -49,6 +80,7 @@ export const BorderRadiusSettings = ({
   setAttributes,
   name,
   breakpoint,
+  breakpoints,
   twTheme,
 }: BorderRadiusSettingsProps) => {
   if (!attributes?.border) {
@@ -129,11 +161,42 @@ export const BorderRadiusSettings = ({
     justifyItems: 'center',
   };
 
+  const radiusInheritedFrom = breakpoints?.length
+    ? getObjectInheritedFromBreakpoint(
+        attributes,
+        'border',
+        'borderRadius',
+        breakpoint,
+        breakpoints,
+      )
+    : null;
+
+  // Resolve inherited per-corner values for placeholder display
+  const effectiveRadius = breakpoints?.length
+    ? getEffectiveObjectValue<BorderRadiusValue>(
+        attributes,
+        'border',
+        'borderRadius',
+        breakpoint,
+        breakpoints,
+      )
+    : undefined;
+
+  const getCornerInherited = (corner: CornerKey) => {
+    const explicitVal = currentBorderRadius?.[corner];
+    if (explicitVal) return { value: undefined, from: null };
+    const inherited = effectiveRadius?.[corner];
+    return { value: inherited || undefined, from: radiusInheritedFrom };
+  };
+
   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 Radius', 'webentor')}
       </p>
+      {radiusInheritedFrom && (
+        <InheritedIndicator fromBreakpoint={radiusInheritedFrom} />
+      )}
 
       <div style={containerStyle}>
         {isLinked ? (
@@ -144,6 +207,8 @@ export const BorderRadiusSettings = ({
                 value={currentBorderRadius?.topLeft}
                 onChange={(value) => onChange(value, 'topLeft')}
                 twTheme={twTheme}
+                inheritedValue={getCornerInherited('topLeft').value}
+                inheritedFrom={getCornerInherited('topLeft').from}
               />
             </div>
           </>
@@ -155,6 +220,8 @@ export const BorderRadiusSettings = ({
                 value={currentBorderRadius?.topLeft}
                 onChange={(value) => onChange(value, 'topLeft')}
                 twTheme={twTheme}
+                inheritedValue={getCornerInherited('topLeft').value}
+                inheritedFrom={getCornerInherited('topLeft').from}
               />
             </div>
             <div style={{ gridColumn: '2', gridRow: '1' }}>
@@ -163,6 +230,8 @@ export const BorderRadiusSettings = ({
                 value={currentBorderRadius?.topRight}
                 onChange={(value) => onChange(value, 'topRight')}
                 twTheme={twTheme}
+                inheritedValue={getCornerInherited('topRight').value}
+                inheritedFrom={getCornerInherited('topRight').from}
               />
             </div>
             <div style={{ gridColumn: '2', gridRow: '2' }}>
@@ -171,6 +240,8 @@ export const BorderRadiusSettings = ({
                 value={currentBorderRadius?.bottomRight}
                 onChange={(value) => onChange(value, 'bottomRight')}
                 twTheme={twTheme}
+                inheritedValue={getCornerInherited('bottomRight').value}
+                inheritedFrom={getCornerInherited('bottomRight').from}
               />
             </div>
             <div style={{ gridColumn: '1', gridRow: '2' }}>
@@ -179,6 +250,8 @@ export const BorderRadiusSettings = ({
                 value={currentBorderRadius?.bottomLeft}
                 onChange={(value) => onChange(value, 'bottomLeft')}
                 twTheme={twTheme}
+                inheritedValue={getCornerInherited('bottomLeft').value}
+                inheritedFrom={getCornerInherited('bottomLeft').from}
               />
             </div>
           </>

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

@@ -1 +1,5 @@
-export { BorderPanel } from './panel';
+import './registration';
+
+export { BorderAndRadiusSettings } from './settings';
+export { BorderSettings } from './border/settings';
+export { BorderRadiusSettings } from './border-radius/settings';