Tag Archives: gutenberg-new

George Mamadashvili 2:51 pm on August 4, 2022
Tags: , gutenberg-new   

What’s new in Gutenberg 13.8? (3 August)

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

The Gutenberg 13.8 comes with Fluid Typography, 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) improvements, revamped Quote 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 Template parts UXUX User experience enhancements. The release is also packed with 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 and code quality improvements. All these thanks to a fantastic team of contributors, including two first-timers.

It’s now available in the WordPress 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 repository.

Table of contents

Fluid typography support

This new option allows themers to define text size that can scale and adapt to the screen’s real state available, so your content looks great on any screen.

Note: It’s a new feature, and the Gutenberg team would appreciate your feedback.

Revamped Quote block leveraging inner blocks

After the recent Gallery block improvements, it’s time to re-introduce the Quote block. Thanks to robust nested blocks 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., now you can shape the quotes to your heart’s content, which means that you can place any block inside the quotes 🎉 

Template part UX improvements

Template parts are essential for many themes; Gutenberg 13.8 introduces improvements for those who leverage variations and patterns to provide flexibility for their users.

The specific template part variations are now available in the block inserter, making it easy to add “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.”, “Footer,” or “Newsletter Subscription” template parts to your site.

Speaking of easy, the new search component in the template parts replacement modal will help you find just the right pattern for the block.

Border controls for Image blocks

The Image block now supports the full range of border controls, including Color, Style, and Width. I’m curious to see what creative folks at the Museum of Block Art can accomplish after 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..

Accessibility enhancements

The Gutenberg team is always trying to make the Gutenberg plugin more accessible with each release, and 13.8 is no different. The release includes iterative accessibility enhancements, including improved and consistent labels and tooltips across the Editor(s), as well as more keyboard-friendly clickable elements in the “Add template” modal.

Other notable highlights

  • The Post Comments and Comments block are now consolidated into a single block – Comments.
  • Now it’s possible to exit container blocks like Group blocks using the `Enter` key on an empty paragraph.
  • The new settings under “Global Styles > Layout” allow users to override content dimensions defined by a theme, giving the users better control over the full-width content.

13.8.0

Enhancements

Block Library

  • Image: Add border block support for color, width, and style. (31366)
  • Merge Comments and Post Comments blocks. (41807)
  • Social Icon: Added WhatsApp icon to the Social Icon Block. (42137)
  • Template Part: Swap block action places. (42221)
  • Template Part: Add search to replacement modal. (42459)

General UIUI User interface

  • Equalize modal content padding. (42370)
  • Remove top margin on the first paragraph in a modal. (42369)

Components

  • BorderControl: Render border color/style dropdown as UnitControl prefix. (42212)
  • ColorPicker: Cleanly implement large size. (42002)
  • InputControl: Decrease large default padding if has prefix/suffix. (42166)
  • SelectControl: Add flag for larger default size. (42456)
  • ToggleGroupControl: Add size variants. (42008)
  • UnitControl: Update unit select’s focus styles. (42383)
  • CustomSelectControl: Use styles from SelectControl. (42460)
  • Dropdown: Add wrapper for custom padding. (42595)
  • InputControl: Add padding wrapper for prefix/suffix. (42378)
  • ScrollLock: Improve Storybook story for documentation view. (42344)
  • ColorPalette: Display checkered preview background when value is transparent. (42232)

Global Styles

  • Add layout content size controls to global styles. (42309)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. support for root padding and align full blocks. (42085)
  • 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.: Add block support feature level selectors for blocks. (42087)
  • Theme.json: Add support forw heading / caption elements in theme.json schema. (42433)

Document Settings

  • Make ‘Move to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.’ button full width. (42577)

Block Editor

  • Add setting to display rich text toolbar inline. (42399)
  • Add block variations for individual template parts. (42454)
  • Enable onEnter support for group block. (40724)

Site Editor

  • On template creation, don’t show search if not needed. (42357)

Icons

  • Add shuffle icon to library. (42193)

Nested / Inner Blocks

  • Quote: Use nested blocks. (25892)

Colors

  • Update color palette popover style. (41900)

Bug Fixes

Block Library

  • Button Block: Change text-decoration style to low specificity. (42545)
  • Cover Block: Prevent transform to Group block when 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. is set. (42638)
  • Cover block: Adding background-size and background-repeat properties to the block CSS. (42470)
  • Fix tab/focus order issue in Media & text block. (40806)
  • Page List: Fetch items with ‘view’ context. (42559)
  • Post title: Fix single line paste. (42321)
  • Social Icons Block: Fix button opacity in template parts. (42641)
  • Group block: Add context to the word “Row”. (42255)
  • Post terms: Hide prefix and suffix placeholders in post terms. (42418)
  • [Media Text]: Fix deprecations 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.. (42816)

Components

  • AnglePickerControl: Fix gap between elements in RTL mode. (42534)
  • ColorPalette: Fix background image in RTL mode. (42510)
  • Context System: Don’t explicitly set undefined value to children. (42686)
  • MaybeCategoryPanel: Update categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector. (42663)
  • Popover: Fix width on expandOnMobile. (42635)
  • RangeControl: Clamp initialPosition between min and max values. (42571)
  • Tooltip: Avoid unnecessary re-renders of <select> child elements. (42483)
  • Tooltip: Fix positioning by anchoring to child element. (41268)
  • Fix condition bug on BoxControl. (42402)

Post Editor

  • Avoid 403 errors for users with low permissions. (42413)
  • Display post template selection for non-adminadmin (and super admin) users. (42705)
  • Fix typo in translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. string. (42673)

Block Editor

  • Prevent link control popover from going offscreen. (42389)
  • Writing flow: Fix caret movement for multiple lines. (42423)
  • Writing flow: Fix caret placement in corners. (42437)
  • Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. (42530)

Global Styles, CSS & Styling

  • Elements: Buttons: Fix the path with the css to style the cursor for all button elements. (42129)
  • Link elements: Add a :where selector to the :Not to lower specificity. (42669)
  • Element styles: Adding stylesheet to load in the editor. (42132)
  • Elements: Fix heading and caption element selectors. (42479)
  • Layout content size controls: Add left alignment to line up with description and other elements. (42576)
  • Layout: Ensure defaultEditorStyles are still output in Classic themes. (42906)
  • Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. (42756)
  • Theme.json: Fix schema for button elements. (42431)

Widgets Editor

  • Add configuration option to skip autop on freeform blocks when parsing blocks. (42623)

Rich Text

  • Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. (42596)

Site Editor

  • Fix typo in default category template’s description. (42586)
  • Fix Reakit warning on creation template component. (42392)
  • Remove leftover class. (42591)

Themes

  • Remove core/post-comments-form block styles that are overriding button element styles. (42053)

Icons

  • Icons Package: Fix line icons styling. (40315)

Accessibility

  • BorderControl: Update labelling, tooltips and wrap with fieldset and legend. (42348)
  • Add aria-hidden to query pagination arrows. (42583)
  • Fix labelling and semantics of the paragraph block Left to right control. (42324)
  • Fix mismatching label and visible text on the Toggle block inserter button. (42359)
  • Fix the description text of block movers for horizontal movement. (42393)
  • Replace clickable div elements with buttons in the Add template modal. (42668)

Experiments

Style Engine

  • Style Engine Rules & Store objects. (42222)
  • Add a WP_Style_Engine_Processor object. (42463)
  • Add elements to the frontend. (41732)
  • Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. (42428)
  • Style engine: Check item value validity. (42487)

List v2

  • Add forward delete. (42564)
  • Improve paste handling. (42524)
  • Merge with nested items. (42551)
  • Switch to default block type on Backspace from start. (42633)
  • Remove quote transforms as removed by Quote v2. (42700)

Global Styles

  • Block supports: Add fluid typography. (39529)
  • Layout: Reduce specificity of fallback blockGap styles. (42665)

Documentation

  • Add examples to core/blocks selectors. (42572)
  • Consolidate editor filters and actions. (42356)
  • Correct the documented return type for WP_Block_Parser::Render(). (42642)
  • Doc: Update getEntityRecord/s param description. (42488)
  • Docs: Add variations key to block.json JSON schema definition. (42539)
  • Docs: Add missing data module references. (42651)
  • Fix: Repetition of wrong word in string. (42621)
  • Flex: Remove experimental from documentation and storybook. (42301)
  • Include section on how to test code for a given WP major. (42390)
  • Marking internal action as @ignore to remove them from the documentation. (42163)
  • Theme JSON Docs: Clarify null, true, and false values for blockGap setting. (42447)
  • ToolsPanel: Add a readme section related to laying out a ToolsPanel. (42615)

