Tag Archives: block-editor

Carlos Bravo 3:45 pm on May 31, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 15.9? (31 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.9 sentence. Half in blue, half in white with a dark background.

Gutenberg 15.9 has been released and is available for download!

This release includes 171 PRs from 56 contributors, and includes several exciting features such as an improved Site Editor user experience and a new command tool with a pending name.

Command tool (name TBD)

You can now use the new Command tool feature!

To access it, simply open the Site Editor and use the keyboard shortcut Cmd+k on Mac or Ctrl+k on Windows. Once opened, you will discover a range of commands that enable swift navigation, content creation, and more.

You can also add your own commands to the interface, the documentation is available here.

Your feedback is vital in helping us refine and improve the Command tool. We have a feedback request available on the Make blog, and we would greatly appreciate any input you can provide.

Command tool shown on the Site Editor.

Enhancements to the Site Editor Experience

The Site Editor has been updated with features that improve the user experience:

Preview at any size

You now have the ability to resize your site editor, allowing you to preview how it will appear on smaller screens such as mobile devices.

Improved Drag and Drop

When moving blocks, you will now see a visual cue that clearly indicates where the 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. will be dropped, particularly in empty groups. 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. streamlines the process, making it easier and more intuitive to rearrange your site’s layout.

Site view improvements

You can now access style variations and all navigation menus of your site within this mode. This enhancement simplifies the process of switching between different styles and menus, offering a more convenient interface for making such adjustments.

Other Notable Highlights

There are some improvements too that are worthy to mention like:

  • An 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. that allows inserter items to be prioritized. (50510)
  • 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) through arrow keys is better in some input types. (43667)
  • Keyboard focus improvements for accessibility. (50384, 50349, 50577, 50785)

Not to mention all the bugs fixed that you can check in the changelog below.

Changelog

Enhancements

Block Library

  • Add block variations transformation in block switcher. (50139)
  • Code block: Add wide align support. (50710)
  • Post Title edit: Adjust the logic, so it avoids unnecessary OPTIONS requests. (49839)
  • Pattern block: Add experimental flag and syncStatus attrib to allow testing of partial syncing. (50533)
  • Pattern block: Add slug as classname to pattern block wrapper. (50641)
  • Removes the Post Content block from the inserter in the post editor. (50620)
  • Navigation: Handle empty menus in Navigation Browse Mode. (50870)
  • Navigation: browse mode list all Navigation Menus. (50840)
  • Navigation: remove all edit functionality in Browse Mode. (50788)
  • Navigation: Use the ListView in the Navigation block inspector controls. (49417)
  • Navigation: Respect showAppender when there are no items in list view. (50711)

Command tool

  • Command tool available without the experimental flag. (50781)
  • Add contextual commands. (50543)
  • Marks the commands APIs as public. (50691)
  • Update the document title in the site editor to open the command tool. (50369)

Components

  • Add an outline when the color picker select box is focused. (50609)
  • Button: Update disabled state to be without background. (50496)
  • Update tooltip colors. (50792)

Site Editor

  • Editor canvas container: Include resizeable 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. in component. (50682)
  • Snackbar: Make sure only one template deleted displays at once. (50625)
  • Snackbar: Simplify the template revert. (50626)
    (#50369))
  • Update the add template menu. (50595)
  • Browse Mode: Add snackbar notices. (50794)
  • Site Editor navigation: Add corresponding area icon to template part menu items. (50791)
  • Update frame resizing. (49910)
  • Always show the Styles navigation item. (50573)
  • Sort template parts by type in navigation screen. (50841)
  • Site editor: Update custom post types with _edit_link. (50563)

Interactivity API

  • Image: Add lightbox using directives. (50373)
  • File: Add experimental integration with Interactivity API. (50377)
  • Support negation operator in selectors. (50732)

Block Editor

  • Add lang and dir attributes to text-formatting tools. (49985)
  • Use bdo element when defining the language of some text. (50632)
  • Block inserter: Improve alignment of block inserter search and close icons. (50439)
  • Show visual cue when dragging over empty group block. (50826)
  • Add ability to prevent editing blocks using useBlockEditingMode(). (50643)
  • Remove unwrap from transforms and add ungroup to more blocks. (50385)
  • Add new API to allow inserter items to be prioritised. (50510)
  • Integrate prioritizedInserterBlocks API to slash inserter. (50658)

Global Styles

  • Custom CSSCSS Cascading Style Sheets.: Force display of in custom css input boxes to LTR. (50768)
  • Styles Navigation Screen: Add Style Book. (50566)

Data Layer

  • Data: Improve hasResolvingSelectors redux metadata selector. (50865)

List View

  • Remove fade in/out animation for block settings menu icon button. (50823)

Full Site Editing

  • Template editing: Improve revert notices. (50302)
  • Template pattern modal: Remove internal modal classnames. (50655)
  • Library: Rename template parts to library. (50769)

Accessibility

  • Modals: Update the Cancel action’s button design. (50544)
  • Writing flow: Improve keyboard navigation on certain input types. (43667)

Icons

  • Add new HeadingLevel icons. (50856)
  • Smaller external link icon. (50728)

Bug Fixes

Block Library

  • Ensure multiple pattern blocks with the same slug each create unique blocks. (50629)
  • Fix inconsistent Link UIUI User interface in Nav block list view editor. (50774)
  • Pattern block: Update frontend render code to match the new version of syncStatus attrib. (50646)
  • Revert “Browse Mode: Add snackbar notices (#50794)”. (50937)
  • Update rel and title labels for navigation and submenu links. (50214)
  • Social Link: Remove block on DELETE if empty URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (50903)
  • Social Link: Add color classes so icon colors correctly reflect changes in Global Styles. (51020)
  • Navigation: Duplicate LeafMoreMenu into the navigation block and the global 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. navigation. (50489)
  • Post Comments From: Prevent hidden input fields from being focusable in Safari. (50834)
  • Image: Improve the image block lightbox translations, labelling, and escaping. (50962)

Accessibility

  • Fix Multiple Tooltips from Focus Toolbar Shortcut on Site Editor. (50349)
  • Fix accessibility issues navigation block experiment. (50786)
  • Fix accessibility of the Classic block modal dialog. (50384)
  • Fix labelling, description, and focus style of the block transform to pattern previews. (50577)
  • ToggleGroupControl: Fix focus and selected style to support Windows High Contrast mode. (50785)

Global Styles

  • Add back the global styles logic that forces the solid border when color or width applied. (50498)
  • Dimensions Panel: Fix resetting of axial spacing controls. (50654)
  • Global Styles: Enable deep linking to the selected block only in the Blocks screen. (50708)
  • Global styles 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.: Highlight currently-loaded revision. (50725)
  • Better error message when 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. styles use a duotone preset not in settings. (50714)
  • Fix custom duotone filters in frontend. (50678)

Commands Tool

  • Commands Tool: Fix contextual commands selectors. (50829)
  • Commands Tool: Add searchLabel property to commands. (50663)

Components

  • Add transparent outline to input control BackdropUI focus style. (50772)
  • Update border and focus style of the Input selector in ColorPicker Component. (50703)

Site Editor

  • Fix custom template creation regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (50797)
  • Remove the loader from sidebar navigation screen. (50326)
  • Update site editor sidebar alignment. (50561)
  • Fix useEditedEntityRecord() loading state. (50730)
  • Fix width of Template Parts view. (50836)
  • Process template part shortcodes before blocks. (50801)
  • Convert device type margin styles into non-shorthand syntax. (50441)
  • Browse mode Navigation: Fix broken submenu items. (50551)

Inspector Controls

  • Template revisions: Require 2 revisions before showing the revisions UI. (50762)

Block Editor

  • List block: Fix merging nested list into paragraph. (50634)
  • Add grab cursor style for Block mover drag handle button. (50808)
  • Fix gutenberg_get_block_editor_settings overriding other hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (50760)
  • Iframe: Use src instead of srcDoc. (50875)
  • Don’t use global ‘select’ in the Behaviors controls component. (51028)
  • Lightbox UI appearing with interactivity experiment disabled. (51025)
  • Move “No Behaviors” to be the first option in the list of behaviors. (50979)
  • Revert “Browse Mode: Add snackbar notices. (50937)

Rich Text

  • File block: Fix editing of empty file name. (50607)

List View

  • Ensure settings menu is visible when focused. (50572)

Layout

  • Navigation: Fix warning when stretch justification is used. (50568)

Tests

  • Fix release performance tests. (50699)

Patterns

  • Library: Revert description change until new grid view lands. (51039)

Performance

Block Library

  • Nav block: Improve loading UXUX User experience by preloading 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. requests. (48683)
  • Inner blocks: Reduce tree depth to improve performance. (50447)

Site Editor

  • Edit Site: Optimize loading useSelect call. (50546)

Experiments

Components

  • Add new experimental version of DropdownMenu. (49473)
  • Behaviors UI. (49972)

Documentation

  • Add link for more details about block variations’ example. (50909)
  • Components: Back-add changelog for TypeScript types. (50881)
  • Add parent and experimental status to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block reference. (48269)
  • Fix syntax highlighting of curating the editor experience guide. (50902)
  • Minor updates to theme.json schema pages. (50742)
  • Update PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher docblockdocblock (phpdoc, xref, inline docs) for WP_Theme_JSON_Gutenberg::Get_property_value. (50527)
  • Mobile app: Fix change log typo. (50737)
  • Icons: Update README.md to include a link to the documentation. (50606)

Code Quality

Block Library

  • Cover: Unlock private APIs outside of the component. (50686)
  • Fix column block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (46048)
  • Freeform: Move modal styles to the correct file. (50858)
  • Navigation: Remove the check for draft navigation menus from the UnsavedInnerBlocks component. (49161)
  • Navigation: Unlock private APIs outside of the component. (50509)
  • Remove OffCanvasEditor. (50705)
  • Comments: Replace get_comments() with get_comments_number(). (50798)
  • Lodash: Remove from Gallery block. (50591)
  • Lodash: Remove from Image block. (50592)
  • Lodash: Remove from Latest Posts block. (50593)
  • Lodash: Remove from Media & Text block. (50587)
  • Lodash: Remove from template part block. (50586)
  • Lodash: Remove unnecessary mock from Buttons tests. (50588)

Block Editor

  • Block Editor: Remove unused ‘useIsDimensionsSupportValid’ method. (50735)
  • Block styles: Remove unused prop from inserter preview component. (50622)

Post Editor

  • Edit Post: Unlock useShouldContextualToolbarShow outside of the component. (50612)
  • FlatTermSelector: Fix the ‘useSelect’ missing dependency. (50872)

Site Editor

  • Use the keyboard shortcuts package for the title bar. (50873)
  • Simplify variation selectors. (50687)
  • Unlock private APIs outside of the component. (50534)
  • Remove unused ‘NavigateToLink’ component. (50908)
  • Move gutenberg_get_remote_theme_patterns. (50597)

Interactivity API

  • Polish experimental navigation block. (50670)

Components

  • DropdownMenu: Refactor to TypeScript. (50187)

npm Packages

  • chore: Update memize to v2. (50172)

Global Styles

  • Global styles revisions: Remove unused private var. (50763)
  • Introduce prepend_to_selector() to avoid additional if checks and follow single responsibility principle. (50266)
  • Move gutenberg_get_global_styles function. (50596)

Tools

Testing

  • Combine frontend navigation Page list block tests into one test to speed up end-to-end tests. (50681)
  • Command center: Enable end-to-end tests. (50833)
  • Create pages before navigation tests requiring link control to find page results. (50680)
  • Enable iframe-inline-styles end-to-end test. (50548)
  • Fix coding-standards issues. (50656)
  • Fix flaky media inserter drag-and-dropping end-to-end test. (50740)
  • Fix flaky template revert end-to-end tests. (50851)
  • In CI, verify that PHPunit is actually running. (50442)
  • Migrate Cover Block tests to Playwright. (45784)
  • Remove redundant calls to disable the Styles welcome guide. (50871)
  • Remove unintentionally added test artifact. (50795)
  • Revert “Enqueue the registered assets (#50185)”. (50537)
  • Mobile – end-to-end test – Update code to use the new navigateUp helper. (50736)
  • Playwright Utils: Use ‘set’ to disable the Styles welcome guide. (50852)

Build Tooling

  • DateTime: Remove deprecated props (and fix static analysis action in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.). (50724)
  • Update runtime test field in WebPack configuration to support Windows. (50727)
  • Removed gutenberg Directory Name Expectation. (50894)
  • Reworked run Command Parsing. (50559)

wp-env

  • Add t-hamano as codeowner for env package. (50817)
  • Check .wp-env.json For Unknown Options. (50642)
  • Expanded wp-env Lifecycle Scripts. (50570)
  • Fixed wp-env start On Windows. (50895)
  • Add @ObliviousHarmony to wp-env codeowners. (50530)

First time contributors

The following PRs were merged by first time contributors:

  • @bacoords: Update README.md to include a link to the documentation. (50606)
  • @falgunihdesai: Update border and focus style of the Input selector in ColorPicker Component. (50703)
  • @kmanijak: Adjust the logic of Post Title edit, so it avoids unnecessary OPTIONS requests. (49839)
  • @kutsu: Add grab cursor style for Block mover drag handle button. (50808)
  • @megane9988: Add an outline when the color picker select box is focused. (50609)
  • @SaxonF: Update site editor sidebar alignment. (50561)
  • @worldomonation: Migrate Cover Block tests to Playwright. (45784)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @andrewserong @antpb @aristath @artemiomorales @bacoords @carolinan @chad1008 @ciampo @dcalhoun @derekblank @ellatrix @fabiankaegy @falgunihdesai @felixarntz @fluiddot @geriux @getdave @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @juanfra @kevin940726 @kmanijak @kutsu123 @MaggieCabrera @Mamaduka @mboynes @mburridge @megane9988 @michalczaplinski @mirka @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ramonjd @richtabor @samnajian @SantosGuillamot @SaxonF @scruffian @shimotmk @SiobhyB @t-hamano @talldan @tyxla @worldomonation @WunderBart @youknowriad

Props to @joen for visuals assets, @ramonopoly, @priethor, @rmartinezduque and @annezazu for peer-review

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

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

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

Justin Tadlock 4:42 pm on April 5, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 15.5? (05 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).

Decorative image that reads: "What's new in Gutenberg 15.5"

Gutenberg 15.5 has been released and is available for download!

The latest release brings many user-facing features to improve the creation experience, such as caption styles customization and theme-defined template patterns when adding a new template. Theme creators should enjoy testing the experimental grid layout and template locking support for the Columns 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.. There are many features to cover in this release, so let’s dive right in.

Table of contents

Patterns as template starters

Gutenberg 14.9 added template types support to the Patterns 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.. However, this was only an under-the-hood change, laying the groundwork for future iterations. Version 15.2 introduced a new modal when adding new templates in the Site Editor for users. It only provided two choices: to use a fallback template or start from a blank slate.

In the latest release, those two concepts have been merged to allow users to build a new template from theme-registered template patterns. Theme authors can register custom patterns meant for specific template types (e.g., single post, 404, etc.), and they will appear in the start modal.

WordPress site editor when creating a new 404 template. It shows a grid of patterns to select from.

Style captions via the Styles interface

For a while now, theme authors have been able to create custom styles for <caption> elements directly via theme.json. The latest Gutenberg update brings those design options to the Styles interface, allowing creators and users to customize captions without touching code.

Two images of architecture with captions on the right. To the left is the Styles interface for configuring caption styles.

Experimental grid layout support

Gutenberg 15.5 introduces a new grid layout type. This is still in an early stage and currently only supports a setting for the minimum column width, but it defines the foundation for more configuration options going forward. Theme authors should start testing this now and provide feedback on use cases they envision.

The only coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block to support the grid layout is Group, and this support is currently marked as experimental. To test it, visit Gutenberg > Experiments screen in the WordPress adminadmin (and super admin) and enable the Grid variation for Group block option.

A 4-column grid with two rows of architecture images. Overlaid is the current Grid layout options from the block editor.

Other Notable Highlights

There is now a Post Modified Date variation for the Post Date block. It allows users to display the post’s most recent updated date.

WordPress post title and meta with title and a last modified date. Overlaid is the block editor settings for using either the published or modified date.

Gutenberg 15.3 introduced a Time to Read block for showing the number of estimated minutes it takes to read a post. The latest update adds spacing and typography support to the block, rounding out its design tools set.

The core Columns block now supports template locking, the Image size setting for the Image block has been renamed to Resolution, and the Media & Text block’s alignment is set to “none” by default.

Change log

Enhancements

Block Library

  • Add Post Date block variation for Post Modified Date. (49111)
  • Add typography support to time to read block. (49257)
  • Allow the time to read block to be inserted multiple times. (49253)
  • Image Block: Don’t render if there is no URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org set. (45220)
  • Media & Text: Switch default alignment to none. (48404)
  • Update alternative text labels and help text. (49416)
  • Navigation Submenu: Refactor to use the block supports function. (48936)
  • Replace “Image size” with “Resolution” in image size controls. (49112)
  • Update Gallery block to use consistent 40px components. (49101)
  • columns block: Add support for templateLock attribute. (49132)

Components

  • FormTokenField: Add prop to remove bottom margin. (48609)
  • ImageSizeControl: Remove the “Image Dimensions” label. (49414)
  • ImageSizeControl: Use large 40px sizes. (49113)
  • Tooltip: Refine existing tests. (48397)
  • Update tests from fireEvent to userEvent. (44952)
  • CustomGradientPicker: Improve initial state UIUI User interface. (49146)
  • Storybook: Declare stylesheet dependencies explicitly. (49099)
  • AnglePickerControl: Style to better fit in narrow contexts and improve RTL layout. (49046)

Design Tools

  • Add spacing tools to time to read block. (49392)
  • Position Panel: Open by default if a position type is set. (49151)
  • Revert: Make sticky block action on template part block. (49219)
  • Sticky Position: Add a “Make sticky” action to the Template Part block. (49085)

Testing

  • Adds focus management test for entity undo. (49236)
  • Adds navigation submenu tests. (49351)
  • Cover block: Add integration tests. (45409)
  • test: Expand mobile end-to-end test helpers. (48978)

Layout

  • Make grid layout Group variation an experiment. (49359)
  • Try adding a grid layout type. (49018)

Icons

  • Add unseen icon to library. (49254)

Plugins API

  • Plugins: Refactor the ‘PluginArea’ component to use the sync store. (49220)

Global Styles

  • Add: Story for the full global styles UI. (49031)
  • Caption element UI controls for color and typography. (49141)

Block Editor

  • Rich text: Only consider a format active if active at every selected index. (48789)
  • Update border color on color panel items. (42283)
  • i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Add context to labels related to CSSCSS Cascading Style Sheets. position properties. (49135)

Site Editor

  • Add: Patterns to the template start modal. (47322)

List View

  • Allow the component to show a custom “more” menu. (48097)

Block API

  • Block.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.: Refactor and stabilize selectors API. (46496)

Bug Fixes

Block Editor

  • BlockHTML: Use correct type when setting ‘htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.’ state onBlur. (49191)
  • Duotone: Pass filters to the Post Editor. (49239)
  • Duotone: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49199)
  • Fix typo (overriden -> overridden). (48711)
  • Writing flow: Prevent default browser behaviour on input when editable. (49370)
  • Fix onHover error on patterns tab in mobile. (49450)

General Interface

  • 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. Page address displayed when a future page is first scheduled. (49092)

Patterns

  • Block patterns: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49197)

Block Library

  • Buttons: Disable edit as HTML support. (49097)
  • Fix center alignment on the dropdown in the categories block. (44013)
  • Fix sprintf() arguments. (49439)
  • Fix: Navigation block width constricted on large viewports. (49302)
  • Group Block: Allow blocks to be dragged onto it in its placeholder state. (49361)
  • Group: Fix the ‘double div’ deprecation ‘templateLock ‘ attribute. (49250)
  • Group: Fix the ‘templateLock’ attribute type in deprecations. (49205)
  • Navigation: Fix 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. in calculating the active menu item. (49195)
  • 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 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/. error and other misc. bug fixes. (48730)
  • Query 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.: Constraint list item(li) styles to the direct children of the main list. (49303)
  • Query Loop: Show 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. placeholders in all posts. (49301)
  • Query Title: Changes filters for removing archive title prefixes. (49306)
  • Quote: Disable edit as HTML support. (49426)
  • Revert “Make sure the directly inserted block in the Nav block is a Page link”. (49126)
  • Search block: Fix overflow width. (49192)
  • Changes image size description, as it causes confusion. (48478)
  • Post Excerpt Block: Fix unexpected commas in certain site languages. (49123)

Components

  • CircularOptionPicker: Force swatches to visually render on top of the rest of the component’s content. (49245)
  • Fix TabPanel initial rendering. (49368)
  • Fix misaligned textarea input control. (49116)
  • LineHeightControl: Make spin buttons adjust from placeholder value. (49150)
  • ToolsPanel: Make menu item order consistent for SlotFill use cases. (49222)

Layout

  • Fix unstableDisableLayoutClassNames in Group block. (49385)
  • Get orientation for Spacer block from parent layout. (49322)
  • Remove inner wrapper for grid Groups in classic themes. (49387)

Post Editor

  • Fix breaking distraction free. (49317)
  • Post Lock: Fix the avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. position. (49421)

Site Editor

  • Fix site editor redirection after creating new template or template part. (49364)
  • Show the created template title in success notice and not the slug. (49366)
  • Template parts: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49198)
  • Fix typo in utils.js. (49178)

