@webikon/webentor-core 0.9.14 → 0.10.0

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';

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