@webikon/webentor-core 0.9.12

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

@@ -0,0 +1,187 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+const getGridTemplateColumnsValues = (twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.gridTemplateColumns).map((key) => ({
+    label: __('Columns: %s', 'webentor').replace('%s', key),
+    value: `grid-cols-${key}`,
+  }));
+
+  // Add none selected option as first item
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+const getGridTemplateRowsValues = (twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.gridTemplateRows).map((key) => ({
+    label: __('Rows: %s', 'webentor').replace('%s', key),
+    value: `grid-rows-${key}`,
+  }));
+
+  // Add none selected option as first item
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+const getGapValues = (axis = '', twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.gap)
+    .sort((a, b) => Number(a) - Number(b))
+    .map((key) => ({
+      label: `${Number(key) * 4}px`,
+      value: `gap-${axis === 'x' ? 'x-' : axis === 'y' ? 'y-' : ''}${key}`,
+    }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+const getJustifyContentValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Normal', 'webentor'), value: 'justify-normal' },
+  { label: __('Flex Start', 'webentor'), value: 'justify-start' },
+  { label: __('Flex End', 'webentor'), value: 'justify-end' },
+  { label: __('Center', 'webentor'), value: 'justify-center' },
+  { label: __('Space Between', 'webentor'), value: 'justify-between' },
+  { label: __('Space Around', 'webentor'), value: 'justify-around' },
+  { label: __('Space Evenly', 'webentor'), value: 'justify-evenly' },
+  { label: __('Stretch', 'webentor'), value: 'justify-stretch' },
+];
+
+const getAlignItemsValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Flex Start', 'webentor'), value: 'items-start' },
+  { label: __('Flex End', 'webentor'), value: 'items-end' },
+  { label: __('Center', 'webentor'), value: 'items-center' },
+  { label: __('Baseline', 'webentor'), value: 'items-baseline' },
+  { label: __('Stretch', 'webentor'), value: 'items-stretch' },
+];
+
+const getAlignContentValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Normal', 'webentor'), value: 'content-normal' },
+  { label: __('Flex Start', 'webentor'), value: 'content-start' },
+  { label: __('Flex End', 'webentor'), value: 'content-end' },
+  { label: __('Center', 'webentor'), value: 'content-center' },
+  { label: __('Space Between', 'webentor'), value: 'content-between' },
+  { label: __('Space Around', 'webentor'), value: 'content-around' },
+  { label: __('Space Evenly', 'webentor'), value: 'content-evenly' },
+  { label: __('Baseline', 'webentor'), value: 'content-baseline' },
+  { label: __('Stretch', 'webentor'), value: 'content-stretch' },
+];
+
+const getOrderValues = () => [
+  { label: __('None selected', 'webentor'), value: '' },
+  { label: __('Order First', 'webentor'), value: 'order-first' },
+  { label: __('Order Last', 'webentor'), value: 'order-last' },
+  { label: __('Order None', 'webentor'), value: 'order-none' },
+  { label: __('Order 0', 'webentor'), value: 'order-0' },
+  { label: __('Order 1', 'webentor'), value: 'order-1' },
+  { label: __('Order 2', 'webentor'), value: 'order-2' },
+  { label: __('Order 3', 'webentor'), value: 'order-3' },
+  { label: __('Order 4', 'webentor'), value: 'order-4' },
+  { label: __('Order 5', 'webentor'), value: 'order-5' },
+];
+
+const getGridColumnSpanValues = (twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.gridColumn).map((key) => ({
+    label: key,
+    value: `col-${key}`,
+  }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+const getGridRowSpanValues = (twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.gridRow).map((key) => ({
+    label: key,
+    value: `row-${key}`,
+  }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+export const getGridProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Grid Template Columns', 'webentor'),
+    name: 'grid-cols',
+    values: getGridTemplateColumnsValues(twTheme),
+  },
+  {
+    label: __('Grid Template Rows', 'webentor'),
+    name: 'grid-rows',
+    values: getGridTemplateRowsValues(twTheme),
+  },
+  {
+    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(),
+  },
+];
+
+export const getGridItemProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Grid Column Span', 'webentor'),
+    name: 'grid-col-span',
+    values: getGridColumnSpanValues(twTheme),
+  },
+  {
+    label: __('Grid Row Span', 'webentor'),
+    name: 'grid-row-span',
+    values: getGridRowSpanValues(twTheme),
+  },
+  {
+    label: __('Order', 'webentor'),
+    name: 'order',
+    values: getOrderValues(),
+  },
+];

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

