@webikon/webentor-core 0.9.12

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

@@ -0,0 +1,30 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "title": "Table",
+  "description": "Improved table with possibility to add inner rows and cells.",
+  "name": "webentor/e-table",
+  "icon": "editor-table",
+  "category": "webentor-elements",
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "html": false,
+    "webentor": {
+      "spacing": true,
+      "border": true
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+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 { WebentorBlockAppender } from '@webentorCore/blocks-components';
+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.
+ * @param {object}   props.attributes           					Block attributes.
+ * @param {string}   props.className            					Class name for the block.
+ * @param {Function} props.setAttributes        					Sets the value for block attributes.
+ * @returns {Function} Render the edit screen
+ */
+
+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-table inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-table.allowedBlocks',
+    ['webentor/e-table-row'],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-table inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [
+    [
+      'webentor/e-table-row',
+      [['webentor/e-table-cell', 'webentor/e-table-cell']],
+    ],
+    [
+      'webentor/e-table-row',
+      ['webentor/e-table-cell', 'webentor/e-table-cell'],
+    ],
+    [
+      'webentor/e-table-row',
+      ['webentor/e-table-cell', 'webentor/e-table-cell'],
+    ],
+  ];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-table.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+    renderAppender: false, // Disable the default appender
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <div {...blockProps}>
+      <div className="wp-block-table">
+        <table className="wbtr:w-full">
+          <tbody {...innerBlocksProps}>
+            {children}
+
+            <tr></tr>
+          </tbody>
+        </table>
+
+        <div className="wbtr:my-2">
+          <WebentorBlockAppender
+            rootClientId={props.clientId}
+            text={__('Add rows', 'webentor')}
+          />
+        </div>
+      </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,
+});

package/resources/blocks/e-table/script.ts

@@ -0,0 +1,48 @@
+import { throttle } from '@webentorCore/_utils';
+
+// Determine if the table is scrollable
+const isTableScrollable = (table: HTMLElement) => {
+  const tableWidth = table.offsetWidth;
+  const tableScrollWidth = table.scrollWidth;
+  return tableScrollWidth > tableWidth;
+};
+
+// Add scroll shadow to the table
+const addScrollShadow = (table: HTMLElement) => {
+  table.closest('.table-scroll-shadow')?.classList.add('has-scroll');
+};
+
+const removeScrollShadow = (table: HTMLElement) => {
+  table.closest('.table-scroll-shadow')?.classList.remove('has-scroll');
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const tables = document.querySelectorAll(
+    '.wp-block-table',
+  ) as NodeListOf<HTMLElement>;
+
+  tables.forEach((table) => {
+    if (isTableScrollable(table)) {
+      addScrollShadow(table);
+    } else {
+      removeScrollShadow(table);
+    }
+  });
+});
+
+window.addEventListener(
+  'resize',
+  throttle(() => {
+    const tables = document.querySelectorAll(
+      '.wp-block-table',
+    ) as NodeListOf<HTMLElement>;
+
+    tables.forEach((table) => {
+      if (isTableScrollable(table)) {
+        addScrollShadow(table);
+      } else {
+        removeScrollShadow(table);
+      }
+    });
+  }, 100),
+);

package/resources/blocks/e-table-cell/block.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "title": "Table Cell",
+  "description": "Cell with inner content.",
+  "name": "webentor/e-table-cell",
+  "parent": ["webentor/e-table-row"],
+  "category": "webentor-elements",
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "rowSpan": {
+      "type": "string",
+      "default": ""
+    },
+    "colSpan": {
+      "type": "string",
+      "default": ""
+    },
+    "showAsTh": {
+      "type": "boolean",
+      "default": false
+    },
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "customClassName": false
+  }
+}

package/resources/blocks/e-table-cell/e-table-cell.block.tsx

