Gutenberg 8.1 Includes Block Copying, Testimonials Pattern, and Patterns UI Update

On Wednesday, the Gutenberg team released version 8.1.0 of the plugin. The update includes a new block-copying feature, block pattern search, testimonials pattern, and API changes. The new version does not add a lot of major user-facing changes but improves the experience overall.

The update included two dozen bug fixes and nearly as many enhancements. This release feels more like a solid update that addresses many minor items and nit-picks, such as the addition of black and white colors for the default color palette. The ability to paste a document into the post title input, which gets transformed into proper blocks, works great too.

One nice improvement is the ability to transform the HTML block to the Code block and vice versa. File this one under why has this not already been possible?

If you are following along with the Gutenberg plugin, there are some definite improvements to look forward to in this release, particularly around the block patterns feature.

Copy Blocks with Ease

Screenshot of copying a pullquote block in the WordPress editor.
Copying a pullquote block.

Admittedly, this is quickly becoming one of my favorite features of Gutenberg 8.1. The editor toolbar now has a copy button, which allows end-users to copy one or more blocks at the click of a button. It is tucked under the “more rich text controls” dropdown menu.

To use the new copy feature, simply select the block or blocks you want to copy. Then, click the copy button. From that point, the block can be pasted back into the editor.

For theme authors, plugin developers, or anyone who wants to share the code for a block, copying a block also produces the HTML that can be pasted into a text editor. No more switching to the code view of the editor and hunting down the HTML you want to copy. For example, the pullquote copied from the post in the above screenshot produced the following HTML when pasting into my text editor:

<!-- wp:pullquote {"align":"wide"} -->
<figure class="wp-block-pullquote alignwide"><blockquote><p><span class="rtex-highlighter-0">What has the Duke of Devonshire? The only great instance that I have ever known of the enjoyment of wealth was, that of Jamaica Dawkins...</span></p></blockquote></figure>
<!-- /wp:pullquote -->

This should make it easy for developers to copy the code of their custom block patterns.

Testimonials Pattern

Screenshot of the Gutenberg plugin's Testimonials block pattern.
New pattern for testimonials.

The team added to its growing collection of block patterns with the addition of the Testimonials pattern. The new pattern brings the library to eight in total. It is unclear which patterns will launch when the feature lands in WordPress core. It is still under heavy development and is experimental.

The Testimonials pattern is one of the more complex patterns the team has introduced. It is a mix of groups, columns, images, and paragraphs. At points, the blocks are six levels deep.

Overall, it worked well among the various themes I tested it against with custom block styles. Visually, it is not inspiring, at least in comparison to what a good designer can do with a testimonials section, but it is a solid stepping stone on the way to more interesting layouts.

Inserter UI Adds Search and Titles

Screenshot of the block editor inserter with a pattern search box.
Search for block patterns via the inserter section.

Crossing off two out of three big wish list items from my Gutenberg 8.0 post, the team added search functionality and reintroduced the pattern titles below each pattern in the inserter. These are major improvements. The only item left on my list is for the team to introduce a categorization system for patterns.

The search box switches from searching for blocks to patterns once clicking on the patterns tab. The one issue is the search label and placeholder reads “Search for a block” in both instances. Instead, it should read “Search for a pattern” when searching patterns.

With my wish list nearly fulfilled for block patterns, I have one more item to add. I would like to see the team introduce slash commands to insert patterns. Typing /testimonials should provide users the option to insert the new Testimonials pattern without clicking the inserter button.

Developers: Block Patterns API Changes

The Block Patterns API methods of registering and unregistering patterns have changed. In previous versions, developers used the register_pattern() and unregister_pattern() functions. These have been deprecated. Beginning with 8.1.0, developers should update their code to use the register_block_pattern() and unregister_block_pattern() functions.

This API change is welcome. It is needed for clarity. However, this sort of API change, even on an experimental feature, is one of the many things that frustrates developers who are attempting to keep up with the project. It is especially frustrating when the discussion was originally opened when the feature was first merged. Naming things is hard. It is one of the hardest things to do in programming, but good naming schemes can also be the difference between great software and poor software. There should be more careful thought and thorough explanations when these issues pop up in tickets.

19

19 responses to “Gutenberg 8.1 Includes Block Copying, Testimonials Pattern, and Patterns UI Update”

  1. Copy blocks is very useful! Thank you GB development team!

    Report

  2. Save Gutenberg! says:

    Gutenberg needs a “Save/Add Block to Library” tool. This would allow a non programmer to use nested Gutenberg Blocks to create simple reusable layout templates for clients or employees to build things like product pages.

    Bonus points for an “Export/Import” block tool!

    My current solution is to create the layout I need, then open the Gutenberg “Edit Code” and copy the layout into a text file. I often do this myself, but teaching a client how to (non-destructively) paste code into the visual editor is far more difficult than it seems like it would be.

    Report

  3. Quite interesting the more and more features from EditorsKit( https://wordpress.org/plugins/block-options/ ) has been added on the core Gutenberg. The “copy” feature receives a lot of love from the users and kinda sad to let it go on EditorsKit :D

    Report

  4. Phil Johnston says:

    While cool on the surface, a testimonials pattern could end up causing you headaches in the future. For example, what if you want to show a “random” testimonial somewhere on your site in the future? Because you’ve stored the actual content of the testimonial in a block, it is almost impossible to query.

    Data for things like testimonials should not live in blocks, but rather in an organized and queryable table, and blocks should be used only for the layout.

    Otherwise you box yourself into a corner with what you can do with your data.

    I feel like the testimonials block pattern example isn’t something people should use without carefully considering how their data is being stored.

    These data storage decisions are the types of decisions end users will have to make with blocks.

    Report

    • It depends on the use case. Generally speaking, I would rather store my testimonials elsewhere and query them as needed. However, there are plenty of use cases where a one-off testimonial pattern would be fine. Think, something like a book landing page where the user will only ever want to show a testimonial on that particular page.

      The current patterns are experimental. There are no indications of what will ship when they land in core. But, I could see some type of testimonial pattern making the cut.

      Report

      • Phil Johnston says:

        I agree that it does depend on the use case, yeah. Just something to think about before putting too much data (of any kind) into block form though.

        I’m personally not sure that making people think testimonials should be a pattern is helpful to them.

        Testimonials have a lot of connected data, like the person’s name, email, picture, date of testimonial, thing testimonial is about (product a), and the testimonial text itself. Separating all of those pieces of data into hard-to-query separate blocks may not be helpful down the road. Especially if you want to re-use testimonials in another context ever.

        But if its only 1 or 2 testimonials, and the site will never scale to the point of having dozens or more, than a testimonial block pattern might be helpful.

        I’m not certain if that covers the helpful-to-80% rule to get in core though.

        Report

    • Kristian says:

      The problem with this is that you assume the user knows how to seperately store and then query testimonials. While what you’re describing is technically better it is also a lot more demanding to implement for the user.

      The patterns aren’t there to displace structured content, but to let more people implement features they want. Even if it isn’t the best technical solution.

      Report

      • Phil Johnston says:

        Plugins like Strong Testimonials do this very well, and put a lot of thought into it so users don’t have to.

        Report

        • Phil Johnston says:

          What I mean is, this type of data is plugin territory in my opinion, and can be handled better, even within and using Gutenberg blocks. A testimonial block from a plugin which properly stores testimonials is a much better UX, especially down the road, than using generic blocks which have no concept of what they are storing.

          I am not assuming users know how to write a query. It’s exactly the opposite of what I mean. Users don’t know, and shouldn’t have to know. They should be able to trust that core developers have their best interests in mind.

          With it as a plugin, if its poorly done, there are ratings to warn. But if poorly done in core, there’s no way to rate that as a user. This I felt it was worth mentioning.

          Blocks are great, but core shouldn’t be advising storing data in a certain way for something as specific as a testimonial (in my opinion), unless they are going to help you store it more properly.

          Report

  5. copy block is useful, plus I have been able to make blocks within the post as well to highlight the content, thanks development team.

    Report

  6. Paal Joachim Romdahl says:

    Hey Justin

    I just want to mention that Embedding a link is being worked on. The first PR transforming Embed into a Paragraph was merged into 8.1: https://github.com/WordPress/gutenberg/pull/17413

    Work is also happening on adding a placeholder.
    https://github.com/WordPress/gutenberg/issues/21789

    Report

    • Peter Shaw says:

      Paul,

      That is great but why all the harmful features in the Gutenberg plugin? Is there a way of turning off programmatically many of the more page builder like features?

      Any guides to this?

      Pete

      Report

  7. Joseph says:

    How are changes to Gutenberg incorporated into core?

    If changes are incorporated into core, I guess then that WP 5x users without the Gutenberg plugin would see those changes in the next minor update of WP – would that be correct?

    Report

  8. Amin says:

    Gutenberg has come a long way from its first release, and, as I anticipated a lot of theme & plugin vendors and WP developers are rising to meet the need of doing things in Gutenberg more easily, including making your own blocks. I’m working on a website with a very popular “page builder” plugin right now, and although leading page builders have also come a long way, nothing compares to how good Gutenberg and the block system really are.

    Report

  9. Peter Shaw says:

    Please, please, STOP throwing features at gutenberg.

    Many of us use WordPress strictly as a CMS and we just want content in the editor. We don’t want our users messing with colour palettes or typograhies, and if we want to add a testimonial we’ll use a dedicated plugin.

    If some people need a pagebuilder that is fine, just provide the APIs to do so and let developers add the required features.

    But many don’t and Gutenberg is actually being made worse by some of these changes

    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: