@webikon/webentor-core 0.9.13 → 0.10.0

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

@@ -0,0 +1,72 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { getGapValues } from '../shared/gap-values';
+import {
+  getAlignContentValues,
+  getAlignItemsValues,
+  getJustifyContentValues,
+} from '../shared/layout-values';
+import { createTwThemeValues } from '../shared/tw-values';
+
+export const GRID_PROPERTY_NAMES = [
+  'grid-cols',
+  'grid-rows',
+  'gap',
+  'gap-x',
+  'gap-y',
+  'justify-content',
+  'align-items',
+  'align-content',
+];
+
+export const getGridProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Grid Template Columns', 'webentor'),
+    name: 'grid-cols',
+    values: createTwThemeValues(twTheme, 'gridTemplateColumns', 'grid-cols', {
+      sort: false,
+      labelFormatter: (key) => __('Columns: %s', 'webentor').replace('%s', key),
+    }),
+  },
+  {
+    label: __('Grid Template Rows', 'webentor'),
+    name: 'grid-rows',
+    values: createTwThemeValues(twTheme, 'gridTemplateRows', 'grid-rows', {
+      sort: false,
+      labelFormatter: (key) => __('Rows: %s', 'webentor').replace('%s', key),
+    }),
+  },
+  {
+    label: __('Gap', 'webentor'),
+    name: 'gap',
+    values: getGapValues('', twTheme),
+  },
+  {
+    label: __('Gap X', 'webentor'),
+    name: 'gap-x',
+    values: getGapValues('x', twTheme),
+    help: __('Overrides Gap value', 'webentor'),
+  },
+  {
+    label: __('Gap Y', 'webentor'),
+    name: 'gap-y',
+    values: getGapValues('y', twTheme),
+    help: __('Overrides Gap value', 'webentor'),
+  },
+  {
+    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/grid/registration.ts

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

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

@@ -0,0 +1,78 @@
+/**
+ * GridSettings — grid container controls.
+ *
+ * Only renders when the current block's display is 'grid'.
+ * Grid-item settings are now 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 { getGridProperties } from './properties';
+
+const SECTION_STYLE = {
+  marginTop: '16px',
+  border: '1px solid #e0e0e0',
+  padding: '8px',
+};
+
+export const GridSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  const effectiveDisplay = getEffectiveDisplayValue(
+    attributes,
+    breakpoint,
+    breakpoints,
+  );
+  const isCurrentGrid = effectiveDisplay === 'grid';
+
+  if (!isCurrentGrid || !attributes?.grid) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+
+  const inheritedFrom = getDisplayInheritedFromBreakpoint(
+    attributes,
+    breakpoint,
+    breakpoints,
+  );
+
+  return (
+    <Fragment>
+      <div style={SECTION_STYLE}>
+        <h3 style={{ marginBottom: '8px' }}>
+          {__('Grid settings', 'webentor')}
+        </h3>
+        {inheritedFrom && <InheritedIndicator fromBreakpoint={inheritedFrom} />}
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey="grid"
+          properties={getGridProperties(twTheme)}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

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

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

@@ -0,0 +1,44 @@
+/**
+ * Grid-item properties — column span, row span, order.
+ *
+ * These properties apply to children of a grid container.
+ * Re-uses getGridItemProperties from the grid module for DRY.
+ */
+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';
+
+export const getGridItemProperties = (
+  twTheme: WebentorConfig['theme'],
+): PropertyDefinition[] => [
+  {
+    label: __('Grid Column Span', 'webentor'),
+    name: 'grid-col-span',
+    values: createTwThemeValues(twTheme, 'gridColumn', 'col', {
+      sort: false,
+      labelFormatter: (key) => key,
+    }),
+  },
+  {
+    label: __('Grid Row Span', 'webentor'),
+    name: 'grid-row-span',
+    values: createTwThemeValues(twTheme, 'gridRow', 'row', {
+      sort: false,
+      labelFormatter: (key) => key,
+    }),
+  },
+  {
+    label: __('Order', 'webentor'),
+    name: 'order',
+    values: getOrderValues(),
+  },
+];
+
+export const GRID_ITEM_PROPERTY_NAMES = [
+  'grid-col-span',
+  'grid-row-span',
+  'order',
+];

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

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

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

@@ -0,0 +1,87 @@
+/**
+ * GridItemSettings — grid child controls (column span, row span, order).
+ *
+ * Contextual: only shows when the parent block's display is 'grid'.
+ */
+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 { getGridItemProperties } from './properties';
+
+const SECTION_STYLE = {
+  marginTop: '16px',
+  border: '1px solid #e0e0e0',
+  padding: '8px',
+};
+
+export const GridItemSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  const parentBlock = useBlockParent();
+  const effectiveParentDisplay = getEffectiveParentDisplayValue(
+    parentBlock?.attributes,
+    breakpoint,
+    breakpoints,
+  );
+
+  if (effectiveParentDisplay !== 'grid') return null;
+  if (!attributes?.gridItem) return null;
+
+  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' }}>
+          {__('Grid Item settings', 'webentor')}
+        </h3>
+        {parentInheritedFrom && (
+          <InheritedIndicator fromBreakpoint={parentInheritedFrom} />
+        )}
+        <div style={{ marginBottom: '8px', fontSize: '12px' }}>
+          {__(
+            'Parent block display setting is set to `Grid`, so current block also acts as grid item.',
+            'webentor',
+          )}
+        </div>
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey="gridItem"
+          properties={getGridItemProperties(twTheme)}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

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

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

@@ -0,0 +1,51 @@
+/**
+ * Layout properties — display mode and visibility.
+ *
+ * Separated from the old display/properties.ts which lumped sizing
+ * properties together with display mode. This module only handles
+ * the CSS `display` property itself.
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '../../../../types/_webentor-config';
+import { PropertyDefinition } from '../../types';
+
+const getDisplayValues = () => [
+  { label: 'None selected', value: '' },
+  { label: 'Block', value: 'block' },
+  { label: 'Hidden', value: 'hidden' },
+  { label: 'Flex', value: 'flex' },
+  { label: 'Grid', value: 'grid' },
+  { label: 'Inline Block', value: 'inline-block' },
+  { label: 'Inline', value: 'inline' },
+];
+
+export const getLayoutProperties = (
+  blockName: string,
+  _twTheme: WebentorConfig['theme'],
+): PropertyDefinition[] =>
+  applyFilters(
+    'webentor-theme-layout-settings',
+    [
+      {
+        label: __('Display', 'webentor'),
+        name: 'display',
+        help: __('Initial value is "Flex"', 'webentor'),
+        values: getDisplayValues(),
+      },
+    ],
+    blockName,
+  ) as PropertyDefinition[];
+
+/** Property names for active-settings detection */
+export const LAYOUT_PROPERTY_NAMES = ['display'];
+
+export const hasLayoutSettingsForBreakpoint = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+): boolean => {
+  return LAYOUT_PROPERTY_NAMES.some(
+    (prop) => !!attributes?.layout?.[prop]?.value?.[breakpoint],
+  );
+};

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