Media

  • Image: Don’t create an external image ‘blob’ when a user can’t upload files. (49300)
  • MediaReplaceFlow: Check permissions before displaying the ‘Media Library’ menu item. (49298)

Global Styles

  • Selectors API: Fix for global styles hook, style variations, and duotone. (49393)
  • Fix typo for the word accross. (49295)
  • Duotone: Limit SVG 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. output to used filters. (49103)
  • Selectors API: Make duotone selectors fallback and be scoped. (49423)

List View

  • Show close button in List View on mobile. (49200)
  • Add private appender prop. (49137)

History

  • Bring back 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. button for template parts. (49163)

Data Layer

  • useSelect: Incrementally subscribe to stores when first selected from. (47243)
  • Data: Refuse to register an already registered store. (49134)

Tools

  • babel-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-makepot: Fix non-existing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. handling. (49431)

Navigation

  • Fix fallback not rendering. (49431)

Performance

Post Editor

  • Avoid UI shifting when selecting blocks. (47177)
  • Lodash: Remove _.groupBy() from buildTermsTree() in editor. (49224)

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions

  • Fix performance testing themes installation. (49063)
  • Speed up npm ci by caching node_modules. (45932)

Testings

  • Fix running performance tests locally via CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.. (49068)
  • Refactor performance tests artifacts handling. (48684)

Babel Preset

  • Polyfills: Exclude web.immediate. (49234)

Experiments

Navigation Screen

  • Remove ‘edit-navigation’ package leftovers. (49183)

Documentation

  • Add a missing filter documentation. (44342)
  • Add missing pseudo-selectors to theme.json schema and documentation. (49202)
  • Add readme.txt FAQ entry for filing security bugs. (49148)
  • Adds issue template for the plugin release process. (49345)
  • Adds message about usage of block-editor components. (49400)
  • Block Editor Handbook: Improved the readability and phrasing and corrected mistakes. (48756)
  • Docs: Fix incorrect import of apiFetch. (49432)
  • Docs: Put more structure to Architecture page. (49184)
  • Fix failing CI documentation check. (49378)
  • Fix/missing template 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.. (49348)
  • FlexItem: Fix typo line 19 of README. (49284)
  • Mention “testsPort” .wp-env.json setting. (49388)
  • Remove errant line break in versions-and-building documentation. (49353)
  • Theme JSON schema: Add defaultPresets property to shadow. (49204)
  • Theme JSON schema: Add position.sticky and dimensions.minHeight properties to settings. (49335)
  • Update @api-fetch README.md with query args. (49318)
  • Update README.md for wordpress/element. createRoot not available until WordPress 6.2. (49309)
  • docs: Update end-to-end test device documentation. (49441)

Code Quality

Components

  • Animate: Refactor to TypeScript. (49243)
  • ColorPicker: TypeScript refactor. (49214)
  • CustomGradientPicker: Refactor to TypeScript. (48929)
  • DuotonePicker, DuotoneSwatch: Convert to TypeScript. (49060)
  • GradientPicker: Refactor to TypeScript. (48316)

Block Library

  • Home Link Block: Remove leading spaces in class names. (49397)
  • Add column-gap and row-gap as allowed CSS properties for compatibility with WP 6.0. (49118)

Block Editor

  • Duotone: Remove Safari rerender hack. (49232)
  • Replace regex with tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) processor for duotone class render. (49212)
  • Use immutableSet utility to set style properties. (49365)

Plugins API

  • Plugins: Add unit tests for the ‘PluginArea’ component. (49138)

Global Styles

  • Extract a ColorPanel component as a reusable component between Global Styles and Block Inspector. (48893)
  • Lodash: Refactor away from _.groupBy() from compileCSS(). (49227)

Webfonts

  • Tests: Fix typos in fonts API. (47288)

Compose

  • Refactor useMediaQuery with useSyncExternalStore. (48973)

Patterns

  • Add gutenberg_get_remote_theme_patterns function. (49307)

Element

  • Element: Narrow createInterpolateElement param type. (49182)

Tools

Testing

  • Fix flaky Site Editor title end-to-end tests. (49203)
  • Upgrade Playwright to 1.32. (49296)

Build Tooling

  • Upgrade wp-prettier to 2.8.5. (49258)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release: @aaronrobertshaw @ajlende @andrewserong @aristath @brookewp @carolinan @chad1008 @ciampo @corentin-gautier @dcalhoun @draganescu @ellatrix @enderandpeter @felixarntz @fluiddot @glendaviesnz @gziolo @hareesh-pillai @helgatheviking @janboddez @jeryj @jhnstn @johnbillion @jorgefilipecosta @jsnajdr @kevin940726 @madhusudhand @MaggieCabrera @Mamaduka @mburridge @mirka @ntsekouras @oandregal @renintw @richiecarey @richtabor @ryanwelcher @scruffian @sgomes @shreyasikhar @SiobhyB @Soean @sque89 @stokesman @t-hamano @talldan @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad @ZebulanStanphill

Props to @welcher for co-managing this release and @jameskoster for the release assets.

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

Justin Tadlock 6:05 pm on March 22, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 15.4 (22 March)

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

Decorative image that's reads: "What's New In Gutenberg 15.4?"

Gutenberg 15.4 has been released and is available for download!

The latest release of the 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 is lighter on user-facing features than normal and focuses heavily on 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, testing, and other much-needed improvements. But, there are some welcome additions, such as turning paragraphs into columns, an improved Cover 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., and new template descriptions in the site editor.

Table of Contents

Color and layout support for Cover block

The Cover block now supports the text color design tool. The enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. makes it easier for users and theme authors to customize the color for all inner blocks with a single setting. Along with this benefit, the change made it easier to handle transforms from the Media & Text block.

The Cover block also now works the same as the Group block with its layout handling. Currently, the block only supports the flow layout and is set to a constrained width by default.  It does not yet support flex layout variations.

The update brings consistency to layout handling, building atop a standardized system that will make for fewer edge cases and necessary customizations for theme authors.

Theme authors should test their themes against this update. In the past, some have had to work around the layout limitations of the Cover block, and the block’s support of the standard layout system may override custom implementations.

Updated template descriptions

Template descriptions have received a major overhaul in the latest update. Nearly all of them have been updated to better explain what each template does. This should make it easier for users to understand each template’s purpose when customizing it in the Site Editor.

Other Notable Highlights

A new textColumns property has been added as a “block supports” feature and is now in the style engine. It will allow users to split text-based blocks into columns. Developers can opt into this for their custom blocks, but no coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks support the feature yet. There are open tickets for adding it to the Paragraph and Post Excerpt blocks in future updates.

Theme authors can now target the :link and :any-link pseudo-elements in theme.json, giving them more control over styling hyperlinks.

The FontSizePicker component allows for an array of custom units to be defined. This is the first step toward allowing theme authors to eventually control the available units if their themes support custom font sizes. However, the editor’s Typography panel does not yet support this feature.

Change Log

Enhancements

Site Editor

  • Adjust whileHover effect to be a bit subtler and less pronounced. (48928)
  • Go direct to edit from manage all templates list. (48764)
  • Move “Add Template”‘s descriptions to tooltips. (48710)
  • Add descriptions to all panels in the Site Editor’s dark side. (48739)
  • Add hover animation to site editor canvas. (48575)
  • Fix non-us spelling in 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.. (48976)
  • Prevent the saving button from showing when renaming templates. (48399)
  • Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar. (48689)
  • Add “Added by” description to template part navigation sidebar. (48732)
  • Add border radius to off canvas 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. (48798)
  • Add page details when viewing a specific page. (48650)
  • Duotone: Limit SVG 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. output to used filters. (48995)
  • Hide navigation screen in site editor. (49043)

Block Library

  • Open convert to links modal on select of a page item. (48723)
  • 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.: Remove 16:10. (48969)
  • Cover: Add constrained/flow layout. (45326)
  • Cover: Add text color block support. (41572)

Components

  • FontSizePicker: Allow custom units. (48468)
  • Navigator: Disable initial animation. (49062)
  • Try: Update Tertiary Button appearance. (48888)
  • FormTokenField: Hide suggestions list on blur event if input value is 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.. (48785)

Design Tools

  • Block Supports: Add text columns (column count) to typography block supports. (33587)

Global Styles

  • Move the global styles provider to the app level component. (49011)
  • Add support for :link and :Any-link 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.. (48634)
  • Add compound class to layout wrapper for global spacing styles. (47952)

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

  • Block Deprecations: Provide extra data for isEligible check. (48815)

Post Editor

  • Provide static native editor help article slugs. (48802)
  • Try getting Post Content layout on server before editor loads. (45299)

Packages

  • Introduce prependHTTPS URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org util. (47648)

Bug Fixes

Block Library

  • Embed Block: Fix Aspect Ratio Classes #29641. (41141)
  • Ensure aspect ratio is applied when Post Featured Image block is linked. (48495)
  • Fix PostContent initial render by waiting for the canEdit request. (48642)
  • Fix classic menu fallback race condition. (48811)
  • Fix navigation block off-canvas appender for empty menus. (48907)
  • Fixes extra UIUI User interface in navigation block inspector. (48679)
  • Import Classic Menu using the menu name as the block menu title. (48771)
  • Navigation Link: Remove color generation code. (48927)
  • Navigation: Fix missing state for MenuControls. (48921)
  • Update missing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. from label. (48760)
  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Importer: Fix Widget Group block imports. (48669)
  • Query 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.: Show variant patterns even if there are no patterns for the Query Loop block. (48793)
  • Comments: Fix ‘sprintf requires more than 1 params’ error. (49054)
  • Adjust Post Featured Image PanelBody label to “Settings”. (49076)
  • Add help text to Gallery Image Size control. (49074)
  • Comments Block (Legacy): Update missing translation. (48820)
  • I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. of created Navigation menu title. (48773)
  • Make sure the directly inserted block in the Nav block is a Page link. (48740)
  • Navigation Link: Don’t remove ‘block_core_navigation_link_build_css_colors’. (49064)
  • Navigation: Don’t save the level of the link in an attribute. (48219)
  • Refactor away state in Nav menu selector. (45464)
  • Revert: Navigation: Always create a fallback menu. (48602)
  • Tweak Latest Posts block PanelBody labels. (49079)
  • Tweak label for Latest Posts 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. control. (49077)
  • Page List Block: Show untitled pages on page list on the editor. (48772)

