@webikon/webentor-core 0.9.13 → 0.10.0

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Webentor Core Changelog
 
-## DEV
+## 0.10.0
+
+- Refactor responsive settings and improve UX
+  - **BREAKING**: Run keys migrator from `Settings -> Webentor Migrator`
+  - **BREAKING**: Attributes keys changed, so supports in `block.json` and other usage in theme needs to be checked and renamed:
+    - `flexboxItem` -> `flexItem`
+    - `display` -> `layout` (for `display`) and `sizing` (for `width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`)
+  - Added reset buttons for breakpoints
+  - Better values grouping
+  - Better cascade breakpoints conditioning
+  - Spacing linking
+- Add `webentor/block_wrapper_class_properties` filter to exclude generated class groups such as `backgroundColor` and `textColor` from filtered `classes_by_property` and wrapper output, while keeping the raw generated map available for `block_custom_classes`
+- Add Wrap with Flexible container
+- Add applied classes viewer to see which responsive classes are applied
+- Add Quick layout presets, customizable with filter `webentor.core.responsiveSettings.layoutPresets`
+- Fix PHP path in `init.php`
+- Add package module exports, you can now use `@webikon/webentor-core` instead of `@webentorCore` when importing in the theme
+- Add `webentor.core.l-section.output` filter to customize the section editor preview markup
+
+
+## 0.9.14
+
+- Fix Button link display
+- Disable auto sizes styles for images
 
 ## 0.9.13
 

package/README.md

