Gutenberg 8.2 Includes Editing Flow Improvements, Cover Block Content Positioning, and Pattern Categories

On Wednesday, the development team behind Gutenberg dropped version 8.2 of the plugin. The new release focuses on a better editing flow, includes a new content positioning control for the Cover block, and adds categories to block patterns.

With this release, users can copy an entire block via the Ctrl + C keyboard shortcut or cut a block with Ctrl + X if no specific text is selected. The snackbar popup will appear at the bottom of the screen to show which block was copied.

Hitting the Enter key while editing an image caption will create a new paragraph. For situations where a user wants to continue writing after inserting an image and caption, this is probably a welcome addition. However, it could be a problem for users who need to have multi-line captions — I am uncertain how to add a line break in a caption with this change.

Gutenberg 8.2 includes several other enhancements, such as limiting the most-used blocks in the inserter to six items. Individual buttons within the Buttons block can be split into two buttons by hitting the Enter key or merged by hitting the Backspace key. Users can also test two new block patterns. One adds a hero section with two columns beneath. The other adds a three-column features/services section.

Overall, this is a solid update with numerous enhancements and bug fixes. The editing flow changes are nice improvements, and the new Cover block positioning and Patterns API updates are welcome additions to the editor.

Content Positioning for the Cover Block

The Gutenberg team has created a new alignment control that allows end-users to position the content within the Cover block. I have been waiting for this feature for at least a year after first seeing it mentioned as a possibility in an unrelated ticket.

The new positioning feature adds a matrix control with nine positions the user can choose from. Once a position is chosen, the inner content of the Cover block will move to that location. It is important to note that some content will not look like it has changed position if the Cover block is full. The inner container’s width is set to auto, which means the content inside may already be taking up all the available space. Alignment is more pronounced in Cover blocks with less content inside.

Sure, it was possible to align inner blocks individually in past versions of the plugin. However, it was also sometimes a bit of pain to do on the block level. This new control brings a new level of flexibility to the Cover block.

Theme authors will need to update the CSS in their themes to handle the new positioning classes. There does not seem to be any official documentation for styling these classes, so looking at the source code is the best course of action. The classes are as follows:

.has-custom-content-position
.is-position-top-left
.is-position-top-center
.is-position-top-right
.is-position-center-left
.is-position-center-center
.is-position-center-right
.is-position-bottom-left
.is-position-bottom-center
.is-position-bottom-right

It will also be interesting to see what plugin developers do with the new AlignMatrixControl component for their own blocks. This component is used for handling the inner block alignment of the Cover block, but it should be easy to extend to other blocks that could also use such alignment.

Categories for Patterns

Gutenberg 8.2 has nearly ticked all my boxes for the Patterns API. The newest release adds support for categorizing patterns. Currently, the default interface shows the following seven categories:

  • Text
  • Hero
  • Columns
  • Buttons
  • Gallery
  • Features
  • Testimonials

There is also an “Uncategorized” section at the bottom of the inserter, but it is not technically a category. It merely houses any patterns that have not been categorized.

Theme and plugin authors now have access to the register_block_pattern_category() and unregister_block_pattern_category() functions to register or unregister patterns, respectively. Categories can be assigned to a specific block via the new categories argument. More information is available via the Patterns API documentation.

Patterns can be assigned one or multiple categories. Therefore, users may see duplicates of some patterns in the inserter. This is one reason I am holding out hope for the team to bring the tabbed interface or something similar back to the inserter. With categories, that should now be possible for both blocks and patterns. At the moment, my library of patterns is becoming unwieldy.

Slash commands for patterns are still on my wish list, which may cancel the need for a tabbed inserter interface.

Block Widgets Almost Ready

In this week’s editor chat, the team discussed the possibility of bringing the new Widgets screen out of the experimental stage. If this happens before July 7, it could mean users might be able to start configuring their sidebars with blocks as early as WordPress 5.5. This is not set in stone yet, but it is exciting to start seeing blocks truly break out of the post content area.

For the most part, the block-based widgets system works well. It does not yet feel as polished as it should be for merging into core WordPress. However, if the team pushes through any remaining roadblocks in the next month, it is within the realm of possibility. I have my doubts, but we’ll see where this lands soon.

Now is a good time for end-users to begin testing the experimental widgets via both the “Widgets (beta)” admin screen and the “Widgets Blocks (Experimental)” customizer panel. To test this feature, enable the Widgets option under the Experiments settings page for the Gutenberg plugin.

17

