feat(core): l-section background video + button hide flags (release 0.15.5)

docs/src/compatibility-matrix.md

@@ -4,6 +4,7 @@
 
 | starterVersion | themeVersion | coreVersion | configsVersion | setupCliVersion | php | node |
 | --- | --- | --- | --- | --- | --- | --- |
+| 2.1.2 | 2.1.2 | 0.15.5 | 1.1.0 | 1.1.0 | >=8.3 | >=20 |
 | 2.1.2 | 2.1.2 | 0.15.4 | 1.1.0 | 1.1.0 | >=8.3 | >=20 |
 | 2.1.1 | 2.1.1 | 0.15.3 | 1.1.0 | 1.1.0 | >=8.3 | >=20 |
 | 2.1.1 | 2.1.1 | 0.15.2 | 1.1.0 | 1.1.0 | >=8.3 | >=20 |

packages/webentor-core/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Webentor Core Changelog
 
+## 0.15.5
+
+- **`l-section` background video.** The Section block's "Background Image Settings" panel now accepts a background `<video>` alongside the existing image, which remains the fallback shown while the video loads and on mobile when disabled. Three toggles control delivery: *Disable video on mobile* (≤480px — the video is neither shown nor fetched; the image is used instead), *Lazyload video* (loads only when the section scrolls into the viewport, via a vanilla `IntersectionObserver` — core does not depend on `@alpinejs/intersect`), and *Lazyload background image* (`loading="lazy"` on the section image; off by default since section backgrounds are usually the LCP element). The video renders muted/looped/autoplay/`playsinline` on the existing `.w-section-img` background layer, above the `<picture>` and below the overlay/content; its source is held in `data-src` (`preload="none"`) so nothing is fetched until the block script decides to load it. The load decision re-runs on a throttled `resize`, so a viewport that starts on mobile still loads the video after crossing up to desktop. New attributes: `video`, `disableVideoOnMobile`, `lazyloadVideo`, `lazyloadImage`. Additive — existing sections are unaffected.
+- **`WebentorButton` gains `hideIcon` and `hideHtmlElement` props.** Blocks that embed the shared button and only need a title + variant (handling URL/icon externally) can now hide the icon toggle + picker and the `<a>`/`<button>` element select from the settings popover, matching the existing `hideVariant` / `hideSize` / `hideLink` flags. Both default off, so the standalone `e-button` block and existing consumers still show every control. Editor-only; no frontend or API change.
+
 ## 0.15.4
 
 - **Restore inspector-control spacing under WordPress 7.0.** `@wordpress/components` 32.0.0 (bundled by WP 7.0) flipped `__nextHasNoMarginBottom` to default-true, silently removing the implicit 8px bottom margin from controls that relied on it. The affected bare controls — `e-slider` settings (Autoplay Speed, Slider ID, Slides per view, Space Between Slides), `e-query-loop` (Posts Per Page, Query ID, taxonomy `FormTokenField`), and `e-picker-query-loop` (Query ID) — are now wrapped in `PanelRow`, the house spacing idiom, so inspector panels render with consistent gaps again on WP 7.0. Editor-only; no frontend or API change.

packages/webentor-core/composer.json

@@ -1,6 +1,6 @@
 {
   "name": "webikon/webentor-core",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "license": "MIT",
   "description": "Webentor Core package",
   "homepage": "https://webikon.sk",

packages/webentor-core/core-js/blocks-components/button.tsx

@@ -21,9 +21,10 @@
  * @param {string}   props.attributeName    Attribute name for button object, e.g. "button".
  * @param {string}   props.placement        Popover placement
  * @param {boolean}  props.hideVariant      Whether variants select should be displayed.
- * @param {boolean}  props.hideAction       Whether action select should be displayed.
+ * @param {boolean}  props.hideSize         Whether size select should be displayed.
  * @param {boolean}  props.hideLink         Whether url and open in new tab toggle should be displayed.
- * @param {boolean}  props.hidePopup        Whether popup select should be displayed.
+ * @param {boolean}  props.hideHtmlElement  Whether the HTML element (<a>/<button>) select should be displayed.
+ * @param {boolean}  props.hideIcon         Whether the icon toggle + picker should be displayed.
  * @param {string}   props.className        Classes.
  * @param {string}   props.innerClassName   Inner classes.
  * @param {string}   props.buttonClassName  Button classes.
@@ -89,15 +90,17 @@
 
 type WebentorButtonProps = {
   attributeName: string;
   attributes: Record<string, any>;
   buttonClassName?: string;
   className?: string;
+  hideHtmlElement?: boolean;
+  hideIcon?: boolean;
   hideLink?: boolean;
   hideSize?: boolean;
   hideVariant?: boolean;
   innerClassName?: string;
   placement?: string;
   setAttributes: (attributes: Record<string, any>) => void;
 };
 
 export const WebentorButton = (props: WebentorButtonProps) => {
@@ -108,6 +111,8 @@
     hideVariant,
     hideSize,
     hideLink,
+    hideHtmlElement,
+    hideIcon,
     attributeName,
     attributes,
     setAttributes,
@@ -311,18 +316,23 @@
 
             {ExtensionComponent}
 
-            <SelectControl
-              label={__('Button HTML Element', 'webentor')}
-              value={attributes[attributeName]?.htmlElement}
-              __nextHasNoMarginBottom
-              options={[
-                { label: __('Link (<a>)', 'webentor'), value: 'a' },
-                { label: __('Button (<button>)', 'webentor'), value: 'button' },
-              ]}
-              onChange={(value) =>
-                updateObjectAttribute(attributeName, 'htmlElement', value)
-              }
-            />
+            {!hideHtmlElement && (
+              <SelectControl
+                label={__('Button HTML Element', 'webentor')}
+                value={attributes[attributeName]?.htmlElement}
+                __nextHasNoMarginBottom
+                options={[
+                  { label: __('Link (<a>)', 'webentor'), value: 'a' },
+                  {
+                    label: __('Button (<button>)', 'webentor'),
+                    value: 'button',
+                  },
+                ]}
+                onChange={(value) =>
+                  updateObjectAttribute(attributeName, 'htmlElement', value)
+                }
+              />
+            )}
 
             {!hideLink &&
               attributes[attributeName]?.htmlElement != 'button' && (
@@ -360,54 +370,56 @@
                 </>
               )}
 
-            <div className="wbtr:border wbtr:border-editor-border wbtr:p-2">
-              <div className="wbtr:my-2">
-                <ToggleControl
-                  label="Show Button Icon"
-                  checked={attributes[attributeName]?.showIcon}
-                  onChange={(value) =>
-                    updateObjectAttribute(attributeName, 'showIcon', value)
-                  }
-                />
-              </div>
+            {!hideIcon && (
+              <div className="wbtr:border wbtr:border-editor-border wbtr:p-2">
+                <div className="wbtr:my-2">
+                  <ToggleControl
+                    label="Show Button Icon"
+                    checked={attributes[attributeName]?.showIcon}
+                    onChange={(value) =>
+                      updateObjectAttribute(attributeName, 'showIcon', value)
+                    }
+                  />
+                </div>
 
-              {attributes[attributeName]?.showIcon && (
-                <div>
-                  <div className="wbtr:mb-2 wbtr:flex wbtr:items-center wbtr:gap-4">
-                    <IconPickerToolbarButton
-                      label="Icon"
-                      value={attributes[attributeName]?.icon}
-                      onChange={handleIconSelection}
-                    />
-                    {attributes[attributeName]?.icon?.name ? (
-                      <div className="wbtr:size-10">
-                        <Icon10up
-                          name={attributes[attributeName]?.icon.name}
-                          iconSet={attributes[attributeName]?.icon.iconSet}
-                        />
-                      </div>
-                    ) : (
-                      'No icon selected'
-                    )}
-                  </div>
-                  <div className="wbtr:mb-2">
-                    <SelectControl
-                      label="Icon Position"
-                      value={attributes[attributeName]?.iconPosition}
-                      __nextHasNoMarginBottom
-                      options={iconPositions}
-                      onChange={(value) =>
-                        updateObjectAttribute(
-                          attributeName,
-                          'iconPosition',
-                          value,
-                        )
-                      }
-                    />
+                {attributes[attributeName]?.showIcon && (
+                  <div>
+                    <div className="wbtr:mb-2 wbtr:flex wbtr:items-center wbtr:gap-4">
+                      <IconPickerToolbarButton
+                        label="Icon"
+                        value={attributes[attributeName]?.icon}
+                        onChange={handleIconSelection}
+                      />
+                      {attributes[attributeName]?.icon?.name ? (
+                        <div className="wbtr:size-10">
+                          <Icon10up
+                            name={attributes[attributeName]?.icon.name}
+                            iconSet={attributes[attributeName]?.icon.iconSet}
+                          />
+                        </div>
+                      ) : (
+                        'No icon selected'
+                      )}
+                    </div>
+                    <div className="wbtr:mb-2">
+                      <SelectControl
+                        label="Icon Position"
+                        value={attributes[attributeName]?.iconPosition}
+                        __nextHasNoMarginBottom
+                        options={iconPositions}
+                        onChange={(value) =>
+                          updateObjectAttribute(
+                            attributeName,
+                            'iconPosition',
+                            value,
+                          )
+                        }
+                      />
+                    </div>
                   </div>
-                </div>
-              )}
-            </div>
+                )}
+              </div>
+            )}
           </div>
         </Popover>
       )}

packages/webentor-core/package.json

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

packages/webentor-core/public/build/assets/editor.deps-BlXjIMbQ.json → packages/webentor-core/public/build/assets/editor.deps-D8M5pYds.json

@@ -1,12 +1,12 @@
 [
-  "wp-i18n",
   "wp-block-editor",
   "wp-blocks",
-  "wp-hooks",
   "wp-components",
   "wp-compose",
   "wp-data",
   "wp-element",
+  "wp-hooks",
+  "wp-i18n",
   "wp-html-entities",
   "wp-primitives"
 ]

packages/webentor-core/public/build/manifest.json

@@ -4,7 +4,7 @@
     "name": "_utils"
   },
   "editor.deps.json": {
-    "file": "assets/editor.deps-BlXjIMbQ.json",
+    "file": "assets/editor.deps-D8M5pYds.json",
     "src": "editor.deps.json"
   },
   "resources/blocks/e-accordion/script.ts": {
@@ -58,6 +58,15 @@
     "src": "resources/blocks/l-nav-menu/style.css",
     "isEntry": true
   },
+  "resources/blocks/l-section/script.ts": {
+    "file": "assets/resources/blocks/l-section/script-Dko-DSu-.js",
+    "name": "resources/blocks/l-section/script",
+    "src": "resources/blocks/l-section/script.ts",
+    "isEntry": true,
+    "imports": [
+      "__utils-CxNuNGJl.js"
+    ]
+  },
   "resources/blocks/l-section/style.css": {
     "file": "assets/resources/blocks/l-section/style-ve0mngOI.css",
     "name": "resources/blocks/l-section/style",
@@ -86,7 +95,7 @@
     "isEntry": true
   },
   "resources/scripts/editor.ts": {
-    "file": "assets/coreEditorJs-C0kGg9L7.js",
+    "file": "assets/coreEditorJs-Wzsvt_RN.js",
     "name": "coreEditorJs",
     "src": "resources/scripts/editor.ts",
     "isEntry": true,
@@ -95,7 +104,7 @@
     ]
   },
   "resources/styles/app.css": {
-    "file": "assets/coreAppStyles-afJAdduv.css",
+    "file": "assets/coreAppStyles-oIFrvEYJ.css",
     "name": "coreAppStyles",
     "names": [
       "coreAppStyles.css"
@@ -104,7 +113,7 @@
     "isEntry": true
   },
   "resources/styles/editor.css": {
-    "file": "assets/coreEditorStyles-rGBH8e4z.css",
+    "file": "assets/coreEditorStyles-BFC1fv49.css",
     "name": "coreEditorStyles",
     "names": [
       "coreEditorStyles.css"

packages/webentor-core/resources/blocks/l-section/block.json

@@ -20,6 +20,22 @@
       "type": "object",
       "default": null
     },
+    "video": {
+      "type": "object",
+      "default": null
+    },
+    "disableVideoOnMobile": {
+      "type": "boolean",
+      "default": true
+    },
+    "lazyloadVideo": {
+      "type": "boolean",
+      "default": true
+    },
+    "lazyloadImage": {
+      "type": "boolean",
+      "default": false
+    },
     "imgSize": {
       "type": "object",
       "default": null