Components

  • Improve documentation for the SpaceInput type. (42376)
  • BorderControl: Add missing changelog for accessibility enhancements. (42411)

Code Quality

  • Base Styles: Apply long-content-fade gradient from transparent to color. (42401)
  • Fix jsx-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) label-has-associated-control configuration. (42671)
  • Two code issues on navigation link edit missing text. (42440)
  • Remove deprecated eslint rules. (42654)

Style Engine

  • Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. (42464)
  • Update return PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher doc comment and other nitpicks. (42453)

Componentes

  • ComboboxControl: Refactor onKeyDown to use keyboardEvent.code. (42569)
  • Elevation: Convert component to TypeScript. (42302)
  • ScrollLock: Covert component to TypeScript. (42303)
  • Shortcut: Covert component to TypeScript. (42272)
  • Divider: Complete TypeScript 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 component. (41991)
  • Lodash: Refactor a few components away from _.isEmpty(). (42468)
  • Lodash: Refactor away from _.compact(). (42438)
  • Lodash: Refactor PageAttributesParent away from _.deburr(). (42429)
  • Lodash: Refactor away from _.snakeCase(). (42427)
  • Lodash: Refactor away from _.fromPairs(). (42217)

Global Styles

  • Dimensions Global Styles: Split props into separate 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. to tidy up the panel component. (42620)

Block Library

  • Remove unnecessary ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fragments. (42529)

Tools

Testing

  • Added 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. for cover block render function. (42108)
  • Migrate hooks api test to playwright. (42584)
  • Skip flaky navigation block permissions test. (42693)
  • end-to-end Tests: Tweak Comments block tests after migrating to Playwright. (42406)
  • Utilize WordPress PHPUnit Test Library Included By wp-env. (41852)

Build Tooling

  • Update to reflect change in Documentation label. (42395)
  • Add inline documentation on building API documentation to commit block API verify error message. (42432)
  • Scripts: Exit error code 1 when status value is null. (42396)
  • Env: Download WordPress PHPUnit Into Container. (41780)
  • Env: Restrict WP_TESTS_DOMAIN constant to just hostname and not home URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41039)

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

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.83.87s57.86ms
Gutenberg 13.73.03s57.48ms
WordPress 6.03.46s52.23ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.85.12s26.49ms
Gutenberg 13.74.5s25.72ms
WordPress 6.04.56s20.91ms

Contributor props

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini

The following PRs were merged by first-time contributors:

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

Props to @priethor for the assistance with the release, @critterverse and @jameskoster for the images and videos.

#gutenberg, #gutenberg-new

Birgit Pauli-Haack 9:15 pm on July 20, 2022
Tags: , gutenberg-new   

What’s new in Gutenberg 13.7? (20 July)

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

Gutenberg 13.7 brings an updated modal design, the ability to apply 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. locking to inner blocks with a click of a button, a myriad of new template types, and plenty of improvements to existing features based on feedback from the community. 

This release contains 167 PRs by 58 contributors, including four first time contributors. Kudos to all the contributors that helped with the release! 👏 

It’s now available in the WordPress 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 repository

Table of Contents

Lock inside container block with one click 

Building on expanding locking capabilities, this version of Gutenberg includes a new toggle when locking blocks to quickly apply the selected lock settings to all blocks inside a container block (Group, Cover, and Column blocks). (41876)

This release also comes with an updated modal design for various screens. These design changes help provide focus on what someone might want to accomplish within the modal itself by blurring the background and reducing visual noise with softer corners. (40781)

Create templates now for specific categories, pages and more

In this release, the template editor was expanded with even more types of templates for various use cases.  You can add and edit templates for Custom posts types and taxonomies. You can get very specific and offer a different template for single categories or tags. 

For instance, you can use a different template for all personal blogblog (versus network, site) posts, a second one for all developer related blog posts, and a third one for all travel posts. 

If your site registered additional post types, like books, or products, your editor instance will automatically list them in the selection box for the Add New template button.
Note: The template for the archive-{posttype} is the only one still missing in the list of template options when you click on the Add New button in the Site editor. (42127)(41875)(42138) (42457).

To learn more, read: Core Editor Improvement: Deeper customization with more template options

Other Notable Highlights

Start with a 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. in the media placeholder.

With this release, users can directly select Use the feature image, in addition to the Upload  and Media Library options in the placeholder for a new cover block. This streamlines the workflow when editing a template.  (41722)

Introducing “Time to read”

The information panel accessed through the top bar received a new number. In addition to the numbers of  words, characters, block, headings, and paragraphs it now also contains the estimated time to read for this document (page, post, custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept.).  (41611)

Improved Document settings

In previous releases, the post settings panel in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. received a design update. In this release, the same section becomes has been refined: 

The fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug, when clicked. The result is a cleaner, more organized display that should help you more readily access all the important information about your post/page at a glance.   (42146)(42063)(42033) 

Changelog

Enhancements

  • Update the modal design. (40781)
  • Themes: Adds text decoration support to post title block. (42328)
  • Social Link: Automatically prepend emails with mailto protocol. (42186)
  • Add better ARIA labels to toggle buttons in Summary panel. (42114)
  • Start with featured image in media placeholder. (41722)

Components

  • ColorPicker: Widen hex input field for mobile. (42004)
  • ComboboxControl / FormTokenField: Add flag for larger default size. (40746)
  • Try tabs instead of segmented control for switching between solid/gradient in color panels. (41937)

Document Settings

  • Make Post Format, Slug and Author fields fill the sidebar. (42146)
  • Post Template: Update fallback label. (42063)
  • Rewrite URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org (Permalink) panel as a popover. (42033)

Full Site Editing

  • Expand the templates that can be added – custom taxonomies, specific term, specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and tag. (41875)
  • Expand the templates that can be added – specific pages. (42138)
  • List View: Use heading content for button label text if available. (41855)
  • Add New – Custom/General template. (42127)
  • Add the ‘Apply to inner blocks’ option to Block locking (41876)
  • Update: Wording on add generic template modal. (42379)

Post Editor

  • Add estimated time to read to table of contents in editor. (41611)
  • Add month and day as a suggest format to the date format picker. (42317)
  • Post Editor: Preload templates post type permissions (REST-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.). (42209)

New APIs

  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook. (42024)

Bug Fixes

  • Enable shift in URLPopover component. (42214)
  • Multi-selection: Fix select all in Safari. (42340)
  • Playwright: Fix relative URLs. (42361)
  • Document Settings: Fix tooltip appearing when opening popovers in Summary panel. (42381)
  • MediaReplaceFlow: Fix UIUI User interface showing stale URL by avoiding state duplication. (42116)
  • Template Mode: Allow clearing name field while typing. (42065)
  • Navigation: Prevent title and href props from being rendered as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. attributes. (41833)
  • Recurse into conditional CSSCSS Cascading Style Sheets. rules for 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. stylesheets. (41110)

Block Library

  • Comment template: Left, center and right alignments. (41892)
  • Comments block: Remove stray legacy class from edit. (42335)
  • 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. out images with no local id before loading media library. (42083)
  • Fix undo trap in Gallery block when transforming from 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.. (42001)
  • Remove sticky posts setting when we inherit the query. (40656)
  • Social Links: Set the default protocol to ‘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.’ if not specified. (42167)

Components

  • Add missing label to border radius range control. (42118)
  • ComboboxControl: Use custom prefix when generating the instanceId. (42134)
  • Popover: Pass missing anchor ref to the getAnchorRect callback prop. (42076)
  • Popover: 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. of in between inserter in site editor. (42329)

Block Editor

  • Fix Link Control ‘Open in new tab’ option not saving properly on committing link in buttons block. (42073)
  • Fix list view drop indicator positioning. (42353)
  • Make sure comments keep their location when inside paragraph. (31374)
  • Handle cases when getBlockType returns undefined. (41884)

Site Editor

  • Allow clearing template name field while typing. (42149)
  • Template Parts: Disable block transformations. (42090)
  • Update template details browse label. (42350)
  • Fix pattern carousel / grid styling regression. (42194)

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 aria-checked to the selected heading level menu item. (42273)
  • Fix tabbing from first or last block in site editor. (42036)
  • Navigation block: Only focus submenu trigger on escape key press. (41986)

Global Styles

  • Filter block level styles before compiling global stylesheet. (42207)
  • Fix link element hover bleeding into button element default styles. (42072)

Post Editor

  • Editor: Fix term selector component exports. (41784)
  • Post Template: Fix condition checks. (42038)

Build Tooling

  • Tests: Ignore test files in build-types folder. (42260)
  • Fix IsEditedPostAutosaveable test case. (42280)

Performance

  • Work on refactor away from Lodash to reduce build size continued

Documentation

  • Add support for @ignore in the docgen tool. (42198)
  • Button Component readme : Suggest label in case there is not text. (40639)
  • New handbook page for curating the editor experience. (42022)
  • Rename Templates page to Block Templates. (42276)
  • Gutenberg Data Tutorial 5: Adding a Delete Button. (40940)
  • Added new FAQ on disabling caching of 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.. (42346)
  • Update link to sample code in gutenberg-examples. (42208)
  • Add @example for getNotices to create example in the handbook. (42023)
  • Add examples for all actions/selectors for the wordpress/notice package. (42077)
  • Update versions in WordPress for upcoming 6.0.1 release. (42161)
  • Fix code blocks for Block Transforms API. (42287)
  • Fix formatting problems with curating handbook page. (42135)
  • Fix link to 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. box example. (42293)
  • Update attributes example: Alter source children. (41016)

npm publishing workflow

  • Simplify workflow with GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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 (42189)
  • Update details related to npm publishing. (42364)

Experiments

  • Add a WP_Style_Engine_CSS_Declarations object. (42043)
  • Style engine: Rename ‘css_var’ option property to ‘convert_vars_to_classnames’. (42113)
  • Style engine: Return declarations in array response. (42307)
  • Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json. (40875)

Code Quality

  • Block Editor: Use optional chaining in ‘block-list’ component. (42068)
  • Blocks: Remove no longer used Block Content Context. (41395)
  • Chore: Remove two empty unrequired object destructuring. (42279)
  • Fix fix. (42160)
  • Fix: Inexistent parameter passed to getBlockIndex on getBlockInsertionPoint. (42250)
  • Fix: State type in automaticChangeStatus reducer. (42251)
  • 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. coverage for WP_Style_Engine_CSS_Declarations. (42306)
  • Style engine: Rename main public function to reflect functionality. (42140)
  • Update: Remove repeated and condition on useElevation. (42048)
  • useSelect: Use useDebugValue to better display data in DevTools. (42225)
  • Site Editor: Re-architect templates addition. (42457)

MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to Typescript

  • Grid: Convert component to TypeScript. (41923)
  • HStack: Convert component to TypeScript. (41580)
  • RangeControl: Convert component to TypeScript. (40535)
  • RangeControl: Convert stories to TypeScript. (41444)
  • RangeControl: Convert unit tests to typescript. (41445)
  • Scrollable: Convert component to TypeScript. (42016)
  • TextHighlight: Convert component to TypeScript. (41698)
  • Tip: Covert component to TypeScript. (42262)
  • VisuallyHidden: Convert component to TypeScript. (42220)
  • Spacer: Complete TypeScript migration of component. (42013)

Components

  • Add eslint to prevent SSR breakage. (42248)
  • Fix typos in components changelog. (42244)
  • Refactor ColorPicker to pass exhaustive-deps. (41294)
  • Refactor Navigation to pass exhaustive-deps. (41612)
  • RefactorFocalPointPicker to pass exhaustive-deps. (41520)

Block Library

  • More Block: Remove duplicate block class. (42120)
  • Page Break Block: Remove duplicate block class. (42121)
  • Page List Block: Remove duplicate useBlockProps hook. (42123)
  • Remove client side variation fallbacks. (42180)
  • Site Logo: Remove unnecessary state. (42042)

Tools

  • Automate the cherry-picking process for WordPress and Gutenberg releases. (40969)
  • Update the minimum WP version to 5.9. (41306)
  • Components: Remove duplicate CHANGELOG titles. (42334)
  • Site Editor: Make Code Editor reflect block conversions. (42081)
  • Remove the Template panel option from the Preferences modal (42030)
  • Theme.json: Add spacing size presets. (41527)

Testing

  • Fix multiple regex in packages/env/lib/config/test/config.js. (42249)
  • Migrate Block Mover Test For Playwright. (42039)
  • Migrate format API test for playwright. (42035)
  • Migrate list block test to Playwright. (41555)
  • end-to-end Tests: Migrate Comments block test to Playwright. (39826)
  • fix: Update Image block native end-to-end test fixture. (42050)
  • SelectControl: Use roles and @testing-library/user-event in unit tests. (42308)

Build Tooling

  • Ignore *.d.ts files when running unit tests. (42304)
  • Dependency Extraction: Output asset.php files for shared chunks too. (41002)

Create Block

  • Added prompt to continue when minimum system requirements not met. (42151)
  • More careful prompts to continue when minimum system requirements are not met. (42254)
  • Fix regression from _.size() refactoring. (42049)

Block Library

  • Comments block: Change ID to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./comments. (40506)
  • Elements: Buttons: Style the cursor for all button elements. (42102)
  • Post Comments Form: Fix warning 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.. (42131)
  • Use more clear and inclusive language in comments. (42155)

Global Styles

  • Add link element :Hover interactivity control to global styles UI. (41976)
  • Add support for heading elements. (41981)
  • Add visited to link element allowed pseudo selector list. (42096)
  • Button Elements: Allow element styles in classic themes. (42012)
  • Theme.json Schema: Add support for button elements. (42133)

Accessibility

  • Change the BoxControl ARIA role from region to group. (42094)
  • Update site editor region labels to match post editor. (42037)

Block Editor

  • Rich text: Remove placeholder on composition start. (41970)
  • Rich text: Remove space handling (for BUTTON and SUMMARY). (41977)

Data Layer

  • Enable useSelect autocompletion. (41911)
  • Update wordpress/data documentation to prefer store object instead of store name to access the store. (41210)

First time contributors

The following PRs were merged by first time contributors:

  • @MarieComet: Button Component readme : Suggest label in case there is no text. (40639)
  • @rflw: Update attributes example: Alter source children. (41016)
  • @schutzsmith: Theme.json Documentation – Added new FAQ on disabling caching of theme.json. (42346)
  • @welenofsky: Update link to sample code in gutenberg-examples. (42208)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @alexstine @andrewserong @annezazu @aristath @bph @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hz-tyfoon @jameskoster @jorgefilipecosta @jsnajdr @kevin940726 @Mamaduka @MarieComet @mcliwanow @mcsf @mikachan @mirka @ndiego @noisysocks @ntsekouras @ockham @oguzkocer @opr @pavanpatil1 @pooja-muchandikar @ralucaStan @ramonjd @renatho @rflw @ryanwelcher @schutzsmith @scruffian @SiobhyB @stokesman @t-hamano @talldan @torounit @tyxla @vdwijngaert @walbo @welenofsky @youknowriad

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

VersionTime to first blockKeyPress Event (typing)
Gutenberg 13.7 5.83s46.46 ms
Gutenberg 13.65.84s46.78 ms
WordPress 6.05.74s45.31 ms

Site Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 13.76.55s39.32 ms
Gutenberg 13.66.35s41.86 ms
WordPress 6.05.84s38.88 ms

Again, kudos to all the contributors that helped with the release! 👏

Props to @priethor, @desrosj for their assistance with the release, @annezazu for review of this post and @javiarce for the images and video.

7-21: Updated the Performance Benchmarks and added the link to the Core Improvement post on creating templates

#gutenberg

Jorge Costa 10:57 am on July 7, 2022
Tags: , gutenberg-new   

What’s new in Gutenberg 13.6? (6 July)

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

The Gutenberg 13.6 release comes with four major highlighted features, many smaller enhancements, a number of 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) improvements, and twenty-six bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. To make developing with Gutenberg easier, a number of refactors to the codebase occurred for typescript rewrites. Work around improving performance continues with many changes shipped in this release expected to lead to noticeable results when the broader efforts are completed in future releases. Finally, the Style Engine work has progressed with the option for extenders to use these features with the correct 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. shape for now and more options in the Styles UIUI User interface planned for future releases.

Table of Contents

Provide patterns to select from when creating any post type

In WordPress 6.0, 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. was introduced that allows patterns to appear in a modal every time a user creates a new page so that, instead of starting from scratch, a user starts with content to work from. For example, this means a user could choose between patterns for a contact page or an about page and then just fill in the details that are unique to their site.

Thanks to feedback from the community, this release expands this feature to allow the same modal to be presented to a user on other post types. For example, if a user has a book post type, they could now be presented with different ways to show the book based on patterns in a modal (book cover on the left, description on the right, book cover in the center with description below, etc).

In order to take advantage of this new API powering the current experience, you need to include core/post-content in the blockTypes for your pattern and include the postTypes where you want the modal to show in the postTypes array. If postTypes are not provided the modal just appears on the page.

Create more template types in the editor

Expanding the types of templates that can be created from within the Site Editor continues to be a high priority to open up more creative options for folks to control every aspect of their site. With Gutenberg 13.6, it’s now possible to create a template for all of the posts of a specific post type (ex: single-$postType) and, to get more granular, a template for a specific post (ex: single-$postSlug). This is all handled with a very simple UI and doesn’t require needing to know post types identifiers or post slugs, making it easy to work with.

Other Notable Highlights

Gutenberg 13.6 includes several, more general enhancements and accessibility improvements.

Clearer layout controls

For example, the “Inherit Default Layout” controls have been updated to a more understandable toggle to help users and themers alike make the design decisions they want:

More keyboard shortcuts

Two keyboard shortcuts (Strikethrough or Inline Code) have been added and a previously missing keyboard shortcut to link to a post is now properly documented in the shortcuts modal:

Simplified post scheduler

The post scheduler UI has been updated to use “Today” and “Tomorrow” when possible to make the experience more readily understandable at a glance.

New template selection UI

Previously, the template selection options took up a lot of space in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. to allow you to pick and choose what you wanted. With Gutenberg 13.6, this experience has switched to being a popover allowing it to take up far less space and blend in better experience-wise with other post details.

Explore the expanding theme.json engine

Gutenberg 13.6 builds on previous work to expand theme.json to allow you to create a cohesive design across blocks by allowing you to change the styles of all buttons. This relies on targeting elements which are pieces of the UI that appear in multiple blocks and whose style you should be able to change across all implementations. With this work, it means you can control a button’s style across your site in everything from the general Buttons 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. to the Search block.

For anyone building third-party blocks with buttons, this same feature can be used to interact with your block assuming the block you create provides the correct markup. Keep in mind that there’s a difference between changing the styles of an individual block on a page, which will just impact that block, and changing the style at the element level, which impacts all button blocks.

Alongside the button element, captions have also been included so you can control the style of captions across all blocks with captions, from an Image block to a Video block. That element controls the styles of captions across all the blocks. For now, captions can only be controlled using theme.json but, in the future, there will be a way to manage this in the UI.

Keep in mind that this work around targeting elements will be fairly contained as it only impacts items that can’t be codified as blocks (links, captions, buttons, etc). Because these new features are in the early stages of development, please test your themes and blocks and report any issues you might find. It all helps as development continues.

Accessibility continues to be a focus and this release has some improvements to focus management and adding in previously missing aria labels.

Changelog

Enhancements

UI

  • Increase fade intensity during spotlight mode. (40454)
  • Improvements to “inherit default layout” toggle. (41893)
  • Make it easier to select “Edit visually” when in “Edit as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (41516)
  • Abbreviate post schedule date when possible. (41738)

Global Styles

  • Add support for caption elements. (41140)
  • Add UI for button elements (41659) and fix the button element selectors. (41822)
  • Support pseudo selectors on elements in theme json. (41786)
  • Add the ability to unset duotone in themes with default duotone set. (39564)
  • Allow references to values in other locations in the tree. (41696)
  • Lower specificity of elements block css. (41931)
  • Add border to frontend style engine. (41803)
  • Add schema support for styles.filter.duotone. (41920)
  • Add an API to make it easier to get class names. (41753)
  • Update Theme JSON $schema to account for pseudo-selector support. (41936)

Patterns

  • Add the ability to use creation patterns for other post types besides page. (41791)

Block Library

  • Columns: Change the title of one third/two thirds column variation to 66/33. (41734)
  • Navigation:
    • Adjust mobile close button position when adminadmin (and super admin) bar is visible. (41664)
    • Make additional top margin specific to open modal. (41949)
    • Move block CSSCSS Cascading Style Sheets. to JSON. (41898)
  • Post Comments Form: Add button that enables commenting to warning. (41603)
  • Cover:
    • Strip whitespaces in render_block_core_cover. (40859)
    • Implement axial top bottom margin. (41963)
  • Image: Set Default state to media library for library button in image block. (41678)
  • Classic: Remove CSS properties with vendor prefixes. (41995)
  • Embed: Add Pocket Casts embed block variation. (41006)

Site and Template Editor

  • Turn Template settings panel into a Template popover. (41925)
  • Expand the template types that can be added – single custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. and specific posts templates. (41189)
  • Add clear customizations to the template card. (41743)

Accessibility

  • Make the site editor 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. toolbar use the ARIA toolbar pattern. (41902)
  • Allow defining an aria-label in group blocks. (41744)
  • Add keyboard shortcut for Strikethrough (41910) and inline code (41816) in the format library.
  • Navigation submenus: Allow Escape key to close the submenu and focus trigger. (41774)
  • Show the link completer shortcut on the help modals. (41872)

Bug Fixes

  • Fix incorrect ‘_n’ usage in the block Editor. (41886)
  • BlockPreview: Fix ‘Infinity’ 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. ‘minHeight’ value warning. (41766)
  • Compare against default categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the settings instead of hardcoded slug. (41956)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 8.1 deprecation in the gallery block. (41193)
  • Add ‘application/zip’ accept header. (41602)
  • [Block Editor]: Fix content loss from replaceInnerBlocks with controlled blocks. (41948)
  • Fix action button spacing on the 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. (41915)
  • Render duotone presets in pattern preview. (41249)

Block Library

  • List v2:
    • Fix impossible to outdent multiple list items. (41713)
    • Set selection to created block after split with Enter. (41899)
    • Transforms don’t take into account nested blocks. (41741)
  • Comments: Fix issue with custom font sizes and links color. (41627)
  • Navigation: Fix permissions warning. (41862)
  • Post Template: Ensure layout classnames are not attached to inner li elements. (41827)
  • Image block: Preserve alt text from media library. (41839)
  • Search block: Remove double spaces. (41746)
  • Fix issue of background min-height. (41693)
  • Only use the post-title if 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. is a link. (41775)
  • Always load block CSS from __experimentalStyle on global styles output. (42005)

Components

  • Border Controls/Color Palette: Ensure popovers remain within small viewports. (41930)
  • ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. (41646)
  • DatePicker: Respect site’s ‘Week Starts On’ setting. (41648)
  • BlockSettingsMenuControls: Fix ‘showLockButton’ check. (41788)
  • Color Controls: Allow popovers to remain within smaller viewports. (41929)

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

  • Fix retrieving autosaves when using a custom rest_namespace. (41542)
  • Remove hardcoded references to rest namespace. (41950), (41951).

Performance

  • Continued the work refactor away from lodash usages in order to reduce the build size.
  • Remove Unrequired regex search on duotone supports. (42020)
  • Ensure only the main query is modified when resolving template for new posts. (40799)
  • Avoid calculating HTML block styles in useSelect. (42026)
  • Fix performance 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. pasting due to removeWindowsFragments. (41907)

Documentation

  • Add an explanation of how to set up the environment to run the performance test. (41883)
  • Add local dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. to aid when doing work on schemas. (41968)
  • Fix Minor documentation inconsistencies on block attributes. (41468)
  • Add an example for the end-to-end tests snapshot update. (41999)
  • Fix documentation of Flex component to no longer be experimental. (41926)
  • Fix link to “Good First Review” issues in README. (41754)
  • Fix link to Flex component in FlexItem Readme. (41928)
  • Fix some small inconsistencies in the block editor documentation. (41861)
  • Update terminology and documentation of Style engine. (41964)
  • Update skip serialization documentation to reflect ability to target specific properties. (41277)
  • Add supports to basic sample code documentation. (41589)
  • Update nested-blocks-inner-blocks.md. (41962)
  • Document fontFace and it’s values in theme.json schema for the Webfonts API. (41844)

