Categories
WP Tavern

WordPress 5.3.1 Includes Security and Bug Fixes, Accessibility Enhancements, and Twenty Twenty Changes

WordPress 5.3.1 was released today with 46 bug fixes and enhancements. Changes include several accessibility improvements and four security vulnerability fixes. The update includes multiple changes to the default Twenty Twenty theme.

Version 5.3.1 is a security and maintenance release. All users are encouraged to update as soon as possible. For those with auto-updates enabled, updates are currently rolling out. All major branches of WordPress from version 3.7 through 5.3 received the new security fixes.

The following security issues were addressed:

  • Users without the correct permission (capability) could make a post sticky via the REST API.
  • An issue where cross-site scripting (XSS) could be stored in links.
  • Hardening the wp_kses_bad_protocol() function so that it is aware of the named colon attribute.
  • A stored XSS vulnerability using block editor content.

Most of the release focused on maintenance. Form fields and buttons now have the same height, which should result in a more consistent admin UI. This has long been an issue, but the accessibility changes in WordPress 5.3 highlighted the problem.

A bug with how permalinks were generated with the new Date/Time changes in WordPress 5.3 has been fixed. This left some sites using date-based URLs with incorrect post permalinks.

Other changes include removing support for the CollegeHumor oEmbed provider (the site is no longer available), updating the sodium_compat library, and making sure admin verification emails use the user’s locale instead of the site’s locale. For a full overview of all changes, visit the WordPress 5.3.1 release page.

Accessibility Improvements

“Coffee” color scheme with new button colors.

Some of the biggest accessibility changes fixed issues with the alternate admin color schemes available in WordPress. The accessibility improvements to buttons in WordPress 5.3 did not get carried over to most of the alternate schemes. Or, rather, those alternate color schemes were not taken into account when the changes went into effect. This left secondary button elements practically unreadable in some cases, which made accessibility worse.

Version 5.3.1 creates a unified design for secondary buttons for every color scheme. It also makes sure that the :active state for buttons are consistent.

Other improvements to accessibility include adding underlines to links on the Dashboard screen that were not clearly links by context, properly disabling nav menu forms when they should not be in use, and adding hover effects for links on the “About” admin screens.

Twenty Twenty Changes

Screenshot of the author bio option in the Twenty Twenty theme.
Author bio option in the customizer.

The Twenty Twenty theme launched with JavaScript-based, smooth-scroll behavior for anchor links. This feature did not work correctly in all cases. It also broke anchor links to individual comments when paginated comments were enabled on a site.

Version 1.1 of Twenty Twenty includes CSS-based, smooth-scroll behavior. This greatly simplifies the code by using native behavior. It also works based on the user’s reduced motion setting for their browser, which enhances accessibility for the theme.

The theme update comes packaged with a new option for showing or hiding the post author bio. The setting is available under the “Theme Options” section in the customizer. It is enabled by default and will show the author bio section at the end of every post across the site.

The Twenty Twenty update also includes several bug fixes, most of which were trivial issues.

Categories
WP Tavern

Gutenberg 7.1 Includes Welcome Modal, Improves Multi-Block Selection, and Adds Drag-and-Drop Featured Images

The past two weeks have been blazing fast for Gutenberg plugin development. A total of 161 pull requests (patches) were merged into version 7.1 of the plugin. Over 20 bugs were squashed while the team added several enhancements, which include better multi-block selection, a new welcome modal, and drag-and-drop featured images.

The team refactored several areas of the codebase to prepare for future changes and make it possible to use new hooks. API changes include a new custom select control, text highlight, and custom gradient picker components for developers to use in their plugins.

The release also featured a toolbar button for switching between “edit” and “select” mode. The select mode allows you to select blocks without opening the editing controls unless you click again within a block, which switches you back to editing mode. The only noticeable difference is that the editing controls do not appear while in select mode. Wondering when I will ever use this feature…

Welcome Guide Modal

New welcome guide modal for first-time users.