@@ -21,6 +21,47 @@ pnpm install
 pnpm build
 ```
 
+## JS Package Exports
+
+This package exports raw TypeScript source so the consumer's Vite pipeline
+compiles it together with the rest of the project. Consumer projects using
+Vite 7+ must enable the TypeScript-aware config loader:
+
+```jsonc
+// package.json scripts
+"dev": "vite --configLoader runner",
+"build": "vite build --configLoader runner"
+```
+
+Available subpath imports:
+
+```ts
+import { debounce } from '@webikon/webentor-core';
+import { Alpine } from '@webikon/webentor-core/_alpine';
+import { SliderComponent } from '@webikon/webentor-core/_slider';
+import { WebentorButton } from '@webikon/webentor-core/blocks-components';
+import { initResponsiveSettings } from '@webikon/webentor-core/blocks-filters';
+import { buildSafelist, webentorDefaultConfig } from '@webikon/webentor-core/config';
+import type { WebentorConfig } from '@webikon/webentor-core/types';
+```
+
+## WP-CLI
+
+Use the responsive attributes migration command on an existing project when you
+want to scan or migrate block content without opening the WordPress admin.
+
+```bash
+wp webentor migrate-responsive-attributes
+wp webentor migrate-responsive-attributes --migrate
+wp webentor migrate-responsive-attributes --cleanup
+wp webentor migrate-responsive-attributes --site-id=7 --cleanup
+```
+
+By default the command only scans and reports how many posts and blocks still
+need migration or cleanup. `--migrate` writes v2 attributes while keeping legacy
+keys, and `--cleanup` removes the legacy keys after backfilling the v2 shape.
+On multisite, `--site-id=<id>` runs the command against a specific site.
+
 ## Linting
 
 Core consumes shared presets from `@webikon/webentor-configs` to keep lint behavior aligned across repositories.

package/core-js/_alpine.ts

@@ -1,6 +1,12 @@
 import collapse from '@alpinejs/collapse';
 import Alpine from 'alpinejs';
 
+declare global {
+  interface Window {
+    Alpine?: typeof Alpine;
+  }
+}
+
 // Initialize Alpine if it's not already initialized
 const AlpineInstance = window.Alpine || Alpine;
 if (!window.Alpine) {

package/core-js/_slider.ts

@@ -3,18 +3,21 @@ import Swiper from 'swiper/bundle';
 
 import { debounce, throttle } from './_utils';
 
-type BreakpointConfig = Swiper & {
+type SliderParams = Record<string, any> & {
+  autoplayControl: boolean;
+  breakpoints: Record<string, BreakpointConfig>;
+  on?: Record<string, (...args: any[]) => void>;
+};
+
+type BreakpointConfig = Record<string, any> & {
   enabled: boolean;
 };
 
 class SliderComponent {
   private element: HTMLElement;
-  private params: Swiper & {
-    breakpoints: Record<string, BreakpointConfig>;
-    autoplayControl: boolean;
-  };
+  private params: SliderParams;
   private swiper: Swiper | null;
-  private container: HTMLElement;
+  private container: HTMLElement | null;
   private breakpoints: Record<string, BreakpointConfig> | null;
   private autoplayButton: HTMLElement | null;
   private timerSeconds: HTMLElement | null;
@@ -108,10 +111,14 @@ class SliderComponent {
           }
         },
         autoplayTimeLeft: (swiper, time, progress) => {
-          if (this.autoplayControlEnabled) {
+          if (
+            this.autoplayControlEnabled &&
+            this.timerCircle &&
+            this.timerSeconds
+          ) {
             this.timerCircle.style.setProperty(
               '--slider-timer-progress',
-              1 - progress,
+              String(1 - progress),
             );
             this.timerSeconds.textContent = `${Math.ceil(time / 1000)}s`;
           }
@@ -125,8 +132,12 @@ class SliderComponent {
         ...this.params.on,
       },
       navigation: {
-        nextEl: this.element.querySelector('.js-slider-button-next'),
-        prevEl: this.element.querySelector('.js-slider-button-prev'),
+        nextEl: this.element.querySelector(
+          '.js-slider-button-next',
+        ) as HTMLElement | null,
+        prevEl: this.element.querySelector(
+          '.js-slider-button-prev',
+        ) as HTMLElement | null,
       },
     });
 
@@ -174,7 +185,7 @@ class SliderComponent {
 
     if (!wrapper) return;
 
-    const slides = Array.from(wrapper.children);
+    const slides = Array.from(wrapper.children) as HTMLElement[];
 
     if (slides.length === 0) return;
 

package/core-js/blocks-components/button.tsx

@@ -87,7 +87,20 @@ import { __ } from '@wordpress/i18n';
   }
  */
 
-export const WebentorButton = (props) => {
+type WebentorButtonProps = {
+  attributeName: string;
+  attributes: Record<string, any>;
+  buttonClassName?: string;
+  className?: string;
+  hideLink?: boolean;
+  hideSize?: boolean;
+  hideVariant?: boolean;
+  innerClassName?: string;
+  placement?: string;
+  setAttributes: (attributes: Record<string, any>) => void;
+};
+
+export const WebentorButton = (props: WebentorButtonProps) => {
   const {
     placement,
     className,
@@ -199,7 +212,7 @@ export const WebentorButton = (props) => {
     </button>,
     props,
     buttonClassName,
-  );
+  ) as React.ReactNode;
 
   return (
     <span className={`${className ?? ''} wbtr:relative wbtr:inline-block`}>
@@ -300,6 +313,7 @@ export const WebentorButton = (props) => {
             <SelectControl
               label={__('Button HTML Element', 'webentor')}
               value={attributes[attributeName]?.htmlElement}
+              __nextHasNoMarginBottom
               options={[
                 { label: __('Link (<a>)', 'webentor'), value: 'a' },
                 { label: __('Button (<button>)', 'webentor'), value: 'button' },
@@ -309,38 +323,40 @@ export const WebentorButton = (props) => {
               }
             />
 
-            {!hideLink && attributes[attributeName]?.htmlElement === 'a' && (
-              <>
-                <div className="wbtr:mt-0 wbtr:mb-2 wbtr:text-[11px] wbtr:uppercase">
-                  {__('Button URL', 'webentor')}
-                </div>
-                <URLInput
-                  // label={__('Button URL', 'webentor')}
-                  value={
-                    attributes[attributeName] && attributes[attributeName]?.url
-                      ? attributes[attributeName]?.url
-                      : ''
-                  }
-                  onChange={(value) =>
-                    updateObjectAttribute(attributeName, 'url', value)
-                  }
-                  className="wbtr:mb-2"
-                />
+            {!hideLink &&
+              attributes[attributeName]?.htmlElement != 'button' && (
+                <>
+                  <div className="wbtr:mt-0 wbtr:mb-2 wbtr:text-[11px] wbtr:uppercase">
+                    {__('Button URL', 'webentor')}
+                  </div>
+                  <URLInput
+                    // label={__('Button URL', 'webentor')}
+                    value={
+                      attributes[attributeName] &&
+                      attributes[attributeName]?.url
+                        ? attributes[attributeName]?.url
+                        : ''
+                    }
+                    onChange={(value) =>
+                      updateObjectAttribute(attributeName, 'url', value)
+                    }
+                    className="wbtr:mb-2"
+                  />
 
-                <ToggleControl
-                  label={__('Open in new tab', 'webentor')}
-                  checked={
-                    attributes[attributeName] &&
-                    attributes[attributeName]?.newTab
-                      ? attributes[attributeName]?.newTab
-                      : false
-                  }
-                  onChange={(value) =>
-                    updateObjectAttribute(attributeName, 'newTab', value)
-                  }
-                />
-              </>
-            )}
+                  <ToggleControl
+                    label={__('Open in new tab', 'webentor')}
+                    checked={
+                      attributes[attributeName] &&
+                      attributes[attributeName]?.newTab
+                        ? attributes[attributeName]?.newTab
+                        : false
+                    }
+                    onChange={(value) =>
+                      updateObjectAttribute(attributeName, 'newTab', value)
+                    }
+                  />
+                </>
+              )}
 
             <div className="wbtr:border wbtr:border-editor-border wbtr:p-2">
               <div className="wbtr:my-2">
@@ -376,6 +392,7 @@ export const WebentorButton = (props) => {
                     <SelectControl
                       label="Icon Position"
                       value={attributes[attributeName]?.iconPosition}
+                      __nextHasNoMarginBottom
                       options={iconPositions}
                       onChange={(value) =>
                         updateObjectAttribute(

package/core-js/blocks-components/custom-image-sizes-panel.tsx

@@ -43,7 +43,9 @@ export const CustomImageSizesPanel: React.FC<Props> = (props: Props) => {
     noticeAfter,
   } = props;
 
-  const breakpoints = applyFilters('webentor.core.twBreakpoints', ['basic']);
+  const breakpoints = applyFilters('webentor.core.twBreakpoints', [
+    'basic',
+  ]) as string[];
 
   const hasSizeSettingsForBreakpoint = (attributes, breakpoint) => {
     return (

package/core-js/blocks-components/typography-picker-select.tsx

@@ -1,7 +1,22 @@
 import { CustomSelectControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
-export const WebentorTypographyPickerSelect = (props) => {
+type TypographyOption = {
+  key: string;
+  name: string;
+  value: string;
+};
+
+type WebentorTypographyPickerSelectProps = {
+  __next40pxDefaultSize?: boolean;
+  onChange: (value: string) => void;
+  options: TypographyOption[];
+  value?: string;
+};
+
+export const WebentorTypographyPickerSelect = (
+  props: WebentorTypographyPickerSelectProps,
+) => {
   const { __next40pxDefaultSize, value, onChange, options } = props;
 
   const selectedOption = value

package/core-js/blocks-filters/_filter-core-typography.tsx

@@ -13,6 +13,13 @@ const BLOCKS = [
   'core/post-title',
 ];
 
+type TypographyOption = {
+  __experimentalHint?: string;
+  key: string;
+  name: string;
+  value: string;
+};
+
 /**
  * BlockEdit
  *
@@ -27,7 +34,10 @@ const BLOCKS = [
 function BlockEdit(props) {
   const { customTypography } = props.attributes;
 
-  const options = applyFilters('webentor.core.customTypographyKeys', []);
+  const options = applyFilters(
+    'webentor.core.customTypographyKeys',
+    [],
+  ) as TypographyOption[];
 
   return (
     <InspectorControls group="styles">

package/core-js/blocks-filters/_slider-settings.tsx

@@ -23,7 +23,7 @@ const initSliderSettings = () => {
 
       const breakpoints = applyFilters('webentor.core.twBreakpoints', [
         'basic',
-      ]);
+      ]) as string[];
 
       const { attributes, setAttributes } = props;
 

package/core-js/blocks-filters/_wrap-with-container.tsx

@@ -0,0 +1,104 @@
+import {
+  BlockControls,
+  store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { select as dataSelect, useDispatch, useSelect } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
+import { addFilter, applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { group as groupIcon } from '@wordpress/icons';
+
+const withWrapContainerButton = createHigherOrderComponent((BlockEdit) => {
+  return (props) => {
+    const { clientId, name } = props;
+
+    // Allow themes to exclude specific blocks via filter
+    const excludedBlocks: string[] = applyFilters(
+      'webentor.core.wrapWithContainer.excludedBlocks',
+      ['webentor/l-section'],
+    );
+
+    if (excludedBlocks.includes(name)) {
+      return <BlockEdit {...props} />;
+    }
+
+    const { replaceBlocks } = useDispatch(blockEditorStore);
+
+    const { isMultiSelected, isFirstInMultiSelection } = useSelect(
+      (select) => {
+        const store = select(blockEditorStore);
+        const multiIds = store.getMultiSelectedBlockClientIds();
+        const isMulti = multiIds.length > 0;
+
+        return {
+          isMultiSelected: isMulti,
+          isFirstInMultiSelection: isMulti && multiIds[0] === clientId,
+        };
+      },
+      [clientId],
+    );
+
+    // During multi-selection, only render the button on the first selected block
+    if (isMultiSelected && !isFirstInMultiSelection) {
+      return <BlockEdit {...props} />;
+    }
+
+    const handleWrap = () => {
+      const store = dataSelect(blockEditorStore);
+      const allSelectedClientIds = store.getMultiSelectedBlockClientIds();
+
+      // Build the selected block list on demand so useSelect only returns stable values.
+      const allSelectedBlocks = allSelectedClientIds
+        .map((selectedClientId) => store.getBlock(selectedClientId))
+        .filter(Boolean);
+
+      if (allSelectedBlocks.length > 0) {
+        const clonedBlocks = allSelectedBlocks.map((b) => cloneBlock(b));
+        const containerBlock = createBlock(
+          'webentor/l-flexible-container',
+          {},
+          clonedBlocks,
+        );
+        replaceBlocks(allSelectedClientIds, [containerBlock]);
+      } else {
+        const currentBlock = store.getBlock(clientId);
+
+        if (!currentBlock) return;
+
+        const clonedBlock = cloneBlock(currentBlock);
+        const containerBlock = createBlock(
+          'webentor/l-flexible-container',
+          {},
+          [clonedBlock],
+        );
+        replaceBlocks(clientId, [containerBlock]);
+      }
+    };
+
+    return (
+      <Fragment>
+        <BlockControls group="other">
+          <ToolbarGroup>
+            <ToolbarButton
+              icon={groupIcon}
+              label={__('Wrap with Flexible Container', 'webentor')}
+              onClick={handleWrap}
+            />
+          </ToolbarGroup>
+        </BlockControls>
+
+        <BlockEdit {...props} />
+      </Fragment>
+    );
+  };
+}, 'withWrapContainerButton');
+
+// Self-register -- imported from core editor.ts, no manual init needed
+addFilter(
+  'editor.BlockEdit',
+  'webentor/blockEdit/wrapWithContainer',
+  withWrapContainerButton,
+);