Weston Ruter

Payton Swick

<p><em>Important note:</em> This project was first started before the Gutenberg feature plugin was started. As such, the JS Widgets plugin should now be considered a <em>prototype</em> which may inform the way that widget <em>blocks</em> get implemented in Gutenberg. This plugin will no longer be actively developed.</p>
<p>Also could be known as Widget Customizer 2.0, Widgets 3.0, or Widgets Next Generation.</p>
<p><em>Warning:</em> The APIs provided by this plugin are still in flux. If creating new widgets that extend the <code>WP_JS_Widget</code> class, please look at the changelog and ensure compatibility with your extended widgets before deploying.</p>
<p>This plugin implements:</p>
<ul>
<li><a href="https://core.trac.wordpress.org/ticket/33507" rel="nofollow ugc">WP-CORE#33507</a>: Allow widget controls to be JS-driven.</li>
<li><a href="https://core.trac.wordpress.org/ticket/35574" rel="nofollow ugc">WP-CORE#35574</a>: Add REST API JSON schema information to WP_Widget.</li>
<li><a href="https://github.com/WP-API/WP-API/issues/19" rel="nofollow ugc">WP-API#19</a>: Add widget endpoints to the WP REST API.</li>
</ul>
<p>Features:</p>
<ul>
<li>Integrates with <a href="https://wordpress.org/plugins/shortcode-ui/" rel="ugc">Shortcake (Shortcode UI)</a> to allow all JS widgets to be made available as Post Elements in the editor.</li>
<li>Widget instance settings in the Customizer are exported from PHP as regular JSON without any PHP-serialized base64-encoded <code>encoded_serialized_instance</code> anywhere to be seen.</li>
<li>Previewing widget changes in the customizer is faster since the <code>update-widget</code> Ajax request can be eliminated since the JS control can directly manipulate the widget instance data.</li>
<li>Widgets control forms use JS content templates instead of PHP to render the markup for each control, reducing the weight of the customizer load, especially when there are a lot of widgets in use.</li>
<li>Widgets that extend <code>WP_JS_Widget</code> will editable from both the customizer and the widgets admin page using the same <code>Form</code> JS interface. This <code>Form</code> is also able to be embedded in other contexts, like on the frontend and as a Shortcake (Shortcode UI) form. See <a href="https://github.com/xwp/wp-js-widgets/issues/11" rel="nofollow ugc">#11</a>.</li>
<li>Widgets employ the JSON Schema from the REST API to define an instance with validation and sanitization of the instance properties, beyond also providing <code>validate</code> and <code>sanitize</code> methods that work on the instance array as a whole.</li>
<li>A widget instance can be blocked from being saved by returning a <code>WP_Error</code> from its <code>validate</code> or <code>sanitize</code> method. For example, the RSS widget will show an error message if the feed URL provided is invalid and the widget will block from saving until the URL is corrected.</li>
<li>Widgets are exposed under the <code>js-widgets/v1</code> namespace, for example to list all Recent Posts widgets via the <code>/js-widgets/v1/widgets/recent-posts</code> or to get the Text widget with the “ID” (number) of 6, <code>/js-widgets/v1/widgets/text/6</code>.</li>
<li>Customizer settings for widget instances (<code>widget_{id_base}[{number}]</code>) are directly mutated via JavaScript instead of needing to do an <code>update-widget</code> Admin Ajax roundtrip; this greatly speeds up previewing.</li>
<li>Widget control forms can be extended to employ any JS framework for managing the UI, allowing Backbone, React, or any other frontend technology to be used.</li>
<li>Compatible with widgets stored in a custom post type instead of options, via the Widget Posts module in the <a href="https://github.com/xwp/wp-customize-widgets-plus" rel="nofollow ugc">Customize Widgets Plus</a> plugin.</li>
<li>Compatible with <a href="https://github.com/xwp/wp-customize-snapshots" rel="nofollow ugc">Customize Snapshots</a>, allowing changes made in the Customizer to be applied to requests for widgets via the REST API.</li>
<li>Includes adaptations of all core widgets using the new <code>WP_JS_Widget</code> API.</li>
<li>The adapted core widgets include additional raw data in their REST API item responses so that JS can render them client-side.</li>
<li>The Notifications API is utilized to display warnings when a user attempts to provide markup in a core widget title or illegal HTML in a Text widget’s content.</li>
<li>The Pages widget in Core is enhanced to make use of <a href="https://wordpress.org/plugins/customize-object-selector/" rel="ugc">Customize Object Selector</a> if available to display a Select2 UI for selecting pages to exclude instead of providing page IDs.</li>
<li>An bonus bundled plugin provides a “Post Collection” widget which, if the <a href="https://wordpress.org/plugins/customize-object-selector/" rel="ugc">Customize Object Selector</a> plugin is installed, will provide a UI for curating an arbitrary list of posts to display.</li>
</ul>
<p>This plugin doesn’t yet implement any widgets that use JS templating for <em>frontend</em> rendering of the widgets. For that, please see the <a href="https://github.com/xwp/wp-next-recent-posts-widget" rel="nofollow ugc">Next Recent Posts Widget</a> plugin.</p>
<p>Limitations/Caveats:</p>
<ul>
<li>Only widgets that extend <code>WP_JS_Widget</code> will be exposed via the REST API. The plugin includes a <code>WP_JS_Widget</code> adapter class which demonstrates how to adapt existing <code>WP_Widget</code> classes for the new widget functionality.</li>
</ul>


JS Widgets

A prototype of next generation of widgets in core, embracing JS for UI and powering the Widgets REST API.

Themeum

Ari Stathopoulos

David Vongries

DannyCooper

Ignacio Cruz Moreno

wplemon

<p><a href="https://kirki.com/" rel="nofollow ugc">Kirki</a> is a <strong>freeform visual builder for WordPress and an advanced theme customizer</strong> that lets you design and build complete websites visually — without coding.</p>
<p>Unlike traditional page builders, Kirki uses an <strong>infinite freeform canvas</strong>, giving you full creative freedom without rigid grids or layout restrictions.</p>
<p>Build landing pages, business websites, blogs, and full websites with responsive controls, dynamic content, and powerful design tools — all inside WordPress.</p>
<p><strong>Watch Kirki in action:</strong></p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ofDMD1j4A2Y?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>🔥 Why Choose Kirki?</h3>
<p>Kirki combines a modern visual builder with WordPress’s powerful customization system — so you can design freely without sacrificing flexibility.</p>
<p>✔ Freeform canvas — no rigid layouts or constraints<br />
✔ Drag-and-drop visual editor with precise control<br />
✔ Responsive editing for desktop, tablet, and mobile<br />
✔ Built-in tools (forms, popups, dynamic content)<br />
✔ Clean, performance-focused output<br />
✔ Works with any WordPress theme<br />
✔ Built for designers, developers, and teams</p>
<h3>🧱 Core Features</h3>
<h3>Visual Website Builder</h3>
<p>Design your website visually with full control.</p>
<ul>
<li>Freeform drag-and-drop editor</li>
<li>Infinite canvas — no grid or column restrictions</li>
<li>Real-time responsive editing (desktop, tablet, mobile)</li>
<li>Pre-built components and layout blocks</li>
<li>Global styles (colors, fonts, spacing)</li>
<li>Version history and rollback</li>
<li>Media manager for assets</li>
<li>Light & dark mode interface</li>
</ul>
<h3>⚡ Dynamic Content & Smart Features</h3>
<p>Build scalable, data-driven websites.</p>
<ul>
<li>Dynamic content system (collections & templates)</li>
<li>Conditional visibility controls</li>
<li>Custom attributes for advanced control</li>
<li>Developer-friendly extensibility</li>
<li>Reusable design systems and components</li>
</ul>
<h3>🎨 Templates & Design Assets</h3>
<p>Start fast and customize everything.</p>
<ul>
<li>Ready-made website templates</li>
<li>Pre-built sections and layout blocks</li>
<li>Reusable design assets</li>
<li>Import / export projects easily</li>
</ul>
<h3>🧩 Built-in Tools</h3>
<p>Everything you need — without extra plugins.</p>
<ul>
<li>Form builder with submission management</li>
<li>Popup builder with visual controls</li>
<li>Interaction and animation builder</li>
<li>Icon library and media tools</li>
</ul>
<h3>🎬 Interactions & Animations</h3>
<p>Create engaging, modern experiences.</p>
<ul>
<li>Visual animation builder</li>
<li>Interaction timeline editor</li>
<li>Custom transitions and effects</li>
<li>Text animation tools</li>
</ul>
<h3>⚙️ Advanced WordPress Customizer</h3>
<p>Extend WordPress customization with powerful controls.</p>
<ul>
<li>35+ customizer controls</li>
<li>Real-time preview</li>
<li>Automatic CSS generation</li>
<li>Conditional logic support</li>
<li>Developer-friendly API</li>
<li>Performance optimized</li>
</ul>
<h3>👥 Who Is Kirki For?</h3>
<ul>
<li>Designers who want full creative freedom</li>
<li>Freelancers building client websites</li>
<li>Agencies managing multiple projects</li>
<li>Developers extending WordPress functionality</li>
<li>Anyone looking for a <strong>no-code visual builder for WordPress</strong></li>
</ul>
<h3>🚀 What Makes Kirki Different?</h3>
<p>Kirki is not just another page builder.</p>
<p>Instead of forcing layouts into rows and columns, Kirki gives you a <strong>freeform design experience</strong> — similar to modern design tools — while keeping the full power of WordPress.</p>
<p><strong>Design freely. Build with WordPress.</strong></p>
<h3>Support</h3>
<ul>
<li>Community support: https://facebook.com/groups/kirkicommunity</li>
<li>Documentation: https://kirki.com/docs</li>
<li>Website: https://kirki.com</li>
</ul>


Kirki – Freeform Page Builder, Website Builder & Customizer


WordPress themes utilizing the Kirki customizer framework are currently broken. Due to critical security vulnerabilities, an update is mandatory, but there is unfortunately zero support available for legacy versions.


no legacy support

Freeform page builder & website builder for WordPress. Infinite canvas for complex, interactive websites. Built-in forms, animations & Customizer.

JS Widgets vs Kirki – Freeform Page Builder, Website Builder & Customizer