The new version of the plugin includes a pop-up welcome modal for first-time users. There are currently three panels with short introductions to what blocks are, how to use them, and getting to know the block library.

Ideally, the modal will link out to more extensive documentation in a future iteration. Right now, the information provided does not go into much detail. It feels like a message to say, “Hey, check out this shiny new thing.” However, there needs to be more substance for it to be helpful for first-timers.

Improved Multi-block Selection

Screenshot of selecting multiple blocks in the Gutenberg block editor.
Selecting multiple blocks at once.

The block editor now incorporates a nicer native multi-block selection process. The first aspect of this change is to use the native selection color, which improves accessibility. It also uses native selection behavior when selecting multiple blocks.

The second part is important because it paves the way toward partial block selection in a future release. Currently, when selecting text across multiple blocks, the editor extends this out to select all text from the selected blocks. In the future, it should be possible to select only part of the text across multiple blocks. This would be consistent with normal text-based editors where users can select the last sentence from one paragraph and the first from the next, for example.

Selecting multiple blocks and pasting new content works correctly in 7.1. In the past, the rich text component handled pasting. This resulted in the blocks being split and the pasted content inserted between the split. The block editor now handles the pasting process. This allows users to completely replace multiple selected blocks with a paste.

Drag-and-Drop Featured Images

Screenshot of dragging a featured image from the desktop into the block editor.
Dragging a featured image from the desktop.

Instead of clicking the featured image box to open the media modal, users can now save themselves a click. Just like dragging and dropping an image into the editor, the featured image box now accepts any image file dropped into it.

Table Captions

Screenshot of adding a caption to the table block in Gutenberg.
Adding a caption to the table block.

For those who have long waited for a true table <caption> implementation, keep on waiting.

A year-old ticket that was opened for a table caption feature was closed with a solution matching that of other blocks with captions (e.g., image, gallery). The pull request featured a lengthy discussion over the technical limitations of how to best handle the feature. Ultimately, the decision was to wrap tables in a <figure> element and add the caption via the <figcaption> tag.

While this may work for some who need to add a caption or summary below a table, it is not currently helping users who need captions in their normal spot at the top of a table.

In the long run, users who need to roll out advanced tables will likely need a table block plugin anyway. The Gutenberg and core WordPress implementation is limiting for anything beyond the most basic table output. Real captions would have been a nice touch though.

Alignment for the Navigation Block

Screenshot of aligning items within the navigation block in Gutenberg.
Aligning navigation block items.

The Navigation block, which moved out of the experimental stage in version 7.0, has a new option for justifying the list items to the left, right, or center. This will be an important feature for full-site editing in the long term because users will want to set their nav menu perfectly.

This block will likely be in flux for a while. There are still major questions about how navigation will work on mobile, especially as we inch closer to full-site editing. Will core play a role in making mobile menus? Will themes be left to their own devices? Will themes offer multiple options based on screen size?

Moving Ahead with Templates and Full-Site Editing

Coming off the heels of a somewhat controversial documentation proposal for block-based themes, version 7.1 includes a new demo block template named index.html. It is a fallback template in cases where no templates are available. This is an early, experimental step toward making full-site editing a reality.

Theme developers who want to start looking at what block templates could look like, should view the demo index.html template.

Unfortunately, the release ZIP file available through the official plugin repository does not include the index.html template. It was excluded because of a bug in the build process. However, it may be packaged in a version 7.1.1 minor release. The file is correctly included for developers who clone from the Git repository.

The second step of this process was the addition of a Template Part block. The idea for this block is that it would be a placeholder to add to templates, which would output a template part on the front end.

Categories
WP Tavern

Creator of EditorsKit Launches Community Block-Sharing Site

Jeffrey Carandang, the creator behind the EditorsKit WordPress plugin, launched a new community site for sharing block designs and templates today. The ShareABlock website allows visitors to download block files directly from the site and import them into the block editor. Users can also sign up to share custom block designs and full-blown block templates. All downloads are available for free.

