@webikon/webentor-core 0.9.12

package/core-js/blocks-filters/_filter-core-typography.tsx

@@ -0,0 +1,108 @@
+import { registerBlockExtension } from '@10up/block-components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { addFilter, applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { WebentorTypographyPickerSelect } from '../blocks-components';
+
+const BLOCKS = [
+  'core/paragraph',
+  'core/heading',
+  'core/list',
+  'core/post-title',
+];
+
+/**
+ * BlockEdit
+ *
+ * a react component that will get mounted in the editor when the block
+ * is selected. It is recommended to use Slots like `BlockControls` or
+ * `InspectorControls` in here to put settings into the blocks
+ * toolbar or sidebar.
+ *
+ * @param {object} props block props
+ * @returns {JSX}
+ */
+function BlockEdit(props) {
+  const { customTypography } = props.attributes;
+
+  const options = applyFilters('webentor.core.customTypographyKeys', []);
+
+  return (
+    <InspectorControls group="styles">
+      <PanelBody title={__('Custom Typography', 'webentor')} initialOpen={true}>
+        <PanelRow>
+          <WebentorTypographyPickerSelect
+            value={customTypography}
+            onChange={(value) => {
+              props.setAttributes({ customTypography: value });
+            }}
+            options={options}
+          />
+        </PanelRow>
+      </PanelBody>
+    </InspectorControls>
+  );
+}
+
+/**
+ * generateClassNames
+ *
+ * a function to generate the new className string that should
+ * get added to the wrapping element of the block.
+ *
+ * @param {object} attributes block attributes
+ * @returns {string}
+ */
+function generateClassNames(attributes) {
+  return attributes?.customTypography ?? '';
+}
+
+/**
+ * a function to generate the new inline style object that should
+ * get added to the wrapping element of the block.
+ *
+ * @param attributes
+ * @returns
+ */
+function inlineStyleGenerator() {
+  return {};
+}
+
+function initCustomTypographyFilter() {
+  registerBlockExtension(BLOCKS, {
+    extensionName: 'webentor/core/addCustomTypography',
+    attributes: {
+      customTypography: {
+        type: 'string',
+        default: '',
+      },
+    },
+    inlineStyleGenerator: inlineStyleGenerator,
+    classNameGenerator: generateClassNames,
+    order: 'before',
+    Edit: BlockEdit,
+  });
+
+  /**
+   * Globally disable typography settings for blocks
+   *
+   * @param {object} settings block settings
+   * @param {string} name block name
+   * @returns {object} settings
+   */
+  addFilter(
+    'blocks.registerBlockType',
+    'webentor/core/disableTypography',
+    function (settings) {
+      if (settings?.supports?.typography) {
+        settings.supports.typography = null;
+      }
+
+      return settings;
+    },
+  );
+}
+
+export { initCustomTypographyFilter };

package/core-js/blocks-filters/_slider-settings.tsx

@@ -0,0 +1,283 @@
+import { InspectorControls } from '@wordpress/block-editor';
+import {
+  PanelBody,
+  TabPanel,
+  TextControl,
+  ToggleControl,
+} from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { Fragment } from '@wordpress/element';
+import { addFilter, applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '../_utils';
+
+const initSliderSettings = () => {
+  const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
+    return (props) => {
+      // We are checking for these attributes to be present in the block
+      // Attributes should be defined as defaults in app/blocks.php
+      if (props.name !== 'webentor/e-slider') {
+        return <BlockEdit {...props} />;
+      }
+
+      const breakpoints = applyFilters('webentor.core.twBreakpoints', [
+        'basic',
+      ]);
+
+      const { attributes, setAttributes } = props;
+
+      return (
+        <Fragment>
+          <InspectorControls>
+            <PanelBody title={__('Slider Settings', 'webentor')} initialOpen>
+              {/* Not responsive settings */}
+              <ToggleControl
+                label={__('Loop Slides', 'webentor')}
+                checked={attributes?.slider?.loop ?? true}
+                onChange={(checked) =>
+                  setAttributes(
+                    setImmutably(attributes, ['slider', 'loop'], checked),
+                  )
+                }
+              />
+
+              <ToggleControl
+                label={__('Autoplay', 'webentor')}
+                checked={attributes?.slider?.autoplay ?? false}
+                onChange={(checked) =>
+                  setAttributes(
+                    setImmutably(attributes, ['slider', 'autoplay'], checked),
+                  )
+                }
+              />
+
+              {attributes?.slider?.autoplay && (
+                <TextControl
+                  label={__('Autoplay Speed', 'webentor')}
+                  value={attributes?.slider?.autoplaySpeed ?? '3000'}
+                  onChange={(value) =>
+                    setAttributes(
+                      setImmutably(
+                        attributes,
+                        ['slider', 'autoplaySpeed'],
+                        value,
+                      ),
+                    )
+                  }
+                  type="number"
+                />
+              )}
+
+              {attributes?.slider?.autoplay && (
+                <ToggleControl
+                  label={__('Autoplay Control', 'webentor')}
+                  checked={attributes?.slider?.autoplayControl ?? false}
+                  help={__(
+                    'Autoplay Control will show timer and play/pause button.',
+                    'webentor',
+                  )}
+                  onChange={(checked) =>
+                    setAttributes(
+                      setImmutably(
+                        attributes,
+                        ['slider', 'autoplayControl'],
+                        checked,
+                      ),
+                    )
+                  }
+                />
+              )}
+
+              <ToggleControl
+                label={__('Show Arrows', 'webentor')}
+                checked={attributes?.slider?.showArrows ?? false}
+                onChange={(checked) =>
+                  setAttributes(
+                    setImmutably(attributes, ['slider', 'showArrows'], checked),
+                  )
+                }
+              />
+
+              {attributes?.slider?.showArrows && (
+                <ToggleControl
+                  label={__('Arrows Inside Container', 'webentor')}
+                  checked={attributes?.slider?.arrowsInsideContainer ?? false}
+                  onChange={(checked) =>
+                    setAttributes(
+                      setImmutably(
+                        attributes,
+                        ['slider', 'arrowsInsideContainer'],
+                        checked,
+                      ),
+                    )
+                  }
+                />
+              )}
+
+              <ToggleControl
+                label={__('Show Pagination', 'webentor')}
+                checked={attributes?.slider?.showPagination ?? false}
+                onChange={(checked) =>
+                  setAttributes(
+                    setImmutably(
+                      attributes,
+                      ['slider', 'showPagination'],
+                      checked,
+                    ),
+                  )
+                }
+              />
+
+              {attributes?.slider?.showPagination && (
+                <ToggleControl
+                  label={__('Pagination Inside Container', 'webentor')}
+                  checked={
+                    attributes?.slider?.paginationInsideContainer ?? false
+                  }
+                  onChange={(checked) =>
+                    setAttributes(
+                      setImmutably(
+                        attributes,
+                        ['slider', 'paginationInsideContainer'],
+                        checked,
+                      ),
+                    )
+                  }
+                />
+              )}
+
+              <ToggleControl
+                label={__('Dark Mode', 'webentor')}
+                help={__(
+                  'Use Dark Mode when slider background is dark and you need inner elements and text to be in inverted color, e.g. light.',
+                  'webentor',
+                )}
+                checked={attributes?.slider?.darkMode ?? false}
+                onChange={(checked) =>
+                  setAttributes(
+                    setImmutably(attributes, ['slider', 'darkMode'], checked),
+                  )
+                }
+              />
+
+              <TextControl
+                label={__('Slider ID', 'webentor')}
+                value={attributes?.slider?.id ?? ''}
+                onChange={(value) =>
+                  setAttributes(
+                    setImmutably(attributes, ['slider', 'id'], value),
+                  )
+                }
+                help={__(
+                  'This ID can be used to filter slider params via `webentor/slider/view/swiper_params` hook.',
+                )}
+              />
+
+              <hr />
+
+              {/* Responsive settings */}
+              <TabPanel
+                activeClass="is-active"
+                className="w-responsive-settings-tabs"
+                initialTabName={breakpoints[0]}
+                tabs={
+                  breakpoints.map((breakpoint) => ({
+                    name: breakpoint,
+                    title: breakpoint,
+                  })) || []
+                }
+              >
+                {(tab) => (
+                  <div
+                    // className="mt-4"
+                    style={{ marginTop: '16px' }}
+                  >
+                    <ToggleControl
+                      label={__('Enable Slider', 'webentor')}
+                      checked={
+                        attributes?.slider?.enabled?.value?.[tab.name] ?? true
+                      }
+                      onChange={(checked) =>
+                        setAttributes(
+                          setImmutably(
+                            attributes,
+                            ['slider', 'enabled', 'value', tab.name],
+                            checked,
+                          ),
+                        )
+                      }
+                    />
+
+                    <ToggleControl
+                      label={__('Centered slides', 'webentor')}
+                      checked={
+                        attributes?.slider?.centeredSlides?.value?.[tab.name] ??
+                        false
+                      }
+                      onChange={(checked) =>
+                        setAttributes(
+                          setImmutably(
+                            attributes,
+                            ['slider', 'centeredSlides', 'value', tab.name],
+                            checked,
+                          ),
+                        )
+                      }
+                    />
+
+                    <TextControl
+                      label={__('Slides per view', 'webentor')}
+                      value={
+                        attributes?.slider?.slidesPerView?.value?.[tab.name] ??
+                        ''
+                      }
+                      onChange={(value) =>
+                        setAttributes(
+                          setImmutably(
+                            attributes,
+                            ['slider', 'slidesPerView', 'value', tab.name],
+                            value,
+                          ),
+                        )
+                      }
+                      type="number"
+                    />
+
+                    <TextControl
+                      label={__('Space Between Slides', 'webentor')}
+                      value={
+                        attributes?.slider?.spaceBetween?.value?.[tab.name] ??
+                        ''
+                      }
+                      onChange={(value) =>
+                        setAttributes(
+                          setImmutably(
+                            attributes,
+                            ['slider', 'spaceBetween', 'value', tab.name],
+                            value,
+                          ),
+                        )
+                      }
+                      type="number"
+                    />
+                  </div>
+                )}
+              </TabPanel>
+            </PanelBody>
+          </InspectorControls>
+
+          <BlockEdit {...props}></BlockEdit>
+        </Fragment>
+      );
+    };
+  }, 'withInspectorControls');
+  addFilter(
+    'editor.BlockEdit',
+    'webentor/blockEdit/sliderSettings',
+    withInspectorControls,
+    11, // Displayed first before Responsive settings
+  );
+};
+
+export { initSliderSettings };

