Gutenberg 13.2 Adds Persistent User Preferences and a Visualizer for Margin and Padding Controls

Category Image 091

Gutenberg 13.2 was released earlier today. While much of the developer community is gearing up for the WordPress 6.0 release in two weeks, work continues steadily on the plugin, driving future updates. The latest release is not as hefty on enhancements as previous updates but includes around four dozen bug fixes.

Despite a heavy focus on squashing bugs, there are several welcome improvements in the plugin update. Persistent user preferences will make for fewer surprises when opening the editor. New visual updates for block spacing and the Post Comments Form block make it easier to design layouts.

Developers should look at the early work on a new settings hook. This represents one step toward creating the concept of “sections” that can house settings and styles for block instances and descendants. Patterns are a prime example of the necessity of sections. Matias Ventura covered the various uses in a separate open ticket.

The latest release also removes spotlight mode for template parts, and I say, good riddance. The editor already has such a mode for all blocks, and users who prefer it can enable it.

Persistent Editor Preferences

WordPress post editor with the 'welcome to the block editor' modal that pops up when first using it.
Welcome to the editor popup.

Have you ever visited the WordPress editor and noticed the “welcome” popup, despite dismissing it ages ago? Or, logged in with a new browser only to reconfigure settings, such as enabling top toolbar support and turning off fullscreen mode? Annoying, right?

This has been a long-standing issue caused by WordPress storing user preferences in the browser. In Gutenberg 13.2, these preferences are now saved as user metadata in the database and should no longer pose an issue.

Sarah Gooding took a deeper dive into this problem and solution in an earlier post on the Tavern.

Padding and Margin Visualizers

WordPress block editor with a Group block in the content canvas.  Above and below it are boxes that visually represent margin being added to it.
Adding margin to the Group block.

Landing in the pretty-neat-and-nice-to-have category is a new “visualizer” feature for block margin and padding. Essentially, it displays a colored box, representing the space when one of the two options is adjusted. It quickly fades out and returns the canvas to its default look.

I am a fan of this change. It draws the eyes back to the canvas and allows users to visualize how the block spacing is applied.

Comments Form in the Editor

WordPress site editor.  The canvas area displays a comments form as if viewed by a logged-in user.  It has a title, message box, and submit button.
Comments Form Block in the site editor.

The Post Comments Form block was simply a placeholder in the editor in past releases. This did not allow end-users to see how it would look on the front end of their sites.

Gutenberg 13.2 updates this to show something closer to what it will look like on the front end, at least for logged-in users. This also lets the user see how color and typography customizations will be displayed.

This is a two-part change. The Comments Query Loop block now outputs the form within its default template. This way, users and creators will not need to build out each part of the overall comments area.

There is still much work to do for the Post Comments Form block in the long term. It needs a broader selection of design tools for starters. However, it could also use a revamp that provides fine-grain control over the various elements shown for logged-in and logged-out users. That may even mean splitting the form into multiple blocks. For now, the additional visualization will have to suffice.

Margin Support for Separators

WordPress post editor that has two paragraphs separated by a Separator block with large sections of whitespace in between.
Adding top and bottom margin to a Separator block.

The Separator block now supports top and bottom margins. Users can adjust it from the spacing tools in the sidebar.

It is a small change but a welcome one. Users could previously increase the space between a Separator and sibling block through other means, such as setting the margin on the sibling or using a Spacer. However, those were often unintuitive solutions. And decreasing the space sometimes seemed an impossible task.

How to Generate Fake Test Data

Featured Imgs 23

Are you also often uninspired when you need to think of useful test data for your unit tests? Is ‘John Doe’ your best test friend? Do not worry, Java Faker comes to the rescue! In this blog, you will learn how to generate your test data.

1. Introduction

Making up test data is one of the hardest tasks when writing tests. Often you will see 123 when numbers are being used, or John Doe when a name is needed. But this also means that the test will always run with the same data. This is on the one hand a good thing because your tests needs to be stable, but on the other hand a pitty because you also want to find errors. And this is more likely when random test data is being used.

How to Install a WordPress Theme: A Guide for Beginners

Featured Imgs 21
how to install a WordPress themeA WordPress website’s look is based almost entirely on the theme you use. This is a collection of templates that you’ll style from the platform’s dashboard, and there are thousands of them available within the WordPress Theme Directory, third-party sites such as ThemeForest, and direct from developer sites. However, you’ll need to know how to install your WordPress theme in a few different ways.

Stack to Content Layout Transition

Category Image 052

Today I’d like to share a little experiment with you that is based on the layout transition of Aristide Benoist’s amazing homepage. Basically, I’m trying to rotate this layout just like Siddarth did in this shot. No WebGL for this experiment so we definitely don’t reach the slickness level of Aristide’s work but it’s fun to try it out.

Our initial scrollable view looks as follows:

Once we click on an item, we animate the stack to the right side, enlarging the items and showing our content:

Here we can now navigate using the arrows. Once we scroll, we move back to the initial stack view.

Here’s the whole flow in a video:

Please keep in mind that this is very experimental and that there might be bugs 😉

I really hope you have fun with this little experiment! Thanks for checking by!

The post Stack to Content Layout Transition appeared first on Codrops.