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.

David Anderson / Team Updraft

Prashant Baldha

DNutbourne

aporter

Venkat Raj

WPGetAPI

<p>Connect WordPress to external APIs, without code.</p>
<p>Easily send data to any API and get data from unlimited 3rd party REST APIs. Format and display the returned data on your WordPress website using a shortcode or a template tag.</p>
<p><iframe loading="lazy" title="Quick intro to WPGetAPI" width="750" height="422" src="https://www.youtube.com/embed/X50qINEs1yo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>WPGet API supports virtually all authentication methods including API keys, bearer tokens, basic auth, username/password and <a href="https://wpgetapi.com/downloads/oauth-2-0-authentication/?utm_campaign=OAuth&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">OAuth 2.0 authorization</a>.</p>
<h3>Live Examples</h3>
<p>View our live examples of connecting to several different APIs and displaying the data in various unique ways including charts, graphs, tables and weather forecasts.</p>
<p><a href="https://wpgetapi.com/demo-connecting-wordpress-to-external-api/?utm_campaign=Demo&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">LIVE EXAMPLES – Connecting WordPress to external APIs</a></p>
<h3>Major Features</h3>
<ul>
<li>Connect your WordPress website to any REST API</li>
<li>Unlimited APIs & endpoints</li>
<li>No coding required</li>
<li>Display API data using a template tag or shortcode</li>
<li>GET, POST, PUT, PATCH & DELETE methods</li>
<li>Add query string, header & body parameters</li>
</ul>
<h3>Documentation</h3>
<p>We have tons of articles and help available.</p>
<ul>
<li><a href="https://wpgetapi.com/docs/quick-start-guide/?utm_campaign=Docs&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Quick Start Guide</a></li>
<li><a href="https://wpgetapi.com/docs/step-by-step-example/?utm_campaign=Docs&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Step by Step Example</a></li>
<li><a href="https://wpgetapi.com/docs/frequently-asked-questions/?utm_campaign=Docs&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Frequently Asked Questions</a></li>
<li><a href="https://wpgetapi.com/docs/will-this-work-with-my-api/?utm_campaign=OAuth&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Will this work with my API?</a></li>
</ul>
<h3>Extending WPGet API</h3>
<h4>PRO Plugin</h4>
<p>The <strong><a href="https://wpgetapi.com/downloads/pro-plugin/?utm_campaign=Pro&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">PRO Plugin</a></strong> provides many extra features that allow you to do some more advanced things with your APIs. Features of the PRO Plugin include:</p>
<ul>
<li>Actions – automate your API when an action happens on your site</li>
<li>Tokens – grab dynamic data without code and send to your API</li>
<li>Dynamic variables – a PHP solution for grabbing dynamic values</li>
<li>Chain API calls</li>
<li>Cache API calls</li>
<li>Format API data into HTML</li>
<li>Retrieve nested data</li>
<li>Base64 encoded auth</li>
<li>XML format</li>
</ul>
<h4>API to Posts Plugin</h4>
<p>The <strong><a href="https://wpgetapi.com/downloads/api-to-posts/?utm_campaign=APItoPosts&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">API to Posts Plugin</a></strong> allows you to import API data and create WooCommerce products or custom posts from this API data. Features of the API to Posts Plugin include:</p>
<ul>
<li>Import API data</li>
<li>Import from unlimited endpoints</li>
<li>Map API data to WordPress fields</li>
<li>Supports custom fields, ACF, tags, categories, custom taxonomies, images and more</li>
<li>Supports all standard WooCommerce fields</li>
<li>Create WooCommerce products from API data</li>
<li>Sync API to WooCommerce products & posts</li>
<li>Set interval of sync from every minutes up to once a week</li>
</ul>
<h4>OAuth 2.0 Authorization</h4>
<p>The <strong><a href="https://wpgetapi.com/downloads/oauth-2-0-authentication/?utm_campaign=OAuth&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">OAuth 2.0 Authorization</a></strong> plugin allows authorization of your API through the OAuth 2.0 method.</p>
<h3>WPGet API Integrations</h3>
<p>WPGet API integrates extremely well with other WordPress plugins, allowing you to do some very cool things with your API. Click the links below for more info on these integrations.</p>
<ul>
<li><a href="https://wpgetapi.com/docs/connect-woocommerce-to-api/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">WooCommerce to API</a></li>
<li><a href="https://wpgetapi.com/docs/woocommerce-api-product-sync/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">WooCommerce API Product Sync</a></li>
<li><a href="https://wpgetapi.com/docs/send-contact-form-7-data-to-api/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Contact Form 7 send data to API</a></li>
<li><a href="https://wpgetapi.com/docs/send-wpforms-data-to-api/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">WPForms send data to API</a></li>
<li><a href="https://wpgetapi.com/docs/send-gravity-forms-data-to-api/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Gravity Forms send data to API</a></li>
<li><a href="https://wpgetapi.com/docs/using-with-wpdatatables/?utm_campaign=Integrations&utm_medium=wporg&utm_source=readme" rel="nofollow ugc">Charts & Tables from API data using wpDataTables</a></li>
</ul>
<h3>Translating WPGet API</h3>
<p>You can translate WPGet API into your own language on <a href="https://translate.wordpress.org/projects/wp-plugins/wpgetapi/" rel="nofollow ugc">translate.wordpress.org</a></p>
<p>Here is an article to help <a href="https://make.wordpress.org/polyglots/handbook/translating/first-steps/" rel="nofollow ugc">get started with translations</a></p>


WPGet API – Connect to any external REST API

Connect any REST API to WordPress. WPGet API enables easy API integration, allowing you to display API data without any code.

JS Widgets vs WPGet API – Connect to any external REST API