Navigating the WordPress Block Editor

This post is a bit of a rant, but there is a solution at the end of this post. If you are new to the WordPress Block Editor (Gutenberg) or maybe you've been using it for a long time, the moment you start to create even the slightest of advanced layouts you can get frustrated by trying to locate the specific block that you are editing.

In the following example of a "reworked" Sample Page, you can see that the layout isn't too complex, but because of multiple container blocks that control typography and spacing along with multiple grid blocks in addition to all the text and image blocks it can be difficult to "relocate" a block in order to do any editing.

Luckily, WordPress Provides a Solution

Now before everyone jumps on the comments and explains to me that WordPress already solved this issue... I already know about the solution of using the Outline list view of all the blocks used on the page in a nicely formatted and hierarchical list. I love it and use it all the time.

But here is the issue that is showing up with WordPress 5.8. In all the "decision-making" and "planning" sessions made by the core developers, it appears the "drop-down" navigation of the Outline list view has been dropped in favor of a new panel that slides out of the left side of the page canvas.

And for anyone using a smaller laptop to make edits on the go lose SO much canvas real estate that it makes the Outline list view a non-starter for trying to navigate across the block hierarchy on any given page. There are times that it feels the development cycle of the Block Editor (Gutenberg) is constantly in search for a solution for a problem that doesn't exist.

But have no fear there is a proper solution

Christopher John released their first plugin recently that solves all of these block locating frustrations that are brought about when creating more complex and dynamic layouts in the Block Editor. The plugin is called Wayfinder and provides a real-time block outline solution that works just like you'd expect it to work.

Now it becomes simple to select the right block container / grid / element when returning to a post to edit content or even during the development stage of a post. There are other plugins that provide similar and/or alternative solutions but as of now, I believe the Wayfinder plugin has the best implementation. (And even after the Wayfinder plugin adds an additional margin to the bottom of each block in order to add the classes and labels, the plugin is still a far and away better solution.)

None of these block outlining solutions would be needed, in my opinion, if the original Block Editor drop-down outline list view was still available in the next WordPress 5.8 release. But because of design decisions to add a fly-out left panel for the Outline list view paired with the already necessary right panel fly-out for the Post and Block options, the actual content canvas becomes too small on smaller laptop screens.

What are your thoughts? Do you use the current Outline list view dropdown block finder? Do you think it needs its own panel (like in WordPress 5.8)? What do you use to help navigate the Block Editor canvas area?

WordPress 5.8 Is Coming

Preview of WordPress 5.8

With WordPress 5.8 right around the corner, it is about time to look at the new features coming to people's WordPress installations. We are currently at Release Candidate 4 and that means the next version of WordPress could drop at any time. This post is an overview of many of the features and I will follow-up with a number of additional posts looking at a number of the features at a deeper level. So buckle up as we look at a number of the new features.

Manage Widgets with Blocks

After months of hard work, the power of blocks has come to both the Block Widgets Editor and the Customizer. Now you can add blocks both in widget areas across your site and with live preview through the Customizer. This opens up new possibilities to create content: from no-code mini layouts to the vast library of core and third-party blocks

Display Posts with New Blocks and Patterns

The Query Loop Block makes it possible to display posts based on specified parameters; like a PHP loop without the code. Easily display posts from a specific category, to do things like creating a portfolio or a page full of your favorite recipes. Think of it as a more complex and powerful Latest Posts Block! Plus, pattern suggestions make it easier than ever to create a list of posts with the design you want.

Edit the Templates Around Posts

You can use the familiar block editor to edit templates that hold your content—simply activate a block theme or a theme that has opted in for this feature. Switch from editing your posts to editing your pages and back again, all while using a familiar block editor. There are more than 20 new blocks available within compatible themes. Read more about this feature and how to experiment with it in the release notes.

Overview of the Page Structure

Sometimes you need a simple landing page, but sometimes you need something a little more robust. As blocks increase, patterns emerge, and content creation gets easier, new solutions are needed to make complex content easy to navigate. List View is the best way to jump between layers of content and nested blocks. Since the List View gives you an overview of all the blocks in your content, you can now navigate quickly to the precise block you need. Ready to focus completely on your content? Toggle it on or off to suit your workflow.

Suggested Patterns for Blocks

Starting in this release the Pattern Transformations tool will suggest block patterns based on the block you are using. Right now, you can give it a try in the Query Block and Social Icon Block. As more patterns are added, you will be able to get inspiration for how to style your site without ever leaving the editor!

Style and Colorize Images

Colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images (or videos in the cover block) to integrate well with your themes. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. There’s more to learn about how it works in the documentation.

Theme.json

Introducing the Global Styles and Global Settings APIs: control the editor settings, available customization tools, and style blocks using a theme.json file in the active theme. This configuration file enables or disables features and sets default styles for both a website and blocks. If you build themes, you can experiment with this early iteration of a useful new feature.

Dropping Support for Internet Explorer 11