@@ -0,0 +1,96 @@
+/**
+ * Layout module registration.
+ *
+ * panelGroup: displayLayout, order: 10
+ * Handles the CSS display property (block/flex/grid/hidden/etc).
+ * Support key: 'layout'
+ */
+import { getDisplayValue, getEffectiveDisplayValue } from '../../migration';
+import { registry } from '../../registry';
+import { ClassGenContext } from '../../types';
+import { hasLayoutSettingsForBreakpoint } from './properties';
+import { LayoutSettings } from './settings';
+
+const generateLayoutClasses = (
+  attributes: Record<string, any>,
+  breakpoint: string,
+  context: ClassGenContext,
+): string[] => {
+  const classes: string[] = [];
+  const displayValue = getDisplayValue(attributes, breakpoint);
+
+  if (!displayValue) return classes;
+
+  // Skip when slider is enabled at this breakpoint
+  if (attributes?.slider?.enabled?.value?.[breakpoint]) return classes;
+
+  const twBreakpoint = breakpoint === 'basic' ? '' : `${breakpoint}:`;
+
+  // 'hidden' maps to opacity-30 in the editor (visual indicator rather than true hide)
+  if (displayValue === 'hidden') {
+    classes.push(`${twBreakpoint}opacity-30`);
+  } else {
+    classes.push(`${twBreakpoint}${displayValue}`);
+
+    // Reset opacity when transitioning from hidden to visible across breakpoints.
+    // Without this, opacity-30 from a lower breakpoint would persist even after
+    // the display is overridden to a non-hidden value at a higher breakpoint.
+    const bpIndex = context.breakpoints.indexOf(breakpoint);
+    if (bpIndex > 0) {
+      const prevBp = context.breakpoints[bpIndex - 1];
+      const prevEffective = getEffectiveDisplayValue(
+        attributes,
+        prevBp,
+        context.breakpoints,
+      );
+      if (prevEffective === 'hidden') {
+        classes.push(`${twBreakpoint}opacity-100`);
+      }
+    }
+  }
+
+  return classes;
+};
+
+registry.register({
+  name: 'layout',
+  panelGroup: 'displayLayout',
+  order: 10,
+  attributeKey: 'layout',
+  supportKey: 'layout',
+  attributeSchema: {
+    layout: { type: 'object', default: {} },
+  },
+  initAttributes: (settings, _name) => {
+    const webentorSupport = settings?.supports?.webentor;
+    const displaySupport =
+      webentorSupport?.layout === true ||
+      webentorSupport?.layout?.display === true;
+
+    if (displaySupport) {
+      const defaultValue = {
+        display: {
+          value: {
+            basic: 'flex',
+            ...settings?.attributes?.layout?.default?.display?.value,
+          },
+        },
+      };
+
+      settings.attributes = {
+        ...settings.attributes,
+        layout: {
+          type: 'object',
+          default: {
+            ...settings?.attributes?.layout?.default,
+            ...defaultValue,
+          },
+        },
+      };
+    }
+    return settings;
+  },
+  SettingsComponent: LayoutSettings,
+  generateClasses: generateLayoutClasses,
+  hasActiveSettings: hasLayoutSettingsForBreakpoint,
+});

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

