@webikon/webentor-core 0.9.13 → 0.10.0

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

@@ -1,54 +1,5 @@
-import { PanelBody, TabPanel } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-import { isEmpty } from '@webentorCore/_utils';
-import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
-
-import { BorderRadiusSettings } from './border-radius/settings';
-import { BorderSettings } from './border/settings';
-
-export const BorderPanel = (props: BlockPanelProps) => {
-  const { attributes, breakpoints, twTheme } = props;
-
-  if (!attributes?.border) {
-    return null;
-  }
-
-  const checkIfHasAnyBorderSettings = (breakpoint: string): boolean => {
-    const properties = ['border', 'borderRadius'];
-
-    return properties.some((property) => {
-      return !isEmpty(attributes?.border?.[property]?.value?.[breakpoint]);
-    });
-  };
-
-  return (
-    <PanelBody title={__('Border Settings', 'webentor')} initialOpen={false}>
-      <TabPanel
-        activeClass="is-active"
-        className="w-responsive-settings-tabs"
-        initialTabName={breakpoints[0]}
-        tabs={breakpoints.map((breakpoint) => ({
-          name: breakpoint,
-          title: `${breakpoint}${checkIfHasAnyBorderSettings(breakpoint) ? '*' : ''}`,
-        }))}
-      >
-        {(tab) => (
-          <>
-            <BorderSettings
-              {...props}
-              breakpoint={tab.name}
-              twTheme={twTheme}
-            />
-
-            <BorderRadiusSettings
-              {...props}
-              breakpoint={tab.name}
-              twTheme={twTheme}
-            />
-          </>
-        )}
-      </TabPanel>
-    </PanelBody>
-  );
-};
+/**
+ * @deprecated — BorderPanel is now provided by panels/BorderPanel.tsx.
+ * This file is kept for backward compat with any external imports.
+ */
+export { BorderPanel } from '../../panels/BorderPanel';

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

@@ -0,0 +1,84 @@
+/**
+ * Border module registration.
+ *
+ * panelGroup: border, order: 10
+ * Handles both border and borderRadius settings within a single module.
+ * Support key: ['border', 'borderRadius']
+ */
+import { isEmpty } from '../../../../_utils';
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { prepareTailwindBorderClassesForSide } from '../../utils';
+import { BorderAndRadiusSettings } from './settings';
+
+const RADIUS_MAPPING: Record<string, string> = {
+  topLeft: 'rounded-tl',
+  topRight: 'rounded-tr',
+  bottomRight: 'rounded-br',
+  bottomLeft: 'rounded-bl',
+};
+
+const generateBorderClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  _context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+
+  if (!attributes.border) return classes;
+
+  for (const [propName, prop] of Object.entries(attributes.border)) {
+    const propData = prop as any;
+    if (!propData?.value) continue;
+    const bpValue = propData.value[breakpoint];
+    if (!bpValue) continue;
+
+    const twBreakpoint = breakpoint === 'basic' ? '' : `${breakpoint}:`;
+
+    for (const [valueSide, value] of Object.entries(bpValue)) {
+      if (valueSide === 'linked') continue;
+      if (!value) continue;
+
+      if (propName === 'border') {
+        classes.push(
+          ...prepareTailwindBorderClassesForSide(
+            value,
+            valueSide,
+            twBreakpoint,
+          ),
+        );
+      } else if (propName === 'borderRadius') {
+        const prefix = RADIUS_MAPPING[valueSide];
+        if (prefix) {
+          classes.push(`${twBreakpoint}${prefix}-${value}`);
+        }
+      }
+    }
+  }
+
+  return classes;
+};
+
+const hasBorderActiveSettings = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): boolean => {
+  const properties = ['border', 'borderRadius'];
+  return properties.some((property) => {
+    return !isEmpty(attributes?.border?.[property]?.value?.[breakpoint]);
+  });
+};
+
+registry.register({
+  name: 'border',
+  panelGroup: 'border',
+  order: 10,
+  attributeKey: 'border',
+  supportKey: ['border', 'borderRadius'],
+  attributeSchema: {
+    border: { type: 'object', default: {} },
+  },
+  SettingsComponent: BorderAndRadiusSettings,
+  generateClasses: generateBorderClasses,
+  hasActiveSettings: hasBorderActiveSettings,
+});

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

