@webikon/webentor-core 0.9.12

package/.husky/pre-commit

@@ -0,0 +1,40 @@
+#!/bin/sh
+
+# Skip install on CI
+[ -n "$CI" ] && exit 0
+
+# Check if any TypeScript, JavaScript, CSS files, or package files are staged for commit
+if git diff --cached --name-only | grep -E '\.(ts|tsx|js|jsx|css|scss|sass|less)$|package\.json$|pnpm-lock\.yaml$' > /dev/null; then
+    echo "🔨 TypeScript/JavaScript/CSS/Package files detected, running pnpm build..."
+
+    # Run the build process
+    pnpm build
+
+    # Check if build was successful
+    if [ $? -ne 0 ]; then
+        echo "❌ Build failed! Commit aborted."
+        exit 1
+    fi
+
+    echo "✅ Build completed successfully!"
+
+    # Check if there are any changes in the public/ folder
+    if [ -n "$(git status --porcelain public/)" ]; then
+        echo "📦 Found changes in public/ folder, adding to commit..."
+
+        # Add all changes in public/ folder to the current commit
+        git add public/
+
+        # Show what was added
+        echo "📋 Added files to commit:"
+        git status --porcelain public/ | sed 's/^/  /'
+
+        echo "✅ Public folder changes have been automatically added to this commit!"
+    else
+        echo "ℹ️  No changes detected in public/ folder."
+    fi
+else
+    echo "ℹ️  No TypeScript/JavaScript/CSS/Package files changed, skipping build."
+fi
+
+echo "🚀 Proceeding with commit..."

package/.prettierrc.js

@@ -0,0 +1,5 @@
+import { createPrettierConfig } from '@webikon/webentor-configs/prettier';
+
+export default createPrettierConfig({
+  tailwindStylesheet: './resources/styles/app.css',
+});

package/CHANGELOG.md

@@ -0,0 +1,88 @@
+# Webentor Core Changelog
+
+## DEV
+
+
+## 0.9.12
+
+- Add `webentor.core.button.output` filter
+- Allow picking up multiple post types in Query Loop block
+- Add e-button HTML Element setting
+- Fix webentorConfig safelist
+- Fix image object-fit defaults
+- Fix useParentBlock hook to get proper parent block
+- Adjust responsive settings to be conditioned by parent block
+- Fix Table block cell colspan
+- Fix button url escaping & show conditional
+- Fix Vite blocks build on Windows Herd
+- **BREAKING**: Fix accordion collapse animation - if you customized accordion blade view, adjust its content wrapper
+- Fix l-404 block button
+- Fix $anchor passed variable in inner blocks
+
+## 0.9.11
+
+- Fix husky install
+- Add missing `wbtr:` prefixes in blocks edit
+- Fix rendering in REST API request
+- Refactor custom size settings into separate React component
+- Improve block classes rendering conditions
+- Improve block assets registering, so they can be overriden in the theme
+- Allow picking up multiple post types in Picker Query Loop block
+- NEW: Add basic `webentor-config`, which can be included in the theme, export `spacing`
+- NEW: Add flexbox, grid and background image settings to **Section block**
+- NEW: Add `webentor/e-gallery` block
+- NEW: Add hooks `webentor/skip_render_block_blade` and `webentor/slider/view/swiper_params`
+- NEW: Add `loop` and `slider_id` settings to **Slider block**
+- NEW: Add flex/grid item order settings
+- NEW: Add JS events `e_tabs_nav_initialized`, `e_tabs_nav_item_clicked`, `e_accordion_btn_clicked`
+- NEW: Add components BEM classes
+- NEW: Add `aspect-ratio` settings to `e-image` block.
+  - **BREAKING**: Add `aspect-ratio` config to `webentor-config.ts`
+- **BREAKING:**: Change view paths for Blade `blocks` and `core-components`. Now these folder names doesn't need to be included in the path when including views from them.
+  - Replace `core-components.button.button` and `core-components.slider.slider` with `button.button` and `slider.slider`
+  - If you included blocks as `blocks.blockName.view`, remove `blocks.` and leave just `blockName.view`
+- Fix slider pagination styles
+- Update deps
+- Fix publicDir Vite error
+- Remove Button asPill parameter
+
+## 0.9.10
+
+- Add ability to select icon in Button Block
+- Fix condition to render flex/grid item classes depending on parent display setting
+
+## 0.9.9
+
+- **BREAKING:** Move slider styles to `@layer components`
+- Add more slider view classes
+- Remove empty styles folders
+- Add opacity to hidden FC blocks instead of hiding them entirely
+
+## 0.9.8
+
+- Add `pnpm`
+- Update node deps
+- **BREAKING:** Rename npm package to `@webikon/webentor-core`
+- **BREAKING:** Include `build/` assets
+
+## 0.9.7
+
+- Fix empty content in WP REST API response
+
+## 0.9.6
+
+- Add Icon Picker block
+- Update deps
+
+## 0.9.5
+
+- Add new border & border radius responsive settings, applied to Flexible Content, Section and Image
+- Add Picker Query Loop block
+- (BREAKING) Remove old Image block border and rounded setting which are replaced by border responsive settings
+
+## 0.9.4
+
+- Bundle `core-js` package
+- Add Button component extension hooks
+- Add Vite build plugin
+- Update deps

package/LICENCE.md

@@ -0,0 +1,7 @@
+Copyright (c) Webikon s.r.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# webentor-core
+
+Reusable Webentor core functionality for PHP and JS runtimes.
+
+## Packages
+
+- Composer: `webikon/webentor-core`
+- npm: `@webikon/webentor-core`
+
+## Requirements
+
+- PHP >= 8.2
+- Node >= 20
+- pnpm >= 10
+
+## Development
+
+```bash
+composer install
+pnpm install
+pnpm build
+```
+
+## Linting
+
+Core consumes shared presets from `@webikon/webentor-configs` to keep lint behavior aligned across repositories.

package/core-js/_alpine.ts

@@ -0,0 +1,20 @@
+import collapse from '@alpinejs/collapse';
+import Alpine from 'alpinejs';
+
+// Initialize Alpine if it's not already initialized
+const AlpineInstance = window.Alpine || Alpine;
+if (!window.Alpine) {
+  // Make Alpine globally available
+  window.Alpine = Alpine;
+
+  document.addEventListener('DOMContentLoaded', () => {
+    AlpineInstance.start();
+  });
+}
+
+document.addEventListener('alpine:init', () => {
+  // Register default plugins
+  AlpineInstance.plugin(collapse);
+});
+
+export { AlpineInstance as Alpine };

package/core-js/_slider.ts

@@ -0,0 +1,232 @@
+import { __ } from '@wordpress/i18n';
+import Swiper from 'swiper/bundle';
+
+import { debounce, throttle } from './_utils';
+
+type BreakpointConfig = Swiper & {
+  enabled: boolean;
+};
+
+class SliderComponent {
+  private element: HTMLElement;
+  private params: Swiper & {
+    breakpoints: Record<string, BreakpointConfig>;
+    autoplayControl: boolean;
+  };
+  private swiper: Swiper | null;
+  private container: HTMLElement;
+  private breakpoints: Record<string, BreakpointConfig> | null;
+  private autoplayButton: HTMLElement | null;
+  private timerSeconds: HTMLElement | null;
+  private timerCircle: HTMLElement | null;
+  private autoplayControlEnabled: boolean;
+  private resizeHandler?: () => void;
+
+  constructor(element, params) {
+    this.element = element;
+    this.params = params;
+    this.swiper = null;
+    this.container = element.querySelector('.js-swiper-container');
+    this.breakpoints = null;
+
+    const { breakpoints, autoplayControl } = this.params;
+    this.breakpoints = breakpoints;
+
+    this.autoplayButton = this.element.querySelector('.js-autoplay-btn');
+    this.timerSeconds = this.element.querySelector('.js-slider-timer-seconds');
+    this.timerCircle = this.element.querySelector('.js-slider-timer-circle');
+    this.autoplayControlEnabled = autoplayControl;
+
+    this.initSwiper();
+    this.addResizeListener();
+    this.addBreakpointChecker();
+    this.breakpointChecker = this.breakpointChecker.bind(this);
+
+    if (this.autoplayControlEnabled && this.autoplayButton) {
+      this.autoplayButton.addEventListener('click', () =>
+        this.toggleAutoplay(),
+      );
+    }
+  }
+
+  initSwiper() {
+    this.breakpointChecker();
+  }
+
+  getSwiper() {
+    return this.swiper;
+  }
+
+  addResizeListener() {
+    this.resizeHandler = () => {
+      this.breakpointChecker();
+    };
+
+    window.addEventListener('resize', debounce(this.resizeHandler, 300));
+  }
+
+  breakpointChecker() {
+    const currentBreakpoint = this.getCurrentBreakpoint(window.innerWidth);
+
+    if (currentBreakpoint && currentBreakpoint.enabled) {
+      this.enableSwiper();
+    } else {
+      this.destroySwiper();
+    }
+  }
+
+  addBreakpointChecker() {
+    this.breakpointChecker();
+  }
+
+  enableSwiper() {
+    if (this.swiper) {
+      return;
+    }
+
+    this.element.classList.add('slider-enabled');
+
+    // Find all direct child elements of ".js-slider-wrapper"
+    const sliderWrapperChildren =
+      this.element.querySelector('.js-slider-wrapper').children;
+
+    // Add "swiper-slide" class to each child element
+    for (const child of sliderWrapperChildren) {
+      child.classList.add('swiper-slide');
+    }
+
+    // this.recalculateSlidesWidth();
+
+    this.swiper = new Swiper(this.container, {
+      ...this.params,
+      on: {
+        init: (swiper) => {
+          this.fixInitialSlideCalculation(swiper);
+
+          if (this.autoplayControlEnabled) {
+            this.updateAutoplayButtonState(swiper);
+          }
+        },
+        autoplayTimeLeft: (swiper, time, progress) => {
+          if (this.autoplayControlEnabled) {
+            this.timerCircle.style.setProperty(
+              '--slider-timer-progress',
+              1 - progress,
+            );
+            this.timerSeconds.textContent = `${Math.ceil(time / 1000)}s`;
+          }
+        },
+        autoplayResume: (swiper) => {
+          if (this.autoplayControlEnabled) {
+            this.updateAutoplayButtonState(swiper);
+          }
+        },
+        resize: throttle(this.fixInitialSlideCalculation, 100),
+        ...this.params.on,
+      },
+      navigation: {
+        nextEl: this.element.querySelector('.js-slider-button-next'),
+        prevEl: this.element.querySelector('.js-slider-button-prev'),
+      },
+    });
+
+    // Ensure that slidesPerGroupSkip is defined
+    if (this.swiper.params.slidesPerGroupSkip === undefined) {
+      this.swiper.params.slidesPerGroupSkip = 0;
+    }
+  }
+
+  destroySwiper() {
+    if (!this.swiper) {
+      return;
+    }
+
+    // Remove the "swiper-slide" class from all direct child elements of ".js-slider-wrapper"
+    const sliderWrapperChildren =
+      this.element.querySelector('.js-slider-wrapper').children;
+    for (const child of sliderWrapperChildren) {
+      child.classList.remove('swiper-slide');
+    }
+
+    this.element.classList.remove('slider-enabled');
+
+    this.swiper.destroy(true, true);
+    this.swiper = undefined;
+  }
+
+  // Get current breakpoint by iterating over the breakpoint and finding the first one that is bigger than the current width but smaller than the next breakpoint
+  getCurrentBreakpoint(width) {
+    let currentBreakpoint = 0;
+
+    for (const breakpoint in this.breakpoints) {
+      if (width > parseInt(breakpoint)) {
+        currentBreakpoint = parseInt(breakpoint);
+      } else {
+        break;
+      }
+    }
+
+    return this.breakpoints[currentBreakpoint];
+  }
+
+  recalculateSlidesWidth() {
+    const wrapper = this.element.querySelector('.js-slider-wrapper');
+
+    if (!wrapper) return;
+
+    const slides = Array.from(wrapper.children);
+
+    if (slides.length === 0) return;
+
+    // Get the dynamically calculated gap
+    const gap = parseInt(window.getComputedStyle(wrapper).gap);
+
+    // Return early if the gap is zero
+    if (gap === 0) return;
+
+    const maxWidth = `calc(100% - ${gap}px)`;
+    const translateX = `${gap / 2}px`;
+
+    slides.forEach((slide) => {
+      slide.style.maxWidth = maxWidth;
+      slide.style.transform = `translateX(${translateX})`;
+    });
+  }
+
+  // Swiper incorrectly calculates initial slide when using loop and centered slides
+  // See: https://github.com/nolimits4web/swiper/issues/7216
+  fixInitialSlideCalculation(swiper) {
+    if (swiper.params.centeredSlides) {
+      swiper.slideToLoop(0, 0);
+    }
+  }
+
+  toggleAutoplay() {
+    if (this.swiper) {
+      if (this.swiper.autoplay.running && !this.swiper.autoplay.paused) {
+        this.swiper.autoplay.pause();
+      } else {
+        this.swiper.autoplay.resume();
+      }
+      this.updateAutoplayButtonState(this.swiper);
+    }
+  }
+
+  updateAutoplayButtonState(swiper) {
+    if (this.autoplayButton) {
+      this.autoplayButton.setAttribute(
+        'aria-label',
+        swiper?.autoplay.running && !swiper?.autoplay.paused
+          ? __('Pause autoplay', 'webentor')
+          : __('Start autoplay', 'webentor'),
+      );
+    }
+    this.element.classList.toggle(
+      'is-playing',
+      swiper?.autoplay.running && !swiper?.autoplay.paused,
+    );
+  }
+}
+
+// Also export Swiper for external use
+export { SliderComponent, Swiper };

package/core-js/_utils.ts

@@ -0,0 +1,126 @@
+/**
+ * Immutably sets a value inside an object. Like `lodash#set`, but returning a
+ * new object. Treats nullish initial values as empty objects. Clones any
+ * nested objects. Supports arrays, too.
+ *
+ * @param {Object}              object Object to set a value in.
+ * @param {number|string|Array} path   Path in the object to modify.
+ * @param {*}                   value  New value to set.
+ * @return {Object} Cloned object with the new value set.
+ */
+export function setImmutably(
+  object: object,
+  path: number | string | Array<any>,
+  value: any,
+): object {
+  // Normalize path
+  path = Array.isArray(path) ? [...path] : [path];
+
+  // Shallowly clone the base of the object
+  object = Array.isArray(object) ? [...object] : { ...object };
+
+  const leaf = path.pop();
+
+  // Traverse object from root to leaf, shallowly cloning at each level
+  let prev = object;
+  for (const key of path) {
+    const lvl = prev[key];
+    prev = prev[key] = Array.isArray(lvl) ? [...lvl] : { ...lvl };
+  }
+
+  prev[leaf] = value;
+
+  return object;
+}
+
+/**
+ * Debounce functions for better performance
+ * Source: https://www.joshwcomeau.com/snippets/javascript/debounce/
+ *
+ * @param  {Function} fn The function to debounce
+ * @param  {number} wait The time, in milliseconds, to wait before calling the function
+ * @return {Function} The debounced function
+ */
+export const debounce = (callback, wait = 50) => {
+  let timeoutId = null;
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+};
+
+/**
+ * Throttle a function so that it is only called once within a given time interval.
+ *
+ * @param {Function} fn - The function to throttle
+ * @param {Number} wait - The time interval, in milliseconds, to wait between calls to the function
+ * @return {Function} - Returns a throttled version of the original function
+ */
+export function throttle(fn, wait = 20) {
+  let time = Date.now();
+  return function (...args) {
+    if (time + wait - Date.now() < 0) {
+      fn(...args);
+      time = Date.now();
+    }
+  };
+}
+
+/**
+ * Convert a string to camelCase
+ *
+ * @param {string} text - The string to convert
+ * @return {string} The camelCase string
+ */
+export function camelize(text: string) {
+  const a = text
+    .toLowerCase()
+    .replace(/[-_\s.]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
+  return a.substring(0, 1).toLowerCase() + a.substring(1);
+}
+
+/**
+ * Check if an object is empty
+ *
+ * @param {Object} obj - The object to check
+ * @return {boolean} True if the object is empty, false otherwise
+ */
+export function isEmpty(obj: object) {
+  for (const prop in obj) {
+    if (Object.hasOwn(obj, prop)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Get color slug by color hex value.
+ * Usually we don't want to save hex value from WP color palette, we want to save slug.
+ *
+ * @param colors - Colors array
+ * @param color - Color string
+ * @returns Color slug
+ */
+export const getColorSlugByColor = (
+  colors: { color: string; slug: string }[],
+  color: string,
+) => {
+  return colors.find((c: any) => c.color === color)?.slug;
+};
+
+/**
+ * Get color by slug.
+ * This is the opposite of getColorSlugByColor.
+ * We want to use hex value for ColorPallete control, but we saved it as slug.
+ *
+ * @param colors - Colors array
+ * @param slug - Color slug
+ * @returns Color string
+ */
+export const getColorBySlug = (colors: any, slug: string) => {
+  return colors.find((color: any) => color.slug === slug)?.color;
+};

package/core-js/blocks-components/block-appender.tsx

@@ -0,0 +1,36 @@
+import { Inserter } from '@wordpress/block-editor';
+import { Button, IconType } from '@wordpress/components';
+
+type WebentorBlockAppenderProps = {
+  rootClientId: string | null;
+  text: string;
+  icon?: IconType;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+};
+
+/**
+ * Block appender component with customizable button.
+ */
+export const WebentorBlockAppender: React.FC<WebentorBlockAppenderProps> = ({
+  rootClientId,
+  text,
+  icon,
+  variant,
+}) => {
+  return (
+    <Inserter
+      rootClientId={rootClientId}
+      renderToggle={({ onToggle }) => (
+        <Button
+          className="webentor-block-appender"
+          onClick={onToggle}
+          // disabled={disabled}
+          icon={icon ?? 'plus'}
+          text={text}
+          variant={variant ?? 'secondary'}
+        />
+      )}
+      isAppender
+    />
+  );
+};