At the moment, there are 18 block designs available for download. There are two primary types of downloads: block patterns and block templates.

Patterns are smaller groupings of blocks to create a specific section for a page. These include designs such as various hero sections, pricing lists, and a call-to-action section.

Templates work the same way as patterns. However, they are larger sets of blocks designed to create an entire page. For example, one template allows users to import a full gallery portfolio page. Another creates an editable resume layout.

Other than Carandang, two other contributors have shared block designs. This number should rise as more people sign up and decide to share their creations. The registration process is open to anyone who wants to join. However, each contribution is subject to a review for quality assurance.

“One of my primary goals in creating [EditorsKit] is to help users get a little more comfortable with using the new WordPress Gutenberg block editor,” described Carandang in the announcement post for ShareABlock. “The goal is to help users create Gutenberg blocks easily. With drag and drop import, layout and designs will be available in an instant.”

Carandang feels confident that pre-configured block designs will help users learn how to use the block editor to create richer content. “Even if it’s just a little help to make them comfortable with Gutenberg, it means a lot,” he wrote.

He said the feedback from users has been positive thus far.

Screenshot of importing and using the fullscreen profile card pattern into the block editor.
Importing the Fullscreen Profile Card block pattern.

Block designs downloaded from ShareABlock require the EditorsKit plugin, which is available for free in the WordPress plugin directory. This requirement is because WordPress does not currently have a native importer built into the block editor. In the future, this may change and the requirement could be lifted.

Version 1.7 of EditorsKit introduced the ability to import blocks by dragging and dropping a block .json file into the editor. The blocks available via ShareABlock work using this feature. After downloading a .json file from the site, users merely need to drag it into the editor. Users can also use the “Import” block available from EditorsKit to do the same.

Block Patterns and the Future

“The plan is to provide integration with Block Patterns, which is what the core devs are currently working on,” said Carandang. “With this integration, the import process will be much easier.”

Block patterns are a planned feature that is under active development in the Gutenberg plugin and will eventually make its way into core WordPress. Patterns are predefined sets of blocks. They will allow users to quickly create more advanced layouts while also teaching what specific blocks do. The idea is to have a set of patterns with common layouts that people see around the web.

Carandang said he is actively checking the progress of the Block Patterns feature. He is eager to see the feature to come to fruition, which carries with it the possibility of more widespread use of the blocks available from his new community.

Categories
WP Tavern

Progress on WordPress’ 2019 Projects Sets 2020 Roadmap

Josepha Haden, Executive Director of WordPress, published an update of WordPress’ goals in 2019. The focus for WordPress over the past year has been on nine primary projects. Of the nine projects, WordPress only managed to ship two in 2019. This means that the focus in 2020 will be much the same as the community continues building on the progress it has made toward the existing projects.

Currently, there are three planned major releases for WordPress in 2020:

  • Version 5.4 – March 2020
  • Version 5.5 – August 2020
  • Version 5.6 – December 2020

Each of those dates are subject to change. We should also get more specific dates as each release draws near. The various projects for 2020 should land in each release.

Matt Mullenweg, co-founder of WordPress, initially laid out the 2019 plans in his 2018 State of the Word address and listed the projects on the Make Core blog. The big takeaway is that 2019 was supposed to be the year that we got closer to full-site customization (Phase 2 of the Gutenberg project). While developers have made huge strides in making that a reality, much of the project is still in its infancy.

Projects That Shipped in 2019

All existing core WordPress widgets now exist as blocks. Rather than being limited to placing widgets where the theme decides, users can now put widgets in posts, pages, or any other content area via the block editor. As the project continues to move toward full-site editing, users will eventually have the ability to place these widgets and other blocks nearly anywhere.

The site health project was merged into core. It features a screen that provides information about the site’s health to site owners. It also has a fatal-error detection script that emails site owners when plugin and theme issues are found.

Projects to Expect in 2020

Most of the remaining projects that did not quite make the cut for release in 2019 have still made progress during the year. The following is a breakdown of what projects to expect in the coming year.

Navigation Menu Block

Navigation block in the block editor.

Currently, the navigation block’s target is to ship with WordPress 5.4. This is a likely reality because it is now out of the experimental stage and is available for beta testing in Gutenberg 7.0. The development team worked on this block for several releases and now have something stable enough for user testing.

This block is a major piece of the site-customization puzzle. In the long term, users will need an easy-to-use block for handling navigation menus across their site.

Custom Block-Aware Content Areas for Themes

Phase 1 of the Gutenberg project brought the block editor to post content. A large part of Phase 2 is breaking outside of post content and allowing users to add blocks in more areas. It is unclear exactly what that will look like in the long run. Themes should be able to register additional block-aware areas.

The target release for this feature is set to WordPress 5.5, but it is too early to guess whether that is a realistic target. It is a tough issue to solve because it will need to coincide with decisions on theme block templates, saving multiple entities, and full-site customization in general. It is not a feature that can be rushed because it will have far-reaching consequences to how WordPress works for years into the future.

Widget Areas to Support Blocks

Screenshot of the experimental widget areas feature in the Gutenberg plugin.
Experimental widget areas feature in Gutenberg.

The current plan is to allow widget areas (sidebars) to support blocks alongside widgets. The Gutenberg plugin has an experimental widget areas option for enabling an early version of this feature, which has a target release of WordPress 5.5.

There are two aspects to making this feature a reality. The first is making it work on the widgets admin screen. The second is making it work in the customizer, an area where users can also manage widgets.

At the moment, it feels like the sidebar concept should be deprecated. The experimental feature works by allowing users to add blocks to a sidebar, which are converted into one big “block area” widget on output. If WordPress is “all in” on the block paradigm, energy would be better spent focusing on allowing themes to build custom block areas and letting the official Sidebar API die a slow death. Mixing an old concept with a new one feels clunky at best. It’s time to move on and soft-deprecate sidebars and widgets until most themes no longer support them.

Block Directory Search and Install

Screenshot of the block directory search feature in the Gutenberg plugin.
Experimental block directory search in Gutenberg plugin.

Eventually, all WordPress users will be able to search for a block via the block inserter. If the block exists, they can insert it into the block area. If not, the inserter will allow users to discover new blocks from the block directory. The installation, activation, and insertion of the new block should be seamless.

The target release for this feature is set for WordPress 5.5, which should be possible (if not earlier) based on how well the feature currently works in the Gutenberg plugin. It is not perfect yet and has broken more than a few of my posts when working with installed blocks. There are still several open issues that need to be addressed.

Plugin authors who are looking to get ahead of the game can submit block plugins by following the block plugin guidelines.

Automatic Plugin, Theme, and Major Core Updates

After years of extensive testing and using automatic updates for minor WordPress releases, it feels like we should already have auto-updates on everything at this point. Having to keep up with plugin and theme updates can be a pain for some site owners. With enough plugins, it is not out of the realm of possibility to have one or more plugins to update daily.

Some hosting solutions and Jetpack have mitigated this issue for many users by offering automatic plugin updates, but this is a long overdue core feature that should be a high priority. No target release was given for auto-updates on themes/plugins or major core releases. Let’s hope the feature does not get put on the back burner for another year.

Tackling Over 6,500 Trac Issues

With the Gutenberg plugin getting much of the attention these days, it is easy to forget that there are thousands of tickets awaiting patches, reviews, and decisions on Trac. I have long been a champion of using one major release of WordPress to simply fix existing bugs while adding no new features.

Jonathan Desrosiers has written an extensive post that covers much of the work the Triage Team has done earlier this year.

Triaging is not something that ever truly reaches a conclusion. It is an ongoing process that must continue throughout the life of a project. People who are interested in being involved with the Triage Team can find more information on the Triage Team announcement post.