Gutenberg 13.8 Introduces Fluid Typography Support and Revamped Quote Block

Gutenberg 13.8 was released last week with some major enhancements that should delight block theme authors and users alike. The long-awaited fluid typography support landed in this version. It provides smooth scaling between smaller and larger viewports, adapting in a fluid way to varying widths.

Release lead George Mamadashvili demonstrated how this works in a video:

“Contrast that idea with font sizes that respond to specific viewport sizes, such as those defined by media queries, but do nothing in between those sizes,” Automattic developer Ramon Dodd said in the fluid type PR.

“Theme.json already allows authors to insert their own fluid font size values. This won’t change, but this PR offers it to folks who don’t want to worry about the implementation details.”

Theme developers who want to opt into fluid typography need only set typography.fluid to be true in theme.json and add fluid to each of the settings.typography.fontSizes with min and max values.

Gutenberg contributors are requesting feedback from theme developers on this first iteration, as it is an experimental new feature. In the future, the feature may be configurable for users through the Global Styles UI.

“The intention is to garner feedback on the formulae and API, before we think about any editor UI and, beyond that, introducing fluidity to other properties such as spacing,” Dodd said.

Theme authors have already started updating to use the new fluid typography. Brian Gardner updated his Frost Theme to use the feature, and Rich Tabor updated his Wei and Wabi themes.

“As one of the bigger efforts towards making publishing beautifully rich pages in WordPress, fluid typography is a pretty big experience win for both the folks building with WordPress — and those consuming the content,” Tabor said in a tutorial on adding support for fluid typography in block themes.

“It’s also a part of making WordPress more powerful, while not more complicated (which we all know is quite the challenge).”

Gutenberg 13.8 also includes a revamped Quote block that is capable of nesting other blocks inside. Previously, the Quote block did not allow inner blocks, but users have often requested the ability to add lists or headings inside of them.

Quote block with nested blocks

Other user-facing improvements in 13.8 include the following:

  • Template part UX improvements that make specific template part variations available in the block inserter
  • Border controls for image blocks
  • Post Comments and Comments blocks merged into a single block – Comments
  • New content size and wide size controls in Global Styles, under “Layout” allows users to override content dimensions defined by a theme
  • Accessibility enhancements – improved and labels and tooltips across the editors, added more keyboard-friendly clickable elements in the “Add template” modal
  • New WhatsApp icon added to the Social Icon block

This update erased performance gains from previous updates in both the post and site editor but future improvements may be able to chisel the times back into the range of previous benchmarks.

Check out the 13.8 release post for the full changelog and more details on all the enhancements and bug fixes.

0

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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: