# mage-os/module-page-builder-widget

> PageBuilder cms widget module

`composer require mage-os/module-page-builder-widget`

Canonical URL: https://packagento.com/mage-os/module-page-builder-widget

## At a glance

- **Vendor**: mage-os (https://packagento.com/mage-os.md)
- **Latest version**: 1.5.0 — released 2026-05-15
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/mage-os/module-page-builder-widget and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require mage-os/module-page-builder-widget:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

PageBuilder cms widget module

## README

New page builder component named "CMS Widget".

---


### 🚀  Features

The **PageBuilder Widget** module allows the user to specify CMS widgets and relative configurations inside a dedicated page builder component named "CMS Widget".
As for all pagebuilder components this component is draggable and can be placed inside other components.

![plot](./doc/widget-sidebar_screenshot.png)

If supported, the page builder will show widget content inside stage preview.


### 🔌 How it works

#### Widget Preview assignment

In order to create a widget preview you must create a new widget.xml file inside your module changing Magento_Widget xsd file inside "xsi:noNamespaceSchemaLocation" attribute of "widget" xml node.
Literally change
```
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
```
with that:
```
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:MageOS_PageBuilderWidget:etc/widget.xsd">
```
Now you're able to specify new widget.xml nodes:
- previewTemplates
- previewCss
- previewJs
- previewBlock
- previewBlockArguments

##### previewTemplates XML node

This is where all starts :) inside this node you must specify each phtml preview file and his relation to the widget frontend phtml view.
So, checking widget.xml inside this module:
```
<widget id="catalog_product_link">
    <previewTemplates>
        <previewTemplate name="product/widget/link/link_block.phtml" xsi:type="string">MageOS_PageBuilderWidget::widget-preview/product/widget/link/link_block.phtml</previewTemplate>
        <previewTemplate name="product/widget/link/link_inline.phtml" xsi:type="string">MageOS_PageBuilderWidget::widget-preview/product/widget/link/link_inline.phtml</previewTemplate>
    </previewTemplates>
</widget>
```
As you know xml files are all merged so here we need to specify the widget id and then the previewTemplates node.
The Magento_Widget widget.xml specify widget's parameters and, inside of them, a "template" parameter where multiple templates are specified:
```
<parameter name="template" type="select" visible="true" translate="label">
    <label>Template</label>
    <option name="default" value="product/widget/link/link_block.phtml" selected="true" translate="label">
        <label>Product Link Block Template</label>
    </option>
    <option name="link_inline" value="product/widget/link/link_inline.phtml" translate="label">
        <label>Product Link Inline Template</label>
    </option>
</parameter>
```
For each of these options we need to copy the value inside "previewsTemplate" child "previewTemplate" node "name" attribute and our phtml preview file inside his content.
So, specifying the template inside widget configurations pagebuilder will keep the relative phtml preview.

##### previewCss XML node

For every preview this module allow to specify a dedicated CSS file.
Inside this file you can style your previews. 
Keep in mind that these files are included in each widget instance preview on pagebuilder.
Be sure to use enough specific css selectors avoiding conflicts with other components.
```
<widget id="products_list">
    <previewTemplates>
        <previewTemplate name="Magento_CatalogWidget::product/widget/content/grid.phtml" xsi:type="string">MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml</previewTemplate>
    </previewTemplates>
    ...
    <previewCss>MageOS_PageBuilderWidget::css/widget/preview/products_list_and_grid.css</previewCss>
    ...
</widget>
```
ATTENTION: Remember to place this php snippet inside your phtml preview file for css inclusion:
```
<?= $block->getChildHtml("previewAssets"); ?>
```

##### previewJs XML node

For every preview this module allow to specify a dedicated Js file.
Inside this file you can add js actions and triggers to the preview.
Remember that mouse actions are not triggered on widgets preview elements so this JS is useful for animations only (ex: sliders scroll, ... )
```
<widget id="products_list">
    <previewTemplates>
        <previewTemplate name="Magento_CatalogWidget::product/widget/content/grid.phtml" xsi:type="string">MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml</previewTemplate>
    </previewTemplates>
    ...
    <previewJs>MageOS_PageBuilderWidget/js/my-widget-preview-js-file</previewJS>
    ...
</widget>
```

##### previewBlock XML node

Sometimes you'll need to substitute the main Block class behind the preview choosing it instead of widget model inside "class" attribute.
You can specify this new PHP class in this node and it will be used replacing the original widget class:
```
<widget id="products_list">
    <previewTemplates>
        <previewTemplate name="Magento_CatalogWidget::product/widget/content/grid.phtml" xsi:type="string">MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml</previewTemplate>
    </previewTemplates>
    <previewBlock>MageOS\PageBuilderWidget\Block\Adminhtml\Widget\Preview\ProductsList</previewBlock>
    ...
</widget>
```
ATTENTION: Remember to place this php snippet inside your phtml preview file for js inclusion:
```
<?= $block->getChildHtml("previewAssets"); ?>
```

##### previewBlockArguments XML node

_(README truncated for .md surface. Full README on https://packagento.com/mage-os/module-page-builder-widget.)_

## Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## 1.5.0 - 2026-05-14
#### Added
- Declare PHP 8.5 compatibility in composer.json (now explicitly supports PHP 8.1 through 8.5)
#### Fixed
- Fix previewTemplates xml node merge adding reference to xml config reader
- Guard `preg_replace_callback` in `WidgetContentSettingsCleanup` against null/empty content to avoid PHP 8.5 deprecation on null subjects
- Harden `Build::sanitizeWidgetParams` so `preg_replace`/`escapeHtml` never receive non-string values (centralized in `sanitizeStringValue`)
- Loosen `Build::isTypeValid` signature to accept mixed input from the request and validate type safely
- Add missing `getCacheKey(): string` / `getCacheKeyInfo(): array` return types on `Block\Adminhtml\Widget\Preview\NewWidget` to match parent contracts
- Consolidate `use` imports across `Block\Adminhtml\Widget\Preview\*` and related files

## 1.4.1
#### Fixed
- Fix getCacheKey() return type from array to string matching parent contract

## 1.4.0
### Updated
- Update composer JSON making the module installable for Magento Opensource also

## 1.3.2
#### Fixed
- Fix CSS issue hiding other modal form labels by @melindash (#10)

## 1.3.1
#### Fixed
- Improve security and avoid script injection through admin widget preview builder controller

## 1.3.0
#### Fixed
- Fix minor code syntax issues and dependencies declaration, add control on widget_type parameter passed for widget preview on adminhtml

## 1.2.0
#### Fixed
- Fix not useful and broken validation on pagebuilder widget form ui component

### 1.1.1
#### Updated
- Remove content_settings attribute on frontend for pages and blocks widgets placed into content

### 1.1.0
#### Fixed
- Fix error for xml compilation on developer mode

### 1.0.0
#### Added
- First Commit, now is possible to use CMS widgets with own previews inside pagebuilder with a dedicated component!

## Recent Versions

| Version | Released |
|---|---|
| 1.5.0 | 2026-05-15 |
| 1.4.1 | 2026-04-19 |
| 1.4.0 | 2026-03-10 |
| 1.3.3 | 2026-01-20 |
| 1.3.2 | 2025-12-28 |
| 1.3.1 | 2025-10-08 |
| 1.3.0 | 2025-10-04 |
| 1.2.0 | 2025-09-15 |
| 1.1.1 | 2025-07-27 |
| 1.1.0 | 2025-07-23 |

Showing 10 of 11 versions. Full release history on https://packagento.com/mage-os/module-page-builder-widget.

## Dependencies

### Require

| Package | Constraint |
|---|---|
| magento/module-page-builder | ^2.0 |
| magento/module-widget | * |
| php | ~8.1.0 \|\| ~8.2.0 \|\| ~8.3.0 \|\| ~8.4.0 \|\| ~8.5.0 |

## Quality

Latest release (1.5.0) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Fail | 252 | 13 errors, 239 warnings (ruleset: Magento2) — 170 auto-fixable with phpcbf |
| PHPMD | Warning | 12 | 12 rule violations (UnusedFormalParameter:5, CyclomaticComplexity:2, ExcessiveParameterList:1, NPathComplexity:1, UnusedLocalVariable:1) |
| Cpd | Pass | 0 |  |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 21 | 21 | – | – |
| 2.4.8 | – | 20 | 20 | – |
| 2.4.9 | – | – | 16 | 16 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["mage-os/module-page-builder-widget"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

mage-os is a Magento 2 vendor on Packagento. See https://packagento.com/mage-os.md for their full catalogue.