Code Quality

  • Fix: Double condition on or on block editor reducer. (42019)
  • Remove WP 6.0 WP_REST_Block_Patterns_Controller class. (41914)
  • Remove leftovers of legacy 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. (41891)
  • Remove startBlankComponent from __experimentalBlockPatternSetup. (41721)
  • Move setting registration into WP 6.0 compat. (41985)
  • Add __experimentalUseResourcePermissions to make code simpler. (38785)
    ))
  • Remove Unnecessary ‘&& check’ as ‘optional chaining (authorDetails?.avatar_urls) check’ is already used in 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. Block. (41779)
  • Refactor NavigationItem component to pass exhaustive-deps. (41639)
  • Move generation of layout util classes to existing method to avoid adding global public method WP. (41885)

Tooling

Static analysis

  • ESLint: Enable ignoreRestSiblings option for no-unused-vars rule. (41897)
  • Fix a prettier error. (41916)
  • SerializeBlock fix ESLint warning. (41763)

Testing

  • Test migrations toPlaywright:
  • InputControl: Add tests and update to use @testing-library/user-event. (41421)
  • Skip flaky navigation end-to-end test. (41829)
  • Fix the image rotating flaky test. (41808)

Storybook

  • Add 40px size variant to NumberControl. (41997)
  • Convert knobs to controls in NumberControl. (41849)
  • Convert knobs to controls in the spacer. (41851)

IDEIDE Integrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality.’s integrations

  • Autocompletion support for useSelect (via jsDoc annotations). (41596)

Migrations to typescript

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

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.64.51s41.02ms
Gutenberg 13.54.34s38.81ms
WordPress 6.04.66s37.70ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.65.22s32.30 ms
Gutenberg 13.55.05s32.59 ms
WordPress 6.04.82s31.07 ms

Contributor Props

The following PRs were merged by first-time contributors – thank you and congrats!

  • @adambasa-dp: #30930 – Make it easier to select “Edit visually” when in “Edit as HTML. (41516)
  • @arturgrabo: Change case. (41792)
  • @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary ‘&& check’ as ‘optional chaining (authorDetails?.avatar_urls) check’ is already used. (41779)
  • @inc2734: Add supports to basic sample code. (41589)
  • @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. (41682)
  • @mcliwanow: Fix link to “Good First Review” issues in README. (41754)
  • @navigatrum: Strip whitespaces in render_block_core_cover. (40859)
  • @pavanpatil1: Migrate rtl test case to it’s playwright version. (41495)
  • @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. (40799)
  • @phcp: Add Pocket Casts embed block variation. (41006)
  • @vasartam: Block attributes docs: Minor documentation inconsistencies. (41468)
  • @xylocone: Update nested-blocks-inner-blocks.md. (41962)
  • @zaerl: Fix: Add ‘application/zip’ accept header. (41602)

The following contributors merged PRs in this release:

@aaronrobertshaw @adambasa-dp @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @arturgrabo @chad1008 @ciampo @dcalhoun @derekblank @fabiankaegy @fluiddot @georgeh @getdave @glendaviesnz @grappler @hz-tyfoon @inc2734 @jorgefilipecosta @kbrown9 @kevin940726 @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @miminari @mirka @mtias @navigatrum @noisysocks @ntsekouras @ockham @opr @pavanpatil1 @petitphp @phcp @pooja-muchandikar @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @sunil25393 @t-hamano @talldan @tellthemachines @tomjn @tyxla @vasartam @walbo @xylocone @zaerl

Thank you to all who helped make this release happen.

#gutenberg, #gutenberg-new

annezazu 8:18 pm on June 22, 2022
Tags: , gutenberg-new   

What’s new in Gutenberg 13.5? (22 June)

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

The 13.5 release comes with 12 enhancements and 15 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, with an improved 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. UXUX User experience, expanded design tools for the Post Navigation Link 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., a few solid 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) fixes, and some nice quality of life improvements. 

Table of Contents

Featured Images continue to play an important role on one’s site and this release seeks to make it even easier to take advantage of this high impact piece of your content. 

Now when you use a featured image in a Cover block, a placeholder displays (41460). This helps give a clear visual indication of the changes you’re making and sets better expectations for what you’re customizing: 

Add media drop down showing the use featured image option and the new placeholder.

Tied to this, the option to use a featured image is exactly where you’d expect it to be with a move to the media replace flow (41476). Previously, this was a separate button in the block toolbar and this change helps create a more consistent user experience for interacting with media. 

Add media drop down showing the use featured image option.

More design tools for the Post Navigation Link

For themes with support for “appearanceTools” 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., you’ll now be able to customize the link color and font family for the Post Navigation Link (41378). This allows you to have distinct navigation options in your design:

Other Notable Highlights

Various fixes were merged to improve the accessibility of various interfaces: 

  • Fix lack of context on action buttons and improve accessibility for the template action buttons Edit/New. (41615)
  • Fix focus trap on certain input types when using the left/right arrow keys to navigate interactive elements within a block. (41538)
  • Add label to Preview options dropdown menu. (41566)

The Date Picker now highlights today’s date, helping to orient folks and building on work done in 13.4:

Date picker with a highlight on today's date.

In response to feedback after WordPress 5.9 where several layout utility classnames were removed, utility classnames have been added back to blocks that have layout attributes specified, rather than saving them to the serialized content. In the long run, this should be seen as an interim step ahead of the Styles Engine handling the addition of these classes.  

Changelog

Enhancements

Components

  • Use NumberControl as input field. (41472)
  • Convert component to TypeScript. (41681)
  • RadioControl: Convert component to TypeScript. (41568)

Media

  • Adds featured image toggle to media replace flow. (41476)
  • Add tooltip on replace image’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41504)

Block Library

  • Cover: Adds placeholder when feature image is in use. (41460)
  • Post Navigation Link: Add design controls (color, text decoration, and font family). (41378)

Block Editor

  • Copy plain text variant of blocks. (41366)
  • Adds CTA and external link to block inserter flow. (41112)

Global Styles

  • Move CSSCSS Cascading Style Sheets. from the stylesheet to the block definition. (41689)

Document Settings

  • Highlight today’s date in DatePicker. (41647)

Design Tools

  • Cover: Move overlay and opacity controls to color panel. (41102)

Bug Fixes

Block Editor

  • Preferences Panel: Filters hidden blocks to only count those which are still registered. (41454)

Components

  • Avoid including null values in blocks list. (41496)
  • CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor. (41492)
  • Fix ComboboxControl post-reset focus. (41737)
  • FormTokenField: Added Padding to resolve close button overlap issue. (41556)
  • Tooltip: Fix jitter at edge of screen by enabling __unstableShift. (41524)

Block Library

  • Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Error in 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. Block. (41354)
  • 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.: Render replace button only if eligible patterns exist. (41690)
  • Comments Title: Plural has been used instead of single in 1st parameter. (41521)

Design Tools

  • Fix CSS Selectors rendered by theme.json 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. settings for blocks on public pages. (41335)
  • Webfonts: Increase priority of init hook to account for block reregistration. (41569)

Template Editor

  • Include theme’s templates in template list in post editor. (41630)

Site Editor

  • Theme variations UIUI User interface: Ensure that equality check takes into account all default theme properties. (41591)

CSS & Styling

  • Add utility classnames back to blocks that have layout attributes specified. (41487)
  • Allow for zero values for CSS properties in the style engine. (41561)

Accessibility

  • Fix lack of context on action buttons and improve 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) for the template action buttons Edit/New. (41615)
  • Fix focus trap on certain input types. (41538)
  • Add label to Preview options dropdown menu. (41566)

Experiments

  • Style engine: Add border to backend. (40531)
  • Style engine: Elements backend support. (40987)
  • Global styles: Merge block CSS with theme.json styles. (34180)

Documentation

  • Add missing CHANGELOG entry. (41745)
  • Enhancements to TypeScript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. guidelines. (41669)
  • Add step for build and asset file. (41511)
  • Feature flag refresh. (41522)
  • Update link title and add the correct URL. (41666)
  • Fix typo in block schema description. (41570)

Code Quality

  • Entity-aware type signature for getEntityRecord and getEntityRecords. (41235)
  • Improves the types of createHigherOrderComponent and its usages. (41138)
  • ESLint: Restrict removed Lodash functions. (41651)
  • TypeScript: Add default context types to Entity Records in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data. (41595)
  • TypeScript: Improve type definitions in wordpress/core-data. (41593)
  • RNMobile: Update clicks to use clickIfClickable() when possible. (41367)

Components

  • Draggable: Add clarifying inline comment after the recent hook dependency changes. (41658)
  • Limit Dropdown cleanup to renders where the menu has actually been opened. (41604)
  • Placeholder: Add an illustration option to the Placeholder component. (41605)
  • Refactor CustomGradientBar to pass exhaustive-deps. (41463)
  • Refactor DateDayPicker to pass exhaustive-deps. (41470)
  • Refactor Flex to pass exhaustive-deps. (41507)
  • Refactor FontSizePicker to pass exhaustive-deps. (41600)
  • Refactor InputControl to pass exhaustive-deps. (41601)
  • Refactor Modal to pass exhaustive-deps. (41610)
  • RefactorDraggable to pass exhaustive-deps. (41499)
  • RefactorDropdown to pass exhaustive-deps. (41505)
  • Rewrite <FormTokenField> to functional component and Typescript. (41216)
  • TreeSelect Convert to Typescript. (41536)
  • ZStack: Convert component story to TypeScript and add inline documentation. (41694)

Block Library

  • Clarify updateNavigationLinkBlockAttributes. (41657)
  • Comment Author and Date blocks: Aligned editor markup with the frontend. (41631)
  • Cover Block: Move components to variables so they can be shared. (41742)
  • Split useNavigationMenu into bite-size functions and add unit tests. (41139)
  • File, Search Blocks: Lower CSS specificity. (41393)

Document Settings

  • Extract 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. used in PostVisibility and PublishDateTimePicker to a new InspectorPopoverHeader component. (41362)

Lodash

Tools

Build Tooling

  • Bump caniuse-lite version. (41675)
  • Update testing-library dependencies to latest version. (41710)
  • Upgrade wp-prettier to 2.6.2. (40542)
  • Package.json: Bump engines.node version to >=14. (41599)

Testing

  • Fixed failing DateTimePicker 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.. (41483)
  • Remove snapshot from Post Editor Template Mode test and target expected string instead. (41563)
  • Skip some of the Drag & Drop end-to-end on iOSiOS The operating system used on iPhones and iPads.. (41529)
  • Add controlled unit test, use modern Testing Library features. (41668)

Components

  • Storybook: Update to the version 6.5. (41585)

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

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.54.71s49.31ms
Gutenberg 13.45.41s47.93ms
WordPress 6.04.85s41.92ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.55.97s37.25 ms
Gutenberg 13.45.91s39.82 ms
WordPress 6.05.18s35.59 ms

Contributor Props

The following PRs were merged by first time contributors – thank you and congrats!

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @alexstine @andrewserong @chad1008 @ciampo @derekblank @draganescu @FilipposZ @fluiddot @geriux @glendaviesnz @jffng @jostnes @jsnajdr @MaggieCabrera @Mamaduka @manzurahammed @matiasbenedetto @mburridge @mcsf @mirka @msurdi @noisysocks @ntsekouras @oandregal @ramonjd @SavPhill @scruffian @sebastienserre @sunil25393 @t-hamano @tharsheblows @torounit @tyxla @walbo

Thank you to all who helped make this release happen.

#gutenberg, #gutenberg-new

Héctor Prieto 3:48 pm on June 10, 2022
Tags: gutenber, gutenberg-new   

What’s new in Gutenberg 13.4? (8 June)

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

It’s been a busy time in WordPress. The first WCEU since 2019 was held just a few days after the WordPress 6.0 “Arturo” release. Similarly, Gutenberg doesn’t rest and keeps bringing us goodies every other week! The 13.4 release comes with 25 enhancements and nearly 30 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.

Table of Contents

Support for button elements 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.

Gutenberg 13.4 adds support for button elements in theme.json, so themes can now add styles to their buttons using theme.json like this:

{
	"styles": {
		"elements": {
			"button": {
				"color": {
					"background": "black"
				}
			}
		}
	}
}

To make the most of this change, blocks like the Buttons, Search, Post Comments, and File blocks now make use of the new CSSCSS Cascading Style Sheets. class wp-element-button to support button elements in theme.json.

Block spacing is a very useful design tool for the Gallery block, but what if you wanted to set different horizontal and vertical gaps? Well, you can now do that by opting in to the new axial spacing available in the Gallery block’s dimension panel.

As part of the iterative improvements to the components and post sidebar, Gutenberg 13.4 brings a new look and feel to the Publish popover.

The Color UIUI User interface gets its share of improvements, too. The color-picking interface has been unified and now uses the ToolsPanel introduced in Gutenberg 12.6. This change comes with a few quality of life improvements, too, such as when pasting a hexadecimal color, the # gets automatically stripped for a smoother workflow.

Search Block variations now support query vars

Starting with Gutenberg 13.4, Search block variations can limit their search results based on the query variables provided. For example, you can create a custom Search block variation limited to search when post_type=product with the following registration:

registerBlockVariation( 'core/search', {
   name: 'test/product-search',
   title: 'Product Search Block',
   category: 'test',
   attributes: {
      query: {
         post_type: 'product'
      }
   }
} );

Performance Improvements

Performance is top of mind for WordPress, and Gutenberg 13.4 comes again with a few performance improvements.

On the frontend, Global Styles CSS is enqueued conditionally only for the blocks currently in the page being loaded, resulting in serving smaller pages to the client.

As far as the Editor is concerned, the autocomplete performance has been improved. Last, but not least, the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Spring dependency has been upgraded, resulting in more efficient resource usage when the Block Editor is idle.

13.4.0

Enhancements

Block Library

  • Block deprecations: Provide context when blocks.registerBlockType is applied to deprecations. (36628)
  • File Block: Makes the button an element button. (41239)
  • Gallery: Opt-in to axial (column/row) block spacing controls. (41175)
  • Gallery block: Update the gallery gap to load styles in 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. for block themes. (41015)
  • Navigation: Remove unnecessary ‘role’ attribute. (41360)
  • Post Author Name: Add to and from Post Author transformations. (41151)
  • Post Comments: Make the button an element button. (41251)
  • Search Block: Ability to specify additional search query vars. (40585)
  • Site Logo: Update/site logo constrain image. (41298)

Components

  • Allow removing the bottom margin from SelectControl. (41269)
  • ColorPicker: Only display detailed inputs. (41222)
  • ColorPicker: Strip hash from pasted hex values in ColorPicker. (41223)
  • Design updates to the Publish popover (DateTimePicker). (41097)
  • Spacer: Add RTL support. (41172)

Global Styles

  • Add support for button elements to theme.json. (40260)
  • Button Element: Add support to Site Editor. (41246)
  • Button Element: Update the button element selector. (41240)

Design Tools

  • Unify color UI. Refactor panel color gradient settings to use a tools panel. (41091)

Full Site Editing

  • Site Editor: Update single default template copy. (41302)
  • FSE Templates: Add info to templates created from wp suggestion. (41387)

New APIs

  • Move the visible blocks state to the block editor store. (41104)

Bug Fixes

  • Fix 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. block toolbar after popover refactor. (41312)
  • Get_style_nodes should be compatible with the parent method. (41217)

Block Library

  • Columns: Add default fallback gap value in block.json, and set it to 2em for Columns blocks. (41098)
  • Cover: Fix duotone when the background is set to fixed. (40554)
  • Gallery: Lower the priority of the gallery gap CSS so it loads after the block layout CSS. (41423)
  • Gallery: Support gaps that define column/row gaps to avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Warning/Fatal. (41125)
  • Group: Check variation is registered before displaying it in the toolbar. (41305)
  • Image: Revert error handling. (41221)
  • List: List split bugs if one of the splits is empty. (41283)
  • Navigation: Fix broken Page title for pages created inline within in Nav block. (41063)
  • Navigation: Remove all references to the navigation areas. (41205)
  • Query: Inherit author from the global query. (40648)
  • Table of Contents: Convert <br> tags to spaces in headings. (41206)
  • Table of Contents: Fix list block check. (41351)

Block Editor

  • Block Variations: Fix block variation registration when the icon is an object and contains transform scope. (41457)
  • Handle no variation case in the block transform menu. (41328)
  • Update the block popover position as we scroll the container. (41402)
  • Writing Flow: Fix browser formatting with shortcuts on multiple selections. (41207)

Components

  • BorderBoxControl: Fix right border control alignment on small viewports and RTL styles. (41254)
  • ColorPalette: Update label correctly when value is CSS variable. (41461)
  • InputControl: Fix undo when changing padding values. (40518)
  • Popover, CustomGradientPicker, Dropdown: Fix positioning of popover when used in a dropdown. (41361)
  • Style Variations: Set min-width for styles preview. (41198)

CSS & Styling

  • Block styles: Account for style block nodes that have no name. (41446)

Site Editor

  • Code Editor: Avoid content loss when switching between editors. (41407)
  • Fix description in GetTemplateInfo. (41394)
  • 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: Fix vertical alignment of rows in navigation panel. (40883)
  • Persist new template’s description on creation. (41281)

Performance

  • Improve autocomplete performance. (41197)
  • Load block CSS conditionally. (41160)
  • Update React Spring. (41185)

Experiments

  • Remove Navigation screen from experiments page. (40878)

Documentation

  • Add missing entries to components package CHANGELOG. (41159)
  • Added example for getSaveElement. (41211)
  • Block support docs: Update blockGap notes. (41225)
  • Change ‘author’ to ‘categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.’ in onCategoryChange. (41299)
  • Components: Link Storybook in readme. (41182)
  • Create Block: Improve block templates. (41273)
  • Fix spelling mistake browser to browser. (41137)
  • Improve inline documentation. (41209)
  • SlotFill: Remove note about portals being unstable. (41359)
  • Update Page URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41188)

Code Quality

  • Entity configuration types. (40995)
  • Remove unused color panel files. (41148)
  • Remove the tooltip from the block selection button. (41154)
  • Search: Avoid double escaping. (41147)
  • Upgrade Rememo to v4. (41415)

Components

  • Refactor Autocomplete to pass exhaustive-deps. (41382)
  • Refactor BorderControl to pass exhaustive-deps. (41259)
  • Refactor ColorPalette to disable exhaustive-deps check for now. (41253)
  • Remove ‘useCombinedRef’ hook. (41186)
  • Update @types/react-dates. (41266)
  • Refactor AlignmentMatrixControl to pass exhaustive-deps. (41167)
  • Surface: Convert component to TypeScript. (41212)
  • TextareaControl: Convert component to TypeScript. (41215)

Tools

Build Tooling

  • jest-console: Add types directory to “files”. (41386)
  • Scripts: Convert file extension to js in block.json during the build. (41068)
  • Scripts: 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-zip to include root path files. (41439)

Plugin

  • Updates tested up to with 6.0 version. (41272)

Project Management

  • Limit TimothyBJacobs codeowners to the 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/.. (41411)

Testing

  • CheckboxControl: Add unit tests. (41165)
  • Enable 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.-inline-styles end-to-end test. (35171)
  • Migrate code block tests to Playwright. (41136)
  • Migrate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block test case to Playwright. (41231)
  • Migrate preformatted block tests to Playwright. (41128)
  • Migrate revert template test to Playwright. (41310)
  • Migrate separator block tests to Playwright. (41130)
  • Migrate template part test to Playwright. (41048)
  • Refactor check-local-changes script. (41074)
  • Rewrite flaky tests reporter into its own package. (41106)
  • Revert “Enable iframe-inline-styles end-to-end test”. (41369)
  • Upgrade Playwright and use the official role selector engine. (41389)
  • Use @testing-library/user-event in BoxControl tests. (41422)
  • Use @testing-library/user-event in TimePicker tests. (41270)

wp-env

  • Allow skipping setting a configuration value by specifying it as null. (41084)
  • Fixed run Argument Passing. (41179)
  • Remove explicit git 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". fallbacks for wp-env and update readme. (41043)

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

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.45.47s49.19ms
Gutenberg 13.35.05s51.38ms
WordPress 6.06.09s47.62ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.46.53s42.94ms
Gutenberg 13.36.38s41.7ms
WordPress 6.06.12s41.17ms

Contributor props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @aduth @amustaque97 @andrewserong @aristath @chad1008 @ciampo @CWBudde @dd32 @derekblank @draganescu @ethitter @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @jameskoster @jorgefilipecosta @jostnes @JustinyAhin @kevin940726 @Mamaduka @matiasbenedetto @mirka @noisysocks @ntsekouras @ObliviousHarmony @pooja-muchandikar @ramonjd @SavPhill @scruffian @SiobhyB @stokesman @t-hamano @talldan @tellthemachines @TimothyBJacobs @tomasztunik @torounit @walbo @xconsau @youknowriad @ZebulanStanphill

The following PRs were merged by first-time contributors:

Kudos to all the contributors that helped with the release, not just with PRs but in any shape or form! 👏

Thanks to @jameskoster for the visual assets and @angelasjin for the peer review.

#gutenber, #gutenberg-new

Ryan Welcher 6:50 pm on May 26, 2022
Tags: , gutenberg-new   

What’s New in Gutenberg 13.3.0 ( May 25 )

“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, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

Gutenberg 13.3.0 introduces a new Table of Contents 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., some enhancements to existing blocks to provide more ways to display content, and many more improvements.

Table Of Contents

New Table of Contents Block

After over a year of work and iterations, the Table Of Contents block is now available as an experimental block. Once placed into the content, the Table Of Contents block will detect any Heading blocks added and display them with anchor links to allow users to jump to a section on the page.

Post Terms Block variations to display custom taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. terms

A Post Term block variation is now generated for each custom taxonomy registered. For example, if you register a “Product categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.” taxonomy, you will be able to add a “Product categories” block that lists all the product category terms assigned to the current post.

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 now supports a “parent” 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.

When working with a Page or any hierarchical content type a new “parent” filter is available to display content that is children of the defined parent.

Other Notable Highlights

Heading block now supports Font Family controls

Save Block List default view preference

Users can now set a preference to determine if the Block List view is open or closed by default.

New transforms between the Cover and Media & Text blocks

First-time contributors

The following PRs were merged by first-time contributors:

  • @bjorsch: dependency-extraction-webpack-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: Calculate vendor hash from file output rather than Webpack internal state. (34969)
  • @daymobrew: Typo – enqueue to enqueued. (40880)
  • @JessicaGosselin: Fix typo in Panel readme. (41111)
  • @luminuu: Create single template via site editor if not existing. (40830)
  • @neffff: env :: Support ssh protocol for githubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ repos. (40451)
  • @phillsav: Update broken links. (41071)
  • @shanjidah: Migrated popovers.test.js to Playwright. (39910)
  • @tomjdv: Corrected the order in the code tabs. (40569)

Changelog

Enhancements

Preferences

  • Avoid persisting preference every time 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. tab is changed. (40923)
  • Editor preferences: Update order and copy. (40981)

Components

  • BorderControl
    • Make border color consistent with other controls. (40921)
    • Make height consistent with other controls. (40920)
    • Make reset to default button only display when required. (40917)
  • Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. (40985)

Block Library

  • Add an explicit error message if an image block fails to load the image. (40982)
  • Add transform between cover and media & text. (38458)
  • Post Terms: Add dynamic variations of custom taxonomies. (39837)
  • Query Loop: Add parents filter. (40933)
  • Add: Space to indent list item. (39949)
  • Separator Block: Add border property for dots style to editor stylesheet. (40855)
  • Button: Add text transform control. (40858)

Build Tooling

  • dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. (34969)
  • Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. (40503)
  • Update actions/setup-node GitHub action. (40816)

Design Tools

  • BorderRadiusControl: Add tooltips to split border radius controls. (40983)

CSSCSS Cascading Style Sheets. & Styling

  • BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. (40958)

Template Editor

  • Use the label ‘Clear customizations’ when changes are revertable. (40935)

npm Packages

  • Packages: Add command to publish to npm targeting WP major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.. (40927)

List View

  • Block list: Add option in editor settings to show open list view as default. (40757)

Bug Fixes

  • Add missing styling panels for uncontrolled navigation. (41114)
  • DOM: Allow copying text from non-text input elements. (40192)
  • DOM: Deprecate isNumberInput and fix its handling of value=0. (40896)
  • FlatTermSelector: Avoid errors when returned terms aren’t iterable. (41099)
  • Provide translators comment for Font size and Letter Case. (40879)