@@ -0,0 +1,64 @@
+/**
+ * LayoutSettings — display mode selector.
+ *
+ * Rendered inside the DisplayLayoutPanel at order: 10.
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { Fragment } from '@wordpress/element';
+
+import { camelize } from '../../../../_utils';
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { ResponsiveSelectGroup } from '../../components/ResponsiveSelectGroup';
+import { PropertyDefinition, SettingsComponentProps } from '../../types';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { getLayoutProperties } from './properties';
+
+export const LayoutSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  breakpoints,
+  twTheme,
+}: SettingsComponentProps) => {
+  if (!attributes?.layout) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+  const layoutProperties = getLayoutProperties(name, twTheme);
+
+  const webentorSupports = getBlockSupport(name, 'webentor') as
+    | Record<string, any>
+    | undefined;
+  const supports = webentorSupports?.layout;
+
+  const isPropertyVisible = (property: PropertyDefinition) => {
+    if (supports === true) return true;
+    return supports?.[camelize(property.name)] === true;
+  };
+
+  const attributeKey = 'layout';
+
+  return (
+    <Fragment>
+      <div style={{ marginTop: '16px' }}>
+        {isSliderEnabled && <DisabledSliderInfo />}
+        <ResponsiveSelectGroup
+          attributeKey={attributeKey}
+          properties={layoutProperties}
+          attributes={attributes}
+          setAttributes={setAttributes}
+          breakpoint={breakpoint}
+          breakpoints={breakpoints}
+          disabled={isSliderEnabled}
+          isPropertyVisible={isPropertyVisible}
+        />
+      </div>
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,4 @@
+import './registration';
+
+export { PresetSettings } from './settings';
+export { getLayoutPresets, layoutPresets } from './presets';