@@ -0,0 +1,21 @@
+/**
+ * BorderAndRadiusSettings — Combined inline settings component
+ * for both border and border-radius controls.
+ *
+ * This is the SettingsComponent for the border module, rendered
+ * inside the BorderPanel by the registry pattern.
+ */
+import { SettingsComponentProps } from '../../types';
+import { BorderRadiusSettings } from './border-radius/settings';
+import { BorderSettings } from './border/settings';
+
+export const BorderAndRadiusSettings = (props: SettingsComponentProps) => {
+  if (!props.attributes?.border) return null;
+
+  return (
+    <>
+      <BorderSettings {...props} />
+      <BorderRadiusSettings {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,4 @@
+import './registration';
+
+export { FlexItemSettings } from './settings';
+export { getFlexItemProperties } from './properties';

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

@@ -0,0 +1,60 @@
+/**
+ * Flex-item properties — grow, shrink, basis, order.
+ *
+ * Extracted from container/flexbox/properties.ts to be its own module.
+ * Re-exports getFlexboxItemProperties for backward compat.
+ */
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { PropertyDefinition } from '../../types';
+import { getOrderValues } from '../shared/layout-values';
+import { createTwThemeValues } from '../shared/tw-values';
+
+const getFlexGrowValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Grow 0', 'webentor'), value: 'grow-0' },
+  { label: __('Grow 1', 'webentor'), value: 'grow' },
+];
+
+const getFlexShrinkValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Shrink 0', 'webentor'), value: 'shrink-0' },
+  { label: __('Shrink 1', 'webentor'), value: 'shrink' },
+];
+
+export const getFlexItemProperties = (
+  twTheme: WebentorConfig['theme'],
+): PropertyDefinition[] => [
+  {
+    label: __('Flex Grow', 'webentor'),
+    name: 'flex-grow',
+    help: __('Applicable only on Flexbox child item', 'webentor'),
+    values: getFlexGrowValues(),
+  },
+  {
+    label: __('Flex Shrink', 'webentor'),
+    name: 'flex-shrink',
+    help: __('Applicable only on Flexbox child item', 'webentor'),
+    values: getFlexShrinkValues(),
+  },
+  {
+    label: __('Flex Basis', 'webentor'),
+    name: 'flex-basis',
+    help: __('Applicable only on Flexbox child item', 'webentor'),
+    values: createTwThemeValues(twTheme, 'flexBasis', 'basis'),
+  },
+  {
+    label: __('Order', 'webentor'),
+    name: 'order',
+    help: __('Applicable only on Flexbox child item', 'webentor'),
+    values: getOrderValues(),
+  },
+];
+
+export const FLEX_ITEM_PROPERTY_NAMES = [
+  'flex-grow',
+  'flex-shrink',
+  'flex-basis',
+  'order',
+];

package/core-js/blocks-filters/responsive-settings/settings/flex-item/registration.ts

@@ -0,0 +1,78 @@
+/**
+ * Flex-item module registration.
+ *
+ * panelGroup: displayLayout, order: 50
+ * Contextual: only shows when parent block display=flex.
+ * Support key: 'flexItem'
+ */
+import { getEffectiveParentDisplayValue } from '../../migration';
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { FLEX_ITEM_PROPERTY_NAMES } from './properties';
+import { FlexItemSettings } from './settings';
+
+export const generateFlexItemClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+
+  const flexItemAttr = attributes?.flexItem;
+  if (!flexItemAttr) return classes;
+
+  // Cascaded parent display check
+  const effectiveParentDisplay = getEffectiveParentDisplayValue(
+    context.parentBlockAttributes,
+    breakpoint,
+    context.breakpoints,
+  );
+  if (effectiveParentDisplay !== 'flex') return classes;
+
+  for (const [, prop] of Object.entries(flexItemAttr)) {
+    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;
+};
+
+const hasFlexItemActiveSettings = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  context?: ClassGenContext,
+): boolean => {
+  const effectiveParentDisplay = getEffectiveParentDisplayValue(
+    context?.parentBlockAttributes,
+    breakpoint,
+    context?.breakpoints ?? [],
+  );
+  if (effectiveParentDisplay !== 'flex') return false;
+
+  const flexItemAttr = attributes?.flexItem;
+  if (!flexItemAttr) return false;
+
+  return FLEX_ITEM_PROPERTY_NAMES.some(
+    (prop) => !!flexItemAttr[prop]?.value?.[breakpoint],
+  );
+};
+
+registry.register({
+  name: 'flexItem',
+  panelGroup: 'displayLayout',
+  order: 50,
+  attributeKey: 'flexItem',
+  supportKey: 'flexItem',
+  attributeSchema: {
+    flexItem: { type: 'object', default: {} },
+  },
+  SettingsComponent: FlexItemSettings,
+  generateClasses: generateFlexItemClasses,
+  hasActiveSettings: hasFlexItemActiveSettings,
+});