@@ -0,0 +1,132 @@
+import { SelectControl } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '@webentorCore/_utils';
+import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import { DisabledSliderInfo } from '../../../components/DisabledSliderInfo';
+import { isSliderEnabledForBreakpoint } from '../../../utils';
+import { getGridItemProperties, getGridProperties } from './properties';
+
+interface GridSettingsProps extends BlockPanelProps {
+  breakpoint: string;
+  twTheme: any;
+}
+
+export const GridSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  twTheme,
+}: GridSettingsProps) => {
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+
+  // Get parent block data
+  const parentBlock = useBlockParent();
+
+  // TODO: how to check all previous breakpoints and determine if any of them is grid so we can display the settings?
+  const isParentGrid =
+    parentBlock?.attributes?.display?.display?.value?.[breakpoint] === 'grid';
+  const isCurrentGrid =
+    attributes?.display?.display?.value?.[breakpoint] === 'grid';
+
+  if (!isCurrentGrid && !isParentGrid) {
+    return null;
+  }
+
+  const gridProperties = getGridProperties(twTheme);
+  const gridItemProperties = getGridItemProperties(twTheme);
+
+  return (
+    <>
+      {isCurrentGrid && attributes?.grid && (
+        <div
+          style={{
+            marginTop: '16px',
+            border: '1px solid #e0e0e0',
+            padding: '8px',
+          }}
+        >
+          <h3 style={{ marginBottom: '8px' }}>
+            {__('Grid settings', 'webentor')}
+          </h3>
+
+          {isSliderEnabled && <DisabledSliderInfo />}
+
+          {gridProperties.map((property) => (
+            <Fragment key={property.name + breakpoint}>
+              <SelectControl
+                label={property.label}
+                value={attributes.grid?.[property.name]?.value?.[breakpoint]}
+                disabled={isSliderEnabled}
+                help={property?.help}
+                options={property.values}
+                onChange={(selected) =>
+                  setAttributes(
+                    setImmutably(
+                      attributes,
+                      ['grid', property.name, 'value', breakpoint],
+                      selected,
+                    ),
+                  )
+                }
+              />
+            </Fragment>
+          ))}
+        </div>
+      )}
+
+      {isParentGrid && attributes?.gridItem && (
+        <div
+          style={{
+            marginTop: '16px',
+            border: '1px solid #e0e0e0',
+            padding: '8px',
+          }}
+        >
+          <h3 style={{ marginBottom: '8px' }}>
+            {__('Grid Item settings', 'webentor')}
+          </h3>
+          <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 />}
+
+          {gridItemProperties.map((property) => (
+            <Fragment key={property.name + breakpoint}>
+              <SelectControl
+                label={property.label}
+                value={
+                  attributes.gridItem?.[property.name]?.value?.[breakpoint]
+                }
+                disabled={isSliderEnabled}
+                help={property?.help}
+                options={property.values}
+                onChange={(selected) =>
+                  setAttributes(
+                    setImmutably(
+                      attributes,
+                      ['gridItem', property.name, 'value', breakpoint],
+                      selected,
+                    ),
+                  )
+                }
+              />
+            </Fragment>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,4 @@
+export { ContainerPanel } from './panel';
+export { DisplaySettings } from './display';
+export { GridSettings } from './grid';
+export { FlexboxSettings } from './flexbox';

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

@@ -0,0 +1,92 @@
+import { PanelBody, TabPanel } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import { DisplaySettings, getDisplayProperties } from './display';
+import { FlexboxSettings, getFlexboxItemProperties } from './flexbox';
+import { getGridItemProperties, GridSettings } from './grid';
+
+export const ContainerPanel = (props: BlockPanelProps) => {
+  const { attributes, breakpoints, twTheme } = props;
+
+  if (
+    !attributes?.display &&
+    !attributes?.grid &&
+    !attributes?.gridItem &&
+    !attributes?.flexbox &&
+    !attributes?.flexboxItem
+  ) {
+    return null;
+  }
+
+  const checkIfHasAnyActiveSettings = (breakpoint: string): boolean => {
+    const parentBlock = useBlockParent();
+    const displayProperties = getDisplayProperties(props.name, twTheme);
+    const flexboxItemProperties = getFlexboxItemProperties(twTheme);
+    const gridItemProperties = getGridItemProperties(twTheme);
+
+    const hasDisplaySettings = displayProperties.some((property) => {
+      return !!attributes?.display?.[property.name]?.value?.[breakpoint];
+    });
+
+    const isParentFlexbox =
+      parentBlock?.attributes?.display?.display?.value?.[breakpoint] === 'flex';
+    const isParentGrid =
+      parentBlock?.attributes?.display?.display?.value?.[breakpoint] === 'grid';
+
+    const hasFlexboxItemSettings =
+      isParentFlexbox &&
+      flexboxItemProperties.some((property) => {
+        return !!attributes?.flexboxItem?.[property.name]?.value?.[breakpoint];
+      });
+
+    const hasGridItemSettings =
+      isParentGrid &&
+      gridItemProperties.some((property) => {
+        return !!attributes?.gridItem?.[property.name]?.value?.[breakpoint];
+      });
+
+    return hasDisplaySettings || hasFlexboxItemSettings || hasGridItemSettings;
+  };
+
+  const hasContainerSettings = (breakpoint: string): boolean => {
+    return checkIfHasAnyActiveSettings(breakpoint);
+  };
+
+  // Allow themes/plugins to add custom content before responsive tabs
+  const beforeTabsContent = applyFilters(
+    'webentor.containerPanel.beforeTabs',
+    null,
+    props,
+  );
+
+  return (
+    <PanelBody title={__('Container Settings', 'webentor')} initialOpen={true}>
+      {beforeTabsContent}
+      <TabPanel
+        activeClass="is-active"
+        className="w-responsive-settings-tabs"
+        initialTabName={breakpoints[0]}
+        tabs={breakpoints.map((breakpoint) => ({
+          name: breakpoint,
+          title: `${breakpoint}${hasContainerSettings(breakpoint) ? '*' : ''}`,
+        }))}
+      >
+        {(tab) => (
+          <>
+            <DisplaySettings
+              {...props}
+              breakpoint={tab.name}
+              twTheme={twTheme}
+            />
+            <GridSettings {...props} breakpoint={tab.name} />
+            <FlexboxSettings {...props} breakpoint={tab.name} />
+          </>
+        )}
+      </TabPanel>
+    </PanelBody>
+  );
+};

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

@@ -0,0 +1,3 @@
+export { SpacingPanel } from './panel';
+export { SpacingSettings } from './settings';
+export { getSpacingProperties } from './properties';

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

@@ -0,0 +1,45 @@
+import { PanelBody, TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+
+import { SpacingSettings } from './settings';
+
+export const SpacingPanel = (props: BlockPanelProps) => {
+  const { attributes, breakpoints, twTheme } = props;
+
+  if (!attributes?.spacing) {
+    return null;
+  }
+
+  const hasSpacingSettingsForBreakpoint = (breakpoint: string): boolean => {
+    return !!(
+      attributes?.spacing?.['margin-top']?.value?.[breakpoint] ||
+      attributes?.spacing?.['margin-bottom']?.value?.[breakpoint] ||
+      attributes?.spacing?.['margin-left']?.value?.[breakpoint] ||
+      attributes?.spacing?.['margin-right']?.value?.[breakpoint] ||
+      attributes?.spacing?.['padding-top']?.value?.[breakpoint] ||
+      attributes?.spacing?.['padding-bottom']?.value?.[breakpoint] ||
+      attributes?.spacing?.['padding-left']?.value?.[breakpoint] ||
+      attributes?.spacing?.['padding-right']?.value?.[breakpoint]
+    );
+  };
+
+  return (
+    <PanelBody title={__('Spacing Settings', 'webentor')} initialOpen={false}>
+      <TabPanel
+        activeClass="is-active"
+        className="w-responsive-settings-tabs"
+        initialTabName={breakpoints[0]}
+        tabs={breakpoints.map((breakpoint) => ({
+          name: breakpoint,
+          title: `${breakpoint}${hasSpacingSettingsForBreakpoint(breakpoint) ? '*' : ''}`, // Add * if spacing is set on this breakpoint
+        }))}
+      >
+        {(tab) => (
+          <SpacingSettings {...props} breakpoint={tab.name} twTheme={twTheme} />
+        )}
+      </TabPanel>
+    </PanelBody>
+  );
+};

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

@@ -0,0 +1,74 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+const getSpacingValues = (property = '', twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.spacing)
+    .sort((a, b) => Number(a) - Number(b))
+    .map((key) => ({
+      label: `${Number(key) * 4}px`,
+      value: `${property}-${key}`,
+    }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+export const getSpacingProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Margin Top', 'webentor'),
+    name: 'margin-top',
+    values: [
+      ...getSpacingValues('mt', twTheme),
+      { label: 'Auto', value: 'mt-auto' },
+    ],
+  },
+  {
+    label: __('Margin Left', 'webentor'),
+    name: 'margin-left',
+    values: [
+      ...getSpacingValues('ml', twTheme),
+      { label: 'Auto', value: 'ml-auto' },
+    ],
+  },
+  {
+    label: __('Margin Right', 'webentor'),
+    name: 'margin-right',
+    values: [
+      ...getSpacingValues('mr', twTheme),
+      { label: 'Auto', value: 'mr-auto' },
+    ],
+  },
+  {
+    label: __('Margin Bottom', 'webentor'),
+    name: 'margin-bottom',
+    values: [
+      ...getSpacingValues('mb', twTheme),
+      { label: 'Auto', value: 'mb-auto' },
+    ],
+  },
+  {
+    label: __('Padding Top', 'webentor'),
+    name: 'padding-top',
+    values: getSpacingValues('pt', twTheme),
+  },
+  {
+    label: __('Padding Left', 'webentor'),
+    name: 'padding-left',
+    values: getSpacingValues('pl', twTheme),
+  },
+  {
+    label: __('Padding Right', 'webentor'),
+    name: 'padding-right',
+    values: getSpacingValues('pr', twTheme),
+  },
+  {
+    label: __('Padding Bottom', 'webentor'),
+    name: 'padding-bottom',
+    values: getSpacingValues('pb', twTheme),
+  },
+];

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

@@ -0,0 +1,85 @@
+import { SelectControl } from '@wordpress/components';
+
+import { setImmutably } from '@webentorCore/_utils';
+import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+
+import { DisabledSliderInfo } from '../../components/DisabledSliderInfo';
+import { isSliderEnabledForBreakpoint } from '../../utils';
+import { getSpacingProperties } from './properties';
+
+interface SpacingSettingsProps extends BlockPanelProps {
+  breakpoint: string;
+}
+
+export const SpacingSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  twTheme,
+}: SpacingSettingsProps) => {
+  if (!attributes?.spacing) {
+    return null;
+  }
+
+  const isSliderEnabled = isSliderEnabledForBreakpoint(
+    name,
+    attributes,
+    breakpoint,
+  );
+
+  const spacingProperties = getSpacingProperties(twTheme);
+
+  return (
+    <div
+      style={{
+        marginTop: '16px',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        gap: '16px',
+      }}
+    >
+      {isSliderEnabled && <DisabledSliderInfo />}
+
+      {spacingProperties.map((property) => (
+        <div
+          key={property.name + breakpoint}
+          style={{
+            margin:
+              property.name.includes('top') || property.name.includes('bottom')
+                ? '0 auto'
+                : undefined,
+            width:
+              property.name.includes('top') || property.name.includes('bottom')
+                ? '75%'
+                : property.name.includes('left') ||
+                    property.name.includes('right')
+                  ? '40%'
+                  : undefined,
+          }}
+        >
+          <SelectControl
+            label={property.label}
+            value={attributes.spacing?.[property.name]?.value?.[breakpoint]}
+            help={property?.help}
+            disabled={isSliderEnabled}
+            options={property.values}
+            onChange={(selected) =>
+              setAttributes(
+                setImmutably(
+                  attributes,
+                  ['spacing', property.name, 'value', breakpoint],
+                  selected,
+                ),
+              )
+            }
+          />
+
+          {/* Horizontal line between margin & padding settings */}
+          {property.name.includes('margin-bottom') && <hr />}
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export interface ResponsiveValue {
+  value: {
+    [key: string]: string;
+  };
+}
+
+export interface ResponsiveAttribute {
+  [key: string]: ResponsiveValue;
+}
+
+export interface BorderValue {
+  top: {
+    width: string;
+    color: string;
+    style: string;
+  };
+  right: {
+    width: string;
+    color: string;
+    style: string;
+  };
+  bottom: {
+    width: string;
+    color: string;
+    style: string;
+  };
+  left: {
+    width: string;
+    color: string;
+    style: string;
+  };
+}
+
+export interface ResponsiveBorderValue {
+  value: {
+    [key: string]: BorderValue;
+  };
+}
+
+export interface BlockAttributes {
+  blockLink?: any;
+  spacing?: ResponsiveAttribute;
+  display?: ResponsiveAttribute;
+  grid?: ResponsiveAttribute;
+  gridItem?: ResponsiveAttribute;
+  flexbox?: ResponsiveAttribute;
+  flexboxItem?: ResponsiveAttribute;
+  border?: ResponsiveBorderValue;
+  slider?: {
+    enabled?: ResponsiveValue;
+  };
+}
+
+export interface BlockPanelProps {
+  attributes: BlockAttributes;
+  setAttributes: (attributes: BlockAttributes) => void;
+  name: string;
+  clientId: string;
+  breakpoints: string[];
+  twTheme: WebentorConfig['theme'];
+}