Block Library

  • BorderControl: Fix focus styling. (40951)
  • Add missing “type” to the search field on the editor. (40782)
  • Comments Title
    • Fix post title translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.. (40972)
    • Make non-editable. (40817)
  • Cover: Update background type when using 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.. (40873)
  • Fix Comments Form Title text alignment. (40795)
  • Fix external styles leaking into Warning component. (40868)
  • Image Editor: Remove HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from error messages. (40812)
  • Post Comments:
    • Allow placeholders to reorder items in translations. (40849)
    • 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. date format in placeholder. (40929)
  • Quote: Fix the embed discovery. (41134)
  • Return immediately from 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. block’s render_callback if $comment is null. (40835)
  • Use get_the_post_thumbnail function in the cover block.. (40853)
  • List v2
    • Fix outdent on empty list item if we press enter. (40939)
    • Focus new list item added from sibling inserter. (41051)
    • Fixes an issue where pressing enter deletes innerblocks. (41109)
  • CircularOptionPicker: Fix focused styles. (40990)
  • Gallery block
    • 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. with initial image size. (41079)
    • Include image caption when converting a classic block gallery. (40872)
  • Post Author block: Hide select author controle if there is no postId. (40910)

Site Editor

  • Avoid previous content flash when a new template is created. (40841)
  • Decode entities in the site title. (40956)
  • Fix opinionated block styles loading in editor. (40937)
  • Post Comments: Fix Older/Newer comments links styling. (40948)
  • Template List: Fix word break for the ‘Added by’ column. (40959)
  • Template editor: Show the inserter if the template part is empty. (41024)

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)

  • Prevent navigation on URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input suggestion selection via enter key. (40906)
  • Table block: Fix focus loss after Create Table button is selected. (40399)
  • Block Library – Latest Posts: Prevent opening the links in editor. (40593)

Global Styles

  • Fix: Global Styles are always resettable. (40887)
  • Fix: Global Styles: Impossible to open welcome guide if global styles are empty. (40888)
  • Site editor: Preset custom color duplicates. (40837)
  • Reduce active tab accent weight. (40998)

Post Editor

  • Fix typo in the test description didPostSaveRequestSucceed. (41064)
  • Post saved draft button: Overwrite default button component margin. (40834)

Themes

  • Theme Export: Use a better method to determine the theme name. (40829)
  • Theme Export: Use basename when determining the theme slug. (41058)

Template Editor

  • Create single template via site editor if not existing. (40830)
  • Templates: Only allow renaming user-created and non-default templates. (40881)

Components

  • Fix Storybook builds. (41089)

Design Tools

  • Layout: Remove double output of align-items in horizontal layouts. (41018)

Code Editor

  • Fix save shortcut. (40848)

Global Styles

  • 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.: Don’t output double selectors for elements inside blocks. (40889)

Performance

Block Library

  • Ensure that post thumbnail is cached in latest post block. (40571)
  • Ensure that post thumbnail is cached in post template block. (40572)
  • Navigation link: Prime caches for all posts in menu items. (40752)
  • useShortCodeTransform: Fetch media data in single request. (40945)
  • Update the block overlay to rely on useDisabled hook. (40649)

Experiments

  • Style Engine: Add typography and color to frontend. (40665)
  • Add: Raw handling to the new list block. (39954)

Block Library

  • List v2
  • Indent multiple list items. (40991)
  • Outdent list item when pressing Backspace at the start. (40962)
  • ToC block
    • Re-enable + use static markup and only support coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Heading and Page Break blocks. (29739)
    • Mark Table of Contents block as experimental using block.json flag. (40905)

Data Layer

  • Add suspense support to the data module. (37261)

Documentation

  • Add “How To Get Your Pull Request Reviewed?” to developer handbook. (40589)
  • Add link to npm release details to the release documentation. (40867)
  • Corrected the order in the code tabs. (40569)
  • Docs: Git.io deprecation – Replace links. (40734)
  • Document useEntityRecord/s in README.md and CHANGELOG.md. (40932)
  • Fix typo in Panel readme. (41111)
  • Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. (41025)
  • Typo – enqueue to enqueued. (40880)
  • Update broken links. (41071)
  • [Gutenberg Data Tutorial] Part 4: Building a new record form. (39261)

Components

  • Use TypeScript and controls for DateTimePicker‘s stories. (40986)

Code Quality

  • Convert core-data selectors from jsDoc annotations into TypeScript type signatures. (40025)
  • Dependency extraction
    • Improve calculation of contentHash. (40930)
    • Respect hashDigestLength option for version field. (40977)
  • Improve function name for finding navigation links that use the featured image. (40904)
  • Interface: Fix deprecation messages. (40825)
  • Make the useDisabled hook stable. (40890)
  • Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of *.assets.php. (40753)
  • Remove unreachable inserter component. (41103)
  • Styles hook: Swap out lodash methods with their JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. equivalents. (40918)
  • Update reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-resize-aware with use-resize-observer. (40509)
  • useRefEffect: Replace undefined with void in callback return type. (40798)
  • Remove Flyout leftovers. (41129)
  • Send registered patterns in HTML and combine them with REST ones. (40818)
  • Refactor the Popover component to use the floatingUI library. (40740)
  • Table of Contents block: Remove editor-only wrapper
    . (40899)
  • Color Controls: Merge color dropdown components. (40084)

    • Block Library

    • Cover:
      • Refactor controls. (40832)
      • Correct resizeable spelling to US resizable. (41100)
    • Post Terms:
      • Add wp_kses_post to prefix/suffix for consistency. (40803)
      • Post Terms: Insert defaultBlock on suffix end split. (40934)
    • Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. (40954)
    • Query Loop: Move sticky control to separate file. (41101)
    • Search Block: Remove id attribute from svg. (40828)
    • ButtonGroup: Convert to TypeScript. (41007)

    Components

    • Add jest-console typings and convert DateTimePicker tests to TypeScript. (40957)
    • Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. (40775)
    • Update react-dates to 21.8.0. (40801)
    • Stabilize useEntityRecord and useEntityRecords. (40162)
    • CheckboxControl: Convert component to TypeScript. (40915)

    Plugin

    • Declare blocks as __experimental in block.json to automate syncing Gutenberg packages to WordPress. (40655)
    • Tools: Improve configuration for formatting files. (40994)
    • Packages: Add command to publish to npm targeting WP major release. (40927)

    Code Editor

    • Don’t commit ‘non-dirty’ changes. (41092)

    Media

    • Media Utils: Don’t convert error messages into an array. (39448)

    Block Editor

    • Add constants for link entry types. (36490)

    Post Editor

    • DevicePreview: Remove unnecessary div tag. (40911)

    Tools

    • Fix pull-request-automation CI check (temporarily until an upstream fix lands). (41044)
    • Update package-lock.json. (41045)
    • env :: Support ssh protocol for github repos. (40451)
    • Add @fabiankaegy as a code owner for the docs/ directory. (41057)

    Testing

    • Add eslint warning about use of waitForTimeout to playwright eslint. (40802)
    • Comment Template: Reorganize block tests to ease 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. process. (40739)
    • Fix: Env 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. fails on Windows. (41070)
    • Migrate ‘block-locking’ to Playwright. (41050)
    • Migrate and refactor image block end-to-end tests to Playwright. (40804)
    • Migrated popovers.test.js to Playwright. (39910)
    • Reorganize playwright utils and make canvas utils usable in the site editor. (40815)
    • Setup user-event inline once per test. (40839)
    • Test block insertion after title post blur. (32944)
    • Tests: Remove comment template unit tests. (40965)
    • useSelect: Add unit tests for usage without deps. (40732)

    npm Packages

    • Packages: Add GitHub workflow for publishing to npm. (40976)
    • Packages: Add more npm release types to the GitHub workflow. (41046)

    Block Library

    • Heading block – add font family support. (40970)
    • Only allow template part to be replaced if its a 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. or footer. (40787)
    • Try a single icon for title blocks. (40596)

    Performance Benchmark

    The following benchmark compares performance for a particularly sizable post 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

    VersionTime to first blockKeyPress Event
    Gutenberg 13.34.49s43.62ms
    Gutenberg 13.25.57s45ms
    WordPress 6.04.93s41.89ms

    Site Editor

    VersionTime to first blockKeyPress Event
    Gutenberg 13.35.20s35.86ms
    Gutenberg 13.26.17s52.71ms
    WordPress 6.05.05s33.27ms

    Kudos to all 55 contributors that participated in the release! 👏

    Thanks to @priethor for his contributions and improvements to this draft, and @javiarce for the visual assets.

    #gutenberg