package/core-js/blocks-filters/responsive-settings/settings/flex-item/settings.tsx

@@ -0,0 +1,90 @@
+/**
+ * FlexItemSettings — flex child controls (grow, shrink, basis, order).
+ *
+ * Contextual: only shows when the parent block's display is 'flex'.
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '../../../../blocks-utils/_use-block-parent';
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { InheritedIndicator } from '../../components/InheritedIndicator';
+import { ResponsiveSelectGroup } from '../../components/ResponsiveSelectGroup';
+import {
+  getDisplayInheritedFromBreakpoint,
+  getEffectiveParentDisplayValue,
+} from '../../migration';
+import { SettingsComponentProps } from '../../types';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { getFlexItemProperties } from './properties';
+
+const SECTION_STYLE = {
+  marginTop: '16px',
+  border: '1px solid #e0e0e0',
+  padding: '8px',
+};
+
+export const FlexItemSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  const parentBlock = useBlockParent();
+  const effectiveParentDisplay = getEffectiveParentDisplayValue(
+    parentBlock?.attributes,
+    breakpoint,
+    breakpoints,
+  );
+
+  if (effectiveParentDisplay !== 'flex') return null;
+
+  const hasFlexItem = attributes?.flexItem;
+  if (!hasFlexItem) return null;
+
+  const attributeKey = 'flexItem';
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+
+  const parentInheritedFrom = parentBlock?.attributes
+    ? getDisplayInheritedFromBreakpoint(
+        parentBlock.attributes,
+        breakpoint,
+        breakpoints,
+      )
+    : null;
+
+  return (
+    <Fragment>
+      <div style={SECTION_STYLE}>
+        <h3 style={{ marginBottom: '8px' }}>
+          {__('Flex Item settings', 'webentor')}
+        </h3>
+        {parentInheritedFrom && (
+          <InheritedIndicator fromBreakpoint={parentInheritedFrom} />
+        )}
+        <div style={{ marginBottom: '8px', fontSize: '12px' }}>
+          {__(
+            'Parent block display setting is set to `Flex`, so current block also acts as flex item.',
+            'webentor',
+          )}
+        </div>
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey={attributeKey}
+          properties={getFlexItemProperties(twTheme)}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,4 @@
+import './registration';
+
+export { FlexboxSettings } from './settings';
+export { getFlexboxProperties } from './properties';

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

@@ -0,0 +1,80 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { getGapValues } from '../shared/gap-values';
+import {
+  getAlignContentValues,
+  getAlignItemsValues,
+  getJustifyContentValues,
+} from '../shared/layout-values';
+
+const getFlexDirectionValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Row', 'webentor'), value: 'flex-row' },
+  { label: __('Row Reverse', 'webentor'), value: 'flex-row-reverse' },
+  { label: __('Column', 'webentor'), value: 'flex-col' },
+  { label: __('Column Reverse', 'webentor'), value: 'flex-col-reverse' },
+];
+
+const getFlexWrapValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Wrap', 'webentor'), value: 'flex-wrap' },
+  { label: __('Nowrap', 'webentor'), value: 'flex-nowrap' },
+  { label: __('Wrap Reverse', 'webentor'), value: 'flex-wrap-reverse' },
+];
+
+export const FLEXBOX_PROPERTY_NAMES = [
+  'gap',
+  'gap-x',
+  'gap-y',
+  'flex-direction',
+  'flex-wrap',
+  'justify-content',
+  'align-items',
+  'align-content',
+];
+
+export const getFlexboxProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Flex Gap', 'webentor'),
+    name: 'gap',
+    values: getGapValues('', twTheme),
+  },
+  {
+    label: __('Flex Gap X', 'webentor'),
+    name: 'gap-x',
+    values: getGapValues('x', twTheme),
+    help: __('Overrides Gap value', 'webentor'),
+  },
+  {
+    label: __('Flex Gap Y', 'webentor'),
+    name: 'gap-y',
+    values: getGapValues('y', twTheme),
+    help: __('Overrides Gap value', 'webentor'),
+  },
+  {
+    label: __('Flex Direction', 'webentor'),
+    name: 'flex-direction',
+    values: getFlexDirectionValues(),
+  },
+  {
+    label: __('Flex Wrap', 'webentor'),
+    name: 'flex-wrap',
+    values: getFlexWrapValues(),
+  },
+  {
+    label: __('Justify Content', 'webentor'),
+    name: 'justify-content',
+    values: getJustifyContentValues(),
+  },
+  {
+    label: __('Align Items', 'webentor'),
+    name: 'align-items',
+    values: getAlignItemsValues(),
+  },
+  {
+    label: __('Align Content', 'webentor'),
+    name: 'align-content',
+    values: getAlignContentValues(),
+  },
+];

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

@@ -0,0 +1,66 @@
+/**
+ * Flexbox container module registration.
+ *
+ * panelGroup: displayLayout, order: 30
+ * Contextual: only renders when display=flex at the active breakpoint.
+ * Support key: 'flexbox'
+ */
+import { getEffectiveDisplayValue } from '../../migration';
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { FLEXBOX_PROPERTY_NAMES } from './properties';
+import { FlexboxSettings } from './settings';
+
+export const generateFlexboxClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+
+  if (!attributes.flexbox) return classes;
+
+  // Cascaded display check: flexbox classes apply when effective display is 'flex'
+  const effectiveDisplay = getEffectiveDisplayValue(
+    attributes,
+    breakpoint,
+    context.breakpoints,
+  );
+  if (effectiveDisplay !== 'flex') return classes;
+
+  for (const [, prop] of Object.entries(attributes.flexbox)) {
+    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;
+};
+
+const hasFlexboxActiveSettings = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): boolean => {
+  return FLEXBOX_PROPERTY_NAMES.some(
+    (propName) => !!attributes?.flexbox?.[propName]?.value?.[breakpoint],
+  );
+};
+
+registry.register({
+  name: 'flexbox',
+  panelGroup: 'displayLayout',
+  order: 30,
+  attributeKey: 'flexbox',
+  supportKey: 'flexbox',
+  attributeSchema: {
+    flexbox: { type: 'object', default: {} },
+  },
+  SettingsComponent: FlexboxSettings,
+  generateClasses: generateFlexboxClasses,
+  hasActiveSettings: hasFlexboxActiveSettings,
+});

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