package/core-js/blocks-filters/index.ts

@@ -0,0 +1,3 @@
+export { initCustomTypographyFilter } from './_filter-core-typography';
+export { initResponsiveSettings } from './responsive-settings';
+export { initSliderSettings } from './_slider-settings';

package/core-js/blocks-filters/responsive-settings/components/DisabledSliderInfo.tsx

@@ -0,0 +1,10 @@
+import { __ } from '@wordpress/i18n';
+
+export const DisabledSliderInfo = () => (
+  <div style={{ marginTop: '16px', marginBottom: '16px', fontSize: '12px' }}>
+    {__(
+      'When Slider is enabled for this breakpoint, these settings are ignored.',
+      'webentor',
+    )}
+  </div>
+);

package/core-js/blocks-filters/responsive-settings/constants.ts

@@ -0,0 +1,11 @@
+export const includedBlocks = {
+  blockLink: [],
+  spacing: [],
+  display: [],
+  grid: [],
+  gridItem: [],
+  flexbox: [],
+  flexboxItem: [],
+  border: [],
+  borderRadius: [],
+};

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

@@ -0,0 +1,196 @@
+import { registerBlockExtension } from '@10up/block-components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { Fragment } from '@wordpress/element';
+import { addFilter, applyFilters } from '@wordpress/hooks';
+
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+import { includedBlocks } from './constants';
+import { BlockLinkPanel } from './settings/block-link';
+import { BorderPanel } from './settings/border';
+import { ContainerPanel } from './settings/container';
+import { SpacingPanel } from './settings/spacing';
+import { generateClassNames, inlineStyleGenerator } from './utils';
+
+const initResponsiveSettings = () => {
+  // Make sure new attributes are present in blocks so we can conditionally show their settings
+  addFilter(
+    'blocks.registerBlockType',
+    'webentor/addResponsiveSettingsAttributes',
+    (settings, name) => {
+      if (
+        includedBlocks['blockLink'].includes(name) ||
+        settings?.supports?.webentor?.blockLink
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            blockLink: {
+              type: 'object',
+              default: settings.attributes?.blockLink?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['display'].includes(name) ||
+        settings?.supports?.webentor?.display
+      ) {
+        const displaySupport =
+          settings?.supports?.webentor?.display === true ||
+          settings?.supports?.webentor?.display?.display === true;
+
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            display: {
+              type: 'object',
+              default: {
+                ...settings?.attributes?.display?.default,
+                display: {
+                  value: {
+                    // Default display is FLEX
+                    ...(displaySupport ? { basic: 'flex' } : {}),
+                    ...settings?.attributes?.display?.default?.display?.value,
+                  },
+                },
+              },
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['spacing'].includes(name) ||
+        settings?.supports?.webentor?.spacing
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            spacing: {
+              type: 'object',
+              default: settings.attributes?.spacing?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['grid'].includes(name) ||
+        settings?.supports?.webentor?.grid
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            grid: {
+              type: 'object',
+              default: settings.attributes?.grid?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['gridItem'].includes(name) ||
+        settings?.supports?.webentor?.gridItem
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            gridItem: {
+              type: 'object',
+              default: settings.attributes?.gridItem?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['flexbox'].includes(name) ||
+        settings?.supports?.webentor?.flexbox
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            flexbox: {
+              type: 'object',
+              default: settings.attributes?.flexbox?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['flexboxItem'].includes(name) ||
+        settings?.supports?.webentor?.flexboxItem
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            flexboxItem: {
+              type: 'object',
+              default: settings.attributes?.flexboxItem?.default || {},
+            },
+          },
+        };
+      }
+
+      if (
+        includedBlocks['border'].includes(name) ||
+        includedBlocks['borderRadius'].includes(name) ||
+        settings?.supports?.webentor?.border ||
+        settings?.supports?.webentor?.borderRadius
+      ) {
+        settings.attributes = {
+          ...settings.attributes,
+          ...{
+            border: {
+              type: 'object',
+              default: settings.attributes?.border?.default || {},
+            },
+          },
+        };
+      }
+
+      return settings;
+    },
+  );
+
+  // Register block extension for all blocks
+  registerBlockExtension('*', {
+    extensionName: 'webentor.core.addResponsiveSettings',
+    attributes: {},
+    inlineStyleGenerator,
+    classNameGenerator: generateClassNames,
+    order: 'after',
+    Edit: BlockEdit,
+  });
+};
+
+const BlockEdit = (props) => {
+  const breakpoints: string[] = applyFilters('webentor.core.twBreakpoints', [
+    'basic',
+  ]);
+  const twTheme: WebentorConfig['theme'] = applyFilters(
+    'webentor.core.twTheme',
+    {},
+  );
+
+  return (
+    <Fragment>
+      <InspectorControls>
+        <SpacingPanel {...props} breakpoints={breakpoints} twTheme={twTheme} />
+        <ContainerPanel
+          {...props}
+          breakpoints={breakpoints}
+          twTheme={twTheme}
+        />
+        <BorderPanel {...props} breakpoints={breakpoints} twTheme={twTheme} />
+        <BlockLinkPanel {...props} />
+      </InspectorControls>
+    </Fragment>
+  );
+};
+
+export { initResponsiveSettings };

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

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

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

@@ -0,0 +1,47 @@
+import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '@webentorCore/_utils';
+import { BlockPanelProps } from '@webentorCore/block-filters/responsive-settings/types';
+
+export const BlockLinkPanel = ({
+  attributes,
+  setAttributes,
+}: BlockPanelProps) => {
+  if (attributes?.blockLink === undefined) {
+    return null;
+  }
+
+  return (
+    <div className="w-link-settings" style={{ marginBottom: '16px' }}>
+      <h3 style={{ padding: '16px', paddingBottom: '0px' }}>
+        {__('Block Link', 'webentor')}
+      </h3>
+      <div style={{ padding: '16px', paddingTop: '0px', fontSize: '12px' }}>
+        {__('This whole block can act like a link', 'webentor')}
+      </div>
+      <LinkControl
+        value={attributes?.blockLink}
+        settings={[
+          {
+            id: 'open_in_new_tab',
+            title: __('New tab?', 'webentor'),
+          },
+        ]}
+        onChange={(inputValue) =>
+          setAttributes(setImmutably(attributes, ['blockLink'], inputValue))
+        }
+        onRemove={() =>
+          setAttributes(setImmutably(attributes, ['blockLink'], null))
+        }
+        withCreateSuggestion={true}
+        createSuggestion={(inputValue) =>
+          setAttributes(setImmutably(attributes, ['blockLink'], inputValue))
+        }
+        createSuggestionButtonText={(newValue) =>
+          `${__('New:', 'webentor')} ${newValue}`
+        }
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { BorderSettings } from './settings';

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

@@ -0,0 +1,27 @@
+import { __ } from '@wordpress/i18n';
+
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+import { getPixelFromRemValue } from '../../../utils';
+
+export const getBorderProperties = (twTheme: WebentorConfig['theme']) => [
+  {
+    label: __('Border Width', 'webentor'),
+    name: 'width',
+    values: Object.keys(twTheme?.borderWidth).map((key) => ({
+      label: `${key} (${getPixelFromRemValue(twTheme?.borderWidth[key])})`,
+      value: `${key}`,
+    })),
+  },
+  {
+    label: __('Border Style', 'webentor'),
+    name: 'style',
+    values: [
+      { label: __('None selected', 'webentor'), value: '' },
+      ...Object.keys(twTheme?.borderStyle).map((key) => ({
+        label: `${key}`,
+        value: `${key}`,
+      })),
+    ],
+  },
+];