@webikon/webentor-core 0.9.12

package/resources/blocks/e-icon-picker/e-icon-picker.block.tsx

@@ -0,0 +1,230 @@
+import { Icon, IconPicker, Link } from '@10up/block-components';
+import {
+  ColorPalette,
+  InspectorControls,
+  useBlockProps,
+} from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+import {
+  __experimentalNumberControl as NumberControl,
+  PanelBody,
+  PanelRow,
+  ToggleControl,
+} from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { getColorBySlug, getColorSlugByColor } from '@webentorCore/_utils';
+import { WebentorConfig } from '@webentorCore/types/_webentor-config';
+
+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;
+  };
+  inheritSize?: boolean;
+  width: string;
+  height: string;
+  color: string;
+  icon: {
+    name: string;
+    iconSet: string;
+  };
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+
+  const blockProps = useBlockProps();
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  const twTheme: WebentorConfig['theme'] = applyFilters(
+    'webentor.core.twTheme',
+    {},
+  );
+
+  const themeColors = applyFilters(
+    'webentor.core.e-icon-picker.colors',
+    twTheme?.colors || {},
+  );
+
+  const paletteColors = Object.entries(themeColors).map(([key, value]) => ({
+    name: key,
+    color: value,
+    slug: `text-${key}`, // Color slug is TW class name
+  }));
+
+  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 handleIconSelection = (value) =>
+    setAttributes({ icon: { name: value.name, iconSet: value.iconSet } });
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <IconPicker value={attributes?.icon} onChange={handleIconSelection} />
+          {/* <InlineIconPicker
+            value={null}
+            onChange={handleIconSelection}
+            className="icon-picker-preview"
+            style={{
+              width: attributes?.inheritSize
+                ? 'auto'
+                : attributes?.width
+                  ? `${attributes?.width}px`
+                  : '24px',
+              height: attributes?.inheritSize
+                ? 'auto'
+                : attributes?.height
+                  ? `${attributes?.height}px`
+                  : '24px',
+            }}
+          /> */}
+
+          <div className="wbtr:mt-4">
+            <p className="components-base-control__label wbtr:mb-2">
+              {__('Icon Color', 'webentor')}
+            </p>
+            <ColorPalette
+              colors={paletteColors}
+              value={getColorBySlug(paletteColors, attributes?.color)}
+              disableCustomColors
+              onChange={(color) => {
+                setAttributes({
+                  color: getColorSlugByColor(paletteColors, color),
+                });
+              }}
+            />
+          </div>
+
+          <PanelRow>
+            {/* External link */}
+            <div className="wbtr:w-full wbtr:border wbtr:border-editor-border wbtr:p-2">
+              <p>{__('Link Icon to URL', 'webentor')}</p>
+
+              <div className="wbtr:flex wbtr:gap-2">
+                <Link
+                  value={attributes?.link?.title}
+                  url={attributes?.link?.url}
+                  opensInNewTab={attributes?.link?.opensInNewTab}
+                  onTextChange={handleLinkTextChange}
+                  onLinkChange={handleLinkChange}
+                  onLinkRemove={handleLinkRemove}
+                  placeholder="Enter Link Text here..."
+                />
+              </div>
+            </div>
+          </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
+                disabled={attributes?.inheritSize}
+              />
+
+              <NumberControl
+                label={__('Height', 'webentor')}
+                value={attributes?.height || ''}
+                onChange={(height) => setAttributes({ height })}
+                required
+                disabled={attributes?.inheritSize}
+              />
+            </div>
+          </PanelRow>
+
+          <PanelRow>
+            <ToggleControl
+              label={__('Inherit size from SVG', 'webentor')}
+              checked={attributes?.inheritSize}
+              onChange={(inheritSize) => setAttributes({ inheritSize })}
+              help={__(
+                "Use only when SVG have properly defined width and height and you don't want to set custom size.",
+                'webentor',
+              )}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps} className={blockProps.className}>
+        {attributes?.icon?.name ? (
+          <Icon
+            name={attributes?.icon?.name}
+            iconSet={attributes?.icon?.iconSet}
+            className={`icon-picker-preview ${attributes?.color}`}
+            style={{
+              width: attributes?.inheritSize
+                ? 'auto'
+                : attributes?.width
+                  ? `${attributes?.width}px`
+                  : '24px',
+              height: attributes?.inheritSize
+                ? 'auto'
+                : attributes?.height
+                  ? `${attributes?.height}px`
+                  : '24px',
+            }}
+          />
+        ) : (
+          <span className="wbtr:text-10">{__('Pick icon', 'webentor')}</span>
+        )}
+      </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-icon-picker/style.css

@@ -0,0 +1,17 @@
+/* Icon Picker in admin */
+.icon-picker-preview svg {
+  max-height: 100%;
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+  object-fit: contain;
+}
+
+/* Icon on frontend */
+.e-svg-icon {
+  max-height: 100%;
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+  object-fit: contain;
+}

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

@@ -0,0 +1,78 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/e-image",
+  "apiVersion": 3,
+  "title": "Custom Responsive Image",
+  "description": "Responsive image block.",
+  "category": "webentor-elements",
+  "icon": "format-image",
+  "keywords": ["image"],
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "imgId": {
+      "type": "number",
+      "default": 0
+    },
+    "focalPoint": {
+      "type": "object",
+      "default": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "lazyload": {
+      "type": "boolean",
+      "default": true
+    },
+    "openInLightbox": {
+      "type": "boolean",
+      "default": false
+    },
+    "link": {
+      "type": "object",
+      "default": {}
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "default": false
+    },
+    "aspectRatio": {
+      "type": "string",
+      "default": "auto"
+    },
+    "objectFit": {
+      "type": "string",
+      "default": "fill"
+    },
+    "objectPosition": {
+      "type": "string",
+      "default": "center"
+    },
+    "imageSize": {
+      "type": "string",
+      "default": "large"
+    },
+    "customSizeEnabled": {
+      "type": "boolean",
+      "default": false
+    },
+    "customSize": {
+      "type": "object",
+      "default": {}
+    }
+  },
+  "supports": {
+    "webentor": {
+      "spacing": true,
+      "border": true,
+      "borderRadius": true
+    }
+  }
+}

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