@@ -0,0 +1,78 @@
+/**
+ * FlexboxSettings — flex container controls.
+ *
+ * Only renders when the current block's display is 'flex' at the
+ * active breakpoint. Flex-item controls are handled by a separate module.
+ */
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { InheritedIndicator } from '../../components/InheritedIndicator';
+import { ResponsiveSelectGroup } from '../../components/ResponsiveSelectGroup';
+import {
+  getDisplayInheritedFromBreakpoint,
+  getEffectiveDisplayValue,
+} from '../../migration';
+import { SettingsComponentProps } from '../../types';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { getFlexboxProperties } from './properties';
+
+const SECTION_STYLE = {
+  marginTop: '16px',
+  border: '1px solid #e0e0e0',
+  padding: '8px',
+};
+
+export const FlexboxSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  const effectiveDisplay = getEffectiveDisplayValue(
+    attributes,
+    breakpoint,
+    breakpoints,
+  );
+  const isCurrentFlex = effectiveDisplay === 'flex';
+
+  if (!isCurrentFlex || !attributes?.flexbox) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+
+  const inheritedFrom = getDisplayInheritedFromBreakpoint(
+    attributes,
+    breakpoint,
+    breakpoints,
+  );
+
+  return (
+    <Fragment>
+      <div style={SECTION_STYLE}>
+        <h3 style={{ marginBottom: '8px' }}>
+          {__('Flexbox settings', 'webentor')}
+        </h3>
+        {inheritedFrom && <InheritedIndicator fromBreakpoint={inheritedFrom} />}
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey="flexbox"
+          properties={getFlexboxProperties(twTheme)}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,4 @@
+import './registration';
+
+export { GridSettings } from './settings';
+export { getGridProperties } from './properties';