@@ -0,0 +1,180 @@
+import {
+  InnerBlocks,
+  InspectorControls,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import {
+  __experimentalNumberControl as NumberControl,
+  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.
+ * @param {object}   props.attributes           					Block attributes.
+ * @param {string}   props.className            					Class name for the block.
+ * @param {Function} props.setAttributes        					Sets the value for block attributes.
+ * @returns {Function} Render the edit screen
+ */
+
+type AttributesType = {
+  rowSpan: number;
+  colSpan: number;
+  showAsTh: boolean;
+  coverImage: string;
+  template?: TemplateArray;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+  const { rowSpan, colSpan, showAsTh } = attributes;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/e-table-cell inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-table-cell.allowedBlocks',
+    ['core/paragraph', 'core/heading', 'core/list'],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-table-cell inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [
+    ['core/paragraph', { placeholder: __('Add cell content', 'webentor') }],
+  ];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-table-cell.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" />;
+  }
+
+  const CellContent = (
+    <div {...innerBlocksProps}>
+      <div className="wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+        {__('Cell Content', 'webentor')}
+      </div>
+
+      {children}
+    </div>
+  );
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title={__('Block Settings', 'webentor')} initialOpen={true}>
+          <PanelRow>
+            <NumberControl
+              label={__('Row Span', 'webentor')}
+              help={__(
+                'Set the number of rows this cell should span.',
+                'webentor',
+              )}
+              value={rowSpan}
+              onChange={(rowSpan) => setAttributes({ rowSpan })}
+              min={0}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            <NumberControl
+              label={__('Col Span', 'webentor')}
+              help={__(
+                'Set the number of columns this cell should span.',
+                'webentor',
+              )}
+              value={colSpan}
+              onChange={(colSpan) => setAttributes({ colSpan })}
+              min={0}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            <ToggleControl
+              label={__('Render as <th>> (head) cell', 'webentor')}
+              checked={showAsTh}
+              onChange={(showAsTh) => setAttributes({ showAsTh })}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      {showAsTh ? (
+        <th
+          className={`wbtr:border wbtr:border-dashed wbtr:border-black wbtr:p-2`}
+          rowSpan={rowSpan}
+          colSpan={colSpan}
+        >
+          {CellContent}
+        </th>
+      ) : (
+        <td
+          className={`wbtr:border wbtr:border-dashed wbtr:border-black wbtr:p-2`}
+          rowSpan={rowSpan}
+          colSpan={colSpan}
+        >
+          {CellContent}
+        </td>
+      )}
+    </>
+  );
+};
+
+/**
+ * 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,
+  // TODO: extract icon to icon set
+  icon: {
+    src: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 14 14"
+        style={{ minWidth: 16, minHeight: 16, width: 16, height: 16 }}
+      >
+        <path d="M2 6h4V2H2v4Zm0 2v4h4V8H2Zm10-2V2H8v4h4Zm0 2H8v4h4V8ZM2 0h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2Z" />
+      </svg>
+    ),
+  },
+});

package/resources/blocks/e-table-row/block.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "title": "Table Row",
+  "description": "Row with inner content.",
+  "name": "webentor/e-table-row",
+  "parent": ["webentor/e-table"],
+  "category": "webentor-elements",
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "attributes": {
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "html": false,
+    "multiple": true,
+    "customClassName": false
+  }
+}

package/resources/blocks/e-table-row/e-table-row.block.tsx

@@ -0,0 +1,118 @@
+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 { WebentorBlockAppender } from '@webentorCore/blocks-components';
+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.
+ * @param {object}   props.attributes           					Block attributes.
+ * @param {string}   props.className            					Class name for the block.
+ * @param {Function} props.setAttributes        					Sets the value for block attributes.
+ * @returns {Function} Render the edit screen
+ */
+
+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-table-row inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-table-row.allowedBlocks',
+    ['webentor/e-table-cell'],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-table-row inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [
+    ['webentor/e-table-cell'],
+    ['webentor/e-table-cell'],
+  ];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-table-row.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+    renderAppender: false, // Disable the default appender
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <tr {...innerBlocksProps} className={`${innerBlocksProps.className}`}>
+      {children}
+
+      <td>
+        <WebentorBlockAppender
+          rootClientId={props.clientId}
+          text={__('Add cell', 'webentor')}
+        />
+      </td>
+    </tr>
+  );
+};
+
+/**
+ * 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,
+  // TODO: extract icon to icon set
+  icon: {
+    src: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1920 1920"
+        style={{ minWidth: 16, minHeight: 16, width: 16, height: 16 }}
+      >
+        <path
+          fillRule="evenodd"
+          d="M1694.118 0C1818.692 0 1920 101.308 1920 225.882v1468.236c0 124.574-101.308 225.882-225.882 225.882H225.882C101.308 1920 0 1818.692 0 1694.118V225.882C0 101.308 101.308 0 225.882 0Zm.226 1355.294h-339.05v338.824h339.05v-338.824Zm-564.932 0H790.588v338.824h338.824v-338.824Zm-564.706 0H225.882v338.824h338.824v-338.824Zm564.706-1129.412H790.588v338.824h338.824V225.882Zm-564.706 0H225.882v338.824h338.824V225.882Zm1129.412 0h-338.824v338.824h338.824V225.882Z"
+        />
+      </svg>
+    ),
+  },
+});

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

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-tabs",
+  "title": "Tabs",
+  "description": "Tabs block.",
+  "category": "webentor-elements",
+  "icon": "feedback",
+  "allowedBlocks": ["webentor/e-tab-container"],
+  "keywords": ["tabs", "elements"],
+  "attributes": {},
+  "example": {
+    "attributes": {
+      "mode": "preview",
+      "data": {
+        "preview_image_help": true
+      }
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "webentor": {
+      "display": true,
+      "spacing": true
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+import {
+  InnerBlocks,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+
+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;
+  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-tabs inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-tabs.allowedBlocks',
+    ['webentor/e-tab-container'],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-tabs inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [
+    ['webentor/e-tab-container'],
+  ];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-tabs.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 (
+    <div
+      {...innerBlocksProps}
+      className={`${blockProps.className} ${innerBlocksProps.className} e-tabs wbtr:border wbtr:border-dashed wbtr:border-editor-border wbtr:p-2`}
+    />
+  );
+};
+
+/**
+ * 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,
+});