@@ -0,0 +1,331 @@
+import { Image, Link, MediaToolbar } from '@10up/block-components';
+import {
+  BlockControls,
+  store as blockEditorStore,
+  InspectorControls,
+  useBlockProps,
+} from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+import {
+  PanelBody,
+  PanelRow,
+  SelectControl,
+  ToggleControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '@webentorCore/_utils';
+import { CustomImageSizesPanel } from '@webentorCore/blocks-components';
+
+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;
+  lazyload: boolean;
+  openInLightbox: boolean;
+  fullWidth: boolean;
+  aspectRatio: string;
+  objectFit: string;
+  objectPosition: string;
+  imageSize: string;
+  customSize: {
+    enabled: {
+      [key: string]: boolean;
+    };
+    width: {
+      [key: string]: string;
+    };
+    height: {
+      [key: string]: string;
+    };
+    crop: {
+      [key: string]: boolean;
+    };
+  };
+  imgId: number;
+  focalPoint: {
+    x: number;
+    y: number;
+  };
+  link: {
+    url: string;
+    title: string;
+    opensInNewTab: boolean;
+  };
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+
+  const blockProps = useBlockProps();
+
+  const imageWidth = 600;
+  const imageHeight = 600;
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  const handleLinkTextChange = (value: string) =>
+    setAttributes({
+      link: {
+        ...attributes.link,
+        title: value,
+      },
+    });
+
+  const handleLinkChange = (value: unknown) =>
+    setAttributes({
+      link: {
+        url: value?.url,
+        opensInNewTab: value?.opensInNewTab,
+        title: value?.title ?? attributes?.link?.title,
+      },
+    });
+
+  const handleLinkRemove = () => {
+    setAttributes({ link: null });
+  };
+
+  const handleImageSelect = (image: unknown) => {
+    setAttributes({ imgId: image?.id });
+  };
+  const handleImageRemove = () => {
+    setAttributes({ imgId: null });
+  };
+
+  const handleEnabledChange = (enabled: boolean, breakpoint: string) => {
+    // Set custom size enabled/disabled
+    // For some reason, this doesn't work with setImmutably
+    setAttributes({
+      customSize: {
+        ...attributes.customSize,
+        enabled: {
+          ...attributes.customSize?.enabled,
+          [breakpoint]: enabled,
+        },
+      },
+    });
+  };
+
+  const handleWidthChange = (width: number, breakpoint: string) => {
+    setAttributes(
+      setImmutably(attributes, ['customSize', 'width', breakpoint], width),
+    );
+  };
+
+  const handleHeightChange = (height: number, breakpoint: string) => {
+    setAttributes(
+      setImmutably(attributes, ['customSize', 'height', breakpoint], height),
+    );
+  };
+
+  const handleCropChange = (crop: boolean, breakpoint: string) => {
+    setAttributes(
+      setImmutably(attributes, ['customSize', 'crop', breakpoint], crop),
+    );
+  };
+
+  // const handleFocalPointChange = (value) => {
+  //   setAttributes({ focalPoint: value });
+  // };
+
+  const { clientId } = props;
+  const { getSettings } = useSelect(blockEditorStore, []);
+  const { imageSizes } = useSelect(() => {
+    const settings = getSettings();
+
+    return {
+      imageSizes: settings.imageSizes,
+    };
+  }, [clientId]);
+
+  const imageSizeOptions = imageSizes.map(({ name, slug }) => ({
+    value: slug,
+    label: name,
+  }));
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            <ToggleControl
+              label={__('Lazyload', 'webentor')}
+              checked={attributes.lazyload}
+              onChange={(lazyload) => setAttributes({ lazyload })}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            {/* Open in lightbox */}
+            <ToggleControl
+              label={__('Open in lightbox', 'webentor')}
+              checked={attributes.openInLightbox}
+              onChange={(openInLightbox) => setAttributes({ openInLightbox })}
+            />
+          </PanelRow>
+
+          {/* TODO maybe move to BlockControls toolbar */}
+          {!attributes.openInLightbox && (
+            <PanelRow>
+              <div className="wbtr:w-full wbtr:border wbtr:border-editor-border wbtr:p-2">
+                <p>{__('Link Image to URL', 'webentor')}</p>
+
+                <div className="wbtr:flex wbtr:gap-2">
+                  {/* 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..."
+                  />
+                </div>
+              </div>
+            </PanelRow>
+          )}
+
+          {/* Full width */}
+          <PanelRow>
+            <ToggleControl
+              label={__('Make image full width', 'webentor')}
+              checked={attributes.fullWidth}
+              onChange={(fullWidth) => setAttributes({ fullWidth })}
+            />
+          </PanelRow>
+
+          {/* Aspect ratio select */}
+          <PanelRow>
+            <SelectControl
+              label={__('Aspect Ratio', 'webentor')}
+              value={attributes.aspectRatio}
+              options={[
+                { label: 'Auto', value: 'auto' },
+                { label: 'Square', value: 'square' },
+                { label: 'Video (16:9)', value: 'video' },
+              ]}
+              onChange={(aspectRatio) => setAttributes({ aspectRatio })}
+            />
+          </PanelRow>
+
+          {/* Object fit select */}
+          <PanelRow>
+            <SelectControl
+              label={__('Object Fit', 'webentor')}
+              value={attributes.objectFit}
+              options={[
+                { label: 'None', value: 'none' },
+                { label: 'Fill', value: 'fill' },
+                { label: 'Contain', value: 'contain' },
+                { label: 'Cover', value: 'cover' },
+                { label: 'Scale down', value: 'scale-down' },
+              ]}
+              onChange={(objectFit) => setAttributes({ objectFit })}
+            />
+          </PanelRow>
+
+          {/* Object position select */}
+          {attributes.objectFit && attributes.objectFit !== 'none' && (
+            <PanelRow>
+              <SelectControl
+                label={__('Object Position', 'webentor')}
+                value={attributes.objectPosition}
+                options={[
+                  { label: 'Top', value: 'top' },
+                  { label: 'Right Top', value: 'right-top' },
+                  { label: 'Right', value: 'right' },
+                  { label: 'Right Bottom', value: 'right-bottom' },
+                  { label: 'Bottom', value: 'bottom' },
+                  { label: 'Left Top', value: 'left-top' },
+                  { label: 'Left', value: 'left' },
+                  { label: 'Left Bottom', value: 'left-bottom' },
+                  { label: 'Center', value: 'center' },
+                ]}
+                onChange={(objectPosition) => setAttributes({ objectPosition })}
+              />
+            </PanelRow>
+          )}
+
+          {/* Image size select with fetch for image sizes get_intermediate_image_sizes() */}
+          <PanelRow>
+            <SelectControl
+              label={__('Image Size', 'webentor')}
+              value={attributes.imageSize}
+              options={imageSizeOptions}
+              onChange={(imageSize) => setAttributes({ imageSize })}
+              help={__(
+                'These sizes are automatically generated by WordPress. If you want to use custom image sizes, you can do so by enabling them below.',
+                'webentor',
+              )}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            <CustomImageSizesPanel
+              attributes={attributes}
+              imgSizeAttribute="customSize"
+              onEnabledChange={handleEnabledChange}
+              onWidthChange={handleWidthChange}
+              onHeightChange={handleHeightChange}
+              onCropChange={handleCropChange}
+            />
+          </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}
+          className={`wbtr:rounded-[inherit] object-${attributes.objectFit} object-${attributes.objectPosition} aspect-${attributes.aspectRatio}`}
+          // focalPoint={attributes.focalPoint}
+          // onChangeFocalPoint={handleFocalPointChange}
+          labels={{
+            title: 'Select Image',
+            instructions: 'Upload or pick one from your media library.',
+          }}
+          width={attributes.customSize?.width?.basic || imageWidth}
+          height={attributes.customSize?.height?.basic || 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-picker-query-loop/block.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-picker-query-loop",
+  "title": "Posts Picker Query Loop",
+  "description": "Display selected posts in a loop.",
+  "category": "webentor-elements",
+  "icon": "update",
+  "keywords": ["loop", "query", "picker"],
+  "attributes": {
+    "query": {
+      "type": "object",
+      "default": {
+        "postType": ["post"],
+        "posts": [],
+        "queryId": ""
+      }
+    },
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {}
+}