17 responses to “Gutenberg 8.2 Includes Editing Flow Improvements, Cover Block Content Positioning, and Pattern Categories”

  1. Really enjoy the comprehensive Gutenberg update articles, Justin. Thank you. I noticed GB 8.2.1 was released this morning.

    I’m enjoying the rapid development by the GB team, and it’s an exciting time to publish posts using these new tools!

    Thank you GB team!

    Report

  2. Nick says:

    We desperately need universal (for core blocks and third party blocks) padding and margin controls. Until this happens, only those who know CSS can fully take advantage of Gutenberg as a page builder.

    That said, the new Align Matrix Control component seems very interesting, which btw, the Section Block found in the Getwid plugin has a similar feature.

    Report

  3. Paul says:

    With the latest version of the plugin, it doesn’t seem possible to just copy a portion of text from within a shortcode.

    Report

  4. Am I the only one who is feeling block bloat overload? Gutenberg has reached an overwhelming and intimidating complexity that is getting harder and harder to follow every day.

    Report

  5. Ant Ekşiler says:

    Our developers will definitely enjoy the cover block position setting.

    Report

  6. Kingsley Felix says:

    When are they adding the “NOFOLLOW” option together with the open new tab

    Report

  7. Chris Paul says:

    Hi,

    I am all for the future with blocks in order to compete with Wix/Squarespace and be modern without bloated themes and plugins, BUT

    the current stage of Gutenberg is extremely terrible, having some basic functionality not working.

    See the videos

    1) Drag ‘n’ drop produces extreme lag for images; https://www.youtube.com/watch?v=XhZs6jq8-MY

    2) Drag ‘n’ drop doesn’t scroll the page up and down; https://www.youtube.com/watch?v=659IOT5T79M

    3) Drag ‘n’ drop doesn’t permit mouse scrolling; https://www.youtube.com/watch?v=fbCmw9LDMnk

    4) Movement symbols – hard to use and with issues; https://www.youtube.com/watch?v=WU2AxvzX1KE

    5) Cut, Copy & Paste doesn’t work for block images; https://www.youtube.com/watch?v=o904E_zd5YY

    WordPress 5.4.1
    Gutenberg 8.2
    Built-in Gutenberg – Test II

    MacOS Catalina 10.15.5

    Chrome 83.0.4103.61
    Edge 83.0.478.37
    Safari 13.1.1

    iMac 27″ Late 2015 – CPU Intel Core i7 Quad Core 4.0 GHz, 32 GB RAM, AMD Radeon R9 M395X 4 GB, SSD

    Report

    • You should post these things as issues on the repository (assuming they are not already existing tickets) so the team is aware of them.

      Report

      • Chris Paul says:

        I am actually not a developer, rather a marketer. I can’t understand why so much years after Gutenberg is released, such basic things don’t work.

        Report

        • You don’t have to be a developer to create a ticket on the repository. You just need a GitHub account, which is free, and the ability to describe the issue you are having.

          It is also important to remember that the “basic things” for you are not necessarily the basic things for someone else, so a particular issue may not be on the team’s radar. The reason we report issues is so that the development team is aware of them. That’s how the software is improved over time.

          Report

  8. Chris Paul says:

    I do consider drag/drop of images and cut/copy/paste of images to be a basic feature across text editors, applications and systems and I hope that is universally understandable objectively and not something that just I find problematic.

    I truly hope that there should be an open way where regular consumers would provide bug reports and suggestions in order for their interest and the interest of the developers behind Gutenberg align.

    At the current state I do believe there is a huge difference between these two and one of the primary reasons is because the regular consumers do not know what GitHub is, nor the plugin page has any links to it.

    If the “support” on the Gutenberg plugin page is not existing and people should go to GitHub, this should be clearly market in some way on the plugin page.

    Also I do consider that regular consumers would struggle with GitHub and posting their feedback there.

    If from 3121 total reviews 2087 are one star reviews, I would seriously consider improving the relations between developers and regular consumers.

    I don’t want to see my favorite CMS struggle because the developers deliver something that is not working as it should or doesn’t align with the interests of the regular consumer.

    I already heard what told me the clients of my agency, I can assure you that most of them don’t know what GitHub is, but they had very interesting feedback about the editor. It was negative, but they still have concrete suggestions on what should be improved and how.

    WordPress should think about how to engage these people and use their feedback to make the product better. I don’t think the current state of Gutenberg is ready to serve regular people.

    Report

    • I COMPLETELY agree, and this isn’t even limited to Gutenberg. To expect the average user to sign up for Github (sigh – yet another account!) and learn how to use it & work with its idiosyncrasies is simply unrealistic.

      I don’t know how many times I stumbled upon a problem, or a bug, or had an idea, and then just let it go because there are too many hoops to jump through just to be heard. The system, with its complexities and requirements, effectively reduces or eliminates user feedback & bug reports.

      In order for the community (actual USERS) to be able to provide feedback and help product development and bug fixing, some sort of interface/ombudsman or whatever else would be needed. A person that translates “real world problems” into WordPress bug reports that fit the criteria that are expected on Github…

      Report

  9. Norman Freeman says:

    Is there any way to extend inner blocks of core blocks
    eg: Cover block has paragraph block as the inner block can I use some filter kind of mechanism to add more inner blocks? this will be a very helpful feature.
    ref: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/cover/edit.js#L63

    Report

  10. Ravi Jain says:

    Hi,
    Great article. I guess you can use shift+enter to create a line break in the image caption.

    Report

  11. Jim says:

    It’s nice that guys continue developing and improving the Gutenberg plugin. I use it on my several websites and I love this editor plugin.

    Report

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: