@webikon/webentor-core 0.9.14 → 0.10.0

package/core-js/blocks-filters/responsive-settings/components/InheritedIndicator.tsx

@@ -0,0 +1,32 @@
+/**
+ * InheritedIndicator — shows when a setting section is visible due to
+ * breakpoint cascading (min-width inheritance) rather than an explicit
+ * value at the current breakpoint.
+ *
+ * Displays e.g. "Inherited from basic" so the user understands why
+ * flexbox/grid controls appear even though no display value is explicitly
+ * set at the active breakpoint.
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+interface InheritedIndicatorProps {
+  /** The breakpoint name the value cascades from (e.g. 'basic', 'sm') */
+  fromBreakpoint: string;
+}
+
+const INDICATOR_STYLE: React.CSSProperties = {
+  fontSize: '11px',
+  color: '#757575',
+  fontStyle: 'italic',
+  marginBottom: '8px',
+};
+
+export const InheritedIndicator = ({
+  fromBreakpoint,
+}: InheritedIndicatorProps) => {
+  return (
+    <div style={INDICATOR_STYLE}>
+      {sprintf(__('Inherited from %s', 'webentor'), fromBreakpoint)}
+    </div>
+  );
+};

package/core-js/blocks-filters/responsive-settings/components/LinkedValuesControl.tsx

@@ -0,0 +1,55 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { link, linkOff } from '@wordpress/icons';
+
+export type LinkMode = 'linked' | 'unlinked';
+
+interface LinkedValuesControlProps {
+  mode: LinkMode;
+  onModeChange: (mode: LinkMode) => void;
+  onReset?: () => void;
+  resetDisabled?: boolean;
+}
+
+/**
+ * Toggle button for linking/unlinking spacing sides.
+ * Linked = horizontal+vertical pairs synced; Unlinked = all 4 independent.
+ */
+export const LinkedValuesControl = ({
+  mode,
+  onModeChange,
+  onReset,
+  resetDisabled = false,
+}: LinkedValuesControlProps) => {
+  const isLinked = mode === 'linked';
+
+  return (
+    <div className="wbtr:flex wbtr:grow-1 wbtr:items-center wbtr:justify-between">
+      <Button
+        icon={isLinked ? linkOff : link}
+        isPressed={isLinked}
+        onClick={() => onModeChange(isLinked ? 'unlinked' : 'linked')}
+        label={
+          isLinked
+            ? __('Unlink sides', 'webentor')
+            : __('Link sides', 'webentor')
+        }
+        showTooltip
+        size="small"
+      />
+
+      {onReset && (
+        <Button
+          variant="tertiary"
+          onClick={onReset}
+          disabled={resetDisabled}
+          label={__('Reset to defaults', 'webentor')}
+          showTooltip
+          size="small"
+        >
+          {__('Reset', 'webentor')}
+        </Button>
+      )}
+    </div>
+  );
+};

package/core-js/blocks-filters/responsive-settings/components/ResponsiveSelectGroup.tsx

@@ -0,0 +1,185 @@
+import { SelectControl } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+import { setImmutably } from '../../../_utils';
+import { PropertyDefinition } from '../registry';
+import { SelectOptionGroup } from '../types';
+import { getEffectiveValue, getInheritedFromBreakpoint } from '../utils';
+
+interface ResponsiveSelectGroupProps {
+  attributeKey: string;
+  properties: PropertyDefinition[];
+  attributes: Record<string, any>;
+  setAttributes: (attrs: Record<string, any>) => void;
+  breakpoint: string;
+  /** Ordered breakpoint names for cascade indicators */
+  breakpoints?: string[];
+  disabled?: boolean;
+  /** Per-property visibility filter (e.g. display supports check) */
+  isPropertyVisible?: (property: PropertyDefinition) => boolean;
+  /** Map of property name → grouped options for optgroup rendering */
+  valueGroups?: Record<string, SelectOptionGroup[]>;
+}
+
+/**
+ * Resolve the inherited placeholder text for a property.
+ * Returns the human-readable label of the cascaded value + source breakpoint,
+ * or the default "None selected" if nothing is inherited.
+ */
+const getInheritedPlaceholder = (
+  attributes: Record<string, any>,
+  attributeKey: string,
+  property: PropertyDefinition,
+  breakpoint: string,
+  breakpoints: string[] | undefined,
+  valueGroups?: Record<string, SelectOptionGroup[]>,
+): { text: string; isInherited: boolean } => {
+  const defaultText = __('None selected', 'webentor');
+  if (!breakpoints?.length) return { text: defaultText, isInherited: false };
+
+  const inheritedFrom = getInheritedFromBreakpoint(
+    attributes,
+    attributeKey,
+    property.name,
+    breakpoint,
+    breakpoints,
+  );
+  if (!inheritedFrom) return { text: defaultText, isInherited: false };
+
+  const inheritedValue = getEffectiveValue(
+    attributes,
+    attributeKey,
+    property.name,
+    breakpoint,
+    breakpoints,
+  );
+  if (!inheritedValue) return { text: defaultText, isInherited: false };
+
+  // Resolve human-readable label from flat options or grouped options
+  let label: string | undefined;
+  const groups = property.groupedValues
+    ? valueGroups?.[property.name]
+    : undefined;
+  if (groups) {
+    for (const group of groups) {
+      const match = group.options.find((o) => o.value === inheritedValue);
+      if (match) {
+        label = match.label;
+        break;
+      }
+    }
+  }
+  if (!label) {
+    label =
+      property.values.find((o) => o.value === inheritedValue)?.label ??
+      inheritedValue;
+  }
+
+  return {
+    text: sprintf(__('%s (from %s)', 'webentor'), label, inheritedFrom),
+    isInherited: true,
+  };
+};
+
+/**
+ * Generic SelectControl list renderer for responsive settings.
+ *
+ * Shows cascade indicators: when a property has no explicit value at the
+ * current breakpoint but inherits one from a lower breakpoint, the empty
+ * option shows the inherited value and source breakpoint.
+ *
+ * When a property has groupedValues + matching valueGroups entry,
+ * passes <optgroup> children to SelectControl instead of the options prop.
+ * WP's SelectControl renders children directly inside the native <select>.
+ */
+export const ResponsiveSelectGroup = ({
+  attributeKey,
+  properties,
+  attributes,
+  setAttributes,
+  breakpoint,
+  breakpoints,
+  disabled = false,
+  isPropertyVisible,
+  valueGroups,
+}: ResponsiveSelectGroupProps) => {
+  return (
+    <>
+      {properties.map((property) => {
+        if (isPropertyVisible && !isPropertyVisible(property)) return null;
+
+        const groups = property.groupedValues
+          ? valueGroups?.[property.name]
+          : undefined;
+        const handleChange = (selected: string) =>
+          setAttributes(
+            setImmutably(
+              attributes,
+              [attributeKey, property.name, 'value', breakpoint],
+              selected,
+            ),
+          );
+
+        const explicitValue =
+          attributes[attributeKey]?.[property.name]?.value?.[breakpoint] ?? '';
+        const { text: placeholderText, isInherited } = getInheritedPlaceholder(
+          attributes,
+          attributeKey,
+          property,
+          breakpoint,
+          breakpoints,
+          valueGroups,
+        );
+
+        const inheritedClassName =
+          !explicitValue && isInherited ? 'wbtr-inherited-value' : '';
+
+        return (
+          <Fragment key={property.name + breakpoint}>
+            {groups ? (
+              <SelectControl
+                label={property.label}
+                value={explicitValue}
+                help={property?.help}
+                disabled={disabled}
+                __nextHasNoMarginBottom
+                onChange={handleChange}
+                className={inheritedClassName}
+              >
+                <option value="">{placeholderText}</option>
+                {groups.map((group) => (
+                  <optgroup key={group.label} label={group.label}>
+                    {group.options.map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              </SelectControl>
+            ) : (
+              <SelectControl
+                label={property.label}
+                value={explicitValue}
+                help={property?.help}
+                disabled={disabled}
+                __nextHasNoMarginBottom
+                options={
+                  isInherited
+                    ? [
+                        { label: placeholderText, value: '' },
+                        ...property.values.filter((o) => o.value !== ''),
+                      ]
+                    : property.values
+                }
+                onChange={handleChange}
+                className={inheritedClassName}
+              />
+            )}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};

package/core-js/blocks-filters/responsive-settings/components/ResponsiveTabPanel.tsx

@@ -0,0 +1,106 @@
+import { TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+interface ResponsiveTabPanelProps {
+  breakpoints: string[];
+  /** Returns true when the breakpoint has at least one active value (renders `*` indicator) */
+  hasActiveSettings: (breakpoint: string) => boolean;
+  children: (breakpoint: string) => React.ReactNode;
+  className?: string;
+  /** Resolved twTheme.screens — used for breakpoint tooltip text */
+  screens?: Record<string, any>;
+}
+
+/**
+ * Extracts a human-readable min-width from a Tailwind screen value.
+ * Handles plain strings ('768px') and object configs ({ min: '768px' }).
+ */
+function resolveScreenValue(
+  screen: string | Record<string, string> | Record<string, string>[],
+): string | null {
+  if (typeof screen === 'string') return screen;
+  if (Array.isArray(screen)) {
+    const entry = screen.find((s) => s.min);
+    return entry?.min ?? null;
+  }
+  if (typeof screen === 'object' && screen !== null) {
+    return screen.min ?? screen.raw ?? null;
+  }
+  return null;
+}
+
+function getBreakpointTooltip(
+  bp: string,
+  screens?: Record<string, any>,
+): string {
+  if (bp === 'basic') {
+    return __('min-width: 0px', 'webentor');
+  }
+  const raw = screens?.[bp];
+  if (!raw) return bp;
+  const value = resolveScreenValue(raw);
+  return value ? `min-width: ${value}` : bp;
+}
+
+/**
+ * Inline SVG that renders a breakpoint label as text.
+ * Used as TabPanel tab `icon` so WP's built-in tooltip activates
+ * (when icon is set, TabPanel shows `title` as the tooltip).
+ */
+function BreakpointIcon({ label }: { label: string }) {
+  const charWidth = 7.5;
+  const width = Math.max(20, label.length * charWidth + 6);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${width} 20`}
+      width={width}
+      height={20}
+    >
+      <text
+        x={width / 2}
+        y={15}
+        textAnchor="middle"
+        fontSize="13"
+        fontWeight="inherit"
+        fill="currentColor"
+      >
+        {label}
+      </text>
+    </svg>
+  );
+}
+
+/**
+ * Shared responsive breakpoint tab wrapper.
+ * Uses icon-based tabs so TabPanel's built-in tooltip shows each
+ * breakpoint's min-width value on hover.
+ */
+export const ResponsiveTabPanel = ({
+  breakpoints,
+  hasActiveSettings,
+  children,
+  screens,
+  className = 'w-responsive-settings-tabs',
+}: ResponsiveTabPanelProps) => {
+  return (
+    <TabPanel
+      activeClass="is-active"
+      className={className}
+      initialTabName={breakpoints[0]}
+      tabs={breakpoints.map((bp) => {
+        const active = hasActiveSettings(bp);
+        const label = `${bp}${active ? '*' : ''}`;
+
+        return {
+          name: bp,
+          title: getBreakpointTooltip(bp, screens),
+          icon: <BreakpointIcon label={label} />,
+        };
+      })}
+    >
+      {(tab) => <>{children(tab.name)}</>}
+    </TabPanel>
+  );
+};

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

@@ -1,163 +1,90 @@
+/**
+ * Responsive Settings — Entry point.
+ *
+ * This module provides per-breakpoint block controls for spacing, layout,
+ * sizing, flexbox, grid, flex/grid item, border, and presets.
+ *
+ * Architecture:
+ * - Each setting module self-registers with the SettingsRegistry via side-effect imports
+ * - Panel components (SpacingPanel, DisplayLayoutPanel, BorderPanel) query the
+ *   registry for their panelGroup and render each module's SettingsComponent
+ * - BlockEdit renders the panels in InspectorControls
+ *
+ * @see ./registry.ts — SettingsRegistry singleton
+ * @see ./migration.ts — display value helpers
+ */
 import { registerBlockExtension } from '@10up/block-components';
-import { InspectorControls } from '@wordpress/block-editor';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { addFilter, applyFilters } from '@wordpress/hooks';
 
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
-
-import { includedBlocks } from './constants';
-import { BlockLinkPanel } from './settings/block-link';
-import { BorderPanel } from './settings/border';
-import { ContainerPanel } from './settings/container';
-import { SpacingPanel } from './settings/spacing';
+import { WebentorConfig } from '../../types/_webentor-config';
+import { AppliedClassesViewer } from './components/AppliedClassesViewer';
+import { DebugPanel } from './components/DebugPanel';
+import {
+  BlockLinkPanel,
+  BorderPanel,
+  DisplayLayoutPanel,
+  SpacingPanel,
+} from './panels';
+import { registry } from './registry';
 import { generateClassNames, inlineStyleGenerator } from './utils';
 
+// Side-effect imports: each module self-registers with the SettingsRegistry.
+// Order doesn't matter — each module declares its own panelGroup and order.
+import './settings/block-link';
+import './settings/border';
+import './settings/flex-item';
+import './settings/flexbox';
+import './settings/grid';
+import './settings/grid-item';
+import './settings/layout';
+import './settings/presets';
+import './settings/sizing';
+import './settings/spacing';
+
 const initResponsiveSettings = () => {
-  // Make sure new attributes are present in blocks so we can conditionally show their settings
+  /**
+   * Attribute registration filter.
+   * Iterates over all registered setting modules and merges their
+   * attribute schemas into blocks that declare support for them.
+   */
   addFilter(
     'blocks.registerBlockType',
     'webentor/addResponsiveSettingsAttributes',
     (settings, name) => {
-      if (
-        includedBlocks['blockLink'].includes(name) ||
-        settings?.supports?.webentor?.blockLink
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            blockLink: {
-              type: 'object',
-              default: settings.attributes?.blockLink?.default || {},
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['display'].includes(name) ||
-        settings?.supports?.webentor?.display
-      ) {
-        const displaySupport =
-          settings?.supports?.webentor?.display === true ||
-          settings?.supports?.webentor?.display?.display === true;
-
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            display: {
-              type: 'object',
-              default: {
-                ...settings?.attributes?.display?.default,
-                display: {
-                  value: {
-                    // Default display is FLEX
-                    ...(displaySupport ? { basic: 'flex' } : {}),
-                    ...settings?.attributes?.display?.default?.display?.value,
-                  },
-                },
-              },
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['spacing'].includes(name) ||
-        settings?.supports?.webentor?.spacing
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            spacing: {
-              type: 'object',
-              default: settings.attributes?.spacing?.default || {},
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['grid'].includes(name) ||
-        settings?.supports?.webentor?.grid
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            grid: {
-              type: 'object',
-              default: settings.attributes?.grid?.default || {},
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['gridItem'].includes(name) ||
-        settings?.supports?.webentor?.gridItem
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            gridItem: {
-              type: 'object',
-              default: settings.attributes?.gridItem?.default || {},
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['flexbox'].includes(name) ||
-        settings?.supports?.webentor?.flexbox
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            flexbox: {
-              type: 'object',
-              default: settings.attributes?.flexbox?.default || {},
-            },
-          },
-        };
-      }
-
-      if (
-        includedBlocks['flexboxItem'].includes(name) ||
-        settings?.supports?.webentor?.flexboxItem
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            flexboxItem: {
-              type: 'object',
-              default: settings.attributes?.flexboxItem?.default || {},
+      const allDefs = registry.getAll();
+
+      for (const def of allDefs) {
+        const supportedByRegistry = registry.isSupported(
+          settings?.supports,
+          def,
+        );
+        if (!supportedByRegistry) continue;
+
+        // Merge attribute schemas from the module definition
+        for (const [attrKey, schema] of Object.entries(def.attributeSchema)) {
+          settings.attributes = {
+            ...settings.attributes,
+            [attrKey]: {
+              ...schema,
+              default:
+                settings.attributes?.[attrKey]?.default || schema.default,
             },
-          },
-        };
-      }
+          };
+        }
 
-      if (
-        includedBlocks['border'].includes(name) ||
-        includedBlocks['borderRadius'].includes(name) ||
-        settings?.supports?.webentor?.border ||
-        settings?.supports?.webentor?.borderRadius
-      ) {
-        settings.attributes = {
-          ...settings.attributes,
-          ...{
-            border: {
-              type: 'object',
-              default: settings.attributes?.border?.default || {},
-            },
-          },
-        };
+        // Custom attribute initialiser (e.g. display flex default)
+        if (def.initAttributes) {
+          settings = def.initAttributes(settings, name);
+        }
       }
 
       return settings;
     },
   );
 
-  // Register block extension for all blocks
   registerBlockExtension('*', {
     extensionName: 'webentor.core.addResponsiveSettings',
     attributes: {},
@@ -168,26 +95,48 @@ const initResponsiveSettings = () => {
   });
 };
 
-const BlockEdit = (props) => {
-  const breakpoints: string[] = applyFilters('webentor.core.twBreakpoints', [
+/**
+ * BlockEdit — renders InspectorControls panels for responsive settings.
+ *
+ * Uses panel wrappers (SpacingPanel, DisplayLayoutPanel, BorderPanel, BlockLinkPanel)
+ * which internally query the registry for their panelGroup's modules.
+ *
+ * Responsive settings migration is handled globally in PHP.
+ */
+const BlockEdit = (props: any) => {
+  const breakpoints = applyFilters('webentor.core.twBreakpoints', [
     'basic',
-  ]);
-  const twTheme: WebentorConfig['theme'] = applyFilters(
+  ]) as string[];
+  const twTheme = applyFilters(
     'webentor.core.twTheme',
     {},
-  );
+  ) as WebentorConfig['theme'];
 
   return (
     <Fragment>
+      <BlockControls>
+        <ToolbarGroup>
+          <AppliedClassesViewer
+            {...props}
+            breakpoints={breakpoints}
+            twTheme={twTheme}
+          />
+        </ToolbarGroup>
+      </BlockControls>
       <InspectorControls>
         <SpacingPanel {...props} breakpoints={breakpoints} twTheme={twTheme} />
-        <ContainerPanel
+        <DisplayLayoutPanel
           {...props}
           breakpoints={breakpoints}
           twTheme={twTheme}
         />
         <BorderPanel {...props} breakpoints={breakpoints} twTheme={twTheme} />
-        <BlockLinkPanel {...props} />
+        <BlockLinkPanel
+          {...props}
+          breakpoints={breakpoints}
+          twTheme={twTheme}
+        />
+        <DebugPanel {...props} breakpoints={breakpoints} twTheme={twTheme} />
       </InspectorControls>
     </Fragment>
   );