@webikon/webentor-core 0.9.12

package/core-js/index.ts

@@ -0,0 +1,14 @@
+export {
+  WebentorBlockAppender,
+  WebentorButton,
+  WebentorTypographyPickerSelect,
+} from './blocks-components';
+export { initCustomTypographyFilter } from './blocks-filters';
+export { useBlockParent, usePostTypes, useTaxonomies } from './blocks-utils';
+
+export { Alpine } from './_alpine';
+export { SliderComponent, Swiper } from './_slider';
+export { setImmutably, debounce, throttle, camelize } from './_utils';
+
+export type { ButtonAttributes } from './types/_block-components';
+export type { WebentorConfig } from './types/_webentor-config';

package/core-js/types/_block-components.ts

@@ -0,0 +1,7 @@
+export type ButtonAttributes = {
+  showButton: boolean;
+  title: string;
+  variant: 'primary' | 'secondary' | 'tertiary';
+  url: string;
+  newTab: boolean;
+};

package/core-js/types/_webentor-config.ts

@@ -0,0 +1,182 @@
+// Heavily inspired by Tailwind config
+// https://github.com/tailwindlabs/tailwindcss/blob/v3.4.17/types/config.d.ts
+
+// Helpers
+type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>;
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>;
+}
+export type ResolvableTo<T> = T | ((utils: PluginUtils) => T);
+
+interface PluginUtils {
+  theme(path: string, defaultValue?: unknown): any;
+}
+
+type Screen =
+  | { raw: string }
+  | { min: string }
+  | { max: string }
+  | { min: string; max: string };
+type ScreensConfig =
+  | string[]
+  | KeyValuePair<string, string | Screen | Screen[]>;
+
+// Theme related config
+export interface ThemeConfig {
+  // Responsiveness
+  screens: ResolvableTo<ScreensConfig>;
+
+  // Reusable base configs
+  colors: ResolvableTo<RecursiveKeyValuePair>;
+  spacing: ResolvableTo<KeyValuePair>;
+
+  // Utilities
+  // accentColor: ThemeConfig['colors'];
+  // animation: ResolvableTo<KeyValuePair>;
+  aspectRatio: ResolvableTo<KeyValuePair>;
+  // backdropBlur: ThemeConfig['blur'];
+  // backdropBrightness: ThemeConfig['brightness'];
+  // backdropContrast: ThemeConfig['contrast'];
+  // backdropGrayscale: ThemeConfig['grayscale'];
+  // backdropHueRotate: ThemeConfig['hueRotate'];
+  // backdropInvert: ThemeConfig['invert'];
+  // backdropOpacity: ThemeConfig['opacity'];
+  // backdropSaturate: ThemeConfig['saturate'];
+  // backdropSepia: ThemeConfig['sepia'];
+  // backgroundColor: ThemeConfig['colors'];
+  // backgroundImage: ResolvableTo<KeyValuePair>;
+  // backgroundOpacity: ThemeConfig['opacity'];
+  // backgroundPosition: ResolvableTo<KeyValuePair>;
+  // backgroundSize: ResolvableTo<KeyValuePair>;
+  // blur: ResolvableTo<KeyValuePair>;
+  // borderColor: ThemeConfig['colors'];
+  // borderOpacity: ThemeConfig['opacity'];
+  borderRadius: ResolvableTo<KeyValuePair>;
+  // borderSpacing: ThemeConfig['spacing'];
+  borderStyle: ResolvableTo<KeyValuePair>;
+  borderWidth: ResolvableTo<KeyValuePair>;
+  // boxShadow: ResolvableTo<KeyValuePair<string, string | string[]>>;
+  // boxShadowColor: ThemeConfig['colors'];
+  // brightness: ResolvableTo<KeyValuePair>;
+  // caretColor: ThemeConfig['colors'];
+  // columns: ResolvableTo<KeyValuePair>;
+  // content: ResolvableTo<KeyValuePair>;
+  // contrast: ResolvableTo<KeyValuePair>;
+  // cursor: ResolvableTo<KeyValuePair>;
+  // divideColor: ThemeConfig['borderColor'];
+  // divideOpacity: ThemeConfig['borderOpacity'];
+  // divideWidth: ThemeConfig['borderWidth'];
+  // dropShadow: ResolvableTo<KeyValuePair<string, string | string[]>>;
+  // fill: ThemeConfig['colors'];
+  // flex: ResolvableTo<KeyValuePair>;
+  flexBasis: ThemeConfig['spacing'];
+  // flexGrow: ResolvableTo<KeyValuePair>;
+  // flexShrink: ResolvableTo<KeyValuePair>;
+  fontFamily: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | string[]
+      | [
+          fontFamily: string | string[],
+          configuration: Partial<{
+            fontFeatureSettings: string;
+            fontVariationSettings: string;
+          }>,
+        ]
+    >
+  >;
+  fontSize: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | [fontSize: string, lineHeight: string]
+      | [
+          fontSize: string,
+          configuration: Partial<{
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string | number;
+          }>,
+        ]
+    >
+  >;
+  fontWeight: ResolvableTo<KeyValuePair>;
+  gap: ThemeConfig['spacing'];
+  // gradientColorStops: ThemeConfig['colors'];
+  // grayscale: ResolvableTo<KeyValuePair>;
+  // gridAutoColumns: ResolvableTo<KeyValuePair>;
+  // gridAutoRows: ResolvableTo<KeyValuePair>;
+  gridColumn: ResolvableTo<KeyValuePair>;
+  // gridColumnEnd: ResolvableTo<KeyValuePair>;
+  // gridColumnStart: ResolvableTo<KeyValuePair>;
+  gridRow: ResolvableTo<KeyValuePair>;
+  // gridRowEnd: ResolvableTo<KeyValuePair>;
+  // gridRowStart: ResolvableTo<KeyValuePair>;
+  gridTemplateColumns: ResolvableTo<KeyValuePair>;
+  gridTemplateRows: ResolvableTo<KeyValuePair>;
+  height: ThemeConfig['spacing'];
+  // hueRotate: ResolvableTo<KeyValuePair>;
+  // inset: ThemeConfig['spacing'];
+  // invert: ResolvableTo<KeyValuePair>;
+  // keyframes: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair>>>;
+  // letterSpacing: ResolvableTo<KeyValuePair>;
+  // lineHeight: ResolvableTo<KeyValuePair>;
+  // listStyleType: ResolvableTo<KeyValuePair>;
+  margin: ThemeConfig['spacing'];
+  // maxHeight: ThemeConfig['spacing'];
+  // maxWidth: ResolvableTo<KeyValuePair>;
+  // minHeight: ResolvableTo<KeyValuePair>;
+  // minWidth: ResolvableTo<KeyValuePair>;
+  objectPosition: ResolvableTo<KeyValuePair>;
+  // opacity: ResolvableTo<KeyValuePair>;
+  order: ResolvableTo<KeyValuePair>;
+  // outlineColor: ThemeConfig['colors'];
+  // outlineOffset: ResolvableTo<KeyValuePair>;
+  // outlineWidth: ResolvableTo<KeyValuePair>;
+  padding: ThemeConfig['spacing'];
+  // placeholderColor: ThemeConfig['colors'];
+  // placeholderOpacity: ThemeConfig['opacity'];
+  // ringColor: ThemeConfig['colors'];
+  // ringOffsetColor: ThemeConfig['colors'];
+  // ringOffsetWidth: ResolvableTo<KeyValuePair>;
+  // ringOpacity: ThemeConfig['opacity'];
+  // ringWidth: ResolvableTo<KeyValuePair>;
+  // rotate: ResolvableTo<KeyValuePair>;
+  // saturate: ResolvableTo<KeyValuePair>;
+  // scale: ResolvableTo<KeyValuePair>;
+  // scrollMargin: ThemeConfig['spacing'];
+  // scrollPadding: ThemeConfig['spacing'];
+  // sepia: ResolvableTo<KeyValuePair>;
+  // skew: ResolvableTo<KeyValuePair>;
+  // space: ThemeConfig['spacing'];
+  // stroke: ThemeConfig['colors'];
+  // strokeWidth: ResolvableTo<KeyValuePair>;
+  // textColor: ThemeConfig['colors'];
+  // textDecorationColor: ThemeConfig['colors'];
+  // textDecorationThickness: ResolvableTo<KeyValuePair>;
+  // textIndent: ThemeConfig['spacing'];
+  // textOpacity: ThemeConfig['opacity'];
+  // textUnderlineOffset: ResolvableTo<KeyValuePair>;
+  // transformOrigin: ResolvableTo<KeyValuePair>;
+  // transitionDelay: ResolvableTo<KeyValuePair>;
+  // transitionDuration: ResolvableTo<KeyValuePair>;
+  // transitionProperty: ResolvableTo<KeyValuePair>;
+  // transitionTimingFunction: ResolvableTo<KeyValuePair>;
+  // translate: ThemeConfig['spacing'];
+  // width: ThemeConfig['spacing'];
+  // willChange: ResolvableTo<KeyValuePair>;
+  // zIndex: ResolvableTo<KeyValuePair>;
+}
+
+interface CustomThemeConfig extends ThemeConfig {
+  [key: string]: any;
+}
+
+interface OptionalConfig {
+  theme: Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig> }>;
+  // Custom
+  [key: string]: any;
+}
+
+export type WebentorConfig = OptionalConfig;

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@webikon/webentor-core",
+  "homepage": "https://webikon.sk",
+  "version": "0.9.12",
+  "description": "Core functionality and useful utilities for Webentor Stack",
+  "license": "MIT",
+  "author": "Webikon s.r.o.",
+  "maintainers": [
+    {
+      "name": "Webikon s.r.o.",
+      "email": "support@webikon.sk"
+    },
+    {
+      "name": "Pavol Caban",
+      "email": "pavol.caban@webikon.sk"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webikon/webentor-core.git"
+  },
+  "keywords": [
+    "wordpress",
+    "gutenberg",
+    "blocks",
+    "webentor",
+    "sage"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@10up/block-components": "^1.21.4",
+    "@eslint/js": "^9.39.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@kucrut/vite-for-wp": "^0.12.0",
+    "@roots/vite-plugin": "^1.2.3",
+    "@shufo/prettier-plugin-blade": "^1.16.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/wordpress__block-editor": "^14.21.2",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@webikon/webentor-configs": "^1.0.0",
+    "@wordpress/block-editor": "^15.9.0",
+    "@wordpress/block-library": "^9.36.0",
+    "@wordpress/blocks": "^15.9.0",
+    "@wordpress/components": "^30.9.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^6.36.0",
+    "@wordpress/i18n": "^6.9.0",
+    "@wordpress/icons": "^11.3.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "patch-package": "^8.0.1",
+    "postcss": "^8.5.6",
+    "postcss-pxtorem": "^6.1.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-external-globals": "^0.13.0",
+    "stylelint": "^16.26.1",
+    "stylelint-config-recommended": "^17.0.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-external": "^6.2.2"
+  },
+  "dependencies": {
+    "@alpinejs/collapse": "^3.15.2",
+    "alpinejs": "^3.15.2",
+    "swiper": "^12.0.3"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx}": "npm run lint:js --",
+    "*.css": "npm run lint:css --"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:js": "eslint resources/scripts resources/blocks",
+    "lint:css": "stylelint \"resources/**/*.{vue,css,sass,scss,less}\"",
+    "prettier-check": "prettier --check 'resources/**/*.{js,ts,tsx,css}'",
+    "prettier-check:js": "prettier --check 'resources/**/*.{js,ts,tsx}'",
+    "prettier-check:css": "prettier --check 'resources/**/*.css'",
+    "prettier-check:blade": "prettier --check 'resources/**/*.blade.php'",
+    "prettier-fix": "prettier --write 'resources/**/*.{js,ts,tsx,css}'",
+    "prettier-fix:js": "prettier --write 'resources/**/*.{js,ts,tsx}'",
+    "prettier-fix:css": "prettier --write 'resources/**/*.css'",
+    "prettier-fix:blade": "prettier --write 'resources/**/*.blade.php'"
+  }
+}

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

@@ -0,0 +1,34 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-accordion",
+  "title": "Accordion",
+  "description": "Accordion block.",
+  "category": "webentor-elements",
+  "icon": "excerpt-view",
+  "keywords": [
+    "accordion",
+    "toggle",
+    "elements"
+  ],
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": ""
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "default": false
+    },
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "webentor": {
+      "spacing": true
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+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;
+  defaultOpen: 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-accordion inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-accordion.allowedBlocks',
+    null,
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-accordion inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template;
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-accordion.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="467" />;
+  }
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            <ToggleControl
+              label={__('Default Open?', 'webentor')}
+              help={__('Shoud accordion be opened by default?', 'webentor')}
+              checked={attributes.defaultOpen}
+              onChange={(defaultOpen) => setAttributes({ defaultOpen })}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div
+        {...blockProps}
+        className={`${blockProps.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`}
+      >
+        <div className="wbtr:absolute wbtr:top-[2px] wbtr:left-2 wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+          {__('Accordion', 'webentor')}
+        </div>
+
+        <RichText
+          tagName="h2"
+          placeholder={__('Accordion Title (required)', 'webentor')}
+          value={attributes.title}
+          onChange={(title) => setAttributes({ title })}
+        />
+
+        <div
+          {...innerBlocksProps}
+          className={`${innerBlocksProps.className} wbtr:w-full wbtr:border wbtr:border-editor-border wbtr:p-4`}
+        />
+      </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-accordion/script.ts

