ramonopoly 6:41 am on April 10, 2024
Tags: ,   

What’s new in Gutenberg 18.1? (10 April)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor project (formerly called Full Site Editing).

What’s new in Gutenberg 18.1? (10 April)

Gutenberg 18.1 is ready and available for download!

With more than 150 pull requests (PRs), Gutenberg 18.1 is packed with features and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes to suit all tastes — new pattern and template part insertion functionality, site backgrounds in global styles, accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) and performance improvements.

Lovers of documentation and code quality enhancements will be pleased to learn that their favorite PRs make up almost a third of the total number in this release!

As always, a big thank you goes out to all who contributed, with special gratitude to first-time contributors. Great work!

In this issue:

Set site background images in the Site Editor

Set site background images in the Site Editor

Version 18.1 extends background image support to top-level global styles in the Site Editor, which means you can add custom background images and photos to sites. Images can set to repeat, or be displayed as contain or cover backgrounds. (#59454)

And for those wondering — yes, as well as regular images, looping animated gifs will also work.

See more with data views

New data views in the block editor for pages and patterns

Whether it’s sorting or searching your patterns in grid and table layouts (#60337), or filtering and previewing all of your sites pages (#59950), version 18.1 brings further design consistency to configurable adminadmin (and super admin) views, not to mention quicker access and management of site assets. 

Alongside the continuous integration into BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor workflows, data views have undergone improvements to accessibility and keyboard navigation (#59637).

Pattern schema and insertion

Pattern insertion with zoomed out view

Pattern insertion gets an upgrade in the latest version of Gutenberg. The editor canvas will zoom out when browsing and inserting patterns using the block inserter, allowing a greater overview of how your patterns appear alongside the rest of your site’s content. (#59775) 

Patterns are a powerful way to define design assets with configurable content. You can now give your patterns a “schema” by naming blocks that are overridable in all instances of those patterns. Users of your patterns will be able to see exactly which blocks are editable via a handy list in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (#59977)

Swap and edit template parts

Swapping template parts design in the Site Editor

When editing your site’s templates, you can select template parts and immediately view alternative designs for that template part in the sidebar. Want to replace your footer design? Click on your template’s footer and select a new one from the available designs. Voilà! (#60203)

Gutenberg has long had an option to preview a page’s template when editing that page. 18.1 lets you select and edit a page’s important template parts, such as the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer. To do so, click on a template part, then hit “Edit” in the toolbar. (#60010)

Other notable highlights

The editor displays a confirmation modal before clearing template customizations. (#60119) 

You can collapse non-selected items in the list view using a handy new keyboard shortcut (Option-L on Mac, or Alt-L on Windows). (#59978).

Changelog

View the full changelog

Enhancements

Block Editor

  • Zoom out: Invoke zoom out mode when opening the patterns tab, and move the code to do so to a shared hook. (59775)
  • Block Previews: Update shadows in different contexts. (60161)
  • Update: Move post actions to the editor package. (60092)
  • Try: Show copy shortcut in block options. (60339)
  • Update image role description text to fix spacing. (60338)

Site Editor

  • Add rename page action. (60230)
  • Center the document title. (59134)
  • Consolidate when showing revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. link or action. (60194)
  • Editor: Update hover color of editor document title. (60113)
  • Improve the frame animation. (60363)
  • Try selecting closest editable block when clicking on a disabled block. (60016)
  • Update index view for pages. (59950)

Patterns

  • Add content schema to pattern editing view. (59977)
  • Close inspector on pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select. (60004)
  • Focus block selection button only in navigation mode. (60207)
  • Pattern Shuffling: Make the results deterministic. (60074)
  • Patterns page: Enable table layout. (60337)
  • Prevent reordering of header and footer template parts when zoomed out. (60054)
  • Remove manage all of my patterns link. (60345)

Block Library

  • Add __next40pxDefaultSize to Image block Title Attribute. (60117)
  • Add support “HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Element” to Site Tagline. (59654)
  • Image: Remove temporary image check for rendering controls. (60212)
  • Quote block: Button for cite add/remove. (59073)
  • Quote block: Remove appender. (60307)
  • Reduce specificity of block library styles conflicting with block supports. (59457)
  • Update navigation blocks to use consistent link UIUI User interface labels and field sizes. (60116)
  • Summary: Polish featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.. (60110)

Post Editor

  • Block Editor: Deprecate __experimentalGetReusableBlockTitle selector. (60278)
  • Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package. (60344)
  • Editor: Move publish panel handling to editor store. (60340)
  • Editor: Unify publish sidebar preference. (60334)

Global Styles

  • Add background to global styles changes output. (60229)
  • Background UI controls. (59454)
  • Follow up design tweaks for global styles presets. (60031)
  • Try reducing specificity of global styles selectors only. (60106)

Data Views

  • DataViews: Add a utility to share filtering, sorting and pagination logic. (59897)
  • Data views: Remove the enumeration type as redundant. (60084)
  • Data views: Update template actions. (60075)
  • Data views: Add confirmation modal for clearing customizations in templates. (60119)
  • Data views: Make trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. a quick action again. (60165)

List View

  • Add keyboard shortcut to collapse list view items other than the focused item. (59978)
  • Adjust the List View close icon to resemble the Inspector close icon. (59999)
  • Update “Actions” string to “Options” in List View. (60136)

Templates

  • Add filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to allow extending the list of post content blocks. (60068)
  • Render non-editable preview of template part when user does not have capability to edit template part. (60326)
  • Template Parts: Remove pattern title from sidebar. (60160)
  • Template Parts: Update replace flow to separate template parts from patterns. (60203)
  • Template Parts: Update the ‘Replace’ label to ‘Design’. (60156)

Zoom Out

  • Add a delete control to toolbar on zoomed out mode. (60214)
  • Media dialog push content in zoomed out mode. (60170)

Components

  • Popover / ToggleGroupControl: Use useReducedMotion() from @wordpress/compose. (60168)
  • date-fns: Bump to v3.6. (60163)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Allow view access of template rest endpoint to anyone with the edit_post capability. (60317)

Commands

  • Polish Command Palette. (60134)

Page Content Focus

  • Allow selecting template parts in page content focus mode. (60010)

Inspector Controls

  • Add: PostCardPanel component. (59870)

Package and utility updates

  • Router: Update history package to 5.3.0, fix query string generation. (60271)
  • Create block: Add new namespacePascalCase template variable. (60223)

New APIs

Extensibility

  • Extensibility: Support PluginBlockSettingsMenuItem in the site editor. (60033)

Bug Fixes

Block Library

  • Fix enqueuing block theme styles when separate asset loading is enabled. (60098)
  • Fix lightbox UI disallow editing. (59890)
  • Fix navigation link ui close focus management. (59925)
  • Removed pointer-events none inline style due it blocking crop action. (60305)
  • Search Block: Apply font-related style inheritance to input field. (60321)
  • Columns block: Fix arrow up into it. (55197)

Site Editor

  • Fix rendering PluginTemplateSettingPanel when we’re editing a template. (60215)
  • Fix: Use viewportWidth in pattern preview data view. (60315)
  • Templates: Fix deferred rendering. (60361)
  • Site Editor: Consolidate save button functionality. (60077)
  • Revert #60300: Make sure the CSSCSS Cascading Style Sheets. class id-dark-theme is added to the editor iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. body. (60616)

Block Editor

  • Make sure the CSS class is-dark-theme is added to the editor iframe body. (60300)
  • Raw handling: Preserve class. (60331)
  • Raw handling: Preserve empty paragraphs. (59476)
  • Wiriting flow: Backspace at beginning of first paragraph block prevents block from being deleted. (56329)
  • DOM: Fix return types of focus.tabbable methods. (60274)

Components

  • CustomSelectControlV2: Fix hint behavior in legacy. (60183)
  • InputControl: Ignore IME events when isPressEnterToChange. (60090)
  • TextControl: Apply zero margin to input element. (60282)

Global Styles

  • Fix missing class for Global Styles > Colors. (60094)
  • Reset specificity of body selector when processing with postcss. (60266)
  • Shadow: Revert shadow default presets opt-in to opt-out. (60204)
  • Global Styles: Make strings translatable. (60127)
  • Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist. (60489)

Zoom Out

  • Fix zoom out mode toggling between pattern category selection. (60225)

Data Views

  • Fix focus outline visibility and truncation in data view record titles. (60191)

Layout

  • Fix horizontal flex layout in classic themes. (60154)

Post Editor

  • Editor: Memoize ‘getInsertionPoint’ selector. (60015)
  • Fix block toolbar dropdown separator color. (60336)
  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. r57868 (Editor: Prevent font folder naive filtering causing infinite loops) from WordPress-Develop. (60141)

Block templates

  • Add null check to prevent errors in get_block_template filter. (60491)

Utilities

  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Return early in getFilename where URL argument is falsy. (60265)

Accessibility

Data Views

  • Add click-to-select behavior on table rows. (59803)
  • Data views list layout: Apply focus styles to items on focus-visible rather than focus. (60253)
  • Update field display in grid layout. (60083)
  • Data Views: Updating keyboard navigation in list layouts. (59637)

Site Editor

  • Restore Style book close button tooltip. (60177)

Block Library

  • Remove CSS order property from social icons placeholder UI. (60032)

Performance

Block Editor

  • Avoid fetching all reusable blocks (user patterns) on post/site editor load. (58239)
  • Block editor: Optimize hasSelectedInnerBlock selector. (60330)
  • Templates performance: Resolve patterns server side. (60349)

Block Library

  • Template part: Avoid pattern fetch on mount. (60297)

Block Editor

  • Inserter: Cache search normalization results. (60080)
  • Format library: Improve unknown format performance. (48761)

Experiments

Site Editor

  • Zoom-out view: Disable canvas resizing. (60104)

Documentation

  • Add auto generated APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. documentation for editor package. (60356)
  • Add component props documentation. (60350)
  • Add php @global documentation. (59931)
  • Change heading level on troubleshooting section. (60233)
  • CustomSelectControlV2: Match v1 stories to test legacy component. (60182)
  • Docs (general): Fix some typos. (60260)
  • Fix @todo tags to follow standards in WordPress comments. (60148)
  • Fix Font Collection JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. schema definition. (60285)
  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. documentation link to load JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.. (60181)
  • Fix: Invalid links to the block supports api. (60199)
  • Fix: Non existent link to submitting to the block directory. (60389)
  • Interactivity API: Variable name correction in the documentation. (60056)
  • Create Block: Update external template documentation to include variants. (60095)

Code Quality

Block Editor

  • Add comment for unmemoized context. (60272)
  • Fix ESLint warning in BlockListBlock component. (60064)
  • RichText: Switch from disableEditing to standard html readonly attribute. (60327)
  • Site Editor: Reuse inserter search term normalization. (60218)
  • canInsertBlockType: Extract helper for selector dependants. (60235)
  • Fix editor canvas overflow on search results with position: Relative. (60287)
  • Editor: Move template areas to editor package. (60179)

Components

  • CustomSelectControlV2: Rename for consistency. (60178)
  • Navigator: Fix two nits. (60273)
  • NavigatorProvider: Move all state management to one reducer. (60190)
  • Components: Try obviating Popover pointer event trap. (59449)

Post Editor

  • Memoize the getTemplateInfo selector. (60200)
  • Update: Remove template summary component. (60351)
  • Update: Use getPostIcon selector on document bar. (60128)
  • Distraction free: Remove unwanted space from string. (60108)

Global Styles

  • Additional CSS: Add code comments contextualising tranformStyles for clarity. (60267)
  • Global styles: output :root selector for CSS custom properties. (42084)
  • Style Engine: Continue get_classnames loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. after adding the default classname. (60153)

Font Library

  • Add test for Font Library and Theme Style Variations. (60250)
  • Update google fonts font collection data URL to the latest version available. (60079)

Block Library

  • Image: Use the new ‘useUploadMediaFromBlobURL’ hook. (60208)
  • Navigation Block: Add test coverage to check that post content is not removed. (60189)

Site Editor

  • DataViews: Don’t memoize every callback ‘PagePages’ component. (60103)
  • History: Simplify the push and replace methods. (60112)

Rich Text

  • RichText: Separate fallback instance ID for selection retrieval. (60277)

Block Locking

  • E2E: Test BlockSwitcher availability in l-post-ul-group CPT. (60254)

Data Views

  • DataViews: Fix reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning error in list layout. (60101)

Tools

Testing

  • Automated Testing: Remove Puppeteer CI Job. (59311)
  • CustomSelectControlV2: Stabilize tests. (60133)
  • E2E: Fix flaky Site Editor pages end-to-end test. (60109)
  • Font Library: Add upload font test. (60221)

Build Tooling

  • Blocks: Fix double gutenberg_ prefix in built dynamic blocks PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60288)

First-time contributors

The following PRs were merged by first-time contributors 🎉 :

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @artemiomorales @bph @draganescu @ellatrix @fabiankaegy @geriux @getdave @glendaviesnz @interdevel @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @mikachan @mikeybinns @mirka @mujuonly @n2erjo00 @nirav7707 @noisysocks @ntsekouras @oandregal @ockham @okmttdhr @pedro-mendonca @peterwilsoncc @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @Soean @steveariss @stokesman @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad

Props to @andrewserong, @isabel_brison and @saxonf for assisting with the preparation of this post.

#gutenberg, #gutenberg-new