@webikon/webentor-core 0.9.13 → 0.10.0

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

@@ -1,167 +0,0 @@
-import { applyFilters } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
-
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
-
-import { getPixelFromRemValue } from '../../../utils';
-
-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' },
-];
-
-const getHeightValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.height)
-    // Sort ASC manually because Object.keys() is sorting keys wrong
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.height[key])})`,
-      value: `h-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-const getWidthValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.width)
-    // Sort ASC manually because Object.keys() is sorting keys wrong
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.width[key])})`,
-      value: `w-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-const getMinHeightValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.minHeight)
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.minHeight[key])})`,
-      value: `min-h-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-const getMinWidthValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.minWidth)
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.minWidth[key])})`,
-      value: `min-w-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-const getMaxHeightValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.maxHeight)
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.maxHeight[key])})`,
-      value: `max-h-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-const getMaxWidthValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.maxWidth)
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.maxWidth[key])})`,
-      value: `max-w-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: 'None selected',
-    value: '',
-  });
-
-  return values;
-};
-
-export const getDisplayProperties = (
-  blockName: string,
-  twTheme: WebentorConfig['theme'],
-) =>
-  applyFilters(
-    'webentor-theme-display-settings',
-    [
-      {
-        label: __('Display', 'webentor'),
-        name: 'display',
-        help: __('Initial value is "Flex"', 'webentor'),
-        values: getDisplayValues(),
-      },
-      {
-        label: __('Height', 'webentor'),
-        name: 'height',
-        values: getHeightValues(twTheme),
-      },
-      {
-        label: __('Min Height', 'webentor'),
-        name: 'min-height',
-        values: getMinHeightValues(twTheme),
-      },
-      {
-        label: __('Max Height', 'webentor'),
-        name: 'max-height',
-        values: getMaxHeightValues(twTheme),
-      },
-      {
-        label: __('Width', 'webentor'),
-        name: 'width',
-        values: getWidthValues(twTheme),
-      },
-      {
-        label: __('Min Width', 'webentor'),
-        name: 'min-width',
-        values: getMinWidthValues(twTheme),
-      },
-      {
-        label: __('Max Width', 'webentor'),
-        name: 'max-width',
-        values: getMaxWidthValues(twTheme),
-      },
-    ],
-    blockName,
-  );

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

@@ -1,73 +0,0 @@
-import { getBlockSupport } from '@wordpress/blocks';
-import { SelectControl } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-
-import { camelize, setImmutably } from '@webentorCore/_utils';
-
-import { DisabledSliderInfo } from '../../../components/DisabledSliderInfo';
-import { BlockPanelProps } from '../../../types';
-import { isSliderEnabledForBreakpoint } from '../../../utils';
-import { getDisplayProperties } from './properties';
-
-interface DisplaySettingsProps extends BlockPanelProps {
-  breakpoint: string;
-}
-
-export const DisplaySettings = ({
-  attributes,
-  setAttributes,
-  name,
-  breakpoint,
-  twTheme,
-}: DisplaySettingsProps) => {
-  if (!attributes?.display) {
-    return null;
-  }
-
-  const isSliderEnabled = isSliderEnabledForBreakpoint(
-    name,
-    attributes,
-    breakpoint,
-  );
-
-  const displayProperties = getDisplayProperties(name, twTheme);
-  const supports = getBlockSupport(name, 'webentor.display');
-
-  return (
-    <div style={{ marginTop: '16px' }}>
-      {isSliderEnabled && <DisabledSliderInfo />}
-
-      {displayProperties.map((property) => {
-        // Check if block supports all properties, meaning its set to true
-        if (supports !== true) {
-          const propertyCamel = camelize(property.name); // Suports is defined in camelCase
-          // Check if block supports specific property, e.g. only "display" or "height" is supported
-          if (supports?.[propertyCamel] !== true) {
-            return null;
-          }
-        }
-
-        return (
-          <Fragment key={property.name + breakpoint}>
-            <SelectControl
-              label={property.label}
-              value={attributes.display?.[property.name]?.value?.[breakpoint]}
-              help={property?.help}
-              disabled={isSliderEnabled}
-              options={property.values}
-              onChange={(selected) =>
-                setAttributes(
-                  setImmutably(
-                    attributes,
-                    ['display', property.name, 'value', breakpoint],
-                    selected,
-                  ),
-                )
-              }
-            />
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-};

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

@@ -1,2 +0,0 @@
-export { FlexboxSettings } from './settings';
-export { getFlexboxProperties, getFlexboxItemProperties } from './properties';

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

@@ -1,187 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-import { WebentorConfig } from '@webentorCore/types/_webentor-config';
-
-import { getPixelFromRemValue } from '../../../utils';
-
-const getGapValues = (axis = '', twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.gap)
-    // Sort ASC manually because Object.keys() is sorting keys wrong
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${Number(key) * 4}px`,
-      value: `gap-${axis === 'x' ? 'x-' : axis === 'y' ? 'y-' : ''}${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: __('None selected', 'webentor'),
-    value: '',
-  });
-
-  return values;
-};
-
-const getFlexBasisValues = (twTheme: WebentorConfig['theme']) => {
-  const values = Object.keys(twTheme?.flexBasis)
-    // Sort ASC manually because Object.keys() is sorting keys wrong
-    .sort((a, b) => Number(a) - Number(b))
-    .map((key) => ({
-      label: `${key} (${getPixelFromRemValue(twTheme?.flexBasis[key])})`,
-      value: `basis-${key}`,
-    }));
-
-  // Add none selected option as first item
-  values.unshift({
-    label: __('None selected', 'webentor'),
-    value: '',
-  });
-
-  return 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' },
-];
-
-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 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' },
-];
-
-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' },
-];
-
-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(),
-  },
-];
-
-export const getFlexboxItemProperties = (twTheme: WebentorConfig['theme']) => [
-  {
-    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: getFlexBasisValues(twTheme),
-  },
-  {
-    label: __('Order', 'webentor'),
-    name: 'order',
-    help: __('Applicable only on Flexbox child item', 'webentor'),
-    values: getOrderValues(),
-  },
-];

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

