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

Gutenberg 12.8 landed within the WordPress plugin listing earlier as we speak. I’ve been tinkering with most of the options as they had been dedicated during the last couple of weeks.

There are some issues that I’m enthusiastic about. The Net Fonts API is one thing I’ve patiently waited months for, however the skill to shortly nest Group blocks inside different Teams has earned a spot in my most-loved enhancements listing.

A brand new keyboard shortcut for auto-completing hyperlinks is now obtainable. Customers also needs to get pleasure from cleaner loading states for the Media & Text and Navigation blocks.

The Net Fonts API

The long-awaited Web Fonts API is within the Gutenberg plugin. The road was long and bumpy getting right here, however it feels good to reach on the vacation spot.

Theme authors can now bundle font recordsdata with their themes and register them through theme.json or the wp_register_webfonts() perform.

The draw back is that the implementation solely helps locally-hosted fonts. In the long run, this may create giant theme ZIP packages as builders start to ship international model variations, every with its personal fonts.

Ari Stathopoulos, who has put months of labor into the API, additionally has a patch that may integrate with Google Fonts. The enhancement would resolve the GDPR and associated privateness points as a result of the font recordsdata could be downloaded from Google and loaded from the server. Nonetheless, the characteristic appears to be a non-starter primarily based on a comment from a lead developer in a earlier dialogue.

In a current touch upon my earlier coverage of the Web Fonts API, Stathopoulos said the following about his hopes for Google Fonts integration:

For higher or worse I don’t anticipate it is going to be merged, however it is going to be sufficient to begin a dialogue and finally discover a answer to all the problems that include the usage of Third-party webfont suppliers.

It’s too early to see how the dearth of a Google Fonts supplier will play out with theme authors. Nonetheless, I anticipate many will construct a customized supplier implementation or not use the brand new API in any respect.

Grouping Teams

Have you ever ever created a Group block, labored on a number of issues, and later realized you wanted to wrap the unique Group inside one other Group? Then, did you must work by way of an advanced sequence of duties of copying your present blocks and pasting them into a completely new Group?

I really feel your ache.

That is no longer the agonizing process it as soon as was. If not for the brand new Net Fonts API, this could be the spotlight of the discharge.

Below the toolbar Choices dropdown (vertical ellipsis), customers ought to see a Group possibility when one other Group is chosen. Nesting them has by no means been simpler than clicking that button.

Shortcut for Including Inline Hyperlinks

The most recent replace provides an inline shortcut for links by typing [[ in a Wealthy Textual content space, corresponding to a Paragraph block. This ought to be a welcome characteristic for customers who wish to insert hyperlinks whereas writing however are not looking for their arms to go away the keyboard.

At first, I assumed this characteristic was not working. The inserter didn’t seem as swiftly as anticipated, so I hit the spacebar on my keyboard, pondering I wanted to set off it someway. Nonetheless, that didn’t work. Basically, it was sluggish for me, which can have been my pc or connection.

Typing [[ adopted by another characters appears to work the very best. For instance, if I’m searching for the What a Great Day publish, I simply begin typing the publish identify: [[what a.... The hyperlink inserter seems by the point I’m a number of characters in.

I’d like to see extra of a Markdown-style auto-completer for hyperlinks. Typing [some textual content] ought to set off the hyperlink inserter. The [[ syntax feels odd at the moment.

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

Core Blocks Shown First in Global Styles

Gutenberg will now show the core blocks first in the global styles panel in the site editor. Those from plugins get pushed to the bottom of the pile.

This does not help much when looking for a single block among the dozens listed. Alphabetizing them would help, but it could also push oft-used blocks like Paragraph down the list. The sidebar has limited space, but I would like to see blocks grouped by their categories here.

Building Themes from the Site Editor…almost

The latest release 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 templates and parts from the editor in earlier releases. The new export includes the theme.json, style.css, and index.php files from the theme. The theme.json file also adds user customizations from the global styles panel.

Technically, the export could be an entire theme (minus the screenshot) if it does not require a functions.php or include font files from the new API. However, that is a rare scenario.

Code Block Styling Moved to <pre> Element

Before now, when using the Code block, WordPress placed custom styles on the inner <code> inline HTML element instead of the wrapping <pre> element. Things like padding, backgrounds, and borders made little sense on the child element. I had always thought it was an odd practice, and it was something I had rarely seen before outside of that specific case.

Of course, as a theme designer, I tried to fight it. However, I eventually caved because I wanted to build block themes the “right way” by using theme.json and allowing users to customize the look.

Gutenberg 12.8 corrects this issue by moving the styles to the outer <pre> element.

Note that this may be a breaking change for some themes. Authors who target .wp-block-code > code in their CSS may need to update their code before WordPress 6.0. It depends on whether it was literally meant for the inline <code> element or was a workaround for WordPress’s previous mishap.

In the interim, this is only a partial fix when themes have the should_load_separate_block_assets flag enabled, which is the default case for all block themes. When running Gutenberg alongside WordPress 5.9, the Code block styles are applied to both the <pre> and the inner <code> elements in the editor. That means that the block could have double borders, padding, and other styles that might make it look a bit off right now.

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