Site Editor

  • Don’t offer Classic block as a recovery action when not registered. (49051)
  • Fix browser history when synchronising state with urls. (48731)
  • Fix lingering insertion point within template parts. (48913)
  • Fix template part actions in List View. (48905)
  • Fix text alignment in the Site Editor sidebar. (48959)
  • Fix typo in template parts description. (48781)
  • Fix browse mode descriptions margin. (48778)
  • Fix scrollbar in site editor. (48822)
  • Site Editor Navigation panel: Update appearance of non-link blocks. (48933)
  • Navigation sidebar shows a wrong submenu popover. (48941)
  • Show creation popover on empty page links in the navigation sidebar. (48746)
  • Site button metrics. (48918)
  • Remove actions from SidebarNavigationScreenWrapper. (48935)
  • Update template descriptions with more detail. (48934)

Global Styles

  • Fix typo: Use WP_Theme_JSON_Gutenberg instead of WP_Theme_JSON class name. (48648)
  • Fix: Crashes on getNodesWithSettings and getNodesWithStyles. (49023)
  • Fix: Global Styles crash in updateConfigWithSeparator when not block styles are passed. (49045)
  • Fix: Global Styles getNodesWithStyles expects an object with elements. (49044)
  • Fix: Global Styles getPresetsClasses crashes if no selector is passed. (49024)
  • Fix: Global styles forces a white background. (49042)
  • Style Book: Move 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. to root of content area to support styles that overflow block previews. (48664)
  • WP_Theme_JSON: Sync indirect properties changes from core. (48646)

Components

  • Fix HStack and VStack alignment prop. (47914)
  • ResizeTooltip: Use default.fontFamily on tooltip. (48805)
  • ResponsiveWrapper: Use aspect-ratio CSSCSS Cascading Style Sheets. prop and support SVG elements. (48573)

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)

  • Make sure useFocusOnMount runs when all the children tabbable elements have mounted. (42187)
  • Manage selection on block sync. (48979)

Post Editor

  • Distraction Free Mode: Don’t show the metaboxes. (48947)
  • Don’t add Post Content layout styles to title in the post editor. (48663)
  • Fix animation and browser console error when returning from template edit mode. (48930)

Block Editor

  • LinkControl: Remove HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from suggestion title before passing it to TextHighlight component. (48685)
  • Order initial block items in Navigation with PrivateInserter. (48752)
  • BlockInvalidWarning: Prefer canInsertBlockType and refactor to hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (49052)
  • Fix grouping actions in List View. (48910)
  • Fix typo in the media-categories component. (49047)
  • Custom link UI does appears outside canvas on the sidebar navigation. (48633)
  • Use proper color for block styles control. (46684)
  • Update Welcome Guide article links to avoid redirect. (48582)
  • Columns Block: Don’t show the column count change UI when templateLock is all. (48691)
  • Remove border from quick inserter child elements. (48794)

Inspector Controls

  • Fix settings tab active state border in block inspector. (48945)

Testing

  • Playwright Utils: Fix the ‘publishPost’ address locator. (48729)

CSS & Styling

  • Fix duplication of block classname in feature selectors for style variations. (48662)

Experimental

  • Fix KSES filter for un-prettified filters. (49004)

Packages

  • Rich text: Fix range equality checks for Safari. (48733)
  • Preferences Modal: Fix double focus outline in tab item. (48996)

Tools

  • Scripts: Fix render.php isn’t copied in Windows OS. (48735)

Mobile

  • Mobile – Fix parsing of CSS units for null matched values. (48484)

Performance

Block Editor

  • Rich text: useAnchor: Remove value dependency. (48715)

Post Editor

  • Lodash: Refactor away from _.kebabCase() in EditorHelpTopics. (48776)
  • Lodash: Refactor away from edit-post package. (48786)

Site Editor

  • Improve the Navigation panel’s menu query. (48908)
  • Improve Site Editor performance tests. (48138)

Testing

  • Lodash: Remove from e2e-tests package. (48775)

Themes

  • Fix: Incorrect selector generated by append_to_selector method. (48759)

Block Library

  • Lodash: Remove _.get() from various blocks. (48491)

Data Layer

  • Lodash: Refactor away from _.set() in core-data. (48784)

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions

  • Prefer committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. over author date for perf results timestamp. (48673)

Documentation

  • Add links to hook documentation in curation doc. (48653)
  • Add missing playwright end-to-end documentation to toc.json. (48447)
  • Adding examples of how to programmatically remove the panels in Document sidebar. (48895)
  • Adds link to post on the developer blogblog (versus network, site) to the deprecation page. (49069)
  • Add position: Sticky to the Opt-in into UI controls appearanceTools section. (48763)
  • Fix broken Lerna documentation link. (48890)
  • Table of styles keys with since versions. (48265)
  • Fix URL mismatch. (48931)
  • Theme JSON schema: Add sticky position to settings, minHeight to styles. (48948)
  • Update the end-to-end tests documentation. (48951)
  • jest-preset-default: Update README to reflect current status. (48925)

Code Quality

Components

  • Autocomplete: Refactor to TypeScript. (47751)
  • Navigation: Refactor to TypeScript. (48742)
  • SelectControl: Improve prop types for single vs multiple selection. (47390)
  • DimensionControl(Experimental): Refactor to TypeScript. (47351)
  • Guide: Refactor to TypeScript. (47493)
  • Icon: Refactor tests to TypeScript. (49066)
  • PaletteEdit: Refactor away from lodash.kebabCase. (48637)
  • QueryControls: Refactor away from lodash.groupBy. (48779)
  • components/utils/font: Refactor away from lodash .get. (48629)
  • remove lodash from context/getStyledClassName:. (48688)
  • withSpokenMessages: Change js files to typescript. (48163)

Block Library

  • Add Nav block files to those triggering error for exhaustive deps. (48821)
  • Fix Nav block exhaustive deps warnings. (48680)
  • Media Text: Refactored constants to it’s designated file. (48480)
  • Navigation: Simplify the method for finding the fallback menu. (48916)
  • Duotone.php code cleanup. (48607)
  • Revert “Duotone: Limit SVG filter output to used filters”. (49102)

Block Editor

  • Inserter: Remove outer scope values dependencies. (48961)
  • Inserter: Remove unnecessary dependency ‘delayedFilterValue’. (48960)
  • Remove unused CSS from LinkControl Apply button. (48431)
  • Custom Classname block support: Update code comments to remove reference to anchor id. (48709)
  • List View: Remove unused selector from the ‘useBlockSelection’ hook. (48984)
  • Renames parent selection boolean param and improves documentation. (48677)
  • Tests: Cleanup unnecessary jest timers setup. (49030)
  • Avoid declaring a function inside another function. (49049)

Global Styles

  • Theme JSON: Clarify status of fixed position opt-in in appearance tools. (48660)
  • Extract a BorderPanel component as a reusable component between Global Styles and Block Inspector. (48636)

Data Layer

  • Data: Use real timers for private APIs tests. (49029)

Packages

  • Preferences: Remove types field from package.json. (49053)
  • Upgrade typescript to 4.9.5. (48299)
  • Compose: Remove useAsyncList from mobile exports. (48241)
  • Animation: Refactor to TypeScript. (47042)
  • PanelBody: Convert to TypeScript. (47702)
  • Refactor ToolbarContext to TS. (49002)
  • Refactor/toolbar button component to typescript. (47750)
  • PaletteEdit: Convert to TypeScript. (47764)
  • navigateRegions: Convert to TypeScript. (48632)
  • withFallbackStyles: Convert to TypeScript. (48720)
  • withFilters: Convert to TypeScript. (48721)
  • withFocusReturn: Convert to TypeScript. (48748)
  • withNotices: Convert to TypeScript. (49088)
  • Packages: Remove completely two deprecated webpack plugins. (48770)

Tools

  • Env: Fix typo / grammar README.md. (48952)
  • ci: Add Rich Text code owner. (48727)

Testing

  • Add pageUtils.pressKeys to playwright utils. (49009)
  • Add artifacts upload for the performance tests. (48243)
  • Fix flaky block hierarchy navigation test by better inserter selection. (48780)
  • Migrate multi-block selection end-to-end tests to Playwright. (48035)
  • Navigation block end-to-end tests: Default to my most recently created menu. (48132)
  • Upgrade Jest from 27 to 29.5.0. (47388)
  • Duotone: Style Engine: Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. and associated refactoring. (49033)
  • Query Block: Add tests for getValueFromObjectPath() util. (48956)

First time contributors

The following PRs were merged by first time contributors:

  • @abhi3315: Link Control – Add support for text only labels. (47930)
  • @hbhalodia: Change higher order with-constraint-tabbing from .js to .tsx. (48162)
  • @sboerrigter: Fix incorrect css property in editor-color-palette documentation. (48333)
  • @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. (48160)
  • @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. (48091)
  • @tomdevisser: Remove copy for managing a block’s style variations. (48367)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw@abhi3315@adamziel@afercia@alexstine@andrewserong@annezazu@brookewp@carolinan@chad1008@ciampo@dcalhoun@draganescu@ellatrix@fluiddot@geriux@getdave@gvgvgvijayan@gziolo@hbhalodia@jorgefilipecosta@jsnajdr@kevin940726@MaggieCabrera@Mamaduka@marekdedic@ndiego@ntsekouras@oandregal@ockham@richtabor@sboerrigter@scruffian@shreyasikhar@spacedmonkey@suvrodattamitu@tellthemachines@tomdevisser@tyxla@WunderBart@youknowriad@t-hamano

Props to @welcher for co-leading the release, @priethor for feedback, and @saxonfletcher and @joen for assets creation.

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

Rich Tabor 2:28 pm on March 13, 2023
Tags: block-editor, , FFFFFF, ,   

What’s new in Gutenberg 15.3? (13 March)

“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/” is published following every Gutenberg biweekly release, showcasing new features included in the release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor (formerly called Full Site Editing) projects. Previous release posts can be found via the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.).

Gutenberg 15.3 has been released and is available for download!

The latest version of Gutenberg, 15.3, tightens up the site editing experience, adds a new “Time to Read” 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. for adding estimated read time to posts, and a number of Duotone enhancements. Combined with a multitude of improvements across the board, this release is a solid step forward for Gutenberg.

Table of contents

  1. A tightened-up site editing experience
  2. New “Time to Read” block 
  3. Leveling-up Duotone
  4. Changelog
  5. First time contributors
  6. Contributors

A tightened-up site editing experience

The Site Editor has received a number of enhancements, culminating in a tightened-up, design-forward experience that brings site editing center stage. 

A close up view of the Site Editor's top-level Design panel.

With another round of polish, the Site Editor experience is feeling more refined than ever. 

New “Time to Read” block 

The new “Time to Read” block allows you to display the estimated time the average reader takes to read the current page, or post. Letting readers know right off what their estimated reading time helps them to decide if they should continue reading, or save the post for later. (43403)

A close-up view of the Block Editor with List View open and a "Post Time to Read" block selected.

The block is relatively simple as-is, with follow-ups to enhance styling capabilities. 

Leveling-up Duotone

This release includes a number of enhancements around leveling-up the popular Duotone design tool. You can now set a 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. globally within the Site Editor’s Styles panel, whereas in previous releases you could only do this manually within 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. file. (48255) 

A close up view of the Styles panel of the Site Editor, with the Duotone filter control in view.

Duotone presets are now stored as slug values, instead of hard-coded color values (i.e. #FFFFFF). Using the preset itself means that Duotones are no longer locked to a specific theme, or theme variation.

If you apply a Duotone, then change a theme to another that uses the same slug value, the new theme’s Duotone will now take effect. (48318)

And last, Duotone styles are now generated using the WordPress Style Engine, meaning that CSSCSS Cascading Style Sheets. is generated as part of the block supports CSS — rather than inline. (48281)

Changelog

Enhancements

Site Editor

  • Refactor the site editor URLs for better backward compatibility. (48063)
  • Remove TemplateAreas from template details. (48490)
  • Update the edit button. (48584)
  • Change “Browse all templates” to “Manage all templates” in template details popover. (48496)
  • Match color of the focus template view with site dark material. (48430)
  • Polish add template modal style. (48445)
  • Site Editor 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.: Add line-height for template/parts name and update width for edit button. (48160)
  • Extract a DimensionsPanel component as a reusable component between Global Styles and Block Inspector. (48070)
  • Remove copy for managing a block’s style variations. (48367)

Block Editor

  • Apply keyboard shortcut conversions between paragraphs and headings to all editor instances. (47972)
  • Create automatic change higher order reducer. (48312)
  • [Inserter]: Preload media categories empty check – client side. (47503)

Post Editor

  • Revert iframed editor for WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. only. (48076)
  • PageAttributesCheck: Return boolean value directly from the selector. (48336)
  • Apply busy status to the publish button in progress and unify button width. (48444)

Block Library

  • [New Block] Add post time to read block. (43403)
  • Add all allowed innerblocks to the inspector animation experiment. (47834)
  • Make the Site Logo block placeholder state smaller. (48218)
  • ToggleControl: Remove margin overrides and add opt-in prop. (47866)
  • Post Terms block: Add transforms for variations. (48328)
  • Navigation List View: Add block movers to the more menu. (48099)
  • Navigation: Always create a fallback menu. (47684)
  • Navigation: Don’t create a fallback 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. if there are inner blocks. (48585)
  • Navigation: Don’t create duplicate navigation menus. (48599)
  • Navigation: Update the dependencies for the useEffect that handles notifications. (48066)
  • Navigation: Wrap the dependent functions in useCallback. (48195)
  • Page List: Move the modal to its own file. (47922)
  • Classic Block: Replace the deprecated isPrimary prop with variant. (48230)
  • Refactor core blocks to use HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Tag Processor. (43178)

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

  • HTML Tag Processor: Add WP 6.3 compat layer. (47933)
  • Tag Processor: Add bookmark invalidation logic. (47559)

Design Tools

  • Duotone: Use the style engine to generate CSS for Duotone. (48281)
  • Duotone: Add Global Styles controls for blocks that support duotone. (48255)
  • Use Duotone presets in block duotone attributes. (48318)
  • Duotone: Use CSS variables instead of slugs in block attributes. (48426)
  • Border Panel: Add missing dep for onBorderChange callback. (48010)
  • Disable layout toolbar controls for content locked blocks. (47939)
  • SpacingSizesControl: Fix white dot on thumb. (48574)

List View

  • Scroll selected block into view when single block selection changes. (46895)

Components

  • Change higher order with-constraint-tabbing from .js to .tsx. (48162)
  • CircularOptionPicker: Refactor to TypeScript. (47937)
  • Extract delete handler to hook for RichText. (48273)
  • ToolsPanel: Remove unnecessary dep from resetAll callback. (48011)
  • Link Control – Add support for text only labels. (47930)
  • Pin floating-ui/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dom version. (48402)
  • Use React 18 rendering for import dropdown. (48244)

Tools

  • Migrate switch-to-draft to Playwright. (48120)
  • VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. (48260)
  • List block: Add Firefox end-to-end tests. (48271)
  • Update end-to-end test snapshots to Jest 29 default. (48626)
  • Update snapshot format to Jest 29 default. (48366)
  • Move react-native-editor parser tests to a test directory. (48615)
  • ToolsPanel: Refactor unit tests to TypeScript. (48275)
  • Migrate block deletion end-to-end tests to Playwright. (48012)
  • Migrate list view end-to-end tests to Playwright. (47919)
  • Navigation block: End-to-end code quality fixes. (48071)
  • Remove old end-to-end tests for the navigation block. (48126)
  • Update assertion Autocomplete end-to-end tests. (48344)
  • [Automated Testing]: Fix wrong button fixture. (48305)

Code Quality

  • TabPanel: Refactor unit tests in prep for controlled component updates. (48086)

Bug Fixes

Site Editor

  • Fix Site Editor perf tests. (48240)
  • Fix routing for Classic themes using block-based template parts. (48343)
  • Fix the ‘Browse all’ link in the template details modal. (48301)
  • Fix the site editor home page loading when installed in a subdirectory. (48363)
  • Fix the tooltip and shortcut for the global save button. (48282)
  • Prevent distracting focused back button on site editor load. (48472)
  • Sort templates and template parts by slug. (48473)
  • Specify focus state color for template navigation button. (48134)
  • [Site Editor]: Set html block as freeform fallback block. (48129)
  • Remove broken site editor redirect. (48283)
  • Fix: Inserter does not appear on sidebar navigation. (48623)
  • Fix: Make navigation page list load its items on navigation sidebar. (47853)
  • Revert Site Tagline placeholder attribute, move example to block.json. (48383)

Block Editor

  • MediaReplaceFlow: Fix styling for LinkControl. (47949)
  • Fix “Reset All” button in the typography panel of the block inspector. (48123)
  • [Inserter – Media tab]: Upload Openverse images when inserted. (48501)
  • Block alignment controls: Don’t remount the block when alignments change. (48209)
  • Pin valtio version. (48237)
  • Fix block style preview flickering when a ‘style’ is focused. (48418)
  • Enable access to block settings within UBE. (48435)
  • Fix: Content only CPT template locking. (48434)
  • Firefox: Fix input rules (React async state issue). (48210)
  • Fix: Multiple overwrites on rest_controller_class for wp_template/wp_template_part. (48078)
  • Select blocks in outline list. (48118)
  • Only add layout classes to inner wrapper if block is a container. (48611)

Widgets Editor

  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor: Fix a problem with ‘Move to Widget Area’ button not working. (48233)

Block Library

  • Add support for orientation-based block movers to core/social-links. (48452)
  • Fix 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.: Read more link is always on new line in the editor. (47772)
  • Fix: OffCanvasEditor does not inserts submenu on collapsed items. (48214)
  • List Item: Avoid an error when the ‘onReplace’ prop is undefined. (48639)
  • Add missing code on the fix page list loading PR. (48621)
  • Prevent text decoration from showing up in all blocks. (48117)
  • Widget Importer: Don’t render controls when there’s nothing to import. (48396)
  • [Query 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.] Fix top border in pattern selection modal. (48303)
  • [Query Loop] Sync gutenberg_build_query_vars_from_query_block with core. (48640)
  • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.: Clean up border application in editor. (48024)

Global Styles

  • Fix for WP_Theme_JSON_Resolver_Gutenberg::Get_merged_data. (48644)
  • Display preset names via the tooltip. (48304)
  • Fix typo in valid settings for fluid typography. (48605)
  • Prevent the global styles previews thumbnails from resizing on load. (48474)
  • Site Tagline: Add example so that it will display in style book. (48300)
  • Fix wrong property name letterSpacing to lineHeight. (48091)
  • Update code position for constants and methods in WP_Theme_JSON_Gutenberg class. (48631)
  • WP_Theme_JSON_Gutenberg: Update comments to be aligned with core, so backports are easier. (48624)

Testing

  • Add typescript-eslint rules with type informations to end-to-end tests. (48267)
  • Fix snapshots for Spacer mobile unit tests. (48406)
  • Add command to run performance tests in debug mode. (48614)
  • Make the performance tests more stable. (48094)

Developer

  • Playwright: Fix request utils for non Docker envs. (48206)
  • [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. (48352)
  • Add a manual performance job that we can trigger from GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ UIUI User interface. (48302)
  • Track new front-end metric: LCP-TTFB. (48288)

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)

  • Autocomplete: Duplicate list within 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. for non visual users. (47907)
  • Fix site editor switch mode message. (48136)
  • Fix the Publish region position and focus style. (48102)
  • Focus 1st parent block on block remove, if no previous block is available. (48204)
  • List view: Allow selected block to override roving tabindex. (48339)
  • Style Book: Allow button text labels for style book icon. (48088)
  • Style Book: Focus the Style Book when opened, and enable ESCAPE key to close. (48151)
  • Try to fix a11yAccessibility 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) test flakiness. (48236)
  • Make the template customized info accessible. (48159)

Performance

Block Editor

  • Block Editor: Improve empty getBlockParents() perf. (48242)
  • Fix perf regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. in duotone hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (48401)
  • Writing flow: Avoid recalc style on every selection change. (48409)
  • useAsyncList: Flush state updates when processing queue. (48238)

Components

  • Autocomplete: Reduce work before finding trigger. (48327)
  • Disable lazy term metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. loading render_block_core_template_part. (48000)
  • Rich text: Only selectively handle keyup/pointerup. (48385)
  • Rich text: Remove unnecessary handleSelectionChange call. (48373)
  • Rich text: Try removing store change on focus. (48342)
  • Autocomplete: Avoid calling setState on input. (48565)
  • Autocomplete: Don’t change state on every keystroke. (48485)
  • Lodash: Refactor context system provider away from _.merge(). (48036)

Code Quality

  • Fixed incorrect type annotations in wordpress/data, part 2. (48221)
  • Lodash: Refactor away from _.merge(). (48239)
  • Lodash: Remove from integration tests. (48122)
  • Lodash: Remove remaining _.get() from core-data. (48310)
  • Lodash: Remove _.get() for post type usages. (48121)
  • Lodash: Remove remaining _.get() from editor. (48314)
  • Lodash: Remove some _.get() from editor. (48104)
  • Lodash: Remove _.merge() from getMappedColumnWidths(). (48032)
  • Lodash: Remove some _.get() from Gallery block. (48488)
  • Lodash: Remove some _.get() from Image block. (48489)

Documentation

  • Clarify 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. status of appearance-tools theme support. (48622)
  • Docs: Clarify release process for major WP BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1. (48248)
  • Docs: Markdown fix for wp_enqueue_script usage. (48212)
  • Fix e2e-test-utils-playwright’s jsdoc and types. (48266)
  • Fix incorrect css property in editor-color-palette documentation. (48333)
  • Proactively update versions in WordPress ahead of 6.2. (48145)
  • Update curation document to include theme.json filters. (48576)
  • Updates to the curating the editor experience to include 6.1 & 6.2 items. (48294)

First time contributors

The following PRs were merged by first time contributors:

  • @abhi3315: Link Control – Add support for text only labels. (47930)
  • @hbhalodia: Change higher order with-constraint-tabbing from .js to .tsx. (48162)
  • @sboerrigter: Fix incorrect css property in editor-color-palette documentation. (48333)
  • @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. (48160)
  • @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. (48091)
  • @tomdevisser: Remove copy for managing a block’s style variations. (48367)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @abhi3315 @adamziel @afercia @alexstine @andrewserong @annezazu @brookewp @carolinan @chad1008@ciampo @dcalhoun @draganescu @ellatrix @fluiddot @geriux @getdave @gvgvgvijayan @gziolo @hbhalodia @jorgefilipecosta@jsnajdr @kevin940726 @MaggieCabrera @Mamaduka @marekdedic @ndiego @ntsekouras @oandregal @ockham @richtabor@sboerrigter @scruffian @shreyasikhar @spacedmonkey @suvrodattamitu @tellthemachines @tomdevisser @tyxla@WunderBart @youknowriad @t-hamano

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

JuanMa Garrido 3:21 pm on February 10, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 15.1? (8 February)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in the 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 15.1 has been released and is available for download!

This release sees the integration of Openverse through the Media tab, the addition of custom CSSCSS Cascading Style Sheets. per 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. via the styles 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. and 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., navigation menus in the browse mode sidebar, and the facility to add shadow presets in global styles.

Table of Contents

Openverse integration in the Inserter

Openverse is now integrated into the Inserter in the Editor. It is now possible to get access to an extensive library of free stock photos that are available for free use, directly from the Media tab.  (46251)

Global Styles now supports shadow presets

Access to shadow presets from the UIUI User interface of Global Styles has been added to Gutenberg 15.1. There are now four shadow presets (Natural, Crisp, Sharp and Soft) defined by default, but new and custom ones can be defined for the theme via ‘theme.json’. (46502)

Add custom CSS on a per-block basis

It is now possible to add custom CSS styles on a per-block basis. Custom CSS can be added via the Global Styles UI, which will be applied to all the block occurrences. Default CSS styles can also be defined for each block via theme.json.  (46571)

Gutenberg 15.1 introduces Navigation to the browse mode sidebar in the Site Editor. This enables the user to manage their site’s navigation menus from within, thereby providing a more integrated site editing experience. (46436). This 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. also includes the items of each menú so we can navigate through them directly from the Site Editor sidebar. (47387)

Other notable highlights

New menu options for copying and pasting styles between blocks

Applying the styling from one block to another can now be done more readily with the addition of a new group in the Options menu of the block’s toolbar. The new group contains the options to “Copy styles” and “Paste styles”. Previously only the “Copy styles” option was available, leaving it unclear how to paste them into the receiving block. The process is now clearer and more easily discoverable. (47430)

Featured images in templates can be sized

The release of Gutenberg 15.1 brings the ability to adjust the size of the 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. placeholder in the single post and single page templates from within the Site Editor UI. As well as allowing the size of the featured image to be defined it also adds scaling options, namely ‘Cover’, ‘Contain’, or ‘Fill’, that determine how the image will appear within the container. (46868)

Changelog

Enhancements

Block Library

  • Add Crowdsignal Embed Variation for a new oEmbed endpoint. (47382)
  • Add anchor support for dynamic blocks. (44771)
  • Add box shadow support to blocks (using code editor for now). (46896)
  • Cover block: Add HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element selection. (46969)
  • Decode entities in page list item title. (47571)
  • Enable image size for featured images in templates. (46848)
  • Gallery Block: Add toolbar button to add a caption. (47325)
  • Make the off-canvas navigation editor the default experience. (46995)
  • Move copy and pasting styles menu items to a separate menu group. (47430)
  • Navigation: Add a manage menus button to the menu selector dropdown. (47005)
  • Navigation: Allow multiple navigations with the same ref. (47453)
  • Navigation: Remove filters disabling tabs for link and submenu. (47593)
  • Navigation: Remove the manage menus button from the selector. (47441)
  • Page List: Swap the positions of the parent page selector and customize button. (47547)
  • Page List: Update the edit/customize copy. (47549)
  • 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.: Add text alignment to the placeholder. (45003)
  • Query 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. Block: Use BlockPatternsList component for Query block patterns modal. (47366)
  • Remove endless spinned for removed navigations. (47578)
  • Remove the list view button from the navigation block. (47032)
  • Table Block: Support rowspan attribute in table HTML, including when pasting. (46629)
  • Update icons for off-canvas navigation. (47337)
  • Migrate from TextControl to InputControl to remove margin overrides. (47161)
  • Multiple blocks: Add missing has-link-color class to the front. (47357)
  • [Navigation]: Update example with no mobile view. (47508)
  • Navigation Block List View: Improve the accessible Name of the Tree Grid inside the component. (47031)

Global Styles

  • Add “Learn more about CSS” help text to Custom CSS control. (47091)
  • Add padding when no tabs in the background panel. (44044)
  • Add validation message to custom CSS input. (47132)
  • Change “Custom” CSS navigation label to “Additional CSS”. (47093)
  • Make css input fill remainder of screen by default. (47437)
  • Move custom CSS to ellipsis menu if no custom CSS present yet. (47371)
  • Move custom css to its own inline style generation method and combine with customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. CSS. (47396)
  • ToggleGroupControl: Add new opt-in prop. (47269)
  • Add check for edit CSS capability to overflow menu. (47714)
  • Reselect blocks after pasting styles. (47590)

Site Editor

  • Global Styles: Try per block custom CSS. (46571)
  • Restore the navigation menus in the site editor. (47485)
  • Update resize handle. (47138)
  • Update the site editor for better initialization. (47182)
  • Updates some spacing + dimensions in the Site Hub. (47120)
  • Add: Navigation menus to the browse mode sidebar. (46436)
  • Shadow: Add shadow presets and UI tools in global styles. (46502)
  • TextControl: Remove margin overrides and add new opt-in prop (pt 1/2). (47157)
  • [Webfonts] Rename to Fonts 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.. (46749)
  • Add layout child sizing to Navigation block. (47584)
  • Add missing controls to flex layouts. (47134)
  • Always pass layout to inner blocks. (47477)
  • Site Hub: Remove the aria-label from the Edit button. (47343)
  • Add ability to open the editor on the selected post on navigation. (47387)
  • Allow clicking the site editor frame to enter edit mode. (47676)
  • Pattern Explorer Modal: Select the first categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. as the initial category. (47661)
  • [Patterns]: Support the blockTypes prop for patterns fetched from Pattern Directory. (47677)
  • Sticky Position: Fix top position while logged in on mobile. (47665)

Testing

  • Clean up sidebar tab end-to-end test utils. (47097)
  • Components: Refactor more tests to use real timers. (47318)
  • Components: Use real timers where possible. (47056)
  • Migrate Classic block tests to Playwright. (46689)

Block Editor

  • Add custom label to nav block list view appender. (47033)
  • Move Link Control action buttons into lower settings area. (47309)
  • Pattern Inserter: Show insertion indicator when hovering on patterns. (47316)
  • Add clear Apply and Cancel buttons to Link Control. (46933)
  • [Inserter]: Openverse integration. (46251)
  • TextControl: Remove margin overrides and add new opt-in prop (pt 2/2). (47158)
  • [Block editor]: Add setting to disable Openverse integration. (47404)
  • Block Inspector: Make Settings tab the default. (47592)
  • Sticky Position: Hide controls if the block is non-root (has parents). (47334)
  • Block Inspector: Avoid advanced panel only settings tab. (47474)
  • Stabilize the experimental control groups. (47105)
  • Table: Display fixed width table cells option by default. (47536)

Components

  • AligmentMatrixControl: Update center cell label to ‘Center’. (46852)
  • Button: Try improving padding for icon + text buttons. (46764)
  • Fix HStack documentation to show code sample. (47162)

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)

  • Announce when block inserted in Navigation list view. (47034)
  • Navigation block: Fix some off canvas appender accessibility issues. (47047)
  • [Block Editor]: Update text align toolbar control label. (47119)

Themes

  • Make child themes inherit parent’s style variations. (46554)
  • Shadow: Rename shadow palette to presets. (47272)

Bug Fixes

Block Library

  • Ensure appropriate fallback menu title in Nav block menu selector. (47073)
  • Fix duplicate template parts logic overriding existing template part. (47128)
  • Fix post featured image scaling on the front. (46838)
  • Nav offcanvas restore click to edit. (47608)
  • Navigation Block: Avoid showing the contrast checker warning twice. (47205)
  • Navigation Block: Fix warning error when no ref. (47479)
  • Page List: Add extra safety around warnings. (47603)
  • Refactor convert links. (46930)
  • Search Block: Apply border color correctly when button is outside or absent. (47067)
  • Template Parts: Avoid duplicate names on conversion from group of blocks. (47082)
  • [Block Editor – Post Template]: Fix layout styles. (47221)
  • Add an alt attribute to the linked featured image if there is no post title. (46830)
  • Post Template: Add default value for offset. (47308)
  • Parse (area-specific) context in template-part block. (47203)
  • Don’t use methods with the ‘gutenberg_’ prefix. (47649)
  • Navigation: Only show the deleted menu warning if a ref is specified. (47699)
  • [Query Loop]: Guard term addtion when the request hasn’t resolved. (47688)

