@webikon/webentor-core 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Webentor Core Changelog
 
+## 0.11.0
+
+- Add responsive spacing settings for WP Core blocks (`core/paragraph`, `core/heading`) — spacing panel appears automatically, classes rendered on frontend via `WP_HTML_Tag_Processor`
+  - Filterable block list: JS `webentor.core.wpCoreBlocksWithSpacing`, PHP `webentor/wp_core_blocks_with_spacing`
+  - Native WP spacing controls disabled on affected blocks to avoid duplication
+- Fix React hooks warning ("Do not call Hooks inside useEffect") caused by `generateClassNames` being called outside React component context via `blocks.getSaveContent.extraProps`
+- Fix WP Core blocks breaking after save/refresh — `classNameGenerator` no longer injects responsive classes into saved markup, preventing block validation failures on static blocks
+- Fix `l-section` responsive settings not splitting classes between wrapper and inner container in editor (layout/flexbox/grid classes now correctly apply to the inner container, matching frontend behavior)
+- Add `WebentorCoreServiceProvider` — Acorn auto-discovered service provider for webentor-core
+  - Blade directives (`@sliderContent`, `@enqueueScripts`, `@xdebugBreak`) moved from theme to core
+  - View Components (`Button`, `Slider`) moved from theme to core — themes can override by extending `Webentor\Core\View\Components\Button` etc.
+  - Core block `data.php` files now loaded by the service provider instead of `ThemeServiceProvider`
+
 ## 0.10.1
 
 - Fix `l-section` inner z-index

package/core-js/blocks-filters/responsive-settings/AGENTS.md

@@ -107,7 +107,9 @@ Key methods:
    - Each panel queries registry and renders SettingsComponents
 
 3. **Class generation** (`generateClassNames` in `utils.ts`):
-   - Called by `registerBlockExtension` classNameGenerator hook
+   - Called via a dedicated `editor.BlockListBlock` HOC (not via `registerBlockExtension`'s
+     `classNameGenerator`, which is no-oped to prevent classes leaking into saved markup
+     and React hooks being called outside component context)
    - Collects breakpoints from all attribute values
    - Calls each module's `generateClasses(attributes, breakpoint, context)` per breakpoint
    - Concatenates results

package/core-js/blocks-filters/responsive-settings/index.tsx

@@ -16,6 +16,7 @@
 import { registerBlockExtension } from '@10up/block-components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { Fragment } from '@wordpress/element';
 import { addFilter, applyFilters } from '@wordpress/hooks';
 
@@ -45,6 +46,43 @@ import './settings/sizing';
 import './settings/spacing';
 
 const initResponsiveSettings = () => {
+  /**
+   * WP Core block spacing support injection.
+   * Injects `supports.webentor.spacing` into configured WP Core blocks so the
+   * responsive spacing panel appears automatically. Runs at priority 5,
+   * before the attribute-merging filter at priority 10.
+   *
+   * The block list is filterable via `webentor.core.wpCoreBlocksWithSpacing`.
+   */
+  addFilter(
+    'blocks.registerBlockType',
+    'webentor/core/injectWpCoreBlockSpacingSupport',
+    (settings, name) => {
+      const wpCoreBlocks = applyFilters(
+        'webentor.core.wpCoreBlocksWithSpacing',
+        ['core/paragraph', 'core/heading'],
+      ) as string[];
+
+      if (!wpCoreBlocks.includes(name)) return settings;
+
+      settings.supports = {
+        ...settings.supports,
+        webentor: {
+          ...settings.supports?.webentor,
+          spacing: true,
+        },
+        spacing: {
+          ...settings.supports?.spacing,
+          padding: false,
+          margin: false,
+        },
+      };
+
+      return settings;
+    },
+    5,
+  );
+
   /**
    * Attribute registration filter.
    * Iterates over all registered setting modules and merges their
@@ -89,10 +127,46 @@ const initResponsiveSettings = () => {
     extensionName: 'webentor.core.addResponsiveSettings',
     attributes: {},
     inlineStyleGenerator,
-    classNameGenerator: generateClassNames,
+    // No-op: prevents @10up/block-components from injecting responsive classes
+    // into saved markup via blocks.getSaveContent.extraProps, which breaks
+    // static core blocks (core/paragraph, core/heading) and triggers React
+    // hooks warnings (generateClassNames uses hooks but the save filter
+    // calls it outside React component context).
+    classNameGenerator: () => '',
     order: 'after',
     Edit: BlockEdit,
   });
+
+  /**
+   * Editor-only responsive classes via editor.BlockListBlock.
+   * Replaces the @10up classNameGenerator approach so that:
+   * 1. Hooks (useBlockProps, useBlockParent) are called in component context
+   * 2. Classes are only applied in the editor, not injected into saved HTML
+   */
+  const addResponsiveClassesHOC = createHigherOrderComponent(
+    (BlockListBlock) => (props) => {
+      const { attributes, className = '' } = props;
+      const responsiveClasses = generateClassNames(attributes);
+
+      if (!responsiveClasses) {
+        return <BlockListBlock {...props} />;
+      }
+
+      return (
+        <BlockListBlock
+          {...props}
+          className={`${className} ${responsiveClasses}`.trim()}
+        />
+      );
+    },
+    'addResponsiveClasses',
+  );
+
+  addFilter(
+    'editor.BlockListBlock',
+    'webentor/core/addResponsiveClasses',
+    addResponsiveClassesHOC,
+  );
 };
 
 /**

package/core-js/blocks-filters/responsive-settings/utils.ts

@@ -142,26 +142,32 @@ export const applyResponsiveSettings = (attributes: any): boolean => {
 };
 
 /**
- * Generates Tailwind class names from block attributes using the SettingsRegistry.
- * Each registered setting's generateClasses() is called per breakpoint.
+ * Pure class generator. Walks the SettingsRegistry and runs each supported
+ * module's generateClasses() per breakpoint, grouping the results by
+ * SettingDefinition.attributeKey (e.g. 'layout', 'flexbox', 'grid', 'spacing').
+ *
+ * Mirrors the PHP classes_by_property map. Hook-free — caller passes
+ * blockName and parentBlockAttributes explicitly so this can be used from
+ * any component without duplicating useBlockProps / useBlockParent calls.
  *
- * This function is called as a classNameGenerator hook from registerBlockExtension.
- * useBlockParent/useBlockProps are called at top level to comply with Rules of Hooks.
+ * Consumers that need to split classes between different DOM elements
+ * (e.g. l-section puts flexbox/grid/layout.display on an inner container)
+ * can call this helper and pick the entries they want per element.
  */
-export const generateClassNames = (attributes: any): string => {
+export const computeClassesByAttribute = (
+  attributes: Record<string, any>,
+  blockName: string,
+  parentBlockAttributes?: Record<string, any>,
+): Record<string, string[]> => {
+  const result: Record<string, string[]> = {};
+
   if (!applyResponsiveSettings(attributes)) {
-    return '';
+    return result;
   }
 
-  const blockProps = useBlockProps();
-  const blockName = blockProps['data-type'];
   const blockSettings = getBlockType(blockName);
   const supports = blockSettings?.supports;
 
-  // useBlockParent hoisted to top level (hook-safe)
-  const parentBlock = useBlockParent();
-
-  // Resolve ordered breakpoints for cascade logic
   const orderedBreakpoints: string[] = applyFilters(
     'webentor.core.twBreakpoints',
     ['basic'],
@@ -170,11 +176,10 @@ export const generateClassNames = (attributes: any): string => {
   const context: ClassGenContext = {
     blockName,
     supports,
-    parentBlockAttributes: parentBlock?.attributes,
+    parentBlockAttributes,
     breakpoints: orderedBreakpoints,
   };
 
-  const classes: string[] = [];
   const allSettings = registry.getAll();
 
   // Collect all breakpoints present in any attribute
@@ -182,7 +187,6 @@ export const generateClassNames = (attributes: any): string => {
   for (const def of allSettings) {
     if (!registry.isSupported(supports, def)) continue;
 
-    // Check all attribute keys declared by this module
     for (const attrKey of Object.keys(def.attributeSchema)) {
       const attrGroup = attributes[attrKey];
       if (!attrGroup || typeof attrGroup !== 'object') continue;
@@ -198,15 +202,90 @@ export const generateClassNames = (attributes: any): string => {
     }
   }
 
-  // Generate classes per breakpoint per registered setting
+  // Generate classes per breakpoint per registered setting, grouped by attributeKey
   for (const bp of breakpoints) {
     for (const def of allSettings) {
       if (!registry.isSupported(supports, def)) continue;
-      classes.push(...def.generateClasses(attributes, bp, context));
+      const produced = def.generateClasses(attributes, bp, context);
+      if (produced.length === 0) continue;
+      const key = def.attributeKey;
+      if (!result[key]) result[key] = [];
+      result[key].push(...produced);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Generates Tailwind class names from block attributes using the SettingsRegistry.
+ * Each registered setting's generateClasses() is called per breakpoint.
+ *
+ * Called from the editor.BlockListBlock HOC (React component context).
+ * Hooks are called unconditionally before any early returns (Rules of Hooks).
+ *
+ * Delegates the per-module work to computeClassesByAttribute and flattens the
+ * result, preserving the original output shape (a single space-joined string).
+ */
+export const generateClassNames = (attributes: any): string => {
+  // Hooks must be called unconditionally before any early return (Rules of Hooks)
+  const blockProps = useBlockProps();
+  const parentBlock = useBlockParent();
+
+  if (!applyResponsiveSettings(attributes)) {
+    return '';
+  }
+
+  const blockName = blockProps['data-type'];
+
+  const classesByAttribute = computeClassesByAttribute(
+    attributes,
+    blockName,
+    parentBlock?.attributes,
+  );
+
+  return Object.values(classesByAttribute).flat().join(' ');
+};
+
+/**
+ * Collect Tailwind class tokens from responsive setting attributes.
+ *
+ * Reads value entries from the given attribute keys (e.g. 'layout', 'flexbox',
+ * 'grid') and returns the set of class tokens that would be generated.
+ * Works directly from the block's attributes — no registry or cross-bundle
+ * state needed.
+ *
+ * Useful for blocks that need to split classes between elements (e.g. l-section
+ * moves layout/flexbox/grid classes from the wrapper to an inner container).
+ */
+export const collectClassTokensFromAttributes = (
+  attributes: Record<string, any>,
+  attributeKeys: string[],
+): Set<string> => {
+  const tokens = new Set<string>();
+
+  for (const attrKey of attributeKeys) {
+    const attrGroup = attributes[attrKey];
+    if (!attrGroup || typeof attrGroup !== 'object') continue;
+
+    for (const prop of Object.values(attrGroup)) {
+      const propData = prop as any;
+      if (!propData?.value) continue;
+
+      for (const [bp, value] of Object.entries(propData.value)) {
+        if (!value || typeof value !== 'string') continue;
+        const prefix = bp === 'basic' ? '' : `${bp}:`;
+        tokens.add(`${prefix}${value}`);
+
+        // Layout 'hidden' maps to 'opacity-30' in editor
+        if (value === 'hidden') {
+          tokens.add(`${prefix}opacity-30`);
+        }
+      }
     }
   }
 
-  return classes.join(' ') ?? '';
+  return tokens;
 };
 
 export const inlineStyleGenerator = (): Record<string, any> => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webikon/webentor-core",
   "homepage": "https://webikon.sk",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Core functionality and useful utilities for Webentor Stack",
   "license": "MIT",
   "author": "Webikon s.r.o.",