JS Widgets

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 WP_JS_Widget class, please look at the changelog and ensure compatibility with your extended widgets before deploying.

This plugin implements:

• WP-CORE#33507: Allow widget controls to be JS-driven.
• WP-CORE#35574: Add REST API JSON schema information to WP_Widget.
• WP-API#19: Add widget endpoints to the WP REST API.

Features:

• Integrates with Shortcake (Shortcode UI) to allow all JS widgets to be made available as Post Elements in the editor.
• Widget instance settings in the Customizer are exported from PHP as regular JSON without any PHP-serialized base64-encoded encoded_serialized_instance anywhere to be seen.
• Previewing widget changes in the customizer is faster since the update-widget Ajax request can be eliminated since the JS control can directly manipulate the widget instance data.
• 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.
• Widgets that extend WP_JS_Widget will editable from both the customizer and the widgets admin page using the same Form JS interface. This Form is also able to be embedded in other contexts, like on the frontend and as a Shortcake (Shortcode UI) form. See #11.
• Widgets employ the JSON Schema from the REST API to define an instance with validation and sanitization of the instance properties, beyond also providing validate and sanitize methods that work on the instance array as a whole.
• A widget instance can be blocked from being saved by returning a WP_Error from its validate or sanitize 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.
• Widgets are exposed under the js-widgets/v1 namespace, for example to list all Recent Posts widgets via the /js-widgets/v1/widgets/recent-posts or to get the Text widget with the “ID” (number) of 6, /js-widgets/v1/widgets/text/6.
• Customizer settings for widget instances (widget_{id_base}[{number}]) are directly mutated via JavaScript instead of needing to do an update-widget Admin Ajax roundtrip; this greatly speeds up previewing.
• 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.
• Compatible with widgets stored in a custom post type instead of options, via the Widget Posts module in the Customize Widgets Plus plugin.
• Compatible with Customize Snapshots, allowing changes made in the Customizer to be applied to requests for widgets via the REST API.
• Includes adaptations of all core widgets using the new WP_JS_Widget API.
• The adapted core widgets include additional raw data in their REST API item responses so that JS can render them client-side.
• 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.
• The Pages widget in Core is enhanced to make use of Customize Object Selector if available to display a Select2 UI for selecting pages to exclude instead of providing page IDs.
• An bonus bundled plugin provides a “Post Collection” widget which, if the Customize Object Selector plugin is installed, will provide a UI for curating an arbitrary list of posts to display.

This plugin doesn’t yet implement any widgets that use JS templating for frontend rendering of the widgets. For that, please see the Next Recent Posts Widget plugin.

Limitations/Caveats:

• Only widgets that extend WP_JS_Widget will be exposed via the REST API. The plugin includes a WP_JS_Widget adapter class which demonstrates how to adapt existing WP_Widget classes for the new widget functionality.