@webikon/webentor-core 0.9.12

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

@@ -0,0 +1,310 @@
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { getBlockType } from '@wordpress/blocks';
+import {
+  Button,
+  ColorPalette,
+  Dropdown,
+  SelectControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { link, linkOff } from '@wordpress/icons';
+
+import {
+  getColorBySlug,
+  getColorSlugByColor,
+  isEmpty,
+  setImmutably,
+} from '@webentorCore/_utils';
+
+import { BlockPanelProps } from '../../../types';
+import { prepareTailwindBorderClassesFromSettings } from '../../../utils';
+import { getBorderProperties } from './properties';
+
+interface BorderSettingsProps extends BlockPanelProps {
+  breakpoint: string;
+}
+
+interface BorderSide {
+  width?: string; // E.g. '1', '2', '4',...
+  style?: string; // E.g. 'solid', 'dashed',...
+  color?: string; // E.g. 'black', 'red',...
+}
+
+interface BorderValue {
+  top?: BorderSide;
+  right?: BorderSide;
+  bottom?: BorderSide;
+  left?: BorderSide;
+  linked?: boolean;
+}
+
+const WebentorBorderControl = ({
+  label,
+  value,
+  onChange,
+  colors,
+  borderClasses,
+  twTheme,
+}: {
+  label: string;
+  value?: BorderSide;
+  onChange: (value: BorderSide) => void;
+  colors: any;
+  borderClasses: string[];
+  twTheme: any;
+}) => {
+  const properties = getBorderProperties(twTheme);
+
+  return (
+    <div className="wbtr:flex wbtr:items-center wbtr:gap-2">
+      <Dropdown
+        className="wbtr:border-control-dropdown"
+        contentClassName="wbtr:p-4"
+        renderToggle={({ isOpen, onToggle }) => (
+          <Button
+            onClick={onToggle}
+            aria-expanded={isOpen}
+            className={borderClasses.join(' ')}
+          >
+            {label}
+          </Button>
+        )}
+        renderContent={() => (
+          <div className="wbtr:flex wbtr:flex-col wbtr:gap-4">
+            {properties.map((property) => (
+              <SelectControl
+                key={property.name}
+                label={property.label}
+                value={value?.[property.name]}
+                options={property.values}
+                onChange={(selectValue) =>
+                  onChange({ ...value, [property.name]: selectValue })
+                }
+                className="wbtr:w-24"
+              />
+            ))}
+
+            <div>
+              <p className="wbtr:uppercase">{__('Color', 'webentor')}</p>
+              <ColorPalette
+                colors={colors}
+                value={getColorBySlug(colors, value?.color)} // Get as hex value
+                onChange={(color) =>
+                  onChange({
+                    ...value,
+                    color: getColorSlugByColor(colors, color), // Save as slug
+                  })
+                }
+                disableCustomColors
+              />
+            </div>
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export const BorderSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  twTheme,
+}: BorderSettingsProps) => {
+  if (!attributes?.border) {
+    return null;
+  }
+
+  const currentBorder: BorderValue = {
+    ...(attributes.border.border?.value?.[breakpoint] || {}),
+  };
+
+  const blockSettings = getBlockType(name)?.attributes;
+  const defaultBorderValue = blockSettings?.border?.default;
+
+  const isLinked = currentBorder.linked ?? true;
+
+  const borderTopClasses = prepareTailwindBorderClassesFromSettings(
+    attributes,
+    'border',
+    'top',
+  );
+
+  const borderRightClasses = prepareTailwindBorderClassesFromSettings(
+    attributes,
+    'border',
+    'right',
+  );
+
+  const borderBottomClasses = prepareTailwindBorderClassesFromSettings(
+    attributes,
+    'border',
+    'bottom',
+  );
+
+  const borderLeftClasses = prepareTailwindBorderClassesFromSettings(
+    attributes,
+    'border',
+    'left',
+  );
+
+  const borderClasses = [
+    ...borderTopClasses,
+    ...borderRightClasses,
+    ...borderBottomClasses,
+    ...borderLeftClasses,
+  ];
+
+  const colors = useSelect((select) => {
+    return select(blockEditorStore).getSettings().colors;
+  }, []);
+
+  const onChange = (
+    value: BorderSide,
+    side?: 'top' | 'right' | 'bottom' | 'left',
+  ) => {
+    if (!side) return;
+
+    if (isLinked) {
+      // When linked, update all sides with the same value
+      setAttributes(
+        setImmutably(attributes, ['border', 'border', 'value', breakpoint], {
+          ...currentBorder,
+          top: value,
+          right: value,
+          bottom: value,
+          left: value,
+          linked: isLinked,
+        }),
+      );
+    } else {
+      // When not linked, update only the specified side
+      setAttributes(
+        setImmutably(attributes, ['border', 'border', 'value', breakpoint], {
+          ...currentBorder,
+          [side]: value,
+          linked: isLinked,
+        }),
+      );
+    }
+  };
+
+  const toggleLinked = () => {
+    setAttributes(
+      setImmutably(
+        attributes,
+        ['border', 'border', 'value', breakpoint, 'linked'],
+        !isLinked,
+      ),
+    );
+  };
+
+  const resetBorder = () => {
+    setAttributes(
+      setImmutably(
+        attributes,
+        ['border', 'border', 'value'],
+        defaultBorderValue?.border?.value,
+      ),
+    );
+  };
+
+  const containerStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gridTemplateRows: 'repeat(3, 1fr)',
+    gap: '8px',
+    alignItems: 'center',
+    justifyItems: 'center',
+  };
+
+  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', 'webentor')}</p>
+
+      <div style={containerStyle}>
+        {isLinked ? (
+          <>
+            <div style={{ gridColumn: 'span 3', gridRow: 'span 3' }}>
+              <WebentorBorderControl
+                label={__('All Borders', 'webentor')}
+                value={currentBorder.top}
+                onChange={(value) => onChange(value, 'top')}
+                colors={colors}
+                borderClasses={borderClasses}
+                twTheme={twTheme}
+              />
+            </div>
+          </>
+        ) : (
+          <>
+            <div style={{ gridColumn: '2', gridRow: '1' }}>
+              <WebentorBorderControl
+                label={__('Top', 'webentor')}
+                value={currentBorder.top}
+                onChange={(value) => onChange(value, 'top')}
+                colors={colors}
+                borderClasses={borderTopClasses}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '3', gridRow: '2' }}>
+              <WebentorBorderControl
+                label={__('Right', 'webentor')}
+                value={currentBorder.right}
+                onChange={(value) => onChange(value, 'right')}
+                colors={colors}
+                borderClasses={borderRightClasses}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '2', gridRow: '3' }}>
+              <WebentorBorderControl
+                label={__('Bottom', 'webentor')}
+                value={currentBorder.bottom}
+                onChange={(value) => onChange(value, 'bottom')}
+                colors={colors}
+                borderClasses={borderBottomClasses}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '1', gridRow: '2' }}>
+              <WebentorBorderControl
+                label={__('Left', 'webentor')}
+                value={currentBorder.left}
+                onChange={(value) => onChange(value, 'left')}
+                colors={colors}
+                borderClasses={borderLeftClasses}
+                twTheme={twTheme}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="wbtr:flex wbtr:justify-between">
+        <Button
+          icon={isLinked ? link : linkOff}
+          onClick={toggleLinked}
+          label={
+            isLinked
+              ? __('Unlink sides', 'webentor')
+              : __('Link sides', 'webentor')
+          }
+        />
+
+        <Button
+          variant="tertiary"
+          onClick={resetBorder}
+          disabled={isEmpty(currentBorder)}
+          label={__('Reset to defaults', 'webentor')}
+          showTooltip
+        >
+          {__('Reset', 'webentor')}
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { BorderRadiusPanel } from './panel';

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

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+export const getBorderRadiusValues = (twTheme: WebentorConfig['theme']) => {
+  const values = Object.keys(twTheme?.borderRadius).map((key) => ({
+    label: `${key} (${twTheme?.borderRadius[key]})`,
+    value: key,
+  }));
+
+  values.unshift({
+    label: __('None selected', 'webentor'),
+    value: '',
+  });
+
+  return values;
+};
+
+// export const getBorderRadiusProperties = (twTheme: WebentorConfig['theme']) => [
+//   {
+//     name: 'radius',
+//     label: __('Radius', 'webentor'),
+//     values: [
+//       { label: __('None selected', 'webentor'), value: '' },
+//       ...Object.keys(twTheme?.borderRadius || {}).map((key) => ({
+//         label: key,
+//         value: key,
+//       })),
+//     ],
+//   },
+// ];

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