@@ -0,0 +1 @@
+// console.log('accordion script');

package/resources/blocks/e-accordion/style.css

@@ -0,0 +1,8 @@
+/* Basic colors vars */
+:root {
+  --webentor-accordion-border-radius: 10px;
+}
+
+.w-accordion {
+  border-radius: var(--webentor-accordion-border-radius);
+}

package/resources/blocks/e-accordion-group/block.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/e-accordion-group",
+  "title": "Accordion Group",
+  "description": "Allows grouping of multiple accordions and enables to have only one accordion opened at a time.",
+  "category": "webentor-elements",
+  "icon": "list-view",
+  "keywords": ["accordion", "toggle", "elements"],
+  "attributes": {
+    "template": {
+      "type": "array",
+      "default": null
+    },
+    "display": {
+      "type": "object",
+      "default": {
+        "width": {
+          "value": {
+            "basic": "w-full"
+          }
+        }
+      }
+    },
+    "flexbox": {
+      "type": "object",
+      "default": {
+        "flex-direction": {
+          "value": {
+            "basic": "flex-col"
+          }
+        },
+        "gap": {
+          "value": {
+            "basic": "gap-5"
+          }
+        }
+      }
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "webentor": {
+      "display": {
+        "display": true,
+        "minHeight": true,
+        "width": true
+      },
+      "grid": true,
+      "gridItem": true,
+      "flexbox": true,
+      "flexboxItem": true,
+      "spacing": true
+    }
+  }
+}

package/resources/blocks/e-accordion-group/e-accordion-group.block.tsx

@@ -0,0 +1,99 @@
+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
+ */
+
+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-accordion-group inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.e-accordion-group.allowedBlocks',
+    ['webentor/e-accordion'],
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/e-accordion-group inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [
+    ['webentor/e-accordion'],
+  ];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.e-accordion-group.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} e-accordion-group wbtr:relative wbtr:border wbtr:border-dashed wbtr:border-editor-border wbtr:p-4`}
+      >
+        <div className="wbtr:absolute wbtr:top-[2px] wbtr:left-2 wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+          {__('Accordion Group', '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-breadcrumbs/block.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/e-breadcrumbs",
+  "apiVersion": 3,
+  "title": "Breadcrumbs",
+  "description": "Block showing breadcrumbs.",
+  "category": "webentor-elements",
+  "icon": "open-folder",
+  "keywords": [
+    "breadcrumbs"
+  ],
+  "attributes": {
+    "anchor": {
+      "type": "string",
+      "default": ""
+    },
+    "spacing": {
+      "type": "object",
+      "default": {
+        "padding-top": {
+          "value": {
+            "basic": "pt-3.5",
+            "lg": "pt-4"
+          }
+        },
+        "padding-bottom": {
+          "value": {
+            "basic": "pb-3.5",
+            "lg": "pb-4"
+          }
+        }
+      }
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "webentor": {
+      "spacing": true
+    }
+  }
+}