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.

WPExperts.io

<p><a href="https://tastewp.com/new/?pre-installed-plugin-slug=login-designer&ni=true" rel="nofollow ugc">👉 Demo – Give it a try</a></p>
<p>Login Designer is the most versatile login page customizer plugin for WordPress with options to customize the style of the login page layout to the last detail. Your website visitors will feel like the page is custom-made from scratch.</p>
<p>Save yourself time and effort by choosing from predefined templates that come with ready-made layouts and customization options for colors, images, fonts, labels, and other details. The process is quick, easy, and fun – User-friendly for both beginners and advanced users.</p>
<p>Every design you create and publish will be responsive and compatible with web browsers and mobile devices – That’s the true power of Login Designer.</p>
<h4>Why Choose Login Designer?</h4>
<p>You shouldn’t have to hire a developer to customize your website’s login page. That’s why we built Login Designer, the best login customizer plugin for WordPress. This plugin offers customization options ranging from background animations, fonts, colors, gradients, labels, styles and so much more. Give your customers an unrivaled live-editing experience unlike any other.</p>
<h4>An Unparalleled Custom Login Styling Experience</h4>
<p>Zero refreshes. Contextually displayed options and plugin settings. Custom event triggers. Context-aware previews. Powerful custom controls. Live editing… the list goes on.</p>
<h4>Login Designer is a UX beast</h4>
<p>It’s familiar, yet completely revolutionary. Click on <em>any element</em> from your login page to fine-tune it. That element’s settings are contextually displayed, while others hide. This way, you’ll spend less time navigating the Customizer’s sections and panels, and more time actually fine-tuning your website’s login page. #winning</p>
<p><strong>Login Designer’s login customizing and templating experience is the best in class – <em>by a long shot</em></strong>.</p>
<h4>A short video</h4>
<div class="embed-vimeo" style="text-align: center;"><iframe loading="lazy" src="https://player.vimeo.com/video/382294867" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<h4>Login Designer Features</h4>
<h4>Login Designer Template Customization</h4>
<ul>
<li>Customize your WordPress website’s login page.</li>
<li>Choose from a range of pre-defined templates.</li>
<li>Option to add a logo above the login page form.</li>
<li>Option to add a URL to the logo.</li>
<li>Adjust the Width, Height, and Position of the logo.</li>
<li>Change the background of the template by selecting an image or color.</li>
<li>Choose a background image from a curated collection of beautiful images.</li>
<li>Set the position of the background image (Left, Right, Center).</li>
<li>Option to repeat the background image (Tile, Tile horizontally, Tile vertically) on the login page.</li>
<li>Adjust the size of the background image (Auto-adjust, Cover, Contain).</li>
</ul>
<h4>Login Form Customization Options</h4>
<ul>
<li>Customize the login form wrapper default styling.</li>
<li>Change the background color of the login form.</li>
<li>Adjustment options for the login form include Radius, Shadow, Shadow Opacity, Horizontal and Vertical Padding, Transparency, and Width.</li>
</ul>
<h4>Login Form’s Text Label Customization</h4>
<ul>
<li>Modify the Text Labels (Username, Password) of the login form.</li>
<li>Text Label customization options include Font, Font Size, Spacing, and Color.</li>
</ul>
<h4>Login Form’s Input Fields Customization</h4>
<ul>
<li>Customize the full display appearance of the login form input fields.</li>
<li>Add a background color to the login form’s input fields.</li>
<li>Customization options for input fields include Border Size and Color, Radius, Margin Bottom, Padding (All, Top, Bottom), Shadow, Shadow Opacity, and Shadow Inset.</li>
<li>Customize the text field Font, Color, and Size.</li>
</ul>
<h4>Login Form’s Checkbox Customization</h4>
<ul>
<li>Customize the <strong>Remember Me</strong> checkbox input element on the login form.</li>
<li>Change the Checkbox Size, Background Color, Border Size, Color, and Radius.</li>
<li>Change the <strong>Remember Me</strong> text’s Font, Size, Position, and Color.</li>
<li>Disable the checkbox.</li>
</ul>
<h4>Login Form’s Login Button Customization</h4>
<ul>
<li>Customize the full display appearance of the login submit button.</li>
<li>Add a background color to the login form’s login button.</li>
<li>Customization options for the login button include Border Size and Color, Radius, Margin Bottom, Padding (All, Top, Bottom), Shadow, Shadow Opacity, and Shadow Inset.</li>
<li>Customize the login button Font, Color, and Size.</li>
</ul>
<h4>Custom Login Error Messages</h4>
<ul>
<li>Set the message which will display when the username field is empty.</li>
<li>Set the message which will display when the password field is empty.</li>
<li>Set the message which will display when the username is invalid.</li>
<li>Set the message which will display when the password is invalid.</li>
</ul>
<h4>Other Customization Options</h4>
<ul>
<li>Change the badge’s Text Color, Logo Color, and Position.</li>
<li>Change the “Below Form Elements” (Lost Your Password, Back to) Font, Size, Color, Position.</li>
<li>Enable/Disable the “Below Form Elements”.</li>
<li>Secure the login form using Google Recaptcha V2/V3.</li>
<li>Import/Export Login Designer settings.</li>
</ul>
<h4>Login Designer Pro</h4>
<p><a href="https://logindesigner.com/pricing/?utm_source=plugin&utm_medium=readme" rel="nofollow ugc">Login Designer Pro</a> gives you the power to upgrade your login customization abilities to a whole new level. The PRO version is equipped with new features including animation styles for the login form (initial load and submission), option to add more fonts for form lables and fields and much more.</p>
<ul>
<li>All Login Designer Free features and more.</li>
<li>Upload multiple images to the form background and add animation (Fade-in, Slide Right, Slide Left)</li>
<li>Customize animation speed and duration.</li>
<li>Select the initial load animation for the form.</li>
<li>Apply animation on the logo.</li>
<li>Select animation for form submission.</li>
<li>Rename the login page in the URL.</li>
<li>Option to add Google fonts for labels and fields.</li>
</ul>
<h4>DOCUMENTATION AND SUPPORT</h4>
<ul>
<li>Login Designer <a href="https://logindesigner.com/documentation/login-designer-documentation-free/?utm_source=plugin&utm_medium=readme" rel="nofollow ugc">Technical Documentation</a></li>
</ul>
<h4>Get started today</h4>
<p>Intrigued? <em>I bet you are.</em> Once you try Login Designer, every other Customizer experience will feel lackluster. Guaranteed.</p>
<p>Installation is free, fun, quick, and easy.</p>


Custom Login Page Customizer – Login Designer

I wish it also had a custom url option so I don't have to find and install another plugin… but that doesn't take away from the review. :)

Great Plugin!

Login Designer is the best way to style a custom login page for your WordPress login, register and forgot password forms, right from the live-action W …

JS Widgets vs Custom Login Page Customizer – Login Designer