@@ -1,131 +0,0 @@
-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 { getFlexboxItemProperties, getFlexboxProperties } from './properties';
-
-interface FlexboxSettingsProps extends BlockPanelProps {
-  breakpoint: string;
-}
-
-export const FlexboxSettings = ({
-  attributes,
-  setAttributes,
-  name,
-  breakpoint,
-  twTheme,
-}: FlexboxSettingsProps) => {
-  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 flex so we can display the settings?
-  const isParentFlex =
-    parentBlock?.attributes?.display?.display?.value?.[breakpoint] === 'flex';
-  const isCurrentFlex =
-    attributes?.display?.display?.value?.[breakpoint] === 'flex';
-
-  if (!isCurrentFlex && !isParentFlex) {
-    return null;
-  }
-
-  const flexboxProperties = getFlexboxProperties(twTheme);
-  const flexboxItemProperties = getFlexboxItemProperties(twTheme);
-
-  return (
-    <>
-      {isCurrentFlex && attributes?.flexbox && (
-        <div
-          style={{
-            marginTop: '16px',
-            border: '1px solid #e0e0e0',
-            padding: '8px',
-          }}
-        >
-          <h3 style={{ marginBottom: '8px' }}>
-            {__('Flexbox settings', 'webentor')}
-          </h3>
-
-          {isSliderEnabled && <DisabledSliderInfo />}
-
-          {flexboxProperties.map((property) => (
-            <Fragment key={property.name + breakpoint}>
-              <SelectControl
-                label={property.label}
-                value={attributes.flexbox?.[property.name]?.value?.[breakpoint]}
-                disabled={isSliderEnabled}
-                help={property?.help}
-                options={property.values}
-                onChange={(selected) =>
-                  setAttributes(
-                    setImmutably(
-                      attributes,
-                      ['flexbox', property.name, 'value', breakpoint],
-                      selected,
-                    ),
-                  )
-                }
-              />
-            </Fragment>
-          ))}
-        </div>
-      )}
-
-      {isParentFlex && attributes?.flexboxItem && (
-        <div
-          style={{
-            marginTop: '16px',
-            border: '1px solid #e0e0e0',
-            padding: '8px',
-          }}
-        >
-          <h3 style={{ marginBottom: '8px' }}>
-            {__('Flex Item settings', 'webentor')}
-          </h3>
-          <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 />}
-
-          {flexboxItemProperties.map((property) => (
-            <Fragment key={property.name + breakpoint}>
-              <SelectControl
-                label={property.label}
-                value={
-                  attributes.flexboxItem?.[property.name]?.value?.[breakpoint]
-                }
-                disabled={isSliderEnabled}
-                help={property?.help}
-                options={property.values}
-                onChange={(selected) =>
-                  setAttributes(
-                    setImmutably(
-                      attributes,
-                      ['flexboxItem', property.name, 'value', breakpoint],
-                      selected,
-                    ),
-                  )
-                }
-              />
-            </Fragment>
-          ))}
-        </div>
-      )}
-    </>
-  );
-};

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

@@ -1,2 +0,0 @@
-export { GridSettings } from './settings';
-export { getGridProperties, getGridItemProperties } from './properties';