@webikon/webentor-core 0.9.14 → 0.10.1

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

@@ -0,0 +1,189 @@
+/**
+ * AppliedClassesViewer — Toolbar button (eye icon) that reveals a popover
+ * listing all Tailwind classes generated by responsive settings for the
+ * current block. Rendered inside BlockControls > ToolbarGroup in the
+ * block toolbar so it covers all panels (spacing, layout, borders).
+ *
+ * Classes are grouped by panel group (Spacing, Display & Layout, Border)
+ * for easier scanning.
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Popover, ToolbarButton } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { postList } from '@wordpress/icons';
+
+import { useBlockParent } from '../../../blocks-utils/_use-block-parent';
+import { registry } from '../registry';
+import { BlockPanelProps, ClassGenContext, PanelGroup } from '../types';
+
+interface ClassGroup {
+  group: PanelGroup;
+  label: string;
+  classes: string[];
+}
+
+const GROUP_LABELS: Record<PanelGroup, string> = {
+  spacing: 'Spacing',
+  displayLayout: 'Display & Layout',
+  border: 'Border',
+  blockLink: 'Block Link',
+};
+
+/** Panel group render order */
+const GROUP_ORDER: PanelGroup[] = [
+  'spacing',
+  'displayLayout',
+  'border',
+  'blockLink',
+];
+
+/**
+ * Collect responsive-settings classes grouped by panel group.
+ * Same logic as generateClassNames in utils.ts but without useBlockProps.
+ */
+const collectGroupedClasses = (
+  attributes: Record<string, any>,
+  blockName: string,
+  parentAttributes: Record<string, any> | undefined,
+  orderedBreakpoints: string[],
+): ClassGroup[] => {
+  const blockSettings = getBlockType(blockName);
+  const supports = blockSettings?.supports;
+
+  const context: ClassGenContext = {
+    blockName,
+    supports,
+    parentBlockAttributes: parentAttributes,
+    breakpoints: orderedBreakpoints,
+  };
+
+  const allSettings = registry.getAll();
+
+  // Collect all breakpoints present in any attribute
+  const breakpoints = new Set<string>();
+  for (const def of allSettings) {
+    if (!registry.isSupported(supports, def)) continue;
+    for (const attrKey of Object.keys(def.attributeSchema)) {
+      const attrGroup = attributes[attrKey];
+      if (!attrGroup || typeof attrGroup !== 'object') continue;
+      for (const prop of Object.values(attrGroup)) {
+        const propData = prop as any;
+        if (propData?.value) {
+          for (const bp of Object.keys(propData.value)) {
+            breakpoints.add(bp);
+          }
+        }
+      }
+    }
+  }
+
+  // Group classes by panelGroup
+  const groupMap = new Map<PanelGroup, string[]>();
+  for (const bp of breakpoints) {
+    for (const def of allSettings) {
+      if (!registry.isSupported(supports, def)) continue;
+      const generated = def
+        .generateClasses(attributes, bp, context)
+        .filter(Boolean);
+      if (generated.length === 0) continue;
+
+      const existing = groupMap.get(def.panelGroup) ?? [];
+      existing.push(...generated);
+      groupMap.set(def.panelGroup, existing);
+    }
+  }
+
+  return GROUP_ORDER.filter((g) => groupMap.has(g)).map((g) => ({
+    group: g,
+    label: GROUP_LABELS[g],
+    classes: groupMap.get(g)!,
+  }));
+};
+
+export const AppliedClassesViewer = ({
+  attributes,
+  name,
+  breakpoints,
+}: BlockPanelProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const parentBlock = useBlockParent();
+
+  const groups = useMemo(
+    () =>
+      collectGroupedClasses(
+        attributes,
+        name,
+        parentBlock?.attributes,
+        breakpoints,
+      ),
+    [attributes, name, parentBlock?.attributes, breakpoints],
+  );
+
+  if (groups.every((g) => g.classes.length === 0)) return null;
+
+  return (
+    <>
+      <ToolbarButton
+        icon={postList}
+        label={__('View applied classes', 'webentor')}
+        onClick={() => setIsOpen((prev) => !prev)}
+        isPressed={isOpen}
+      />
+      {isOpen && (
+        <Popover
+          placement="bottom-start"
+          onClose={() => setIsOpen(false)}
+          shift
+        >
+          <div
+            style={{
+              padding: '12px',
+              maxWidth: '320px',
+              maxHeight: '280px',
+              overflow: 'auto',
+            }}
+          >
+            {groups.map((group, gi) => (
+              <div key={group.group} style={{ marginTop: gi > 0 ? '12px' : 0 }}>
+                <p
+                  style={{
+                    fontSize: '11px',
+                    textTransform: 'uppercase',
+                    marginTop: 0,
+                    marginBottom: '6px',
+                    color: '#757575',
+                  }}
+                >
+                  {group.label}
+                </p>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '4px',
+                  }}
+                >
+                  {group.classes.map((cls, i) => (
+                    <code
+                      key={`${cls}-${i}`}
+                      style={{
+                        fontSize: '11px',
+                        padding: '2px 6px',
+                        background: '#f0f0f0',
+                        borderRadius: '3px',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {cls}
+                    </code>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Popover>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,346 @@
+import { Icon, SelectControl, Tooltip } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+  sidesBottom,
+  sidesHorizontal,
+  sidesLeft,
+  sidesRight,
+  sidesTop,
+  sidesVertical,
+} from '@wordpress/icons';
+
+import { setImmutably } from '../../../_utils';
+import { SelectOption } from '../types';
+import { getEffectiveValue, getInheritedFromBreakpoint } from '../utils';
+import { LinkedValuesControl, LinkMode } from './LinkedValuesControl';
+
+interface Side {
+  /** Attribute property name, e.g. 'margin-top' */
+  name: string;
+  label: string;
+  values: SelectOption[];
+}
+
+interface BoxModelControlProps {
+  type: 'margin' | 'padding';
+  sides: Side[];
+  attributes: Record<string, any>;
+  setAttributes: (attrs: Record<string, any>) => void;
+  /** Attribute group key, e.g. 'spacing' */
+  attributeKey: string;
+  breakpoint: string;
+  /** Ordered breakpoint names for cascade indicators */
+  breakpoints?: string[];
+  disabled?: boolean;
+}
+
+// ── Prefix helpers ──────────────────────────────────────────────────
+// Spacing values are stored as full Tailwind classes (e.g. "mt-4").
+// When linking sides we need to map the scale part to each side's prefix.
+
+/** Extract the TW utility prefix from a side's value list (e.g. "mt" from "mt-4"). */
+const getSidePrefix = (side: Side): string | null => {
+  const entry = side.values.find((v) => v.value !== '');
+  if (!entry) return null;
+  const match = entry.value.match(/^([a-z]+)-/);
+  return match ? match[1] : null;
+};
+
+/** Extract the scale/key portion from a TW class: "mt-4" → "4", "mt-auto" → "auto". */
+const extractScale = (value: string): string | null => {
+  const match = value.match(/^[a-z]+-(.+)$/);
+  return match ? match[1] : null;
+};
+
+/** Build the correct TW class for a target side given a scale: ("mr", "4") → "mr-4". */
+const buildValue = (prefix: string, scale: string): string =>
+  `${prefix}-${scale}`;
+
+/**
+ * Visual box-model control for margin or padding.
+ * Two states: linked (H+V axis selects) or unlinked (4-corner grid).
+ */
+export const BoxModelControl = ({
+  type,
+  sides,
+  attributes,
+  setAttributes,
+  attributeKey,
+  breakpoint,
+  breakpoints,
+  disabled = false,
+}: BoxModelControlProps) => {
+  const linkModeKey = `_${type}LinkMode`;
+  const currentLinkMode: LinkMode =
+    (attributes[attributeKey]?.[linkModeKey]?.value?.[breakpoint] as
+      | LinkMode
+      | undefined) ?? 'unlinked';
+
+  const topSide = sides.find((s) => s.name.includes('top'));
+  const bottomSide = sides.find((s) => s.name.includes('bottom'));
+  const leftSide = sides.find((s) => s.name.includes('left'));
+  const rightSide = sides.find((s) => s.name.includes('right'));
+
+  const isLinked = currentLinkMode === 'linked';
+
+  const getValue = (side?: Side): string =>
+    side
+      ? (attributes[attributeKey]?.[side.name]?.value?.[breakpoint] ?? '')
+      : '';
+
+  // ── Mode toggle: sync pairs when switching to linked ──────────
+  const setLinkMode = (nextMode: LinkMode) => {
+    let newAttrs = setImmutably(
+      attributes,
+      [attributeKey, linkModeKey, 'value', breakpoint],
+      nextMode,
+    );
+
+    // Sync pairs when switching to linked: left→right, top→bottom
+    if (nextMode === 'linked') {
+      if (leftSide && rightSide) {
+        const leftVal = getValue(leftSide);
+        if (leftVal) {
+          const scale = extractScale(leftVal);
+          const rightPrefix = getSidePrefix(rightSide);
+          if (scale && rightPrefix) {
+            newAttrs = setImmutably(
+              newAttrs,
+              [attributeKey, rightSide.name, 'value', breakpoint],
+              buildValue(rightPrefix, scale),
+            );
+          }
+        }
+      }
+      if (topSide && bottomSide) {
+        const topVal = getValue(topSide);
+        if (topVal) {
+          const scale = extractScale(topVal);
+          const bottomPrefix = getSidePrefix(bottomSide);
+          if (scale && bottomPrefix) {
+            newAttrs = setImmutably(
+              newAttrs,
+              [attributeKey, bottomSide.name, 'value', breakpoint],
+              buildValue(bottomPrefix, scale),
+            );
+          }
+        }
+      }
+    }
+
+    setAttributes(newAttrs);
+  };
+
+  // ── Value change with pair propagation in linked mode ─────────
+  const handleChange = (sideName: string, value: string) => {
+    // Determine which sides to update together
+    let targetSides: Side[];
+
+    if (isLinked) {
+      const isHorizontal =
+        sideName.includes('left') || sideName.includes('right');
+      if (isHorizontal) {
+        targetSides = [leftSide, rightSide].filter(Boolean) as Side[];
+      } else {
+        targetSides = [topSide, bottomSide].filter(Boolean) as Side[];
+      }
+    } else {
+      const side = sides.find((s) => s.name === sideName);
+      targetSides = side ? [side] : [];
+    }
+
+    let newAttrs = { ...attributes };
+
+    if (!value) {
+      for (const side of targetSides) {
+        newAttrs = setImmutably(
+          newAttrs,
+          [attributeKey, side.name, 'value', breakpoint],
+          '',
+        );
+      }
+    } else {
+      const scale = extractScale(value);
+      for (const side of targetSides) {
+        const prefix = getSidePrefix(side);
+        const mapped = scale && prefix ? buildValue(prefix, scale) : value;
+        newAttrs = setImmutably(
+          newAttrs,
+          [attributeKey, side.name, 'value', breakpoint],
+          mapped,
+        );
+      }
+    }
+
+    setAttributes(newAttrs);
+  };
+
+  const resetAll = () => {
+    let newAttrs = { ...attributes };
+    for (const side of sides) {
+      newAttrs = setImmutably(
+        newAttrs,
+        [attributeKey, side.name, 'value', breakpoint],
+        '',
+      );
+    }
+    setAttributes(newAttrs);
+  };
+
+  const hasAnyValue = sides.some(
+    (s) => !!attributes[attributeKey]?.[s.name]?.value?.[breakpoint],
+  );
+
+  // ── Select renderer with cascade indicators ─────────────────────
+  const renderSelect = (
+    side: Side | undefined,
+    labelOverride?: string,
+    hideLabel?: boolean,
+  ) => {
+    if (!side) return null;
+
+    const explicitValue = getValue(side);
+    let options = side.values;
+    let inheritedClassName = '';
+
+    if (!explicitValue && breakpoints?.length) {
+      const inheritedFrom = getInheritedFromBreakpoint(
+        attributes,
+        attributeKey,
+        side.name,
+        breakpoint,
+        breakpoints,
+      );
+      if (inheritedFrom) {
+        const inheritedValue = getEffectiveValue(
+          attributes,
+          attributeKey,
+          side.name,
+          breakpoint,
+          breakpoints,
+        );
+        if (inheritedValue) {
+          const label =
+            side.values.find((o) => o.value === inheritedValue)?.label ??
+            inheritedValue;
+          const placeholderText = sprintf(
+            __('%s (from %s)', 'webentor'),
+            label,
+            inheritedFrom,
+          );
+          options = [
+            { label: placeholderText, value: '' },
+            ...side.values.filter((o) => o.value !== ''),
+          ];
+          inheritedClassName = 'wbtr-inherited-value';
+        }
+      }
+    }
+
+    return (
+      <SelectControl
+        label={labelOverride ?? side.label}
+        hideLabelFromVision={hideLabel}
+        value={explicitValue}
+        options={options}
+        disabled={disabled}
+        onChange={(val) => handleChange(side.name, val)}
+        className={inheritedClassName}
+        __nextHasNoMarginBottom
+      />
+    );
+  };
+
+  return (
+    <div className="wbtr:my-2 wbtr:flex wbtr:flex-col wbtr:gap-2 wbtr:border wbtr:border-editor-border wbtr:p-2">
+      <div className="wbtr:flex wbtr:items-center wbtr:gap-2">
+        <p className="wbtr:mb-0! wbtr:text-12 wbtr:uppercase">
+          {type === 'margin'
+            ? __('Margin', 'webentor')
+            : __('Padding', 'webentor')}
+        </p>
+
+        <LinkedValuesControl
+          mode={currentLinkMode}
+          onModeChange={setLinkMode}
+          onReset={resetAll}
+          resetDisabled={!hasAnyValue}
+        />
+      </div>
+
+      {isLinked ? (
+        <div className="wbtr:flex wbtr:flex-col wbtr:gap-1.5">
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-2">
+            <Tooltip text={__('Horizontal', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesHorizontal} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(leftSide, __('Horizontal', 'webentor'), true)}
+            </div>
+          </div>
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-2">
+            <Tooltip text={__('Vertical', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesVertical} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(topSide, __('Vertical', 'webentor'), true)}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: '4px',
+          }}
+        >
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-1.5">
+            <Tooltip text={__('Top', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesTop} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(topSide, topSide?.label, true)}
+            </div>
+          </div>
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-1.5">
+            <Tooltip text={__('Right', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesRight} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(rightSide, rightSide?.label, true)}
+            </div>
+          </div>
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-1.5">
+            <Tooltip text={__('Bottom', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesBottom} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(bottomSide, bottomSide?.label, true)}
+            </div>
+          </div>
+          <div className="wbtr:flex wbtr:items-center wbtr:gap-1.5">
+            <Tooltip text={__('Left', 'webentor')}>
+              <span className="wbtr:flex">
+                <Icon icon={sidesLeft} size={20} />
+              </span>
+            </Tooltip>
+            <div className="wbtr:flex-1">
+              {renderSelect(leftSide, leftSide?.label, true)}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,94 @@
+/**
+ * BreakpointResetButton — Clears all setting values for a specific
+ * breakpoint within a panel group. Renders as a small button at the
+ * top of each breakpoint tab.
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { registry } from '../registry';
+import { PanelGroup } from '../types';
+
+interface BreakpointResetButtonProps {
+  panelGroup: PanelGroup;
+  breakpoint: string;
+  attributes: Record<string, any>;
+  setAttributes: (attrs: Record<string, any>) => void;
+}
+
+export const BreakpointResetButton = ({
+  panelGroup,
+  breakpoint,
+  attributes,
+  setAttributes,
+}: BreakpointResetButtonProps) => {
+  const modules = registry.getByPanelGroup(panelGroup);
+
+  const hasAnyValues = modules.some((def) => {
+    // Check all attribute keys the module owns.
+    for (const key of Object.keys(def.attributeSchema)) {
+      const attrGroup = attributes?.[key];
+      if (!attrGroup || typeof attrGroup !== 'object') continue;
+      if (
+        Object.values(attrGroup).some(
+          (prop: any) => prop?.value?.[breakpoint] !== undefined,
+        )
+      )
+        return true;
+    }
+    return false;
+  });
+
+  if (!hasAnyValues) return null;
+
+  const handleReset = () => {
+    const patch: Record<string, any> = {};
+
+    for (const def of modules) {
+      // Iterate all attribute keys in the module's schema.
+      for (const key of Object.keys(def.attributeSchema)) {
+        const attrGroup = attributes?.[key];
+        if (!attrGroup || typeof attrGroup !== 'object') continue;
+
+        const updatedGroup = { ...attrGroup };
+        let changed = false;
+
+        for (const [propName, propData] of Object.entries(updatedGroup)) {
+          const prop = propData as any;
+          if (prop?.value?.[breakpoint] !== undefined) {
+            const { [breakpoint]: _, ...rest } = prop.value;
+            updatedGroup[propName] = { ...prop, value: rest };
+            changed = true;
+          }
+        }
+
+        if (changed) {
+          patch[key] = updatedGroup;
+        }
+      }
+    }
+
+    if (Object.keys(patch).length) {
+      setAttributes(patch);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginBottom: '8px',
+      }}
+    >
+      <Button
+        variant="tertiary"
+        isDestructive
+        size="small"
+        onClick={handleReset}
+      >
+        {__('Reset breakpoint', 'webentor')}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+/**
+ * DebugPanel — Collapsible inspector panel showing raw responsive
+ * setting attributes. Gated behind window.WEBENTOR_WP_DEBUG.
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { BlockPanelProps } from '../types';
+
+declare global {
+  interface Window {
+    WEBENTOR_WP_DEBUG?: boolean;
+  }
+}
+
+const ATTRIBUTE_KEYS = [
+  'layout',
+  'sizing',
+  'spacing',
+  'flexbox',
+  'grid',
+  'flexItem',
+  'gridItem',
+  'border',
+  '_preset',
+  '_presetClasses',
+  'blockLink',
+  // v1 keys are not supported anymore, kept here for debugging reference
+  'display',
+  'flexboxItem',
+] as const;
+
+export const DebugPanel = ({ attributes }: BlockPanelProps) => {
+  if (!window.WEBENTOR_WP_DEBUG) {
+    return null;
+  }
+
+  const debugData: Record<string, any> = {};
+  for (const key of ATTRIBUTE_KEYS) {
+    if (attributes?.[key] !== undefined) {
+      debugData[key] = attributes[key];
+    }
+  }
+
+  return (
+    <PanelBody
+      title={__('Debug: Responsive Settings', 'webentor')}
+      initialOpen={false}
+    >
+      <pre
+        style={{
+          fontSize: '10px',
+          lineHeight: '1.4',
+          maxHeight: '400px',
+          overflow: 'auto',
+          background: '#f0f0f0',
+          padding: '8px',
+          borderRadius: '4px',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-all',
+        }}
+      >
+        {JSON.stringify(debugData, null, 2)}
+      </pre>
+    </PanelBody>
+  );
+};