Weston Ruter

Payton Swick

Important note: This project was first started before the Gutenberg feature plugin was started. As such, the JS Widgets plugin should now be considered a prototype which may inform the way that widget blocks get implemented in Gutenberg. This plugin will no longer be actively developed.
Also could be known as Widget Customizer 2.0, Widgets 3.0, or Widgets Next Generation.
Warning: 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.
This plugin implements:
<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>
Features:
<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>
This plugin doesn’t yet implement any widgets that use JS templating for frontend 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.
Limitations/Caveats:
<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.

Jason Bahl

Tyler

David Levine

Ryan Kanner

Geoff Taylor

Edwin Cromley

WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.
Get Started
<ol>
<li>Install WPGraphQL: <code>wp plugin install wp-graphql --activate</code></li>
<li>Try it out: <a href="https://repl.wpgraphql.com" rel="nofollow ugc">Live Demo</a></li>
<li>Read the <a href="https://wpgraphql.com/docs/quick-start" rel="nofollow ugc">Quick Start Guide</a>.</li>
<li>Join the <a href="https://discord.gg/AGVBqqyaUY" rel="nofollow ugc">Community on Discord</a> and <a href="https://github.com/wp-graphql/wp-graphql" rel="nofollow ugc">Star the Repo</a>!</li>
</ol>
Key Features
<ul>
<li>Flexible API: Query posts, pages, custom post types, taxonomies, users, and more.</li>
<li>Extendable Schema: Easily add functionality with WPGraphQL’s API, enabling custom integrations.</li>
<li>Compatible with Modern Frameworks: Works seamlessly with <a href="https://vercel.com/guides/wordpress-with-vercel" rel="nofollow ugc">Next.js</a>, <a href="https://docs.astro.build/en/guides/cms/wordpress/" rel="nofollow ugc">Astro</a>, <a href="https://www.okupter.com/blog/headless-wordpress-graphql-sveltekit" rel="nofollow ugc">SvelteKit</a>, and more.</li>
<li>Optimized Performance: Fetch exactly the data you need in a single query. Boost performance with <a href="https://github.com/wp-graphql/wp-graphql-smart-cache" rel="nofollow ugc">WPGraphQL Smart Cache</a>.</li>
</ul>
WPGraphQL is becoming a <a href="https://wordpress.org/news/2024/10/wpgraphql/" rel="ugc">Canonical Plugin</a> on WordPress.org, ensuring long-term support and a growing community of users and contributors.
<h4>Upgrading</h4>
It is recommended that anytime you want to update WPGraphQL that you get familiar with what’s changed in the release.
WPGraphQL publishes <a href="https://github.com/wp-graphql/wp-graphql/releases" rel="nofollow ugc">release notes on Github</a>.
WPGraphQL has been following Semver practices for a few years. We will continue to follow Semver and let version numbers communicate meaning. The summary of Semver versioning is as follows:
<ul>
<li>MAJOR version when you make incompatible API changes,</li>
<li>MINOR version when you add functionality in a backwards compatible manner, and</li>
<li>PATCH version when you make backwards compatible bug fixes.</li>
</ul>
You can read more about the details of Semver at semver.org
<h3>Privacy Policy</h3>
WPGraphQL uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster and make product improvements.
Appsero SDK does not gather any data by default. The SDK starts gathering basic telemetry data only when a user allows it via the admin notice.
Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.
Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.

WPGraphQL


I operate a large blog that uses WordPress as a headless CMS with a Next.JS frontend, which is largely enabled by this plugin. Let me just say first that creating an entire alternative third-party data API is an ambitious undertaking and I appreciate all the work the authors have put into it.



But as a developer I have to throw out a word of caution that this plugin often has major bugs that can have critical impact on your production website. For example after a recent minor update  we discovered a bug where any URL with a special character in it started returning a 404, causing several of our pages to suddenly become unavailable to users and delisted from Google, and this went on for many months before we realized it.



There have been many similar instances. My general approach is to lean more on WordPress's REST API over time which is more reliable since it's maintained by the WordPress team, and only use WPGraphQL when it's necessary.



Also recommend turning off auto-updates and test your website extremely thoroughly after any upgrade.


Unreliable

GraphQL vs. REST API
  10    :     0

Thank you for this plugin. Building my headless application with WPGraphQL is fun. 
The repl interface to test queries is A+.

Speedy

WPGraphQL adds a flexible and powerful GraphQL API to WordPress, enabling efficient querying and interaction with your site's data.

JS Widgets vs WPGraphQL