@webikon/webentor-core 0.9.12

package/resources/blocks/e-query-loop/taxonomy-controls.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from 'react';
+import { FormTokenField } from '@wordpress/components';
+import { useDebounce } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+import { useTaxonomies } from '@webentorCore/blocks-utils/_use-taxonomies';
+
+const EMPTY_ARRAY = [];
+const BASE_QUERY = {
+  order: 'asc',
+  _fields: 'id,name',
+  context: 'view',
+};
+
+// Helper function to get the term id based on user input in terms `FormTokenField`.
+const getTermIdByTermValue = (terms, termValue) => {
+  // First we check for exact match by `term.id` or case sensitive `term.name` match.
+  const termId =
+    termValue?.id || terms?.find((term) => term.name === termValue)?.id;
+  if (termId) {
+    return termId;
+  }
+
+  /**
+   * Here we make an extra check for entered terms in a non case sensitive way,
+   * to match user expectations, due to `FormTokenField` behaviour that shows
+   * suggestions which are case insensitive.
+   *
+   * Although WP tries to discourage users to add terms with the same name (case insensitive),
+   * it's still possible if you manually change the name, as long as the terms have different slugs.
+   * In this edge case we always apply the first match from the terms list.
+   */
+  const termValueLower = termValue.toLocaleLowerCase();
+  return terms?.find((term) => term.name.toLocaleLowerCase() === termValueLower)
+    ?.id;
+};
+
+export function TaxonomyControls({ onChange, query }) {
+  const { postType, taxQuery } = query;
+
+  const taxonomies = useTaxonomies(postType);
+  if (!taxonomies || taxonomies.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {taxonomies.map((taxonomy) => {
+        const termIds = taxQuery?.[taxonomy.slug] || [];
+        const handleChange = (newTermIds) =>
+          onChange({
+            taxQuery: {
+              ...taxQuery,
+              [taxonomy.slug]: newTermIds,
+            },
+          });
+
+        return (
+          <TaxonomyItem
+            key={taxonomy.slug}
+            taxonomy={taxonomy}
+            termIds={termIds}
+            onChange={handleChange}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Renders a `FormTokenField` for a given taxonomy.
+ *
+ * @param {Object}   props          The props for the component.
+ * @param {Object}   props.taxonomy The taxonomy object.
+ * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.
+ * @param {Function} props.onChange Callback `onChange` function.
+ * @return {JSX.Element} The rendered component.
+ */
+function TaxonomyItem({ taxonomy, termIds, onChange }) {
+  const [search, setSearch] = useState('');
+  const [value, setValue] = useState(EMPTY_ARRAY);
+  const [suggestions, setSuggestions] = useState(EMPTY_ARRAY);
+  const debouncedSearch = useDebounce(setSearch, 250);
+  const { searchResults, searchHasResolved } = useSelect(
+    (select) => {
+      if (!search) {
+        return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
+      }
+      const { getEntityRecords, hasFinishedResolution } = select('core');
+      const selectorArgs = [
+        'taxonomy',
+        taxonomy.slug,
+        {
+          ...BASE_QUERY,
+          search,
+          orderby: 'name',
+          exclude: termIds,
+          per_page: 20,
+        },
+      ];
+      return {
+        searchResults: getEntityRecords(...selectorArgs),
+        searchHasResolved: hasFinishedResolution(
+          'getEntityRecords',
+          selectorArgs,
+        ),
+      };
+    },
+    [search, termIds],
+  );
+  // `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
+  // They are used to extract the terms' names to populate the `FormTokenField` properly
+  // and to sanitize the provided `termIds`, by setting only the ones that exist.
+  const existingTerms = useSelect(
+    (select) => {
+      if (!termIds?.length) {
+        return EMPTY_ARRAY;
+      }
+      const { getEntityRecords } = select('core');
+      return getEntityRecords('taxonomy', taxonomy.slug, {
+        ...BASE_QUERY,
+        include: termIds,
+        per_page: termIds.length,
+      });
+    },
+    [termIds],
+  );
+  // Update the `value` state only after the selectors are resolved
+  // to avoid emptying the input when we're changing terms.
+  useEffect(() => {
+    if (!termIds?.length) {
+      setValue(EMPTY_ARRAY);
+    }
+    if (!existingTerms?.length) {
+      return;
+    }
+    // Returns only the existing entity ids. This prevents the component
+    // from crashing in the editor, when non existing ids are provided.
+    const sanitizedValue = termIds.reduce((accumulator, id) => {
+      const entity = existingTerms.find((term) => term.id === id);
+      if (entity) {
+        accumulator.push({
+          id,
+          value: entity.name,
+        });
+      }
+      return accumulator;
+    }, []);
+    setValue(sanitizedValue);
+  }, [termIds, existingTerms]);
+  // Update suggestions only when the query has resolved.
+  useEffect(() => {
+    if (!searchHasResolved) {
+      return;
+    }
+    setSuggestions(searchResults.map((result) => result.name));
+  }, [searchResults, searchHasResolved]);
+  const onTermsChange = (newTermValues) => {
+    const newTermIds = new Set();
+    for (const termValue of newTermValues) {
+      const termId = getTermIdByTermValue(searchResults, termValue);
+      if (termId) {
+        newTermIds.add(termId);
+      }
+    }
+    setSuggestions(EMPTY_ARRAY);
+    onChange(Array.from(newTermIds));
+  };
+  return (
+    <div className="block-library-query-inspector__taxonomy-control">
+      <FormTokenField
+        label={taxonomy.name}
+        value={value}
+        onInputChange={debouncedSearch}
+        suggestions={suggestions}
+        displayTransform={decodeEntities}
+        onChange={onTermsChange}
+        __experimentalShowHowTo={false}
+      />
+    </div>
+  );
+}

package/resources/blocks/e-slider/block.json

@@ -0,0 +1,42 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-slider",
+  "title": "Slider",
+  "description": "Slider block.",
+  "category": "webentor-elements",
+  "icon": "slides",
+  "keywords": ["slider", "carousel"],
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "slider": {
+      "type": "object",
+      "default": {}
+    },
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "color": {
+      "background": false,
+      "text": true
+    },
+    "webentor": {
+      "spacing": true,
+      "display": true,
+      "grid": true,
+      "gridItem": true,
+      "flexbox": true,
+      "flexboxItem": true
+    }
+  }
+}

package/resources/blocks/e-slider/e-slider.block.tsx

@@ -0,0 +1,100 @@
+import {
+  InnerBlocks,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+// TODO extend with slider/responsive settings
+type AttributesType = {
+  coverImage: string;
+  template?: TemplateArray;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/e-slider inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-slider.allowedBlocks',
+    [
+      'webentor/l-flexible-container',
+      'webentor/e-query-loop',
+      'webentor/e-picker-query-loop',
+    ],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-slider inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template;
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-slider.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <div
+      {...innerBlocksProps}
+      className={`${innerBlocksProps.className} slider-content wbtr:relative wbtr:border wbtr:border-editor-border wbtr:p-2 wbtr:pt-4`}
+    >
+      <div className="wbtr:absolute wbtr:top-[2px] wbtr:left-2 wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+        {__('Slider', 'webentor')}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => <InnerBlocks.Content />;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/e-svg/block.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-svg",
+  "title": "Svg",
+  "description": "Svg block.",
+  "category": "webentor-elements",
+  "icon": "art",
+  "keywords": ["svg"],
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "imgId": {
+      "type": "number",
+      "default": 0
+    },
+    "width": {
+      "type": "string",
+      "default": "0"
+    },
+    "height": {
+      "type": "string",
+      "default": "0"
+    },
+    "link": {
+      "type": "object",
+      "default": {}
+    }
+  },
+  "supports": {}
+}

package/resources/blocks/e-svg/e-svg.block.tsx

@@ -0,0 +1,156 @@
+import { Image, Link, MediaToolbar } from '@10up/block-components';
+import {
+  BlockControls,
+  InspectorControls,
+  useBlockProps,
+} from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+import {
+  __experimentalNumberControl as NumberControl,
+  PanelBody,
+  PanelRow,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  link: {
+    title: string;
+    url: string;
+    opensInNewTab: boolean;
+  };
+  imgId: number;
+  width: string;
+  height: string;
+  imageSize: string;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+
+  const blockProps = useBlockProps();
+
+  const imageWidth = 40;
+  const imageHeight = 40;
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  const handleLinkTextChange = (value) =>
+    setAttributes({
+      link: {
+        ...attributes.link,
+        title: value,
+      },
+    });
+
+  const handleLinkChange = (value) =>
+    setAttributes({
+      link: {
+        url: value?.url,
+        opensInNewTab: value?.opensInNewTab,
+        title: value?.title ?? attributes?.link?.title,
+      },
+    });
+
+  const handleLinkRemove = () => {
+    setAttributes({ link: null });
+  };
+
+  const handleImageSelect = (image) => {
+    setAttributes({ imgId: image.id });
+  };
+  const handleImageRemove = () => {
+    setAttributes({ imgId: null });
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            {/* External link */}
+            <Link
+              value={attributes?.link?.title}
+              url={attributes?.link?.url}
+              opensInNewTab={attributes?.link?.opensInNewTab}
+              onTextChange={handleLinkTextChange}
+              onLinkChange={handleLinkChange}
+              onLinkRemove={handleLinkRemove}
+              placeholder="Enter Link Text here..."
+            />
+          </PanelRow>
+          <PanelRow>
+            {/* Custom image size with with, heigh and crop */}
+            <div className="wbtr:flex wbtr:gap-2">
+              <NumberControl
+                label={__('Width', 'webentor')}
+                value={attributes?.width || ''}
+                onChange={(width) => setAttributes({ width })}
+                required
+              />
+
+              <NumberControl
+                label={__('Height', 'webentor')}
+                value={attributes?.height || ''}
+                onChange={(height) => setAttributes({ height })}
+                required
+              />
+            </div>
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <BlockControls>
+        <MediaToolbar
+          isOptional
+          id={attributes.imgId}
+          onSelect={handleImageSelect}
+          onRemove={handleImageRemove}
+        />
+      </BlockControls>
+
+      <div {...blockProps} className={blockProps.className}>
+        <Image
+          id={attributes.imgId}
+          size={attributes.imageSize}
+          onSelect={handleImageSelect}
+          allowedTypes={['image/svg+xml']}
+          labels={{
+            title: 'Select Image',
+            instructions: 'Upload or pick one from your media library.',
+          }}
+          width={attributes?.width || imageWidth}
+          height={attributes?.height || imageHeight}
+        />
+      </div>
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => null;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/e-tab-container/block.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-tab-container",
+  "title": "Single Tab",
+  "description": "Tab used in Tabs block.",
+  "category": "webentor-elements",
+  "icon": "table-row-after",
+  "keywords": [
+    "tabs",
+    "container",
+    "elements"
+  ],
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": ""
+    },
+    "hideTitle": {
+      "type": "boolean",
+      "default": false
+    },
+    "template": {
+      "type": "array",
+      "default": null
+    },
+    "spacing": {
+      "type": "object",
+      "default": {
+        "padding-top": {
+          "value": {
+            "basic": "pt-5",
+            "md": "pt-8"
+          }
+        },
+        "padding-bottom": {
+          "value": {
+            "basic": "pb-4"
+          }
+        }
+      }
+    }
+  },
+  "supports": {
+    "webentor": {
+      "display": true
+    }
+  }
+}

package/resources/blocks/e-tab-container/e-tab-container.block.tsx

@@ -0,0 +1,123 @@
+import {
+  InnerBlocks,
+  InspectorControls,
+  RichText,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { PanelBody, PanelRow, ToggleControl } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  hideTitle: boolean;
+  title: string;
+  template?: TemplateArray;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/e-tab-container inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-tab-container.allowedBlocks',
+    null,
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-tab-container inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template;
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-tab-container.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            <ToggleControl
+              label={__('Hide title', 'webentor')}
+              help={__(
+                'Title would be used only in Tabs navigation, but hidden in the content area.',
+                'webentor',
+              )}
+              checked={attributes.hideTitle}
+              onChange={(hideTitle) => setAttributes({ hideTitle })}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps} className={`${blockProps.className}`}>
+        <div className="md:wbtr:pt-8 wbtr:flex wbtr:w-full wbtr:flex-col wbtr:border wbtr:border-editor-border wbtr:px-4 wbtr:pt-5 wbtr:pb-4">
+          <RichText
+            tagName="h2"
+            placeholder={__('Tab Title (required)', 'webentor')}
+            value={attributes.title}
+            onChange={(title) => setAttributes({ title })}
+          />
+
+          <div
+            {...innerBlocksProps}
+            className={`${innerBlocksProps.className} wbtr:border wbtr:border-editor-border wbtr:p-4`}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => <InnerBlocks.Content />;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});