Gutenberg 12.8 Launches Web Fonts API, Improves Group Nesting, and Adds Keyboard Shortcut for Links

Gutenberg 12.8 landed in the WordPress plugin directory earlier today. I’ve tinkered with many features as they’ve been validated over the past two weeks.

There are certain things that excite me. The Web Fonts API is something I’ve been patiently waiting for months, but the ability to quickly nest group blocks within other groups has earned a spot on my list of most appreciated improvements.

A new keyboard shortcut for auto-complete links is now available. Users should also enjoy cleaner loading states for Media and Text and Navigation blocks.

The Web Fonts API

Testing various web fonts.

The long-awaited Web Fonts API can be found in the Gutenberg plugin. It’s been a long and bumpy road to get here, but it feels good to reach your destination.

Theme authors can now bundle font files with their themes and save them via theme.json or the wp_register_webfonts() a function.

The downside is that the implementation only supports locally hosted fonts. In the long run, this will create large themed ZIP packages as developers start offering global style variations, each with their own fonts.

Ari Stathopoulos, who put months of work into the API, also has a fix that would integrate with Google Fonts. The improvement would solve GDPR and related privacy issues as font files would be downloaded from Google and loaded from the server. However, the feature appears to be a non-starter based on a comment from a core developer in a previous discussion.

In a recent comment on my previous Web Fonts API coverage, Stathopoulos said the following about his hopes for Google Fonts integration:

For better or worse, I don’t expect it to be merged, but it will be enough to start a discussion and eventually find a solution to all issues related to the use of third-party web font providers .

It’s too early to see how the lack of a Google Fonts provider will affect theme authors. However, I expect many to either build a custom provider implementation or not use the new API at all.

Grouping groups

WordPress editor with one Group block nested inside another.
Putting a group within a group within a group.

Have you ever created a group block, worked on a few things, and realized later that you needed to integrate the original group into another group? Then did you have to perform a complicated series of tasks of copying your current blocks and pasting them into a whole new group?

I feel your pain.

It’s no longer the nerve-wracking process it once was. Without the new Web Fonts API, this would be the highlight of the release.

Under the Toolbar Options drop-down list (vertical ellipsis), users should see a group option when another group is selected. Nesting them has never been easier than clicking this button.

Shortcut to add inline links

Added a quick link in the WordPress editor.  Typing "[[" pulls up a link inserter.
Inline link inserter.

The latest update adds an inline shortcut for links by typing [[ in a Rich Text area, such as a Paragraph block. This should be a welcome feature for users who like to insert links while writing but do not want their hands to leave the keyboard.

At first, I thought this feature was not working. The inserter did not appear as swiftly as expected, so I hit the spacebar on my keyboard, thinking I needed to trigger it somehow. However, that did not work. Essentially, it was slow for me, which may have been my computer or connection.

Typing [[ followed by some other characters seems to work the best. For example, if I am looking for the What a Wonderful Day post, I just start typing the post name: [[what a.... The link inserter appears by the time I am a few characters in.

I would love to see more of a Markdown-style auto-completer for links. Typing [some text] should trigger the link insertion. the [[ the syntax seems strange at the moment.

Either way, it’s not something I would use in my workflow. I tend to put all the text in place and add links during the editing phase. The editor already makes my workflow easier by allowing me to highlight any text and paste a URL.

Basic blocks shown first in global styles

Site Editor open with the Global Styles section broken down into the Blocks panel, which lists all the blocks in a site.
Sorted block in global styles panel.

Gutenberg will now show basic blocks first in the site editor’s global styles panel. Those of plugins are pushed to the bottom of the stack.

This doesn’t help much when looking for a single block among the dozens listed. Alphabetizing them would help, but it could also push blocks that are often used as Paragraph down the list. The sidebar has limited space, but I’d like to see the blocks grouped by categories here.

Create themes from the site editor…almost

WordPress site editor open to the Twenty Twenty-Two theme.  On the right, the options drop-down list is opened with the "Export" option-oriented.
Export a custom Twenty Twenty-Two theme.

The latest version brings us one step closer to creating themes entirely from the WordPress site editor. I covered this feature in more depth earlier this week.

Users could download a ZIP file of their models and parts from the editor in earlier versions. The new export includes the theme.json, style.cssand index.php theme files. the theme.json also adds user customizations from the global styles panel.

Technically, the export could be an entire theme (minus the screenshot) if it doesn’t require functions.php or include the new API font files. However, this is a rare scenario.

Code block style moved to
 Element

Block of code in the WordPress post editor, which has double borders and padding.
Doubled padding and borders on the code block.

Previously, when using the code block, WordPress placed custom styles inside inline HTML element instead of skin

 element.  Things like padding, backgrounds and borders didn’t make much sense on the child element.  I had always thought this was a strange practice, and it was something I had rarely seen before outside of this specific case.

Of course, as a theme designer, I tried to fight it. However, I finally gave in because I wanted to create block themes the “right way” using theme.json and allowing users to customize the appearance.

Gutenberg 12.8 fixes this issue by moving styles outwards

 element.

Note that this may be a drastic change for some themes. Authors who target .wp-block-code > code in their CSS may need to update their code before WordPress 6.0. Depends if it was literally meant for inline item or was a workaround for the previous WordPress crash.

In the meantime, this is only a partial solution when themes have the should_load_separate_block_assets flag enabled, which is the default for all block themes. When running Gutenberg with WordPress 5.9, code block styles are applied to both the

 and the interior  elements in the editor.  That means the block could have double borders, padding, and other styles that might make it look a little off right now.

This problem is not specific to the Code block. Instead, it’s a larger issue, which now has an open ticket. I only wish this ticket had been fixed first, avoiding this transition period with broken styles.

Comments are closed.