JAMstack’s Growing Popularity Brings Increase in WordPress Plugins for Deploying to Netlify

One of the more interesting trends this year is that WordPress developers are beginning to explore JAMstack setups for their sites. JAMstack is a term coined by Netlify CEO Mathias Biilmann to describe development architecture that includes client-side JavaScript, reusable APIs, and prebuilt Markup, the three pillars of a modern static website.

Static websites are making a major comeback right now, perhaps as a reaction to the slow, bloated PHP frameworks that run large portions of the web today. The speed, security, and scalability of these sites, often available at a lower cost, are some of the most compelling reasons developers find themselves joining the rapidly growing JAMstack community. It also provides a git and CLI-friendly development workflow and allows developers to easily experiment with the latest frontend technologies, without prescribing any specific frameworks or tools.

Most JAMstack sites are built using Jekyll, Hugo, Nuxt, Next, Gatsby, or another static site generator. The generated markup and assets are often served via a CDN for near instant page loads.

Netlify pioneered JAMstack hosting and has inspired the creation of a myriad of tools that enable fast and convenient deployments. Plugins that allow developers source content from WordPress and host it with Netlify are starting to pop up more frequently. Netlify’s free tier is one of the main reasons it has grown so quickly in popularity, as it provides a fast way to host a personal site or small project with custom domain support, HTTPS, Git integration, and continuous deployment included.

Tiny Pixel Collective created a plugin called Netlify Deploy that automates Netlify builds on WordPress publish and update events. The company built it to make it easier for developers to rebuild Netlify-hosted Gatsby frontends using WordPress as the publishing tool. It works in the background to keep a static frontend in sync with the post database, rebuilding the site when users make updates to posts and pages. The plugin triggers the Netlify webhook whenever the standard WordPress posttypes post and page undergo a change in publish status, but it can also be modified to work with custom post types and custom publish hooks.

JAMstack Deployments, created by Christopher Geary, a developer and JAMstack aficionado, is a similar WordPress plugin that facilitates deployments to Netlify, as well as other platforms. The plugin’s settings page lets users configure the webhook URL in the admin, and includes options to limit it to trigger on specific post types and taxonomies. JAMstack Deployments is also conveniently available for free on WordPress.org.

Deploy Netlify Webhook is a similar plugin from Luke Secomb that appears to work manually through a “Build” button in the WordPress admin. It has the added benefit of allowing developers to check the status of the latest build to see if it was successful, without having to leave WordPress.

Justin Hall, a plugin author and senior web developer at SendGrid, published his Gatsby + Headless WordPress + Netlify starter skeleton to GitHub. This particular setup requires his LittleBot Netlify plugin to trigger Netlify build hooks on post save or update, with an additional option that allows WordPress users to publish to Staging or Production sites.

WP2Static is a popular plugin that generates static HTML files rom a WordPress site. Users have the option of auto-deploying to a folder on the server, a ZIP file, FTP server, S3, GitHub, Netlify, BunnyCDN, BitBucket, or GitLab. Theh plugin currently has more than 10,000 active installations.

These are just a small sampling of tools that developers are creating to allow WordPress users to retain the capabilities a dynamic publishing platform while building it statically to take advantage of the speed, security, and performance gains.

The trend towards using a headless CMS combined with static site generators is a setup that is heavily geared towards developers at the moment. Translating all the jargon for non-technical site and business owners is a new challenge for those looking to sell services for setting up JAMstack architecture.

That’s where more user-friendly hosting platforms like Strattic, Shifter, and HardyPress are making inroads on marketing JAMstack technology to a less-technical crowd. They provide all-in-one “serverless” architecture solutions that generate static files from WordPress sites and serve them via CDN.

One of the chief drawbacks to pursuing a static WordPress setup is that many dynamic capabilities do not work in this environment. Adding contact forms can be a challenge. Sites that require native WordPress comments or anything that is more complex and interactive will not work. This includes functionality offered by WooCommerce, bbPress, BuddyPress, and membership plugins, to name a few examples. For now, the JAMstack fervor is mostly limited to the DIY developer crowd looking to host more simple sites.

WordPress Theme Review Team Seeks to Curb Obtrusive Admin Notices with New Requirement to Follow Core Design Patterns

For years, the WordPress admin has become increasingly overloaded with admin notices. Some of them are giant, branded notices with their own particular designs that obstruct users’ activities in the admin.

The Theme Review Team is taking action to curb obtrusive notices that fall within its purview – those generated by themes hosted in the official directory. In the excitement of yesterday’s announcement about the long-term plan to make make all WordPress.org themes accessible, this small bit of good news regarding admin notices slipped through the cracks. The team ratified a proposal from TRT member Danny Cooper to require all themes to use WordPress’ admin_notices API.

All the notifications generated by a theme should use the admin_notices API and follow the core design pattern.

During this week’s the meeting, Cooper cited Storefront, WooCommerce’s flagship theme, as one example of a theme-generated notice that does not follow the core design pattern and is shown on every page.

Another example is this style of activation notice on the Noto theme from Pixelgrade:

The Futurio theme has also employed a similar style notice for getting started after activation:

In the past these notices have not been expressly forbidden, although they are generally frowned upon by those who want to keep the WordPress admin from being overtaken by large, branded notices and calls to action.

Another example of an obtrusive notice is Hestia’s popup that appears if you activate the theme but then navigate to “Add New” on the Themes screen to hunt for a different theme. Cooper said this particular popup is likely outside the remit of this guideline, but it demonstrates what lengths theme shops will go to in order to better market their themes.

There don’t seem to be any specific requirements that would restrict the use of branding within the admin notices as long as they follow the core design pattern. A visual example of this pattern is shown below.

The Sydney theme has an example of a branding-free notice that works within these guidelines:

This new requirement will affect many popular themes on WordPress.org and will likely be applied the next time existing themes go through the update review process. Cooper said that themes already known to be in violation of this guideline will be prompted by the TRT to change their notices as soon as possible or risk suspension.

“It’s especially important that themes on the ‘Popular’ tab adapt quickly as other theme developers use them as inspiration when implementing similar functions,” Cooper said.

10up Releases New Plugin That Shows How to Extend Gutenberg’s Document Panel Using SlotFill and Filters

If you’ve been looking for a way to add slots and controls to the Document panel in WordPress’ content editor, check out a new plugin released by 10up called Gutenberg SlotFill and Filter Demos.

SlotFill and Filters is a new take on the classic filters, actions, and hooks system in WordPress. Slot and Fill are React components that enable developers to inject items into predefined spaces in the new editor.

“SlotFill is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application,” Ryan Welcher said.

An Example of SlotFill in Action

In the demo screenshot above, 10up was able to stick to the Classic UI conventions in the mobile app while displaying the same information in the Document panel of the new editor.

SlotFill initially started as a GitHub repo where Welcher collected his findings. The repo eventually turned into a library of examples and explanations for SlotFill and JavaScript based filters.

In January, Welcher submitted a pull request to the Gutenberg repo asking for SlotFill to be added to the document sidebar. His request received positive feedback and not only has SlotFill’s documentation been added to the WordPress Core Gutenberg Handbook, but the functionality is available in Gutenberg 6.1 and will be available in WordPress 5.3.

To learn more about SlotFill, check out Welcher’s release post or the Gutenberg SlotFill and Filter Demos plugin. Welcher is also doing a session at the JavaScript For WordPress Conference, on July 11-13, 2019, where he’ll showcase basic and real-world examples of SlotFill in use.

Gutenberg 6.1 Introduces Animation to Block Moving Actions, Adds Block-Based Widgets Screen Experiments

Gutenberg plugin users who update to version 6.1 should notice a considerable difference in how the UI reacts to block moving actions. This release brings in the animation experiments that Matías Ventura introduced in a post titled “Using Motion to Express Change.” The subtle animations add realistic motion to block changes, creation, removal, and reordering, creating a smoother transition between actions. It lends a bit of sophistication to what was previously an instant but more abrupt interaction.

Riad Benguella’s demo video shows the new animation for block reordering. When blocks are added or deleted, content moves around the screen more fluidly, with the surrounding blocks sliding into place. You can test it live and see it in action on the Gutenberg Playground, which is now hosted on GitHub Pages.

Version 6.1 also incorporates more experiments on the block-based widgets screen that is still in progress. A new widget blocks editor has been added to the Customizer under a panel labeled “Widget Blocks (Experimental).” At the moment, editing widgets in the Customizer in such a constricted space doesn’t seem to make much sense. It’s easy to get the controls jumbled up on top of each other. Live previews work but are much slower than the experience of using the post editor, and users may wonder why they can’t simply edit the content on the page where it appears. It’s important to remember that this is still an experiment.

The experimental widgets screen has also been updated to include the block inspector and a global inserter. This screen can be tested under the Gutenberg » Beta menu in the admin.

Gutenberg had taken a dip in performance in the previous two releases, but 6.1 recovers that with significant gains in typing performance. The latest version is 30% faster on long posts.

This update includes more than two dozen enhancements, fixes, and documentation improvements. Check out the 6.1 release post for a detailed list of all the changes. Better yet, take the latest Gutenberg features and experiments for a test drive and you’ll get a good sense of where the project is headed and what will be coming to WordPress core in the near future.