Block Editor

  • Fix Link Control action button visuals. (47306)
  • Fix Link UI incorrect text replacement in Rich Text. (45710)
  • In-between inserter: Fix console error when moving mouse in Firefox. (47168)
  • Remove double edit button in LinkUI. (47454)
  • Template parts and Reusable block: Fix multiple selection overlay styles. (47342)
  • Use tertiary variant on Link Control cancel button. (47313)
  • Add back block editor settings 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.. (47558)
  • 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. WP_REST_Pattern_Directory_Controller changes from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (47409)
  • Block Editor: Move component styles needed for iframes to content styles. (47103)
  • Block Inserter: Correctly apply style to the default inserter. (47166)
  • Block 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.: Fix placeholder colors. (47416)
  • 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/. key error with position controls. (47367)
  • Revert “Navigation List View: Remove empty cell when there is no edit button”. (47061)
  • [Block Editor]: Fix onHover errors at BlockPattern. (47466)
  • [Block Editor]: Register the store through registerStore. (47488)
  • Avoid erroring when getQueryArgs processes a malformed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (45561)
  • MediaUtils: Move window access to function bodies. (46970)
  • Fix and simplify the Modal dialog close button label. (47540)
  • Fix misaligned layout control icons. (47089)
  • Fix/flex controls bugs. (47533)
  • E2E: Improve multiple block moving test stability. (47423)
  • Fix Post Visibility end-to-end tests. (47520)
  • Fix padding and margin visualizer positioning. (47483)
  • Fix padding and margin visualizer styles. (47139)
  • Pattern Inserter: Fix unintended preview panel display when hovering mouse over pattern. (47693)

Site Editor

  • Allow resizing the sidebar in the site editor using keyboard. (47176)
  • Block Editor: Add inert polyfill to iframe. (47398)
  • Browse mode: Add an H2 inside the sidebar navigation screen title. (47241)
  • Force visual editor in browse mode. (47329)
  • Template Sidebar: Fix list of current template part areas to show nested template parts. (47232)
  • useDisabled hook: Fix problem with not working in iframe. (47459)

Global Styles

  • Don’t remove Custom CSS for users with the correct caps. (47062)
  • Fix inline block declaration anti-pattern in global styles UI. (47374)
  • Fix param type in Theme_JSON_Resolver DocBlockdocblock (phpdoc, xref, inline docs). (47385)
  • Hide Custom CSS setting for users without ‘edit_css’ cap. (46815)

Webfonts

  • Add registered fonts to theme JSON AFTER the child and parent data has been merged. (47290)
  • [Fonts API] Remove local() from @font-face styles. (47254)
  • [Webfonts] Use Core’s _deprecated_argument() for deprecating data structures. (47125)

Components

  • Fix tab panel initial tab selection. (47100)
  • InputControl: Avoid uncontrolled to controlled warning. (47250)
  • ColorPalette: Use computed color when css variable is passed to ColorPicker. (47181)
  • Tabs focus: Followup for Windows high contrast. (46647)
  • Support private selectors and actions for stores registered via registry.registerStore() and for sub registries. (47421)

Performance

Block Editor

  • Block Editor: Improve getBlockInsertionPoint memoization. (47489)
  • Block Editor: Improve getPatternsByBlockTypes() selector performance. (47450)
  • Block Editor: Memoize getBlockInsertionPoint selector. (47448)
  • Block Editor: Optimize selected blocks in BlockSettingsMenuControls. (47462)
  • Color Palette: Don’t use unstable array reference for fallbacks. (47577)
  • Element: Enable concurrent mode by implementing mount/unmount with createRoot. (46467)
  • Lodash: Refactor away from _.setWith(). (47017)
  • Lodash: Refactor block editor away from _.map(). (47214)
  • Lodash: Deprecate _.map(). (47216)
  • Lodash: Refactor core data away from _.map(). (47189)
  • Log frontend perf results in codehealth. (47442)
  • Perf: Rely on more efficient Map for Priority Queue internal state. (47156)
  • Block Editor: Add a new hook for getting a stable block context object. (47028)
  • Fix crash when the first template-parts is deleted width del key. (47227)

Post Editor

  • Lodash: Refactor HierarchicalTermSelector away from _.unescape(). (47567)
  • Lodash: Refactor PageAttributesParent away from _.unescape(). (47565)
  • Lodash: Refactor away from _.clone(). (47315)
  • Lodash: Refactor editor away from _.map(). (47191)
  • Lodash: Refactor flat term selection away from _.unescape(). (47572)
  • Lodash: Refactor post editor away from _.map(). (47193)

Block Library

  • Lodash: Refactor Categories List block away from _.unescape(). (47561)
  • Lodash: Refactor Tag Cloud block away from _.unescape(). (47562)
  • Lodash: Refactor NavigationLinkEdit away from _.unescape(). (47570)
  • Lodash: Refactor block library away from _.map(). (47215)
  • Lodash: Refactor some _.isEmpty() instances. (47353)
  • Lodash: Refactor blocks away from _.map(). (47188)
  • Lodash: Refactor away from _.unescape(). (47613)
  • Lodash: Refactor components away from _.map(). (47192)

Experiments

  • Introduce ExperimentalBlockEditorProvider. (47319)
  • Sharing private APIs with lock() and unlock(). (46131)
  • Use experiment locking/unlocking system for block interface selector and actions. (47375)
  • WP_HTML_Tag_Processor: Rename attribute_updates to lexical_updates. (47053)
  • Fully remove Navigation Editor screen and associated edit-navigation package. (47055)
  • Tag Processor: Only define classes if they don’t already exist. (47434)

Documentation

  • Improve gutenberg release documentation to explain the 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 backporting process. (47372)
  • Quick update to the Gutenberg plugin description. (47432)
  • Fix typo in InspectorControls documentation. (47154)
  • QueryControls: Improve onCategoryChange prop documentation in README. (47452)
  • Refactor Button component to TypeScript. (46997)
  • Release docs: Add some extra clarification that no action is required by the coordinator when publishing packages. (47480)
  • Remove extra locking from Block Editor store. (47550)
  • Theme: Exclude readme from public documentation. (47220
  • Toolbar: Unify Storybook examples under one file, migrate from knobs to controls. (47117)

Code Quality

  • Remove ESLint ignore directive documentation. (47096)
  • Remove lodash mapKeys usage. (47600)

Components

  • ColorListPicker: Refactor to TypeScript. (46358)
  • ColorPalette, BorderControl, GradientPicker: Refine types and logic around single vs multiple palettes. (47384)
  • DropdownMenu: Convert Storybook examples from knobs to controls. (47149)
  • KeyboardShortcuts: Convert to TypeScript. (47429)
  • Notice: Refactor to TypeScript. (47118)
  • NumberControl: Clarify deprecation message about hideHTMLArrows prop. (47370)
  • Refactor QueryControls component to TypeScript. (46721)
  • Remove @storybook/addon-knobs from the repository. (47152)
  • Dropdown: Deprecate position prop, use popoverProps instead. (46865)
  • Fix missing hook deps in distraction free mode. (47611)
  • Sync settings from editor store to block-editor store. (47287)

Site Editor

  • Site Hub: Remove the aria-label from the Edit button. (47343)
  • Use variation as a prop instead of variationProp in the global styles UI. (47455)
  • Update theme.json. (47620)
  • Template Parts: Add unit tests for template part creation functions. (47224)
  • Lock browse mode selectors and actions. (47678)

Block Library

  • Export off canvas editor via experiments package. (47465)
  • Image Editor: Merge context provider into editor component. (47171)
  • Mark “post author name” as stable / no longer experimental. (45008)
  • Navigation: Remove the Gutenberg plugin check. (47579)

Global Styles

  • Change ‘get_legacy_theme_supports_for_theme_json’ compat dir. (47456)
  • GlobalStyles hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.: Do not smart merge presets in useGlobalSetting. (47415)
  • Move Global Styles APIs to wordpress/block-editor. (47098)
  • Update Global Styles Controller PHPUnit tests. (47502)

Patterns

  • Update Block Patterns Controller PHPUnit tests. (47569)
  • [Patterns]: Remove bundled patterns. (46450)
  • Move Pattern Directory categories endpoint to compat/6.3. (47486)

Plugin

  • No need to remove the ‘gutenberg_enqueue_global_styles_assets’ action. (47557)
  • Replace ‘should_skip_block_supports_serialization’ with the core utility method. (47195)

Block Editor

  • HeightControl: Stabilise the height control component in the block editor package. (47475)
  • Replace registerStore() call with register() in the block-editor store. (47447)
  • Stabilise BlockPreview props. (47231)
  • Update eslint-plugin-jsdoc to support Node 18 and 19. (47490)
  • Fix: Avoid using index as JSX key on offsite navigation editor LinkControlTransforms. (47083)
  • Refactores __ExperimentalOffCanvasEditor to OffCanvasEditor. (47553)
  • Rename __unstableInserterMediaCategories to inserterMediaCategories. (47492)
  • Stabilize the clearBlockSelection editor setting. (47627)
  • [Block Editor]: Stabilize __experimentalGetAllowedBlocks. (47210)
  • [Block Editor]: Stabilize __experimentalGetPatternsByBlockTypes. (47183)
  • URLInput test: Use valid URL value to pass through validation. (47444)

Testing

  • Multi-block selection and rich text test: Wait for expected UI to appear. (47173)
  • ESLint: Enable jest/recommended for tests. (47065)
  • Remove old test now migrated to Playwright. (47247)
  • RichText tests: Don’t use JSDOM explicitly, it’s set up by environment. (47445)
  • Position Block Support: Add PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher tests. (47626)

Tools

Testing

  • Run PHPUnit jobs across multiple PHP versions. (46510)
  • Add codeowners for Playwright tests. (47136)
  • Add end-to-end tests for ‘Import widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. area’ button. (47131)
  • ESLint: Disable jest rules for storybook playwright. (47141)
  • ESLint: Fix jest/expect-expect violations. (47219)
  • Reset default_comment_status to previous value after post comments form end-to-end test. (47481)
  • Tests: Use real timers where fake timers are unnecessary. (47144)
  • WP_HTML_Tag_Processor: Make get_attribute reflect attribute set via set_attribute, even without updating. (46680)
  • core-data: Refactor tests to use real timers. (47218)
  • test: Add separate mobile experiments file. (47513)
  • Migrate a11yAccessibility 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) end-to-end tests to Playwright. (46038)
  • Copy failing WP_HTML_Tag_Processor_Bookmark_Test tests from Core. (47720)

Build Tooling

  • Add test for experimental/block-editor-settings-mobile endpoint. (46816)
  • Fix GH action warning by upgrading actions/checkout. (47494)
  • Performance suite: Track Time To First Byte in the front-end. (47037)
  • React Native: Remove duplicate metro packages. (47377)
  • Simplify editor.canvas by removing hasIframe. (46986)
  • Storybook: Update storybook-source-link dep. (47425)
  • The prelint:Php script doesn’t work as expected when new dev dependencies get added to composer.json. (45468)
  • end-to-end (cover.test.js): Wait for the height input element. (47294)
  • end-to-end (multi-entity-saving.test.js): Wait for the font size picker controls to appear. (47242)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @andrewserong @annezazu @anton-vlasenko @apeatling @audrasjb @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @draganescu @ellatrix @fabiankaegy @felixarntz @flootr @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jffng @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @kozer @madhusudhand @Mamaduka @mirka @noisysocks @ntsekouras @ntwb @oandregal @ockham @pbking @renatoagds @richtabor @Rodage @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @welenofsky @WunderBart @youknowriad

Props to @mburridge, @daisyo, @annezazu and @richtabor for reviewing this post.

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

Michael Burridge 10:34 am on January 20, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 15.0? (18 January)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in the 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.0 header image

Gutenberg 15.0 has been released and is available for download!

This release sees the 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. inspector tabs experiment stabilized, prevents images from being resized larger than their containing element, and adds the ability to paste styles from one block to another. In addition, there’s now a “sticky” option for blocks enabling them to stay in view while the rest of the content scrolls.

Table of contents

Block inspector tabs experiment has been stabilized

Three screenshots of the block controls panel showing tabs

The block inspector tabs experiment has been stabilized with the release of Gutenberg 15.0. Some blocks now split controls between separate tabs in the inspector panel. If you’ve enabled the “Off canvas navigation editor” experiment then you will additionally see the list view tab whenever a Navigation block is selected in the editor. This in turn will contain a list of the links that you can edit. This enables a new way of editing menus that supplements, and doesn’t replace, the on-canvas functionality. (47045)

“Paste styles” option added to the block settings

Gutenberg 15.0 introduces “Paste styles” making it easier to create multiple blocks with identical styling. This enables the user to copy a block and then paste just the styling of that block into another block The “Paste styles” option is available in the drop-down menu from the block’s settings panel, as demonstrated in the video above. (45477)

Edit block style variations from global styles

In a block that has variations, e.g., Button, Image, or Site Logo, it is now possible to change their styles via the Global styles panel, and those changes should only affect that specific variation. See a demo in the video above. (46343)

Images constrained to their containers

Prior to this release if you resized an image block using the handles it could easily be set to a size larger than the container. Now when you drag the handles the image remains constrained to the container and is prevented from being resized larger than its container. (45775)

New “Sticky” Position block support

A block can now be decoupled from the page layout. A new Position block support adds a “Sticky” option so that a block remains within the viewport and is stuck to the top of the page when the content is scrolled instead of scrolling with the rest of the content. This is useful if you need to ensure that an element, such as a status message or a promotion, remains on screen regardless of the page’s scroll position. It works in the block editor as well as in the front-end so the editor provides a true WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. experience for this feature. You can learn about some follow up tasks to this initial implementation in this issue. (46142)

Other notable highlights

Allow 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. and frame resizing

This release enables the ability to resize the sidebar in the site editor allowing you to change the proportion of sidebar to frame. See it in action in this video. (46903)

Synchronize the canvas mode with the site editor URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org

Gutenberg 15.0 updates the site editor to persist the “edit mode” in the URL. So for example if you’re in edit mode and then refresh the page, you get back to the same state thereby avoiding the need to click “edit” every time you reload the page. (47002)

Enable copy/cut shortcut

Keep your hands on the keyboard – the copy/cut/paste shortcuts (Ctrl/Cmd + C, Ctrl/Cmd + X, Ctrl/Cmd + V) now work in the Site Editor. (45752)

Changelog

Enhancements

Site Editor

  • Allow resizing the sidebar and frame of the site editor. (46903)
  • Remove the editor notices from the site editor frame. (46931)
  • Synchronize the canvas mode with the site editor URL. (47002)
  • Site Editor: Enable copy/cut shortcut. (45752)

Block Library

  • Add paste styles to the block settings. (45477)
  • Prevent the image from being resized larger than its container. (45775)
  • Replace block settings menu with a custom menu in off canvas editor. (46675)
  • Add help text on the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element for the Comments and Query 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. blocks. (46989)
  • Navigation: Add an icon to the add submenu item option. (46884)
  • Navigation: Remove ghost inserter. (46919)
  • Navigation: Show the loading indicator when users add a new 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.. (46855)
  • Page List Block: Fix warning error when the parent page has no child pages. (46829)
  • Page List Item: Disable block toolbar. (46950)
  • Template Parts: Avoid duplicate titles on creation. (46996)
  • Navigation: Add more explicit labels to the Navigation Menu Selector. (47015)

Block Editor

  • URLInput: Deprecate bottom margin. (46692)
  • Block editor: Move content styles to avoid triggering 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. compat mode. (46728)
  • Iframe: Preload style assets to avoid flash of unstyled content. (46706)

Inspector Controls

  • Sidebar Tabs: Add text only mode for block inspector tabs. (46968)
  • Sidebar Tabs: Stabilize the block inspector tabs experiment. (47045)
  • Remove Block Inspector Button. (46709)

Global Styles

  • Update push changes to global styles label text to “apply globally”. (46965)
  • Edit block style variations from global styles. (46343)

Components

  • SelectControl: Remove margin overrides and add new opt-in prop. (46448)
  • Use data URI for FocalPointPicker video story. (42377)
  • TabPanel: Add prop to allow disabling of a tab button. (46471)

List View

  • Update template part children background color. (46708)
  • Update template part hover style in list view. (46707)

Bug Fixes

Block Editor

  • Align labels on Link Control. (46936)
  • Remove the border property from the body element on previews. (46946)
  • [Inserter]: Don’t show empty reusable tab if not allowed to insert reusable blocks. (46922)
  • [Inserter]: Hide empty pattern categories. (46923)
  • Fix offsite navigation editor component loading issue. (46937)
  • Iframe: compat styles: Check for ownerNode === null. (46932)

Block Library

  • Navigation Block: Properly decode URL-encoded links. (46435)
  • RSS: Correctly output ‘datetime’ string. (47027)
  • [Social Icon]: 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 when adding link label. (46905)

Components

  • ComboboxControl: Fix unexpected behavior in IME Composition. (46827)
  • Fix TreeGrid keyboard nav skipping Edit Block button in off canvas editor. (46998)
  • [Placeholder]: Set fixed right margin for label’s icon. (46918)
  • Tabs in preferences: Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. from horizontal tabs. (46796)

Global Styles

  • Fix the ‘test_remove_invalid_element_pseudo_selectors’ test case. (47049)
  • Fixed Global Styles variables for colors, font family, gradient, fontSize. (46944)

Inspector Controls

  • Block Inspector: Fix browser warning error when block is not selected. (46875)

Performance

Post Editor

  • Lodash: Remove _.pickBy() from editor hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (46982)
  • Lodash: Remove _.pickBy() from template deletion. (46975)
  • Lodash: Remove _.pickBy() from block editor and deprecate. (46999)
  • Optimize keydown event handlers. (46653)

Global Styles

  • Lodash: Remove _.pickBy() from getNodesWithStyles(). (46980)

Block Library

  • Lodash: Remove _.pickBy() from latest posts block. (46974)

Experiments

  • WP_HTML_Tag_Processor: Add get_attribute_names_with_prefix() method. (46840)

Block Editor

  • Update last inserted block state to track multiple blocks. (46885)

Block Library

  • Alternative Nav Offcanvas show link UIUI User interface for submenu creation. (46857)
  • Nav offcanvas disable direct insertion. (46898)

Layout

  • Design Tools: Add a Position block support (including sticky), decoupled from layout. (46142)

Documentation

  • Adds “fluid” field inside settings.typography. (45705)
  • Docs: Add recommendation for developers to use GH CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.. (46847)
  • Quick update to versions in WordPress doc for 6.1.1. (46850)
  • ReactDOM.render deprecated, update Element README. (46925)
  • Remove stack exchange from new issue templates. (36158)
  • Revise NPM to npm. (46963)
  • Update legacy-widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-block.md. (44343)
  • Updating missing shortcut in FAQ section. (44968)
  • [RFC] Add documentation for snapshot testing in Playwright end-to-end tests. (45709)
  • Update copyright year to 2023 in license.md. (46910)
  • Docs: Fix typos. (46912)

Code Quality

Components

  • Dashicon: Remove unnecessary type for className prop. (46849)
  • ItemGroup: Migrate Storybook to controls, refactor to TypeScript. (46945)
  • Toolbar: Move all subcomponents under the same folder. (46951)
  • ColorPicker: Remove knobs in stories. (46772)
  • Guide: Remove knobs in stories. (46773)
  • Notice: Remove knobs in stories. (46956)
  • Panel: Remove knobs from stories. (46958)
  • ResizableBox: Remove knobs in stories. (46774)
  • ResponsiveWrapper: Convert to TypeScript. (46480)
  • SandBox: Convert to TypeScript. (46478)
  • SlotFill: Remove knobs in stories. (46957)
  • useSelect: Implement with useSyncExternalStore. (46538)

Block Library

  • Navigation Link: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices in unit tests. (47070)
  • Video Block: Fix browser warning error when settings are toggled. (46835)
  • Adds an identifier prop to the RichText component for captions, allowing annotation. (46917)
  • Fix: Use of array index instead of post id on latest posts. (46911)

Block Editor

  • Simplify the way we create a link UI control in the offcanvas editor. (46744)
  • Fix number of arguments passed to hasBlockMetadataSupport. (46842)

Tools

Testing

  • Block inserter search end-to-end test: Scope list item lookup to the inserter panel. (47066)
  • Migrate Manage Reusable Block to Playwright. (45621)
  • Migrate Post Visibility Test to Playwright. (44488)
  • Navigation block end-to-end tests: Default to a list of pages if there are no menus. (45070)
  • Only use a single comment for the flakiness report on PRs. (46785)
  • Mobile – Move the gutenberg-editor-block-insertion-2 end-to-end tests to integration tests. (46882)
  • Chore: Fix incorrect usage of map instead of forEach. (46853)
  • Chore: Remove unreachable line from phpunit/fixtures/mock-provider.php. (46843)

Build Tooling

  • package.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.: Add script to profile unit tests. (46909)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @alanjacobmathew @alexstine @andrewserong @annezazu @apeatling @BogdanUngureanu @brookewp @cameronjonesweb @ciampo @d-alleyne @draganescu @ellatrix @geriux @getdave @jameskoster @jasmussen @jorgefilipecosta @joshuatf @jsnajdr @juanfra @kevin940726 @kozer @MaggieCabrera @Mamaduka @mateuswetah @mhkuu @mirka @ntsekouras @ockham @pooja-muchandikar @scruffian @Soean @stokesman @t-hamano @talldan @tekapo @tellthemachines @tomjn @TonyGravagno @tyxla @youknowriad

Props to @annezazu, @priethor, @chanthaboune, @cbringmann and @greenshady for reviewing this post.

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

Justin Tadlock 10:00 pm on January 4, 2023
Tags: block-editor, , ,   

What’s new in Gutenberg 14.9? (4 January)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) 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 14.9 has been released and is available for download!

Table of Contents

Push 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. changes to Global Styles

Gutenberg 14.9 introduces a new button titled Push changes to Global Styles under the Advanced panel for individual blocks. This allows users to make changes while editing a template in the Site Editor but apply those changes on the global level. The new feature makes it much easier to keep a consistent design without needing to edit individual templates. (46446)

WordPress post editor with a Post Title block shown. In the sidebar, there is a button for pushing changes to global styles under the Advanced tab.

Typography support for Page List block

The Page List block now supports all typography options, including setting the font size, family, and more. This change is part of a larger effort to bring a consistent set of design tools across all coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (43316)

WordPress post editor with a page list block in the content editor. The design tools panel in the sidebar shows a font-size selector.

Import 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. widgets to template parts

When inserting a new template part into a template in the Site Editor, users can now import widgets from a previously-registered dynamic sidebar. This is a transitioning tool to help users move from classic theme setups to blocks without losing work that they’ve put into their sites. (45509)

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. support: shadow presets and minimum fluid font size

WordPress theme authors can now opt into the new box-shadow feature, creating a set of custom presets to use in their designs. This system works similarly to colors, gradients, and other opt-in design tools. (46813)

Currently, the UIUI User interface that would allow user overrides for this feature is still under development. However, the following screenshot is a preview of what it might look like:

WordPress Style Editor that displays a Border & Shadow section in the sidebar. It is displaying a preview of a button with a dark shadow behind it.

Theme authors who use the built-in fluid typography system in theme.json can now set a minimum font size via settings.typography.fluid.minFontSize. By default, the minimum is set to 14px, but this may not be ideal for all designs. This new setting gives developers more control over how fluid typography is handled. (42489)

Other Notable Highlights

The previous Gutenberg release (version 14.8) introduced a new Site Editor sidebar, a hub for navigating the sections of a site. Version 14.9 continues iterating on this feature. The sidebar now displays the template title and type with a contextual edit button that sits beside them. The sidebar’s width has also increased, giving its content a bit more breathing room. (46736), (46769), (46700)


Developers can also now register patterns for specific template types, limiting where the patterns appear. For example, an Error 404 pattern would only make sense when used with the 404 template. (45814)

Change log

Features

Global Styles

  • Site Editor: Add new ‘Push changes to Global Styles’ button. (46446)

Patterns

  • Add: Template types to the patterns 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.. (45814)

Enhancements

  • Post 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. for block-based themes. (46212)
  • Move word count to the top of the outline. (46648)
  • Update: Remove need for template prefix in gutenberg_get_template_hierarchy. (46257)
  • Update: Use offsite navigation editor on the navigation inspector sidebar. (46440)

Site Editor

  • Add the template title and type to the site hub. (46736)
  • Increase the width of the site editor sidebar. (46769)
  • Move the edit button in the site editor sidebar to a contextual widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.. (46700)

Block Library

  • Navigation: Adds page list as child of submenu. (46414)
  • Navigation: Bring back the heading and the menu selector in the ellipsis menu. (46622)
  • Template Parts: Add an option to import widgets from the sidebars. (45509)

Design Tools

  • Page List: Add typography supports. (43316)
  • Style Engine: Add support for text columns (column-count). (46566)

CSSCSS Cascading Style Sheets. & Styling

  • Edit-post site logo: Fix focus style. (46733)
  • Base Styles: Extract long-content-fade to its own file so it can be imported and reused. (46485)

Components

  • TextareaControl: Add new opt-in prop. (46559)

Colors

  • Remove clearable from link ColorPanel item. (46507)

Global Styles

  • Shadow: Add shadow presets support via theme.json. (46813)
  • Fluid typography: Add configurable settings for minimum font size to theme.json. (42489)
  • Inline preview: Center align block in global styles inline preview. (46727)

Bug Fixes

  • DOM: Fix findNext/findPrevious tabbable if target is not in findFocusable list. (46580)
  • Fix: Bug on withSafeTimeouts. (46595)
  • Fixed incorrect CHANGELOG link. (46609)
  • Fixed table block footer section issue. (46567)
  • Iframe: Restore typewriter effect in post editor. (46745)
  • Parse the attributes in a case-insensitive way to comply with the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. parsing spec. (46748)
  • Update: Guard against null block in off canvas editor. (46594)
  • docgen: Add function to handle list of types for theme.json schema. (46375)
  • Post editor: Fix title margin. (46698)

Block Library

  • Fix Off Canvas Editor add submenu item option. (46562)
  • Make table of contents label in placeholder translatable. (46788)
  • Query 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.: Fetch terms suggestions dynamically. (46649)

Components

  • FocalPointPicker: Fix layout misalignment when placed in the BlockInspector. (46631)
  • Storybook: Fix crash when parameters is undefined. (46670)
  • Toolbar: Fix duplicate focus style on anchor link button. (46759)

Widgets Editor

  • Revert “[customize-widgets/utils/widgetToBlock] Initialize a widget’s raw_content.content to an empty string if it’s undefined“. (46600)
  • [customize-widgets/utils/widgetToBlock] Initialize a widget’s raw_content.content to an empty string if it’s undefined. (46487)

Nested / Inner Blocks

  • Inner Blocks: Fix provides context condition. (46729)

Global Styles

  • Allow content/wide widths when unfiltered_html is not allowed. (46712)

CSS & Styling

  • Fix nav list alignment. (46682)

Block Editor

  • Inserter: Try fix media tab when upload of media types has been disabled. (46676)

Build Tooling

  • Restore gutenberg_ prefix to function calls in PHPUnit tests. (46662)

Patterns

  • Pattern Setup: Fix full heights during transition. (46615)

Design Tools

  • Verse: Prevent default styles overriding theme.json font family. (46560)

Block Variations

  • Block Variation Picker: Adds support to declared icon with source. (46373)

Themes

  • theme.json schema: Allow object type on style properties. (45897)

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)

  • Block editor: iframe/writing flow: Change tab index to 0. (46323)
  • Fix region navigation in the site editor. (46525)
  • Keycodes: Fix tilde (~) character isn’t displayed correctly. (46826)
  • useNavigateRegions: Use closest to determine the next region to navigate to. (44883)

Performance

  • Add a performance metric to measure typing within containers. (46529)
  • Block Editor: Optimize useAvailableAlignments performance. (46655)
  • Reset the page between every performance test. (46646)
  • Lodash:
    • Refactor block editor away from _.find(). (46577)
    • Remove omit usage from RN test mocks. (46660)
    • Remove dependency from server-side-render. (46746)
    • Remove from block editor reducer. (46656)

Widgets Editor

  • Lodash: Remove dependency from customize-widgets. (46747)

Block Library

  • Gallery: Avoid creating new layout objects on every render. (46715)

Site Editor

  • Memoize sidebar component. (46604)

Components

  • Lodash: Refactor components away from _.find(). (46537)

Experiments

  • Add rough animation to navigation and links. (46342)
  • Tag Processor: Fix a problem backing up too far after updating HTML. (46598)

Block Library

  • Improve empty menu state in nav off-canvas editor. (46602)
  • Nav offcanvas – handle non-direct insert block inserter. (46503)
  • Navigation list view: Use smaller lock icon. (46578)

Documentation

  • Add missing prefix in PHPDocPHPDoc (docblock, inline docs) comment. (46808)
  • Clarifying the npm package release process for the RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). release. (46555)
  • Doc: Fix missing link to Block Styles page. (46695)
  • Fix: Missing links in block.json schema. (46694)
  • Lodash: Refactor away from _.omit(). (46674)
  • Update PHPDoc for gutenberg_get_global_stylesheet. (46817)
  • Added a note to register_block_pattern_category(). (46628)

Code Quality

  • Block Editor:
    • Improve ImageSizeControl tests. (46765)
    • Make URLPopover tests more precise. (46654)
  • Chore: Remove Inexistent parameter from function call in categories block. (46804)
  • ESLint: Enable testing-library/no-node-access rule. (46703)
  • Fix return type of getSpacingPresetSlug function. (46805)
  • Iframe: Simplify/reactify compat styles logic. (46732)
  • Mobile BlockToolbar: Improve useSelect for fewer rerenders. (46697)
  • Remove leftover pattern. (46701)
  • Remove the nux package. (46110)
  • Remove: __experimentalHasMultipleOrigins prop from colors and gradients. (46315)
  • Use instead of Fragment. (46633)
  • package-lock.json: Dedupe the scheduler package. (46605)
  • withFilters tests: More precise act() calls. (46630)
  • Jest config: Use real timers by default. (46714)
  • Element: Export new ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18 APIs. (46610)

Block Library

  • Comments Block: Remove unnecessary editorStyle prop in legacy metadata. (46514)
  • Extract hook for offcanvas inserted block. (46618)
  • Try making page list a controlled block. (46416)

Components

  • BorderControl: Improve popover waiting. (46713)
  • Improve PanelBody tests. (46659)

Data Layer

  • Data: Fix no-node-access violation in suspense tests. (46657)

Tools

Testing

  • Always run initialization code before Playwright end-to-end tests. (46459)
  • E2E: Fix confirmValidDropZonePosition() when dropzone not ready. (46677)
  • E2E: Refactor global inserter utility. (46366)
  • Fix CORS error in the demo end-to-end test. (46668)
  • Migrate Font Size Picker tests to Playwright. (46591)
  • Migrate Toolbar roving tabindex tests to Playwright. (46634)
  • Migrate quote end-to-end tests to playwright. (46549)
  • Post a summary of the flaky tests to the commit. (45798)
  • Update performance tests to work with themes that load editor into an iframe. (46665)

Block Library

  • Update OffCanvasEditor to use clientids tree. (46541)
  • Update copy of off canvas editor ‘add submenu item’ option. (46564)
  • Page List:
    • Remove duplicate code. (46620)
    • Update the icon to demonstrate that the pages are automatically updated. (46438)
  • Query Loop:
    • Only show the Filters panel when there are allowed controls that need to be displayed. (45869)
    • Connect scoped block variation to inserter variations. (46410)
    • Show pattern titles in setup. (46688)

Components

  • Icon: Remove knobs in stories. (46517)
  • Refactor Dropdown component to TypeScript. (45787)
  • Theme component: Remove public export. (46427)
  • ToolTip: Remove knobs in stories. (46515)

Block Editor

  • BlockListAppender: With custom appender, don’t react to nested list settings changes. (46461)
  • Paste: Reuse file transforms for file pasting. (45891)
  • Site Editor: Don’t show block inserter when the canvas is view mode. (46763)

Data Layer

  • Data: Recreate listeningStores set for every markListeningStores call. (46607)
  • useSelect: Add unit tests for static select mode. (46606)

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

  • Navigation Sidebar: Hide behind the experiment flag. (46710)

Icons

  • Update the update icon. (46575)

Accessibility

  • Change SpacingSizesControl ARIA from region to group. (46530)

Global Styles

  • Inline block preview: Add preview block in nested global style panels. (46401)

Typography

  • Typography block supports: Sync with 6.1 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.. (43928)

Web Fonts

  • Change architecture to use Core’s Dependencies API. (43492)

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 @artemiomorales @brookewp @danielbachhuber @DAreRodz @dmsnell @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @gigitux @hellofromtonya @jasmussen @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mikachan @mirka @mmtr @noisysocks @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @scruffian @t-hamano @talldan @tyxla @viralsampat-multidots @vykes-mac @websitegenii @WunderBart @youknowriad

Thanks to @jameskoster for helping with assets and @priethor for reviewing.

#block-editor, #core-editor, #gutenberg, #gutenberg-new
Ryan Welcher 2:26 pm on December 22, 2022
Tags: block-editor, , ,   

What’s new in Gutenberg 14.8? (21 December)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg released on a biweekly basis, discovering 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 known as Full Site Editing).

What's new in Gutenberg 14.0

Gutenberg 14.8 has been released and is available for download!

A new, reorganized Site Editor interface

With Gutenberg 14.8, the Site Editor interface gets a major overhaul and introduces Browse Mode. It is now easier than ever to navigate through templates and template parts. It’s even possible to add new ones through 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.. The work on this feature is ongoing and will continue to improve as new Gutenberg versions are released. (44770), (45100), (46458)

Introducing the Style Book

Users and designers can view and edit all blocks via the new Style Book feature, which is an extension of the Styles panel in the Site Editor. The interface exposes both coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and third-party blocks from plugins and are broken down by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The Style Book provides an overview of all 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. styles in a centralized location while also making it easier to quickly make changes at the global level. (45960).

The Styles panel also offers a preview when customizing individual blocks. (45719)

Add custom CSSCSS Cascading Style Sheets. rules for your site

Bringing feature parity with the WordPress customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., you can now add custom CSS via the Styles > Custom panel in the Site Editor. This will allow users and designers to quickly make changes that won’t be overwritten by a theme update. (46141), (46561), (46663)
Currently, this is an experimental feature that can be enabled by visiting Gutenberg > Experiments and ticking the Global styles custom CSS checkbox.

Other Notable Highlights

List/quote: Unwrap inner block when pressing Backspace at start

Gutenberg 14.8 will now unwrap inner blocks of the List and Quote blocks when backspacing at the start. This results in the first inner block becoming a Paragraph that is separate from its previous parent List or Quote container. (45075)

Pattern title tooltip

The inserter now shows pattern titles when focused on or hovering an individual pattern preview. These were previously hidden from view and only shown to screen readers. (46419)

Navigation Block Improvements

This release continues to improve on the Navigation block with several changes that are building blocks for future releases. These include adding a location fallback for classic menus and an “open list view” button. The Page List block also has a convert panel when used within a Navigation block. (46426), (45976), (46286), (46335), (46070), (46352)

Changelog

Enhancements

Block Library

  • Add a current-menu-ancestor class to navigation items. (40778)
  • Page List Block: Adds a longdash tree to the parent selector. (46336)
  • Page List Block: Hide page list edit button if no pages are available. (46331)
  • Page List: Add convert panel to Inspector Controls when within Nav block. (46352)
  • Page List: Prevent users from adding inner blocks to Page List. (46269)
  • Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)
  • Heading Block: Don’t rely on the experimental selector anymore. (46284)
  • Media & Text Block: Create undo history when media width is changed. (46084)
  • Navigation block: Add page list to Link UIUI User interface transforms in Nav block. (46426)
  • Navigation block: Add location->primary to fallback nav creation for classic menus. (45976)
  • Navigation block: Update fallback nav creation to the most recently created menu. (46286)
  • Navigation block: Add a ‘open list view’ button. (46335)
  • Navigation block: Removes 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. from the navigation list view in the experiment. (46070)
  • Query: Remove color block supports. (46147)
  • Table block: Make figcaption styles consistent between editor and front end. (46172)
  • List/quote: Unwrap inner block when pressing Backspace at start. (45075)

Inspector Controls

  • Sidebar Tabs: Refine the use of inspector tabs and disable filters for Nav blocks. (46346)
  • Sidebar Tabs: Use editor settings to override display. (46321)
  • Summary panel: Try improving spacing and grid. (46267)

Global Styles

  • Add Style Book to Global Styles. (45960)
  • Add block preview component in global styles. (45719)
  • Move border from layout to own menu. (45995)
  • Add a CSS style to 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. to allow the setting of custom CSS strings. (46255)
  • Expose before 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. hook in useSettings for injecting block settings in the editor. (45089)
  • Global styles: Add a custom CSS panel to the site editor (currently behind an experimental flag). (46141)

Site Editor

  • Allow adding new templates and template parts directly from the sidebar. (46458)
  • Synchronize the sidebar state in the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (46433)
  • Try template drill down on the shell sidebar (browse mode). (45100)
  • Reorganize the site editor to introduce Browse Mode. (44770)

Block Editor

  • Update the synced block hover styles in Inserter. (46442)
  • Add new selector getLastInsertedBlockClientId. (46531)
  • Block editor: Hide fixed contextual toolbar. (46298)
  • Inserter: Pattern title tooltip. (46419)
  • useNestedSettingsUpdate: Prevent unneeded syncing of falsy templateLock values. (46357)
  • Design: Augmented shadows for modals and popovers. (46228)

Components

  • Tabs: Try a simpler tab focus style, alt. (46276)
  • BaseControl: Add convenience hook to generate id-related props. (46170)
  • Dashicon: Refactor to TypeScript. (45924)
  • Lighten borders to gray-600. (46252)
  • Popover: Check positioning by adding and testing is-positioned class. (46429)

Icons

  • Icons: Update the border icon. (46264)

Testing

  • Tests: Fix toBePositionedPopover matcher message function. (46239)

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

  • Update the Gutenberg plugin to require at least the WP 6.0 version. (46102)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher: 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. changes from core theme resolver. (46250)
  • Update: Move gutenberg_register_core_block_patterns from 6.1 to 6.2. (46249)
  • Upgrade ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. packages to v18. (45235)

Themes

  • Empty Theme: Add the $schema property in theme.json and rename template directories. (46300)

Mobile

  • Mobile: Disable Unsupported Block Editor Tests (Android). (46542)
  • Mobile: Inserter – Remove .done() usage. (46460)
  • Mobile: Update Heading block end-to-end test. (46220)
  • Mobile: Updates packages to not use GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. URLs. (46422)

Bug Fixes

Block Library

  • Fix Nav Submenu block Link UI text control. (46243)
  • Fix auto Nav menu creation due to page list inner blocks. (46223)
  • Handle innerContent too when removing innerBlocks. (46377)
  • Image Block: Ensure drag handle matches cursor position when resizing a center aligned image. (46497)
  • Navigation Block: Add social link singular to list of blocks to be allowed. (46374)
  • Navigation Block: Fixes adding a submenu. (46364)
  • Navigation Block: Prevent circular references in navigation block rendering. (46387)
  • Navigation Block: Recursively remove Navigation block’s from appearing inside Navigation block on front of site. (46279)
  • Navigation link: Use stripHTML. (46317)
  • Page List Block: Fix error loading page list parent options. (46327)
  • Query 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. Block: Add migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of colors to v2 deprecation. (46522)
  • Site Logo: Correctly set the image’s natural height and width. (46214)
  • Strip markup from link label data in inspector. (46171)
  • Template Parts: Fix modal search stacking context. (46421)
  • Video: Avoid an error when removal is locked. (46324)
  • Layout child fixed size should not be fixed by default and should always have a value set. (46139)

Blocks

  • Paste handler: Remove styles on inline paste. (46402)
  • Improve performance of gutenberg_render_layout_support_flag. (46074)

Global Styles

  • Allow indirect properties when unfiltered_html is not allowed. (46388)
  • Fix Reset to defaults action by moving fills to be within context provider. (46486)
  • Fix duplication of synced block colors in CSS output. (46297)
  • Make style book label font size 11px. (46341)
  • Style Book: Clear Global Styles navigation history when selecting a block. (46391)
  • Global Styles 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/. endpoint: Check custom CSS is included before attempting to validate. (46561)
  • Reverts the custom CSS to an experiment while we resolve the handling of unfiltered HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. capabilities. (46663)

Block Editor

  • Block Editor: Fix content locked patterns. (46494)
  • Block Editor: Fix memoized pattern selector dependant arguments. (46238)
  • Block Editor: Restore draggable chip styles. (46396)
  • Block Editor: Revert deoptimization useNestedSettingsUpdate. (46350)
  • Block Editor: Fix some usages of useSelect that return unstable results. (46226)
  • useInnerBlockTemplateSync: Cancel template sync on innerBlocks change or unmount. (46307)

Patterns

  • Add new pattern categories. (46144)
  • Block Editor: Add initial view mode in BlockPatternSetup. (46399)

Site Editor

  • Do not remount 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.. (46431)
  • Fix the top bar ‘exit’ animation. (46533)
  • Keep edited entity in sync when Editor canvas isn’t mounted. (46524)
  • [Site Editor]: Add default white background for themes with no background color set. (46314)

Components

  • InputControl: Fix Flex wrapper usage. (46213)
  • Modal: Fix unexpected modal closing in IME Composition. (46453)
  • MaybeCategoryPanel: Avoid 403 requests for users with low permissions. (46349)
  • Rich text: Add button to clear unknown format. (44086)

Document Settings

  • Fix template title in summary panel and requests for low privileged users. (46304)
  • Permalink: Hide edit field for users without publishing capabilities. (46361)

Patterns

  • Content lock: Make filter hook namespace unique. (46344)

Layout

  • Child Layout controls: Fix help text for height. (46319)

Widgets Editor

  • Shortcuts: Add Ctrl+Y for redo to all editor instances on Windows. (43392)

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

  • HTML block: Fix parsing. (27268)

Mobile

  • Social Links mobile test: Wait for URL bottom sheet to appear. (46308)

Performance

Components

  • Avoid paint on popover when hovering content. (46201)
  • CircularOption: Avoid paint on circular option hover. (46197)
  • Lodash: Replace _.isEqual() with fastDeepEqual. (46200)
  • Popover: Avoid paint on popovers when scrolling. (46187)
  • Resizable Box: Avoid paint on resizable-box handles. (46196)
  • ListView: Avoid paint on list view item hover. (46188)

Code Quality

  • Lodash: Refactor blocks away from _.find(). (46428)
  • Lodash: Refactor core-data away from _.find(). (46468)
  • Lodash: Refactor edit-site away from _.find(). (46539)
  • Lodash: Refactor away from _.orderBy(). (45146)
  • Lodash: Refactor block library away from _.find(). (46430)
  • Remove usage of get_default_block_editor_settings. (46112)

Post Editor

  • Lodash: Refactor editor away from _.find(). (46464)
  • Lodash: Refactor post editor away from _.find(). (46432)

Block Editor

  • Avoid paint on inserter animation. (46185)
  • Improve inserter search performance. (46153)
  • Block Editor: Refactor the “order” state in the block editor reducer to use a map instead of a plain object. (46221)
  • Block Editor: Refactor the block-editor parents state to use maps instead of objects. (46225)
  • Refactor the block-editor “tree” state to use maps instead of objects. (46229)
  • Refactor the block-editor byClientId redux state to use maps instead of plain objects. (46204)
  • Fix typing performance issue for container blocks. (46527)

Testing

  • E2E: Fix performance tests by making inserter search container waiting optional. (46268)

Mobile

  • Columns mobile block: Avoid returning unstable innerWidths from useSelect. (46403)

Experiments

Block Library

  • Navigation List View: Remove empty cell when there is no edit button. (46439)

Web Fonts

  • WP Webfonts: Avoid duplicated font families if the font family name was defined using fallback values. (46378)

Documentation

  • Adds clarifications and clears up inaccuracies. (46283)
  • Adds details of how to find the .zip file. (46305)
  • Doc: Fix description and documentation for link color support. (46405)
  • Docs: Add missing useState import in BorderBoxControl documentation. (42067)
  • Docs: Add missing useState import in color picker docs. (42069)
  • Docs: Add missing useState import in confirm dialog docs. (42071)
  • Docs: Adds reminder to use Node.js v14 in Quick Start. (46216)
  • Docs: Fix missing link to primitives package. (46290)
  • Docs: Update reference to IE 11. (46296)

Code Quality

  • Block Editor: Fix no-node-access violations in BlockPreview. (46409)
  • Block Editor: Fix no-node-access violations in BlockSelectionClearer. (46408)
  • Columns mobile edit: Remove unused updateBlockSettings action bind. (46455)
  • ESLint: Fix warning in getBlockAttribute documentation. (46500)
  • List View: Use default parameters instead of defaultProps. (46266)
  • Removed: Remove small APIs marked to be removed in WP 6.2. (46106)
  • Site Editor: Remove 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. CSS. (46288)

Block Library

  • Group Block: Remove placeholder leftovers. (46423)
  • Group: Remove unnecessary ‘useCallback’. (46418)
  • Navigation Block: Add tests for Nav block uncontrolled blocks dirty state checking. (46329)
  • Navigation Block: Update attribute test for are-blocks-dirty.js. (46355)
  • Page List Block: Move shared “convert” description to constant. (46368)
  • Page List Block: Simplify Page List convert to links function API. (46365)
  • Query: Cleanup variation picker component. (46424)
  • RNMobile: Add an inline comment to clarify usage of ‘hard’ limit vs. unbounded query. (46245)
  • Shared standard Link UI component between Nav Link and Submenu blocks. (46370)
  • Template Parts: Remove unnecessary ‘useCallback’. (46420)

Components

  • AlignmentMatrixControl: Refactor to TypeScript. (46162)
  • Also ignore no-node-access for some components. (46501)
  • Fix no-node-access violations in FocalPointPicker tests. (46312)
  • Fix no-node-access violations in Popover. (46311)
  • Fix no-node-access violations in Theme. (46310)
  • Fix no-node-access violations in ToolsPanel tests. (46313)
  • withFilters: Use ‘act’ from React Testing Library. (46237)

Data Layer

  • Data: Add ability to subscribe to one store, remove __unstableSubscribeStore. (45513)
  • ESLint: Fix warnings in the data package. (46499)

Global Styles

  • Add “custom-css” as an acceptable value in the documentation for gutenberg_get_global_stylesheet. (46493)
  • PaletteEdit: Add changelog. (46095)

