Birgit Pauli-Haack 6:23 pm on April 19, 2023
Tags: , , ,   

What’s new in Gutenberg 15.6? (19 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 Site Editor project (formerly called Full Site Editing).

Gutenberg release graphic 15.6


Gutenberg 15.6 has been released and is available for download! 

The latest version of the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party includes small quality of life enhancements and many 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. The new experimental Details 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. is introduced early for community feedback, and more presets come to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks for spacing and border controls. In the Site Editor, a theme’s style variations are now also available in the left 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. to enable faster updates. Gutenberg 15.6 includes a total of 112 PRs, authored by 45 contributors, 7 of which were new contributors!

Details block, experimental

The new Details block 


Occasionally, you want to hide content until the reader is ready to receive it. This could be spoiler content in a movie review, the transcript of a podcast episode, or a video recording in a blogblog (versus network, site) post. With the new Details block, you can now publish hidden content that opens with a click on the arrow. It’s the first version of the block, and it is behind an experimental feature flag. To test this new functionality, visit Gutenberg → Experiments screen in the WordPress adminadmin (and super admin) and enable the Details block option. This block is still being worked on, and it might change before coming out of experiments. Feedback is encouraged.

Spacer Block gets spacing presets

Spacer Block with presents


Spacing presets were added to Dimension controls in WordPress 6.1 to make controlling space in a theme easier and provide a simplified user experience. This functionality also allows theme developers to employ fluid spacing. 

Since the introduction of spacing presets, it became clear from community feedback that spacing presets should also be available for the Height control in the Spacer block. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. in 15.6 gives theme developers much more flexibility over how spacing is applied throughout a site and enables fluid Spacer blocks! 

Here’s a quick example of what fluid spacing presets might look like when defined in theme.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. using clamp(). You can learn more about fluid spacing and typography in the article Intrinsic design, theming, and rethinking how to design with WordPress over on the WordPress Developer Blog.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"spacing": {
			"spacingScale": {
				"steps": 0
			},
			"spacingSizes": [
				{
					"size": "clamp(1.5rem, 5vw, 2rem)",
					"slug": "30",
					"name": "1"
				},
				{
					"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
					"slug": "40",
					"name": "2"
				},
				{
					"size": "clamp(2.5rem, 8vw, 4.5rem)",
					"slug": "50",
					"name": "3"
				}
			]
		}
	}
}

Style variations in browse mode


With Gutenberg 15.6, the theme’s style variations are now accessible from the left menu in the Site Editor, together with templates, template parts, and navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. items. This change makes it easier to access style variations and pick your favorite. Clicking “Edit style” opens the editor with the Styles panel active, providing quick access to the additional style controls like typography and color.

Other notable highlights

With 15.6, the Cover block includes all border-related design tools. This was a much-requested enhancement by theme developers, which reduces the need for custom block styling.  

Now, when the Global Styles panel is open in the Site Editor, clicking on any block in the canvas will automatically open the design tools for the corresponding block in the Styles panel. This enhancement will help speed up your workflow and provide fast access to design tools.

Three more visual inconsistencies were smoothened. The visualizer that shows padding and margin changes around blocks now works consistently for larger numbers. In the List View, you can now successfully drop blocks below a Group block, and the Drop Zone in the canvas now has smoother animation. 

Changelog

Enhancements

Block Library

  • A margin option is added to the Embedded preview block. (39384)
  • Add blockGap as a default control on Columns/Column blocks. (49526)
  • Add color tools to the Time to Read block. (49496)
  • Add spacing presets to the Spacer block. (44002)
  • Cover: Add border support using ResizableBox via BlockPopover. (41153)

Block Editor

  • Add support for hiding breadcrumbs in the Site Editor. (49518)
  • Hide page list on single page list menus. (48725)
  • Small improvements for the Document Overview labeling. (49555)
  • Add a rootClientId prop. (49475)

Global Styles

  • Add styles section to the browse mode sidebar. (49014)
  • Show child layout controls by default. (49389)

Components

  • Global Styles: Link to the block type panel when selecting a block with Styles open. (49350)
  • TreeSelect: Remove margin overrides and add new opt-in prop. (47515)
  • Update media and video icons. (49523)

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)

  • Add missing focus style to start template options previews. (49334)
  • Consistent labels for the WP logo and back links. (49659)

Experiments

  • Add a command center to the site editor. (49330)
  • Add Details/summary block. (45055)

Bug Fixes

Block Library

  • Columns: Prevent removal of locked columns from the column count change UIUI User interface. (49530)
  • Cover:
    • Fixed background causes image to be zoomed in on Safari browser on iPad. (48981)
    • Fix integration tests for ResizableBox via BlockPopover. (49497)
    • Merge block and global styles. (49434)
  • Navigation:
    • Fix exhaustive deps warning. (49291)
    • Fix fallback not rendering. (49576)
  • Image block: Fix image size control percentage selection. (49628)
  • Post 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.:
    • Don’t display the scale control when the aspect ratio is original. (48894)
    • Show all controls when in context without postId. (49609)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Ensure the postId from the block context is used to get_the_excerpt. (49495)
  • ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.: Prevent external styling of editing UI. (49723)
  • Time To Read: Fix untranslated on the front end. (49704)
  • Avoid empty Gallery block error. (49557)

Site Editor

  • Decode the site title properly. (49685)
  • Show UI to update custom links on the sidebar navigation. (48939)
  • Navigate to editor when clicking Edit in a template part. (49604)
  • Update the template title in the details panel. (49487)
  • Use the keyboard shortcuts package for the command center. (49680)
  • Fix the site editor loading in multi-site installs. (49861)

Global Styles

  • Block Level Settings: Remove WP filters in Gutenberg. (49598)
  • Border Panel: Move global styles forcing of split borders to relevant panel’s onChange. (49603)
  • Remove the pointer cursor on the style variation preview. (49573)
  • Style Variation Picker: Restore pointer cursor when withHover is in use. (49596)

Block Editor

  • DropZone: Smooth animation. (49517)
  • List View: Allow dragging underneath collapsed non-empty container blocks. (49390)
  • List View: Update drop indicator line to be 4px high with a white border. (49462)
  • Tweak remove block label to make it simpler. (49529)
  • Fix redirected links to user documents. (49537)
  • Make InspectorControls tab labels translatable. (49665)
  • Update redirected support link. (49533)
  • Reusable Block: RTL styles don’t get added to the wp-reusable-blocks stylesheet. (49632)
  • Fix padding and margin visualizer accuracy. (49422)

Layout

  • Only show alignment info when parent layout is constrained. (49703)
  • Try reducing the specificity of layout margin rules. (47858)

Post Editor

  • Allow root padding setting to affect padding of post title. (49460)
  • Try fixing post editor layout for wide/full Post Content blocks. (49565)
  • Allow horizontal scroll in panels in the post editor. (49611)

Components

  • Fix inbetween-inserter position in RTL languages. (49683)
  • Update Edit icon to be more consistent with other icons. (49512)
  • Update search icon to be optically more balanced. (49425)
  • Update some icons to address aliasing on high-res screens. (49381)

Performance

Documentation

  • Add section about integration testing to testing documentation. (49454)
  • Add some documentation about the Styles UI components. (49720)
  • Fix Create a Block Tutorial link on blocks package README.md. (49562)
  • Fix end-to-end command typos. (49669)
  • Fix line break issue in Schemas and Content Models section. (44768)
  • Fixes some typos. (49472)
  • getBlockOrder() – use core/block-editor instead of core/editor. (49474)
  • Fix Xcode spelling across the codebase. (49625)
  • Remove the documentation for Playwright configuration override. (49660)
  • Streamlining the New Release Issue Template. (49618)
  • Update components package’s CHANGELOG. (49586)
  • Update documentation for setGroupingBlockName. (49670)

Code Quality

Components

  • Ship TypeScript types. (49229)
  • Simplify CustomGradientPicker’s utility props. (49588)

Global Styles

  • Refactor the effects panel as a generic UI Styles component. (49571)
  • Refactor the filters (duotone) panel as a generic UI Styles component. (49577)

Block Library

  • Add automated tests for Nav block editable list view. (49433)
  • Cover: Avoid adding empty background image URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (49477)
  • Remove editor block styles leftovers. (49567)

Site Editor

  • Remove unused keyboard shortcut registration code. (49553)
  • Fix Site Editor isFeatureActive deprecation. (49545)

Tools

Testing

  • Add tests for some of the drag and drop logic. (49631)
  • Adds to gitignore a playwright.config.override.ts entry. (49329)
  • Cover block: Fix failing test. (49455)
  • Workflows: Run PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher unit tests also against current WP – 1. (46983)
  • e2e: Fix flaky columns test. (49676)
  • test: Add Writing Flow tests. (49352)

Build Tooling

  • Add workflow to check for expected wordpress/components CHANGELOG updates. (49443)
  • Docgen: Replace line breaks with spaces and remove line-ending hyphens. (49635)
  • Convert wp data controls to typescript. (49647)

First time contributors

The following PRs were merged by first time contributors:

  • @cawa-93: List View: Allow horizontal scroll in panels in the post editor. (49611)
  • @DustyReagan: Cover Block: Fixed background causes image to be zoomed in on Safari browser on iPad. (48981)
  • @eduwass: Docs: Fix end-to-end command typos. (49669)
  • @HILAYTRIVEDI: A margin option is added to the Embeded preview block. (39384)
  • @mokagio: Fix Xcode spelling across the codebase. (49625)
  • @nefeline: Post excerpt > Ensure the postId from the block context is used to get_the_excerpt. (49495)
  • @thealexandrelara: Docs: Fix Create a Block Tutorial link on blocks package README.md. (49562)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @aristath @aurooba @brookewp @carolinan @cawa-93 @chad1008 @ciampo @dcalhoun @derekblank @draganescu @DustyReagan @eduwass @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @HILAYTRIVEDI @imanish003 @jameskoster @jasmussen @jhnstn @jorgefilipecosta @Mamaduka @mirka @mokagio @nefeline @noahtallen @ntsekouras @ockham @ramonjd @richtabor @ryanwelcher @SavPhill @scruffian @Soean @t-hamano @talldan @tellthemachines @thealexandrelara @tyxla @youknowriad

Props to @ndiego for co-release leadRelease Lead The community member ultimately responsible for the Release., @joen for visuals assets @priethor, @rich, @annezazu for peer-review

#block-editor, #core-editor, #gutenberg, #gutenberg-new