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.

miniOrange

<a href="https://plugins.miniorange.com/custom-api-for-wordpress" rel="nofollow ugc">Custom API for WP plugin</a> plugin allows you to create no code custom REST endpoints / Custom APIs in WordPress. With interactive Graphical User Interface (GUI) fetch any data from WordPress database tables like users, posts, custom tables or any 3rd-party plugin’s table. You can also use HTTP request methods like POST, PUT, DELETE (Insert, Update, Delete) data with these created Custom endpoint / Custom REST routes.
You can also connect any external APIs and platforms to fetch the data and display data on WordPress frontend . You can use your design (custom HTML, CSS and JS), post data on third-party platforms on any WordPress events (user creation, Woocommerce events, form submission, membership purchase etc) via WordPress hooks.
You can easily interact with the WordPress database to perform CRUD operations on data using the custom endpoints created (generated) using <a href="https://plugins.miniorange.com/custom-api-for-wordpress" rel="nofollow ugc">Connect to external APIs | Custom endpoints for WP</a>.
<a href="https://plugins.miniorange.com/custom-api-for-wordpress" rel="nofollow ugc">Custom API for WP plugin</a> takes care of writing the complex SQL queries to fetch/update data and provide you with a very simple User Interface to create or generate custom REST endpoints. 
This plugin also provides the filter operations in which you can filter the data you want to show in the API endpoint response.
<h3>🆓FREE Plan Features</h3>
<ul>
<li>Unlimited GET APIs: Create as many GET APIs as you need to fetch data from WordPress tables.</li>
<li>One Advanced API using SQL: Build a single advanced API with custom SQL queries to perform CRUD (GET, POST, PUT, DELETE) operations.</li>
<li>External API Integration (JSON Only): Connect to third-party APIs that return JSON data.
<ul>
<li>Hooks Support for External APIs: Use hooks to trigger and execute connected external APIs.</li>
</ul>
</li>
</ul>
<h3>💲PREMIUM Plan Features</h3>
<ul>
<li>
Unlimited RESTful APIs: Create APIs with all HTTP methods – GET, POST, PUT, DELETE.
<ul>
<li>Custom Filters on API Data: Apply filters to refine data retrieved in Custom APIs.</li>
<li>Customizable API Response: Format API responses to match your exact requirements in custom APIs.</li>
<li>Role-Based Access Control: Restrict access to custom APIs based on user roles.</li>
<li>Conditional Logic & Filters: Add logic-based rules and conditions to custom APIs. Use query parameters to filter API responses on the go.</li>
</ul>
</li>
<li>
Unlimited Advanced APIs with SQL: Build complex and fully customized APIs using SQL queries to perform CRUD (GET, POST, PUT, DELETE) operations.
<ul>
<li>Customizable API Response: Format API responses to match your exact requirements in custom APIs.</li>
<li>Role-Based Access Control: Restrict access to custom APIs based on user roles.</li>
</ul>
</li>
<li>
Unlimited External API Integrations: Connect to as many third-party APIs as needed that return JSON, XML, GRAPHQL or SOAP responses.
<ul>
<li>Hooks Support for External APIs: Use hooks to trigger and execute connected external APIs.</li>
<li>Shortcode & Template Tag Display: Easily display data from external API on your frontend using shortcodes or template tags.</li>
<li>Secure Authentication for External APIs: Supports OAuth2, Bearer Tokens, and API Key authentication methods.</li>
<li>Dependent API: Dynamically retrieve a token from an external API to authenticate requests to the data API.</li>
</ul>
</li>
</ul>
<h3>Third-party/External API Integration into WordPress</h3>
<ul>
<li>
This plugin allows you to integrate any external or third-party REST API endpoints into WordPress very easily with the help of our interactive and simple GUI within seconds. With this function of our plugin, you can fetch data to your WordPress (<a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a>) site or you can use it to fetch data and process it according to your needs.
</li>
<li>
These integrations can also be done on third-party plugin events like form submission using Elementor, <a href="https://wpforms.com/" rel="nofollow ugc">Wpforms</a>, <a href="https://www.gravityforms.com/" rel="nofollow ugc">Gravityforms</a> etc. and also payment status or subscription status based on transactions done via payment gateways like that provided by <a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a>, <a href="https://wpforms.com/" rel="nofollow ugc">Wpforms</a>, <a href="https://www.gravityforms.com/" rel="nofollow ugc">Gravityforms</a> or any other services.
</li>
<li>
External API integrations can be done on any event of WordPress like user registration, user membership level change or any other using plugin hooks.
</li>
<li>
<a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a> product data can be synced with any external/third-party API provider(Supplier) on a real-time basis with our plugin.
</li>
<li>
This feature also provides the capability to register or login users to third-party platforms by making an API request to the third-party platforms.
</li>
<li>
Data display on front end using shortcode or template tag fetched from external API endpoints.
</li>
<li>
Any kind of external APIs supporting JSON, XML, SOAP, GraphQL can be connected with authentication methods like OAuth, JWT, Bearer, API Key or even custom API authentication.
</li>
</ul>
<h3>Use Cases</h3>
<ul>
<li>Access custom data of the WordPress site into your mobile application or web clients via custom REST API Endpoints.</li>
<li>Create easy Custom REST Routes to Create, Read, Update and Delete (CRUD) WordPress content from client-side JavaScript or external applications.</li>
<li>Interact with any standard database schema/ table or your custom-built schema/ table to fetch/ update/ delete data using the custom API endpoints.</li>
<li>Connect two WordPress sites or connect your WordPress site with a website built in any framework and Get/Update/Insert/Delete (CRUD) data of one website to another website with the help of Custom API and feasibility of connection with External APIs / Custom Endpoints developed in the external Website.</li>
<li>Connect with External Rest API Routes to display data on your website or process the data received from External Endpoint.</li>
<li><a href="https://plugins.miniorange.com/integrate-external-third-party-rest-api-endpoints-into-wordpress" rel="nofollow ugc">Integrate External/third-party REST API endpoints with third-party plugin’s payment gateways</a> like that of <a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a>, <a href="https://wpforms.com/" rel="nofollow ugc">Wpforms</a>or any other custom gateway such that the API can be called automatically based on the payment status.</li>
<li>Integrate External/ third-party REST API endpoints with custom/ third-party plugins’ forms like that of <a href="https://wpforms.com/" rel="nofollow ugc">Wpforms</a>, Elementor, <a href="https://www.gravityforms.com/" rel="nofollow ugc">Gravityforms</a> etc such that the external APIs can be called on these forms submission or any related events to perform fetch/update/delete operation based on API endpoints.</li>
<li>Sync third-party/external API provider’s (Supplier’s) API Inventory data into <a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a> and display them in the product feed on a real-time basis. <a href="https://plugins.miniorange.com/woocommerce-api-product-sync-with-woocommerce-rest-apis" rel="nofollow ugc">[More detials]</a></li>
<li>Integrate external APIs into WooCommerce – If you have a Woocommerce store and want to update the data like order creation, order status, and user profile update on a third-party platform in real-time, then a solution can be provided using our plugin.</li>
<li>Data display using shortcode – Fetch data from external API with security and display that on WordPress front-end pages using the shortcodes with customized design.</li>
</ul>
<h3>Add-Ons</h3>
<h3>WooCommerce Products sync via External API | Import products in WooCommerce using Supplier APIs</h3>
<ul>
<li>If you have a <a href="https://woocommerce.com/" rel="nofollow ugc">WooCommerce</a> store and want to sync (add/update/delete) the products from the external inventory warehouse/ store’s platform via APIs then it can be using the CUSTOM API plugin along with our <a href="https://plugins.miniorange.com/woocommerce-api-product-sync-with-woocommerce-rest-apis" rel="nofollow ugc">Woocommerce products sync from external APIs</a>.</li>
<li>
Following are the key features –
<ol>
<li>Data can be synced automatically after a certain specified period. (For example, every 4 hours a day).</li>
<li>All the product details like SKU, name, description, price, stock status, images, custom attributes and variant productions can be updated along with other custom attributes as well.</li>
<li>Sync can be done in the background such that customers using your WP site are not affected.</li>
<li>Data syncing can also be done by clicking on the sync button manually in the User Interface.</li>
<li><a href="https://wordpress.org/plugins/woocommerce/" rel="ugc">WooCommerce</a> product images can also be added or updated with ease based on external API data.</li>
<li>No extra work to import and export CSV/ TXT files manually. API Integration will do the job automatically.</li>
</ol>
</li>
<li>
This plugin supports complete integrations for the following –
<ol>
<li>Sync Amrod catalogue to WooCommerce </li>
<li>Sync S&S Activewear products to WooCommerce</li>
<li>Sync products and orders from Shopify to WooCommerce</li>
<li>Import products from Parts Unlimited to WooCommerce</li>
<li>Import products from Parts Canada to WooCommerce</li>
<li>Import products from Barron to WooCommerce</li>
</ol>
</li>
</ul>
<h3>Zoho Integration with WordPress</h3>
<ul>
<li>If you have a WordPress site and want to connect it to your <a href="https://www.zoho.com/" rel="nofollow ugc">Zoho</a> applications like <a href="https://www.zoho.com/in/crm/" rel="nofollow ugc">Zoho CRM</a>, <a href="https://www.zoho.com/connect/" rel="nofollow ugc">Zoho connect</a>, <a href="https://www.zoho.com/in/subscriptions/" rel="nofollow ugc">Zoho Subscription</a>, <a href="https://www.zoho.com/in/inventory/" rel="nofollow ugc">Zoho Inventory</a> etc to perform operations like sync real-time data between these platforms, which involves user profile sync, operate on WordPress or assign membership to the user based on his Zoho subscription etc. With this integration, any Zoho APIs and webhooks can be integrated to perform real-time sync.</li>
</ul>
<h3>WordPress Automate using Webhooks</h3>
<ul>
<li>This plugin can be made compatible to automate WordPress events with external API and webhook to synchronize data between WordPress and external applications. 
For example – If you have a WordPress/Woocommerce site and want to sync the user data, product data, posts, and membership data with external platforms, inventories and CRM like Zoho, Hubspot etc., then this plugin can be extended with an add-on to achieve this.</li>
</ul>
These solutions can be used additionally along with the plugin. To know more details, contact us at apisupport@xecurify.com and let us know your requirements.
<h3>Type of Data which you can retrieve with Custom Endpoints</h3>
<ul>
<li>WP Users and User Meta.</li>
<li>WP Roles and Capabilities.</li>
<li>WP Posts, Pages and custom post types.</li>
<li>WP Options.</li>
<li>WP Taxonomy.</li>
<li><a href="https://wordpress.org/plugins/woocommerce/" rel="ugc">WooCommerce</a>products, WordPress Membership plugins data.</li>
<li>Custom data, Custom posts, Custom parameters, Custom fields and many more.</li>
<li>Any third-party plugins or custom table data can be fetched/updated using these custom API endpoints.</li>
</ul>
<h3>External Service</h3>
This plugin may call login.xecurify.com (our own service) in case user wants to register or share any queries or feedback with us and this is completely optional.
<h3>Privacy Policy</h3>
This plugin does not store any user data, and all the data remains on the user’s end only.

Custom API for WP

Connect WordPress with External APIs and create no-code custom WordPress REST API endpoints to interact with the WordPress database to perform SQL ope …

JS Widgets vs Custom API for WP