@@ -0,0 +1,211 @@
+import { getBlockType } from '@wordpress/blocks';
+import { Button, SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { link, linkOff } from '@wordpress/icons';
+
+import { isEmpty, setImmutably } from '@webentorCore/_utils';
+
+import { BlockPanelProps } from '../../../types';
+import { getBorderRadiusValues } from './properties';
+
+interface BorderRadiusSettingsProps extends BlockPanelProps {
+  breakpoint: string;
+}
+
+interface BorderRadiusValue {
+  topLeft?: string;
+  topRight?: string;
+  bottomRight?: string;
+  bottomLeft?: string;
+  linked?: boolean;
+}
+
+const WebentorBorderRadiusControl = ({
+  label,
+  value,
+  onChange,
+  twTheme,
+}: {
+  label?: string;
+  value?: string;
+  onChange: (value: string) => void;
+  twTheme: any;
+}) => {
+  const values = getBorderRadiusValues(twTheme);
+
+  return (
+    <SelectControl
+      label={label}
+      value={value ?? ''}
+      options={values}
+      onChange={onChange}
+      className="wbtr:w-24"
+    />
+  );
+};
+
+export const BorderRadiusSettings = ({
+  attributes,
+  setAttributes,
+  name,
+  breakpoint,
+  twTheme,
+}: BorderRadiusSettingsProps) => {
+  if (!attributes?.border) {
+    return null;
+  }
+
+  const currentBorderRadius: BorderRadiusValue = {
+    ...(attributes.border.borderRadius?.value?.[breakpoint] || {}),
+  };
+
+  const blockSettings = getBlockType(name)?.attributes;
+  const defaultBorderRadius = blockSettings?.border?.default;
+
+  const isLinked = currentBorderRadius.linked ?? true;
+
+  const onChange = (
+    value: string,
+    corner?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft',
+  ) => {
+    if (!corner) return;
+
+    if (isLinked) {
+      setAttributes(
+        setImmutably(
+          attributes,
+          ['border', 'borderRadius', 'value', breakpoint],
+          {
+            ...currentBorderRadius,
+            topLeft: value,
+            topRight: value,
+            bottomRight: value,
+            bottomLeft: value,
+            linked: isLinked,
+          },
+        ),
+      );
+    } else {
+      setAttributes(
+        setImmutably(
+          attributes,
+          ['border', 'borderRadius', 'value', breakpoint],
+          {
+            ...currentBorderRadius,
+            [corner]: value,
+            linked: isLinked,
+          },
+        ),
+      );
+    }
+  };
+
+  const toggleLinked = () => {
+    setAttributes(
+      setImmutably(
+        attributes,
+        ['border', 'borderRadius', 'value', breakpoint, 'linked'],
+        !isLinked,
+      ),
+    );
+  };
+
+  const resetBorderRadius = () => {
+    setAttributes(
+      setImmutably(
+        attributes,
+        ['border', 'borderRadius', 'value'],
+        defaultBorderRadius?.borderRadius?.value, // Reset to defaults
+      ),
+    );
+  };
+
+  const containerStyle = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gridTemplateRows: 'repeat(2, 1fr)',
+    gap: '8px',
+    alignItems: 'center',
+    justifyItems: 'center',
+  };
+
+  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>
+
+      <div style={containerStyle}>
+        {isLinked ? (
+          <>
+            <div style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
+              <WebentorBorderRadiusControl
+                label={__('All Corners', 'webentor')}
+                value={currentBorderRadius?.topLeft}
+                onChange={(value) => onChange(value, 'topLeft')}
+                twTheme={twTheme}
+              />
+            </div>
+          </>
+        ) : (
+          <>
+            <div style={{ gridColumn: '1', gridRow: '1' }}>
+              <WebentorBorderRadiusControl
+                label={__('Top Left', 'webentor')}
+                value={currentBorderRadius?.topLeft}
+                onChange={(value) => onChange(value, 'topLeft')}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '2', gridRow: '1' }}>
+              <WebentorBorderRadiusControl
+                label={__('Top Right', 'webentor')}
+                value={currentBorderRadius?.topRight}
+                onChange={(value) => onChange(value, 'topRight')}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '2', gridRow: '2' }}>
+              <WebentorBorderRadiusControl
+                label={__('Bottom Right', 'webentor')}
+                value={currentBorderRadius?.bottomRight}
+                onChange={(value) => onChange(value, 'bottomRight')}
+                twTheme={twTheme}
+              />
+            </div>
+            <div style={{ gridColumn: '1', gridRow: '2' }}>
+              <WebentorBorderRadiusControl
+                label={__('Bottom Left', 'webentor')}
+                value={currentBorderRadius?.bottomLeft}
+                onChange={(value) => onChange(value, 'bottomLeft')}
+                twTheme={twTheme}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      <div className="wbtr:flex wbtr:justify-between">
+        <Button
+          icon={isLinked ? link : linkOff}
+          onClick={toggleLinked}
+          label={
+            isLinked
+              ? __('Unlink corners', 'webentor')
+              : __('Link corners', 'webentor')
+          }
+        />
+
+        <Button
+          variant="tertiary"
+          onClick={resetBorderRadius}
+          disabled={isEmpty(currentBorderRadius)}
+          label={__('Reset to defaults', 'webentor')}
+          showTooltip
+        >
+          {__('Reset', 'webentor')}
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { BorderPanel } from './panel';

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

@@ -0,0 +1,54 @@
+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>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { DisplaySettings } from './settings';
+export { getDisplayProperties } from './properties';