Block Editor

  • Inserter: Update mobile tab navigation styles. (46186)

Layout

  • Clarify inline comment about switching to safecss_filter_attr. (46061)

Tools

Build Tooling

  • Adds GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Action to validate Gradle Wrapper. (46247)
  • Prevent api-fetch and core-data from being imported in the block editor package. (46302)
  • Serialize the map objects properly in the Redux dev tools. (46282)

Testing

  • E2E: Fix flaky Block Switcher tests. (46406)
  • end-to-end tests: Add width and color test to button block. (46452)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.87.8s48.14ms
Gutenberg 14.76.25s46.4ms
WordPress 6.15.9s48.04ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.83.36s31.7ms
Gutenberg 14.75.47s34.78ms
WordPress 6.15.72s36.1ms

Kudos to all the contributors that helped with the release! 👏

First time contributors

The following PRs were merged by first time contributors:

  • @corentin-gautier: Avoid paint on popover when hovering content. (46201)
  • @ingeniumed: Expose before filter hook in useSettings for injecting block settings in the editor. (45089)
  • @janusqa: Reusable block: Pluralize the message “Convert to regular blocks” depending on the number of blocks contained. (45819)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @andrewserong @aristath @chad1008 @chintu51 @corentin-gautier @derekblank @draganescu @ellatrix @geriux @getdave @glendaviesnz @hideokamoto @ingeniumed @jameskoster @janusqa @jasmussen @jffng @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mburridge @mikachan @mirka @noisysocks @ntsekouras @oandregal @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad

Thanks to @joen for helping with the assets for this post and to @greenshady & @priethor for reviewing.

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

Daisy Olsen 7:01 pm on December 9, 2022
Tags: block-editor, , ,   

What’s new in Gutenberg 14.7? (7 December)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg released on a biweekly basis, discovering 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 known as Full Site Editing).

Gutenberg 14.7 has been released and is available for download!

It introduces a new experimental tabbed 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., colors to help identify some 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. types in list view, and improvements to the Page List block to make it easier to manage page links in your content.

Improved organization of block settings with split control

An experimental view in the block inspector sidebar separates appearance and settings controls by adding a tabbed interface. This feature will make blocks with many controls, such as the Group Block and Navigation Block, easier to manage. You can enable this and other experimental features from Gutenberg > Experiments in the adminadmin (and super admin) sidebar. Leveraging this new tabbed interface, the Navigation Block also includes a Menu tab for the Navigation List View introduced in Gutenberg 14.6. (45483), (45991), (46027), (45005)

Quickly identify Template Parts and Reusable Blocks by color

To more easily differentiate Template Parts and Reusable Blocks from other types of blocks, these synced block types will now be outlined in a different color in the List View, Block Toolbar, and canvas. (45473)

Add media to your content directly from the inserter

A new media tab will be available, when media exists on the site, to allow users to add media from their library. A button to open the Media Library modal is also available, making it much more convenient to add images, video, and other media to your content. (44918)

See all pages in List View for the Page List block 

The Page List block can now be expanded to see the hierarchy of pages in the List View. An option to select the root page to build the Page List from has also been added in the Block Inspector Sidebar. This will allow a subset of pages within the hierarchy to be displayed in the content. (45776), (45861)

Layout controls added to children of flex layout blocks

A new dimensions control (width for row, height for stack) will be available for children Row and Stack blocks. An option to select between fit, fill and fixed has been added. If the fixed option is selected, an `input` for a dimension will be shown, where the fixed size can be set. (45364)

Improved load times by caching the results of querying settings from theme.json

Adding WP_Object_Cache to gutenberg_get_global_settings to cache the results of querying settings from theme.json, resulted in a significant load time improvement.

This change reduced the total time of a request with the Twenty Twenty-Three theme from 521.59ms to 339.62ms, a ~35% performance increase. Testing with the Twenty Twenty showed an improved load time from 329.60ms to 290.93ms, a ~12% performance improvement. These times were measured by testing the time required to load the “hello world” post for a logged-out user.  (45372)

Changelog

Enhancements

Style Engine

  • Style engine: Trim multiple selector strings. (45873)

Block Library

  • Heading Block: Add a wp-block-heading CSSCSS Cascading Style Sheets. class. (42122)
  • Nav Block: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • Nav Block: Add label field to navigation link and navigation submenu. (45964)
  • Nav Block: Add link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the navigation submenu inspector controls. (45816)
  • Nav Block: Fix for navigation anchor links to close modal. (45829)
  • Template Part Block: Colorize template parts and Reusable blocks. (45473)
  • List: Allow pasting pre/code. (45016)
  • Page List: Enable page list to expand in list view. (45776)
  • Page List: Add a starting page for page list block’s hierarchy. (45861)
  • Page List Item: Hide edit button. (46163)
  • Site Logo: Apply width to logo container in editor. (45821)
  • Table Block: Support colspan attribute in table HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., including when pasting. (45981)

Components

  • Add themeable background color. (45466)
  • Autocomplete: Only show UIUI User interface on user input. (45904)
  • Bump DateTimePicker deprecated prop removal version. (46006)
  • ComboboxControl: Add new opt-in prop. (45796)
  • FocalPointPicker: Add new opt-in prop. (45958)
  • Global styles: Add onChange actions to color palette items. (45681)
  • InputControl: Add help prop. (45931)
  • RangeControl: Remove margin override and add new opt-in prop. (45985)
  • SearchControl: Remove margin overrides and add new opt-in prop. (46081)
  • Storybook: Opt in to story store v7. (42486)
  • ToggleControl text overflows when it has a long label. (45962)
  • useControlledValue: Let TypeScript infer the return type. (46164)

Inspector Controls

  • Sidebar: Add list view tab for Navigation block et al. (45483)
  • Sidebar: Only render sidebar tabs possessing items to display. (45991)
  • Sidebar: Rename appearance tab to styles. (46027)
  • Sidebar: Split block tools into menu, settings, and appearance tabs. (45005)

Design Tools

  • Min Height: Add height control component with slider. (45875)
  • Spacing: Make visualiser appear on focus. (46096)

Block Editor

  • [Inserter]: Replace text in Reusable tab with an icon. (45851)
  • [Inserter]: Update pattern explorer button css. (45735)
  • [Inserter]: Add media tab. (44918)

Patterns

  • [Pattern Directory]: Add categories endpoint. (45749)
  • [Patterns]: Update pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. descriptions. (46005)

Nested / Inner Blocks

  • Mark applying block templates not persistent. (45843)

Rich Text

  • Create undo level before autocorrect. (45670)

Layout

  • Add Layout controls to children of Flex layout blocks. (45364)

Bug Fixes

Preferences

  • Disable distraction-free preference effects on small viewports. (45591)

Block Library

  • List Block: Fixed a 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. that List block attributes were reset in 6.1.1. (46000)
  • Gallery: Use unbound query when fetching image details. (46143)
  • Heading: Add block classname deprecation. (46138)
  • Page List: If no parent page is set, still render all children. (45967)
  • Page List: Render the children correctly in the editor. (46165)
  • Post Author: Avoid errors when the user avatars are disabled. (45989)
  • Nav Block: 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. doesn’t appear when hamburger clicked on. (45773)

Block Editor

  • Fix broken Link Control hook. (46113)
  • Fix inserter tab panel content buttons’ position. (45800)
  • Block editor: rich text: Return early if __experimentalUndo is not defined. (46152)

Global Styles

  • Global Style Context: Consider global user styles ready if a theme has none. (46073)
  • Merged data should consider origin to return early. (45969)

Components

  • Remove CircleIndicatorWrapper focus-visible outline. (45758)
  • ColorPalette: Show Clear button even when colors array is empty. (46001)

Site Editor

  • Fix template list width. (45888)
  • Prevent edit-post from being loaded in edit-site. (45895)

CSS & Styling

  • Fix the editor area height. (45799)

Full Site Editing

  • Ensure post-featured-image block is intheloopLoop 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.() for BC with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and plugins, and to fix lazy-loading. (45534)

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 “Testing Instructions for Keyboard” to PR template to encourage accessibility testing. (45957)
  • BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • Sidebar Tabs: Set default tab to first available. (45998)
  • TabPanel: Support manual tab activation. (46004)
  • – Constrained tabbing: Fix unstable behavior in firefox. (42653)

Performance

  • Work on refactor away from Lodash to reduce build size continued” (see 13.7)

Global Styles

  • Add WP_Object_Cache to the gutenberg_get_global_settings method. (45372)
  • Global styles WP_Query. (46043)
  • Ignore cached wp_theme_has_theme_json when WP_DEBUG is enabled. (45882)
  • Make theme.json object caches non persistent. (46150)
  • Remove test_global_styles_user_cpt_change_invalidates_cached_stylesheet. (45993)
  • Update gutenberg_get_global_stylesheet to use WP_Object_Cache. (45679)
  • Update which origins are queried for gutenberg_get_global_settings. (45971)

Post Editor

  • useBlockEditorSettings: Return const empty array to avoid rerenders. (46117)

Block Editor

  • Update the attributes reducer to use a map instead of a regular object. (46146)

Experiments

Block Library

  • Nav Block: Add basic edit button UI to Nav block offcanvas editor. (45815)
  • Nav Block: Add submenu menu item to list view. (45794)
  • Nav Block: Alternative: Add inserter to Nav block offcanvas experiment. (45947)
  • Nav Block: Display inserter popover in offcanvas UI. (46013)
  • Nav Block: List View – Stop child item selecting a parent which is already selected. (45860)
  • Nav Block: Add simple back button to inspector controls. (45852)
  • Nav Block: Move color controls to support panel. (46049)
  • Nav Block: Enable easier drag and drop for navigation building. (45906)
  • Nav Block: Hide the create new menu button if the experiment is enabled. (46019)
  • Navigation List view: Fix incorect class. (46129)
  • Navigation List view: Include offcanvas specific styles. (45963)
  • Navigation List view: Scroll horizontally when table overflows. (45966)

Documentation

  • (docs) Document the special case of shipping point releases when new release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". already exists. (46083)
  • Added InspectorControls import to example. (45872)
  • Fix NavigableRegion README. (45879)
  • Fix link & code markdown. (45708)
  • Navigation: Adds a warning about duplicate code for the future. (45844)
  • Storybook: Add link to component folder on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, retire Storysource. (45727)
  • Style Engine: Add first draft of contributing doc. (45930)
  • Update applying-styles-with-stylesheets.md. (45925)

Code Quality

Components

  • Cleanup the BlockPreview component. (45936)
  • Convert the Snackbar component to TypeScript. (45472)
  • Fix ESLint violations in ContextSystemProvider tests. (46010)
  • Fix ESLint violations in NoticeList tests. (46011)
  • Fix no-node-access in Grid tests. (45900)
  • Fix no-node-access in Sandbox tests. (45908)
  • Fix no-node-access in Text tests. (45898)
  • Fix no-node-access in Theme tests. (45896)
  • Fix no-node-access violation in ControlLabel tests. (46007)
  • Fix no-node-access violations in Card tests. (46158)
  • Fix no-node-access violations in Disabled tests. (46156)
  • Improve BoxControl tests. (45968)
  • Improve Dropdown tests. (45911)
  • LinkedButton: Remove unnecessary span tag. (46063)
  • TextControl: Restrict type prop in TypeScript. (45433)
  • Tooltip: Add readme and unit tests for shortcut prop. (46092)
  • NumberControl: Refactor styles/tests/stories to TypeScript, replace fireEvent with user-event. (45990)
  • useBaseField: Convert component to TypeScript. (45712)
  • Small refactoring to the NavigableRegion component. (45849)

Block Library

  • ESLint: Fix minor ESLint warning in LinkUI. (46161)
  • Fix ESLint warnings in tests. (46034)
  • 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. attribute markup in core/home-link block. (46089)
  • Link UI: Destructure the props earlier in the component. (46209)
  • Navigation Link UI: Try to align both files. (46205)
  • Navigation Menu Selector: Share the functions needed for the NavigationMenuSelector. (46053)
  • Navigation: Extract components. (45850)
  • Navigation: Reduce duplicate code. (45779)
  • Navigation: Remove unused clientId prop. (46020)
  • 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.: Only get the post title when rendering alt text. (45835)
  • Reduce prop drilling in Block Card component. (46052)
  • Refactor link creation UI to standalone component/file. (46031)
  • Remove Nav block specific classes from Nav offcanvas Link UI. (46182)
  • Remove WrappedNavigationMenuSelector. (46056)
  • Update offcanvas back button to select parent Nav block and limited to Nav block only. (46037)
  • Don’t check if constants set by wp_initial_constants() are defined. (45979)

Block Editor

  • LinkControl unit tests: Use user.type to type into search field. (45802)
  • Simplify api for link UI abstraction to use a single prop for the value. (46189)
  • URLInput: Keep the search results label in sync with the results list. (45806)
  • Use wordpress/escape-html escapeHTML in Link UI in preference to Lodash method. (46184)

Global Styles

  • Cleaner logic in wpthemehasthemejsonJSON 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.. (45950)
  • Remove usage of wpgettheme. (45770)

Post Editor

  • Update BlockCard to pass className instead of isSynced prop. (46021)

Full Site Editing

  • Block editor: Separate content styles for the 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.. (44298)

Tools

Build Tooling

  • Bump caniuse-lite version. (46093)

Testing

  • Fix Quote block’s unwrap end-to-end test. (46168)
  • Remove ‘response.deleted’ check. (45992)
  • Warning: Fix ESLint warnings in tests. (46033)
  • ESLint: Enable testing-library/no-container rule. (46160)
  • Element: Fix no-node-access in createInterpolateElement. (45894)
  • Block Editor: Fix ESLint warnings in MediaUpload tests. (46035)
  • Block Editor: Fix no-node-access in RecursionProvider tests. (45902)
  • Block Editor: Fix block alignment tests for ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18. (45937)
  • Block Editor: Wait for popover positioning in MediaReplaceFlow tests. (45863)
  • Compose: Fix ‘no-container’ violations in ‘useDisabled’ tests. (45797)
  • Compose: Fix ESLint violations in withGlobalEvents tests. (46012)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.711.45s59.36ms
Gutenberg 14.611.41s62.36ms
WordPress 6.110.72s68.08ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.79.68s58.42ms
Gutenberg 14.610.8s67.09ms
WordPress 6.111.69s64.87ms

Kudos to all the contributors that helped with the release! 👏

First time contributors

The following PRs were merged by first time contributors:

  • @albarin: Remove ‘response.deleted’ check. (45992)
  • @artemiomorales: Clarify explanation of how ‘Convert to Links’ works in Page List block. (45394)
  • @coreyworrell: Fix for navigation anchor links to close modal. (45829)
  • @devanshijoshi9: Components: ToggleControl text overflows when it has a long label. (45962)
  • @flexseth: Added InspectorControls import to example. (45872)
  • @hiyascout: Update applying-styles-with-stylesheets.md. (45925)
  • @marissa-makes: BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • @mpkelly: Support colspan attribute in table HTML, including when pasting. (45981)
  • @TobiasBg: Fix invalid attribute markup in core/home-link block. (46089)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @albarin @alexstine @andrewserong @artemiomorales @brookewp @chad1008 @ciampo @coreyworrell @ddryo @devanshijoshi9 @draganescu @ellatrix @felixarntz @flexseth @fullofcaffeine @geriux @getdave @glendaviesnz @gvgvgvijayan @hiyascout @jsnajdr @kienstra @MaggieCabrera @Mamaduka @marissa-makes @mikachan @mirka @mmtr @mpkelly @ntsekouras @oandregal @ocean90 @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @t-hamano @tellthemachines @TobiasBg @tyxla @walbo @youknowriad

Thanks to @joen for helping with the assets for this post and to @annezazu, @bph & @priethor for reviewing.

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