Support for Internet Explorer 11 has been dropped as of this release. This means you may have issues managing your site that will not be fixed in the future. If you are currently using IE11, it is strongly recommended that you switch to a more modern browser.

Adding Support for WebP

WebP is a modern image format that provides improved lossless and lossy compression for images on the web. WebP images are around 30% smaller on average than their JPEG or PNG equivalents, resulting in sites that are faster and use less bandwidth.

Adding Additional Block Supports

Expanding on previously implemented block supports in WordPress 5.6 and 5.7, WordPress 5.8 introduces several new block support flags and new options to customize your registered blocks.

Page Template Bug in WordPress 4.9

When the latest version of WordPress (4.9) was released, it also contained a strange little bug that was introduced with some of the modifications to the internal "file editor" in WordPress. This bug caused page templates to either not display properly in the Page Edit screen or to not update until the default WordPress cache was cleared (60 minutes).  But there is a quick fix you can place into your theme's functions.php file that will automatically clear the cache of the theme so you don't have to wait for the cache to clear or raise your theme's version number.

Here is an example code snippet:

Or you can use a code snippet/plugin provided by the greater WordPress community:

Thanks to the WordPress community for sharing variations of this fix.  Note: This bug will be fixed in an upcoming version of WordPress, so once that is fixed, you'll be able to remove this code from your active theme's functions.php file.

WordPress 4.7.5 has been released

Like with any WordPress update that gets released, it is always a good idea to make sure you have a solid backup before you update.  But I'm sure the actual question many of you have is what's in this latest maintenance release?

  • This is mainly a security release that patches 3 bugs as well.
  • 4.7.5 patches the following security issues
    • Insufficient redirect validation in the HTTP class.
    • Improper handling of post meta data values in the XML-RPC API.
    • Lack of capability checks for post meta data in the XML-RPC API.
    • A cross-site request forgery (CRSF) vulnerability in the filesystem credentials dialog.
    • A cross-site scripting (XSS) vulnerability when uploading large files.
    • A cross-site scripting (XSS) vulnerability in the Customizer.

What New Features are in WordPress 4.8?

The core developers of WordPress have laid out a release timeline for the upcoming WordPress 4.8 version.  The goal is to have the next version of WordPress released before the upcoming WordCamp Europe, that takes place in the middle of June.  June 8th is the targeted release date for WordPress 4.8.

Note: You can start playing around with pre-releases and beta versions on a test site right now using the Beta Tester WordPress plugin.

This Friday is also the start of the beta versions, so after this Friday there "should" be no more new features added to the 4.8 version.  So, let's look at a few of the features that have a good chance at getting included in this next version of WordPress.

Understanding the Current 'Password Reset' Vulnerability Exposed in WordPress

A large percentage of site owners use WordPress to power their sites.  One of the side benefits of this aspect is that security researchers/testers spend quite a bit of time looking for exploits and vulnerabilities in WordPress.  Most of the times, when a vulnerability is discovered, it is patched relatively quickly, and the WordPress update fixes that vulnerability.  But there are occasions when groups differ on the level of vulnerability of a discovered exploit.  This is what has happened recently.  The summary is:

  • Dawid Golunski discovered a method of resetting an Administrator's WordPress password through a 'password reset' email exploit.
  • The Core WordPress Security team didn't feel it was a priority at that moment.
  • The exploit has now been made public.
  • A patch/fix is now in the process of being released.

WordPress 4.7.4 Released

WordPress 4.7.4 has now been released and you should make sure all of your sites are updated.  This release is a maintenance release and contains 47 bug fixes and enhancements.  The prior incompatibility between upcoming Chrome versions and the visual editor of WordPress have now been fixed.  Along with better media handling and improvements in the REST API.

Cloudflare Security Precaution Alert

Good web security requires a constant eye on things that happen on the internet.  Cloudflare revealed yesterday that a buffer overflow / leakage occurred last week that may have affected around 0.00003% of their HTTP requests.  Due to the nature of this bug, I recommend that anyone who uses the Cloudflare services (be it DoS protection, DNS management, Flexible SSL, etc) take the opportunity to consider updating your security credentials:

  • Change your password
  • Change your two-factor authentication (normally this requires deactivating then reactivating to get a new "key set")
  • If you use any APIs through Cloudflare, I would encourage you to generate a new set of keys.

For WordPress users, any easy way to log everyone out of your sites and require them to all re-login to the WordPress site is to change the SALT keys in the wp-config.php file.  All you have to do is find the code pictured below (with your own version of random characters) in your wp-config.php file.

Then replace it with an auto-generated new set of keys found at: https://api.wordpress.org/secret-key/1.1/salt/

This may also be a great opportunity to encourage people to put in place a security plan for your WordPress sites and/or client sites that you manage.  One suggestion would be to expire all passwords your clients use to access their sites every 90-120 days.  If and when clients push back on this security enhancement it can open the door for you to introduce password managers like LastPass, Dashlane, 1Password to your clients that can help keep them safer online.