What’s new in Gutenberg 15.7? (03 May)

“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)

What's new in Gutenberg 15.7 cover image

Gutenberg 15.7  has been released and is available for download!

For the latest release 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, contributors continued improvements to existing UIUI User interface and UXUX User experience for content creators, site owners working on their own site, or theme developers creating new themes. Users will find small changes for streamlined workflows, fixed bugs, and refined responsiveness, just to name a few. The release includes 142 PRs by 62 contributors, of which 8 merged their first contributions. Congratulations to all.

Table of contents

Site Logo replacement via 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.

Site Logo update image workflow in sidebar

To continue the quest of streamlining creator workflows, the Site Logo 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. now offers a direct way to replace the logo in the sidebar for the block. It might seem like a minor feature, but managing a site’s branding identity warrants an easy and intuitive process. (49992)

Duotone 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. controls in block sidebar

Duotone / filter in the sidebar

Speaking of streamlining workflows:  Duotone is a fascinating feature for the block editor. The controls for using the preset filters or creating custom filters were hidden via the Block Toolbar. Now all controls are available with the style settings in the sidebar and allow designers and content creators easier access. (49838)

Fluid Typography scales giant fonts to small screens

Fluid typography scaled

While fluid typography arrived with WordPress 6.0, users and designers had problems with large custom fonts. The previous fluid calculation didn’t scale down enough for smaller screens. In this Gutenberg plugin release, a more refined handling of fluid typography arrived using the logarithmic scale factor to calculate a minimum font size for smaller screens. With reliable scaling calculations, designers have more typographical freedom and can better rely on the built-in responsiveness of their designs. (49707)

Other Notable Highlights

Images that have custom borders assigned show those borders also in their placeholder, for instance, in archive post templates. That way, a site owner has an indicator of what colors are involved, and it makes it less haphazard when selecting featured images for their posts. (49569

Also, the Top toolbar behavior received some refinements that received mixed comments from contributors. It’ll be interesting to learn how site owners and content creators feel about these changes. (49634). 

Patterns show up in a masonry layout in a new full-screen modal that also received some refinement. (49958, 49894). The List View experienced some important refactoring to improve 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) for assistive technologies. (48461)

Changelog

Enhancements

Block Library

  • Group: Add allowedBlocks attribute and pass it to innerBlockProps. (49128)
  • Media & Text: Add allowedBlocks attribute and pass it to innerBlock. (49981)
  • Site Logo: Add logo replace flow in Inspector controls. (49992)

Global Styles

  • Fluid typography: Use logarithmic scale factor to calculate a min font size. (49707)
  • Style book: Make the style book slot generic. (49973)
  • Base Styles: Add the editor input reset with increased specificity. (49831)

Components

  • Draggable: Allow elementId based elements to be attached to the ownerDocument body. (49911)
  • Spinner: Enforce no background. (49695)
  • Updates the behavior of the top toolbar fixed setting. (49634)

Design Tools

  • Image: Display custom borders on placeholder. (49569)
  • Patterns: Try a masonry layout on the template pattern suggestion modal. (49958)

Duotone

  • Duotone: Add block controls on the inspector. (49838)
  • Duotone: Fix setup state for image block. (49949)
  • Polish duotone rendering code. (49706)
  • Deprecate remaining global duotone functions. (49702)
  • Group duotone outputs and refactor rendering. (49705)

Accessibility

  • List view: Refactor ARIA attributes. (48461)
  • Block Mover: Make text labels for left/right move buttons legible. (49747)
  • Block Toolbar: Fix incorrect switcher button width in text mode. (49847)
  • Snackbar: Fix insufficient color contrast on hover. (49682)
  • Update Reakit dep to 1.3.11. (49763)
  • List View: Add aria-description. (49907)

Bug Fixes

Block Library

  • Cover block: Remove overflow hidden rule. (49913)
  • Fix BlockInfo slot displaying logic. (50054)
  • Fix block toolbar height and rounded corners of parent selector button when text label mode. (49556)
  • Demo content cover block alignment not respected. (49848)
  • Group block: Remove innerprops from placeholder wrapper. (49783)
  • Only display the modified post date if the post has been modified. (46839)
  • 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.: Fix crash at runtime when postType is undefined. (49899)
  • 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.: Fix some sizing issues. (49641)
  • Adjust copy of Site Logo Block. (49540)
  • Adapt flex child controls for Spacer. (49362)
  • Social Icon: Update the link and mail block variation’s icons. (49952)

Components

  • CheckboxControl: Add support custom IDs. (49977)
  • Equalize modal internal padding. (49890)
  • Increase modal radius. (49870)
  • Query: Fix add new post link position via private SlotFill. (49819)
  • Tweak WordPressComponent type. (49960)
  • Update the framer motion dependency to the latest version. (49822)
  • Improve output of CHANGELOG CI check. (49779)
  • Retain context when opening modals on small screens. (50039)
  • Update CHANGELOG CI check to support forked repos. (49906)

Global Styles

  • Borders: Fix border style on color/width clearing and global styles fallback logic. (49738)
  • Borders: Maintain radius in Global Styles. (49950)
  • Close stylebook if the global styles side bar is not open. (50081)
  • Do not add unregistered style variations to the 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. schema. (49807)
  • Update preset styles to use Selectors 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.. (49427)
  • Change the ‘WP_Theme_JSON_Data_Gutenberg’ class directory. (50062)

Site Editor

  • Fix screen flash when deleting templates in templates list. (48449)
  • Fix the condition for the modal to choose the initial template pattern. (49954)
  • Fix editor crash caused by missing type conversion in EditorStyles component. (49882)
  • Remove frame shadow in edit view. (49767)
  • Add home to list of new templates. (47389)
  • Animate the site icon element between view and edit in the site editor. (48886)
  • Restore click event handler on site icon button. (50094)
  • Correctly return ‘isResolving’ from ‘useAlternativeTemplateParts’ hook. (49921)

Patterns

  • Increase dimensions of the pattern modal that appears when creating a new page. (49859)
  • Update full screen modal dimensions, and pattern grids. (49894)
  • Increase pattern modal dimensions when creating a new template. (49722)

List View

  • Add parameters to custom-scrollbars-on-hover. (49892)
  • Update with scrolling and custom scrollbar. (49793)
  • Ensure list view block id is unique to the list view instance. (49944)

Block Editor

  • Fix quick inserter going off-screen in some situations. (49881)
  • List View: Update drop indicator width to be aware of scroll containers. (49786)
  • Block highlight: Fix radius issue. (49864)
  • DOM: Update getScrollContainer to be aware of horizontal scroll. (49787)
  • Fix fixed block toolbar positioning. (49990)
  • 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.: Add enqueue_block_assets. (49655)
  • Rename immutableSet to setImmutably. (50040)
  • Edit Post: Hide overflowing content in visual editor wrapper to prevent block popovers from creating scrollbars. (49978)

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/.

  • Replace fallbacks to fallback (singular) in Nav fallback REST endpoint. (50044)
  • Consolidate Navigation fallbacks logic between Editor and Front of Site via REST API. (48698)
  • Add /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. endpoint for global styles. (49974)

Build Tooling

  • Fix multiple tooltips showing on NavigableToolbars. (49644)
  • Add –env-cwd Option To wp-env run. (49908) – Add Port To WP_TESTS_DOMAIN. (49883)
  • Add support in check-license for conjunctive (AND) licenses. (46801)

Performance

Continued the work refactor away from Lodash usages to reduce the build size
49799, 49794, 49755

Experiments

  • Allow adding posts and pages with custom titles from the command menu. (49893)
  • Update the design of the command center. (49681)

Documentation

  • Adds closing code tags. (49991)
  • Add “block-selectors” documentation to TOC and manifest. (49471)
  • Adds note about custom fields to Plugin Sidebar page in documentation. (49622)
  • Autocomplete: Add heading and fix type for onReplace in README. (49798)
  • Document the separation between private APIs and experimental APIs. (47973)
  • Fix broken link and update title of Localizing Gutenberg doc. (49851)
  • Fixes broken img link. (49805)
  • Need to use WordPress package for useState. (49478)
  • Remove unused screenshot from documentation folder. (49896)
  • Small grammar fixes for block-context.md. (49701)
  • Update IS_GUTENBERG_PLUGIN to process.env.IS_GUTENBERG_PLUGIN in coding guidelines. (49825)
  • Fixes typo in README. (49957)
  • Update README.md. (49762)
  • Update README.md. (49855)
  • Update outreach.md. (49961)
  • Update wp-env prereq documentation. (50004)
  • Formatting inside alert div. (50090)

Theme.json

  • Add documentation for variations key in theme.json. (49826)
  • Update theme.json reference documentation to include more sections. (48250)

Gutenberg Plugin release

  • Update the Gutenberg release issue template to reflect the new Gutenberg release team. (50037)
  • Update Gutenberg release documentation to include the new Gutenberg Release Team. (50036)
  • Fix broken link and minor tweaks to formatting and verbiage in the Gutenberg Release Process doc. (49876)
  • Update release checklist. (50068)

Block Development

  • Improve the learning experience for writing blocks. (49792)
  • Re-write of the landing page. (49643)
  • Improve insertBlock(s) documentation. (50078)
  • Small Typo: Remove dots. (49853)

Code Quality

  • Fix PrivateInserter import. (50038)
  • Remove the normalizeFalsyValue util. (50033)
  • Don’t programmatically lowercase post type label. (49591)
  • Port colord to PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (49700)
  • Reuse cleanEmptyObject utility and fix empty string case. (49750)
  • toStyles: Don’t mutate the tree argument. (49806)
  • useInstanceId: Fix useMemo hook dependencies. (49979)

Tools

Testing

  • Components: Update ColorPicker unit tests. (49698)
  • Migrate CPT end-to-end tests to Playwright. (50031)
  • Fonts API: Add tests for gutenberg_add_registered_fonts_to_theme_json(). (50049)
  • Expand multi-line block tests. (49732)
  • Rich text test helpers mimic user events. (49804)
  • Fix editor canvas detaching error in end-to-end tests. (49374)

Build Tooling

  • Add script which checks published types for non-checked JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. packages. (49736)
  • Docgen: Fix issue where function token can’t be found. (49812)
  • Publish build types for notices. (49650)
  • Publish types for plugins package. (49649)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @ajlende @alexstine @andrewserong @annziel @aurooba @bdurette @bph @carolinan @chad1008 @chintu51 @courtneyr-dev @dcalhoun  @derekblank  @draganescu  @ellatrix  @fluiddot @gaambo @geriux @getdave @gigitux @guarani @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanmaguitar @kevin940726 @m0hanraj @MaggieCabrera @MahendraBishnoi29 @Mamaduka @masteradhoc @mburridge @mcsf @mikachan @mirka @mokagio @mtias @ndiego @noahtallen @ntsekouras @oandregal @ObliviousHarmony @priethor @ramonjd @scruffian @SiobhyB @Soean @sque89 @t-hamano @talldan @tellthemachines @tyrann0us @tyxla @Wtower @youknowriad @zzap


Props to @priethor @annezazu @nickdiego for review

#gutenberg-new