Tag Archives: gutenberg

Paal Joachim Romdahl 9:19 am on October 25, 2021
Tags: , , gutenberg, ,   

Editor chat summary: 20 October, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on  Wednesday, October 20 2021, 04:00 PM GMT+1. in Slack. Moderated by @paaljoachim.

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

Gutenberg 11.8.0 RC Thanks to @vcanales for tackling the release.
What’s new in Gutenberg 11.7 release notes. Thanks to @zieladam for writing the notes and handling the release.

Highlights:

  • Navigation 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 Navigation Editor Advances.
  • Global Styles and Full Site Editing improvements.
  • Columns Block for tweaking gaps and margins.
  • Link control – Create a page directly inside the link control.
  • A default alignment option – none.
  • + various other enhancements.

WordPress 5.9 Planning Roundup

Proposed WordPress 5.9 Schedule, scope, leads and how to help.

5.9 Priorities

Preliminary road to 5.9.

Full site editing Go/No-Go

WordPress 5.9 feature full site editing Go/No-Go.

Navigation Editor and Block

Summary: Navigation Editor and Block hallway hangout

What’s next in Gutenberg.

What’s next in Gutenberg: Mid-September.

Key project updates

Based on the scope for Site Editing projects.

Template Editor

Update from @noisysocks

Global Styling

Update from @jorgefilipecosta

Patterns

Patterns explorer in modal PR by @ntsekouras.
Exploring a modal system for selecting patterns.

Navigation Block & Navigation Editor

Update from @get_dave

  • The Nav Editor will not be included in WordPress 5.9 – this is because: changes to the block are required for the editor to be a success (see below). We need to allow sufficient time to test the editor before any 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. and allow for community feedback.
  • Following the Hallway Hangout a summary was posted. The outcome was:
  • In the short term, contributor efforts will switch to the Nav block in order to resolve some of the underlying architectural issues
  • Specifically separating the navigation’s presentation from its data in order to make navigations reusable. This serves both the Nav Editor project and the WordPress 5.9 release in general.
  • The Navigation Editor will ultimately focus on manipulating the data of a navigation which is why the above work is a prerequisite for the project’s success.
  • Work on the Nav Editor will resume after WordPress 5.9. We will continue to focus on backwards compatibility whilst looking ahead to the world of blocks.
  • It’s unlikely that we will pursue a new “Classic Menu” block. Rather focusing on the Navigation block (or its data).
  • To this end @talldan has two important Nav block PRs which everyone is encouraged to test and provide feedback on.
  • Link to the Github Navigation Block & Navigation Editor issue.

Mobile Team

Update from @mattchowning

  • Shipped:
    Trigger embed bottom sheet when an embeddable url is pasted into a paragraph block
    Add ability to customize the text and background color in the search block
  • Fixes
    Small fixes for embed block and help screen
    Improve automatic dimming of cover block
  • In Progress
    Adding more tests for the Embed block
    GSS Font size, line height, colors

Task Coordination

@santosguillamot

The main idea is to end up with a Comment 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. similar to the existing Query Loop we have for posts. You can check out the scope of the project in its tracking issue. This has been the progress so far:

@mamaduka

@joen

  • Focused on bringing home the navigation block, and making a bunch of tiny PRs to shore up the numerous mostly small glitches.

@annezazu

@ntsekouras

@bph

  • Started plugin/theme outreach regarding Gallery Block Refactor 15 top plugins, responses 10, I’ll do a second attempt to reach the non-responsive. TY @Glen Davies
  •  I will connect with 12 more plugin developers this week, and tackle theme authors.
  • Awesome Live Q & A w/ Helen, Mark and Riad – Discussion “How we make building blocks easier.  Recording on YouTube
  • Developer Hours. We’ll start coordinating schedule and promotion next week.

@get_dave

@paaljoachim

Open Floor

@welcher

@priethor

  • WordPress 5.9 Feature Freeze is planned for November 9th. Last Gutenberg release to be included in 5.9 is 11.9 RC.
  • Check the WordPress 5.9 Must-Haves project board. Contributors are encouraged to add items and bugs that seem necessary to include in this major release.

@clorith


#core-editor, #core-editor-summary, #gutenberg, #meeting-notes, #summary

Ryan Welcher 5:38 pm on October 20, 2021
Tags: , gutenberg   

Check out & contribute to the updated Gutenberg Examples

This week, a major portion of the work to update the Gutenberg Examples repository was completed. The repository 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. examples, while accurate, were out of date and didn’t reflect the most current approach to block registration.

These examples can be used in many ways. You can read through them to learn how to create blocks, check out the repository and modify them to see how they work, or use them as a starting point for your own blocks.

All example blocks now use block metadata files and leverage the most recent version of the Block API. Updates were also made to the developer experience to introduce ESlint and Prettier configurations that can be used by IDEs, and to leverage the most recent version of the @wordpress/scripts package.

Share your examples

While the existing examples cover a lot of topics and use cases, it would be great to expand the list and help more folks do more with blocks. In particular, examples covering more advanced block related topics or topics that are not strictly related to creating blocks but still part of the 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/ developer toolkit, such as SlotFill, are very much needed.

If you’re looking for a way to contribute and grow community knowledge, please consider opening an issue or pull request with your example suggestion.

Special thanks to @mkaz and @gziolo for their help with code review and to @annezazu, @mkaz, @chanthaboune, @sparklingrobots, and @audrasjb for reviewing this post

#developer-documentation, #gutenberg

zieladam 1:56 pm on October 14, 2021
Tags: , , gutenberg,   

What’s new in Gutenberg 11.7 (October 13th)

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/ 11.7 has been released! This release includes a number of nice enhancements and as usual many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Navigation 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 Navigation Editor Advances

The Lighter Navigation Block Experience and the Navigation Editor efforts led to many quality of life improvements in Gutenberg 11.7! 

The Navigation Block underwent a series of changes intended to provide a more intuitive navigation management experience. New links are now added instantly after clicking the “+” icon without an additional block selection step. There is also an additional new way of adding links: using a slash inserter. It is worth noting that a slash inserter can be enabled for any block using a new, experimental flag called __experimentalSlashInserter. In addition, navigation links may now be transformed into other allowed block types, such as Site Logo, Home Link, or Social Icons. Finally, it’s easier for users to notice linking mistakes thanks to the squiggly line highlighting empty links similarly to grammar errors. 

On the frontend front: The navigation link now supports custom font size and line-height. Link labels, such as “Previous post,” may now be a part of the link to the post itself. Mobile menus now reflect the justification settings of the desktop menus. 

Global Styles And Full Site Editing

The site editing experience got polished in this recent release. The template part editor gained a convenient back button to ease returning to the site editor. Switching between editing different template parts was made more accessible by listing the available areas in template details. Also, the custom gradient picker was refreshed.

There’s more! The Site editor was equipped with padding settings for specific template parts. Color palette settings are now available in a separate panel in the global styles sidebar. In addition, Duotone support was extended to the site logo block.

While we’re talking about Duotone, Gutenberg 11.7 enables theme authors to customize the default 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. using theme.json styles:

{
	"styles": {
		"blocks": {
			"core/site-logo": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			}
		}
	}	
}

Columns Block Support For Tweaking The Gaps And Margins

The Columns block now allows you to adjust the space between the columns and the margins surrounding the block. Combined with customizable template part padding, it is the most flexible layout-building experience Gutenberg ever had.

Other Notable Highlights

As a part of the effort to get the LinkControl component out of the “experimental” state, 11.7 adds the ability to create pages directly from the link popup. So far, this was only possible in the Navigation block, but now this feature is exposed on every link. The popup also underwent subtle visual adjustments. In addition, empty links can no longer be added, making adding one by mistake harder. The ones that fall through the cracks are now clearly denoted as empty. 

Gutenberg 11.7 also ships a few formatting improvements. One of them is the ability to highlight text. Another is a new alignment option called “none,” intended for resetting alignment settings.

It is also worth noting that a breaking change the post pagination markup was introduced in PR 35092.

11.7

Enhancements

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)

  • Adjust wording for post format suggestions. (14124)
  • Add a visually hidden label for the Search block. (35034)
  • Add an accessible label to the Back button in preferences. (35340)
  • Global Styles: Add accessible label to Back button. (35325)
  • Template title: Include a button and label text when there is no post/page title. (35148)

Block Editor

  • Allow other blocks to use the slash inserter. (35196)
  • Enable ability to create Pages from the inline Link UIUI User interface. (35083)
  • Polish quick inserter. (35339)
  • Remove visual clue from alignment toolbar. (35080)
  • Remove native block inserter onboarding tooltip. (35150)

Block Library

  • Site Logo: Add duotone support. (35344)
  • Columns block: Enable blockGap and vertical margin support. (34630)
  • File Block: Only display PDF preview height RangeControl when embed is enabled. (35207)
  • Navigation: Add transformations from a link to other allowed nav blocks. (34978)
  • 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.: Include a Query Pagination option on the block variations. (35347)
  • Show “none” as an alignment option and use contextual text to clarify settings. (34710)
  • Social Links: Add block gap support. (35236)
  • Site Title: Add option to toggle home link. (31540)
  • Site title: update block description. (34474)
  • Transform Nav Links with children into Submenus. (34831)
  • Add an option for displaying the label inside the Navigation Link block. (34952)
  • Add typography settings for the Navigation Link block. (35324)
  • Add option to remove/clear logo from the Site Logo block. (34820)

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data

  • Add ‘context’ to the query parts type definition. (35069)

Components

  • Add new Navigator components and use them in the global styles sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (34904)
  • Use _builtin property of classes in navigation link PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (35166)
  • Item: Remove isAction and use onClick to decide if it should render as button. (35152)
  • Make tooltip delay configurable with a property. (35246)

Design Tools

  • Block gap: Only render CSSCSS Cascading Style Sheets. variable if corresponding theme setting is enabled. (35209)
  • Format library: Add background color. (34680)
  • Update: Custom gradient picker design. (34712)

Global Styles

  • Add Padding to the root level of global styles. (35241)
  • Add duotone theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. styles support. (34667)
  • Extract the color palette to its own global styles screen. (35109)
  • Update the rules to hide/show blocks in the global styles sidebar. (35178)
  • Synchronize user 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. registration and UI visibility. (35427)
  • Enqueue preset styles for all themes in the editor. (35424)

Icons

  • Add color icon. (35187)
  • Rename globe icon to url. (35032)

Site Editor

  • Remove warning box from post terms. (35242)

Template Editor

  • Add back button for isolated template part editor. (34732)
  • Add template areas to template details. (35202)

Bug Fixes

Block Editor

  • Block Editor: Fix duplicate clientIds when dragging patterns. (35124)
  • Disallow creation of empty links using Link UI directly. (35060)
  • Fix Link UI when hyperlink has an empty href value. (35043)
  • Fix missing border in the quick inserter. (35307)
  • Fix toggle off for Duotone control and Post Date block’s date picking control. (35024)
  • useMultiSelection: Avoid crashing editor when block refs aren’t available. (35177)
  • Rich text: fix internal paste across multiline and single line instances. (35416)

Block Library

  • Embed: Remove meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area.-com from variations. (35146)
  • Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: Remove descendent space. (35273)
  • Fix: Broken disabled select style in the editor area. (35135)
  • Fix native BlockAlignmentControl. (35191)
  • Gallery block: Fix Safari image sizing issue. (35309)
  • Gallery block: Fix problem with caption showing encode tags when not selected. (35131)
  • Gallery block: Unset alignment on new images to prevent it breaking layout. (35132)
  • Post Template: Remove margins from the block. (35193)
  • Post Title: Always use blockProps. (35286)
  • Post Title: Only render link element if we have a post. (35284)
  • Query Pagination: Don’t render an empty container. (35092)
  • Navigation Link: Fix PHP notice in the Navigation Link block. (34984)
  • Fix Post Comment Content block’s edit function. (35190)

Components

  • Color Picker: Match figma metrics. (35039)
  • Remove shift-stepping from range in RangeControl. (35020)
  • Popover: fix __unstableBoundaryParent (35082)

Design Tools

  • ToolsPanelItem: Add panelId check before calling toggle methods. (35375)

Media

  • MediaUpload: Ensure current images in a gallery are selected after opening media library. (35070)

Post Editor

  • Fix missing save label. (34948)
  • Keyboard shortcut: Prevent post saving through keyboard if post saving locked. (35361)

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

  • 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. Fetch: Improve isMediaUploadRequest check. (34417)
  • Fix slashing when creating or updating a menu item. (35147)

Server Side Render

  • Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup (35433)

Template Editor

  • Fix the styling of template details. (35285)

Widgets Editor

  • inspector-section: Track isOpen to make a better isContextuallyActive() function. (35055)

Performance

  • Edit Site: Optimize useSelect calls. (35213)
  • Memoize entity records selectors properly. (34323)
  • Widgets: Optimize useSelect calls. (35256)

Experiments

Block Library

  • Polish responsive navigation modal, inherit justifications, fix submenu direction. (35077)
  • Polish submenu indicator button. (35030)
  • Fix: Adding nav items from existing menu. (34837)

Navigation Screen

  • Remove i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. of help link in navigation editor. (35313)
  • Add a tooltip to Navigation items in a setup state. (35139)
  • Fix gap regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. in navigation screen. (35234)
  • Truncate long menu names. (35188)
  • Insert Navigation Link blocks by default in Navigation block. (34899)
  • Migrate resolvers to thunks. (35044)

Full Site Editing

  • Remove extra styling around “Post content” placeholder. (35243)

Documentation

Handbook

  • Docs: Update testing overview with minor fixes. (35232)
  • Fix typos, grammar in contributors release doc. (35268)
  • Update nvm to latest 0.38.0 version in Handbook. (35125)
  • Adding example readme template to contributing guidelines. (34847)
  • Fix erroneous usage of the word master. (35392)

Packages

  • Add instructions for installing plugins/themes with wp-env. (35064)
  • MediaUpload: Reflect the correct filter name in the readme. (35240)
  • Update LinkControl documentation with additional examples. (35199)
  • Update doc block in block editor to fix documentation generation lint error. (35295)
  • Add missing doc blocks for the exported members of edit-widgets store. (35263)

Code Quality

Block Editor

  • Add colord package to block editor; Replace tinycolor2 with colord on duotone. (#34616), 34605, 35165, 35164)
  • Migrate the toggleFeature action to a thunk. (35075)

Block Library

  • Migrate store actions to thunks. (35031)
  • Post Title Block: Fix argument numbering in ‘sprintf’. (35338)
  • Replace tinycolor2 with colord on block library package. (35184

Components

  • Refactor Navigator* folder structure, rename Navigator to NavigatorProvider. (35160)
  • Replace tinycolor2 with colord. (35185)
  • ToolsPanel component: Refactor to typescript. (34028)
  • UnitControl component: Refactor utils to TypeScript. (35138)
  • Do not export SimpleColorSwatch in Storybook examples for Item Group. (35179)
  • Refactor Navigator to TypeScript. (35214)

Global Styles

  • Simplify code that deals with user data for clarity. (35248)
  • Simplify how we register preset metadata. (35228)
  • Reorganize the global styles UI code base. (35218)
  • Don’t output preset classes for colors defined by the theme (35514)
  • Clean up logic to retrieve GS settings depending on context. (35437)

Post Editor

  • Keyboard Shortcuts: Use a new selector getter method. (35385)

Navigation Component

  • Refactor the preferences modal to use the new Navigator components. (35142)
  • Navigation Editor: Remove duplicated stripHTML. (35189)

Widgets Editor

  • Migrate edit-widgets store to thunks. (35110)

Tools

Build Tooling

  • Remove polyfills from view.js block scripts. (35038)

Testing

  • Add tests for Navigator*. (35163)
  • Enable flaky tests reporter bot in PRs. (35029)
  • Replace tinycolor2 with colord on getMostReadableColor util. 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.. (34625)
  • Try fixing flaky navigation test. (35380)
  • Fix not archiving failure artifacts for flaky tests. (35379)

Plugins

  • Add oandregal and tellthemachines to codeowners file. (35233)

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.

VersionTime To Render The First BlockKeyPress Event (typing)
Gutenberg 11.73.7 s24.68 ms
Gutenberg 11.63.5 s25.88 ms
WordPress 5.84.0 s34.06 ms

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

Thanks to @priethor, @matveb, and @javiarce for helping with the release!

Want to know more about recent Gutenberg releases? Check out the release post for Gutenberg 11.6!

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

Daniel Richards 9:11 am on October 11, 2021
Tags: , , gutenberg,   

Navigation Editor and Block Hallway Hangout

Date: October 13, 2021, 10:00 UTC

Format: Zoom (recorded). A link will be shared in the #feature-navigation-block-editor slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel shortly before the meeting is due to commence.

Length: 60mins.

Goal: Discuss Navigation Editor and 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. goals for 5.9 and beyond.

Details: There are some recent proposed changes to the Navigation Editor and Block that would change some aspects of the project. See the post in slack for more information (https://wordpress.slack.com/archives/C01KDAZJMQ9/p1633512526250600). This hallway hangout will be assembled to discuss how the project should proceed.

Facilitator(s): 

Intended Audience: past and future contributors to the Navigation Editor and Block. Contributors to other related parts of WordPress.

Note Taker: any volunteers to be the official note keeper?

Agenda: 

  • Introduction
    • Facilitator and attendee introductions
    • Brief recap of Navigation Editor and Block projects to date
    • Recap of Navigation Editor goals to date
  • Discussion
    • Discuss the proposals for making the Navigation Block ‘reusable’. What are the block’s requirements for Full Site Editing?
    • How should the Navigation Block work with Classic Menu data for block-based themes (in a Full Site Editing context)?
    • How can the Navigation Editor can be made to work with this future Navigation Block?
      • Discuss the case of classic menu editing in the Navigation Editor for classic themes that do not support block-based menus.
        • Discuss backwards compatibility requirements and potential solutions.
      • Discuss the case of classic themes that could opt-in to showing block-based menus in their theme locations.
    • Have the goals for the Navigation Editor changed?
    • Discuss the proposed roadmap.
  • Summary
    • Briefly discuss next steps
      • Reworking the tracking issues / project board
      • Making WordPress post summarising results

#block-editor, #feature-navigation-block-editor, #gutenberg, #menus

Paal Joachim Romdahl 4:48 am on October 9, 2021
Tags: , , gutenberg, ,   

Editor chat summary: 6 October, 2021

This post summarizes the weekly editor chat meeting (agenda here) held on  Wednesday, October 6 2021, 04:00 PM GMT+1. in Slack. Moderated by @paaljoachim.

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

Gutenberg 11.7 RC Thanks to @zieladam for tackling the release.
What’s new in Gutenberg 11.6 release notes. Thanks to @ntsekouras for writing the notes and handling the release.

WordPress 5.9

October 14th is the date when the decision for “Go, no go” for Full Site Editing to be included in WordPress 5.9 will be decided.

Preliminary Road to 5.9. A quick overview of the main areas and features currently underway for 5.9 in Gutenberg.

What’s next in Gutenberg

What’s next in Gutenberg: Mid-September 2021.

Key project updates

Based on the scope for Site Editing projects.

Template Editor

  • No update currently mentioned. Check out the Full Site Editing label of current issues in the Gutenberg repo on 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/.

Global Styling

Patterns

Navigation 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. & Navigation Editor

Update – 2021-10-06

  • Discussion is still continuing on the best way to ensure interoperability and compatibility between Nav block and Nav Editor.
  • Looks like there will be a Hallway Hangout on Wednesday 13th October (TBC). Agenda will be posted to Make Blogblog (versus network, site).
  • @talldan posted a nice summary of current state of things in Slack. There’s a lot of great energy in the team right now and we are looking to coalesce around a shared set of objectives.

Components squad

Shipping:

In Progress:

Mobile team

 Shipped:

  • Top 5 embeds blocks directly available in the block picker, Retry feature, specific embed’s icon and label in placeholder and bottom sheets.
  • Added a way to contact support from inside editor.
  • Added automated tests for editor onboarding.

Fixes:

  • Fixed an image block 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. causing the images to render with a fixed height and a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. preventing the columns block from rendering in the editor in some occasions.

In Progress:

  • Embed block improvements.
  • GSS Font size, line height, colors.

Task Coordination

@annezazu

@ntsekouras

@amustaque97

Worked on Update Callers to handle when getBlockType return undefined (PR has been merged.)

@mamaduka

  • Helping with PR reviews and testing.
  • Merged the last PR for optimizing useSelect calls.
  • Started working on remaining items in the individual block locking feature.

Open Floor

@welcher

@mkaz

  • Any issues with switching Gutenberg examples repo (https://github.com/WordPress/gutenberg-examples) default branch to trunk? It’ll be nice to have it consistent.

@bph

  • This week’s Live Q & A is tomorrow at 16:00 UTC Going from classic to block-based theme building
  • Next week, Helen, Mark and Riad discuss how to make it easier to build custom blocks
  • On 10/28 LQA is with members of the BuddyPress Team discussion how to convert widgets to blocks.

Times and links are all available on Gutenbergtimes.com

@paaljoachim

  • Can someone create a WP 5.9 Github project board to where we can focus on Full Site Editing and general 5.9 issues/PR’s? As it has earlier been very useful to have the project board to check for issues related to a release.

    @priethor
    I can kick it off, sure. I was looking forward to the go/no-go demo next week so that we can have a more clear scope of the must-haves before creating it.

@talldanwp

  • The following PR needs some discussion: Use theme mods for templates and template parts
    “I was referred to this PR, and it seems like it had a lot of traction in 5.8 but didn’t make it in time. It’s still there needing reviews and possibly a decision for 5.9 and it seems like something that shouldn’t be left too late, otherwise the same will happen again.
    (I would review it myself, but I don’t really have the full knowledge required).”

    @get_dave
    It would be great if there was a recap summary which captures the current state of discussion. It seems pretty important for the utility of Template Parts. (Dave added a comment.)

@Gemini Labs

  • In Gutenberg 11.6 the ServerSideRender component was updated to display the existing content while the new response is fetched. There is bug with this change which I outlined here: https://github.com/WordPress/gutenberg/pull/28297#issuecomment-932723947. I thought it might be useful to bring it up again here in light of the recent Gutenberg 11.7 RC release (thanks @zieladam!).
    Bug issue opened here: Bug in ServerSideRender where the block disappears during render.
  • I would like to ask if anyone here had any concerns about adding a hook (or some other solution) to ServerSideRender which allows a plugin author to trigger something after a block has rendered.
    I opened a Feature Requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged. for this on Github here with a further explanation: https://github.com/WordPress/gutenberg/issues/35294

@get_dave

  • I found this forum post asking if there is a separate Read More block for use in a 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.? Currently it seems the Read more is locked inside the ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.. There is also a Gutenberg issue for it here: Could we have Read more link as a stand alone block?

@amustaque97

@zebulan

#core-editor, #core-editor-summary, #gutenberg, #meeting-notes, #summary

Birgit Pauli-Haack 2:29 pm on October 7, 2021
Tags: gutenberg,   

Proposal: Gutenberg Developer Hours series of events.

  • Summary: Proposal for a new event: Every other week, invite WordPress developers to meet with 3 developers and discuss your 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/ development questions, code, ideas, and approaches. Follow-up w/ video and resources.
  • Start Date: Soon.
  • Trial period: 4 events.
  • Producer: Birgit Pauli-Haack + Gutenberg Developer Volunteers. 

Background: 

I used to do in-person walk-in clinics for a volunteer internet service provider, where we answered all kinds of questions. If there was a moment with no questions, I would pull a topic out of my hat, talk for five minutes and get another 10 questions that triggered in people’s heads. The place was always packed. Not everyone is comfortable dealing with an unknown set of questions, but when done right, it’s quite fun and interesting. Of course, there were always questions that were too specific or too advanced. We would take note of it and answer them either the following week or via email directly to the attendee. 

I would like to try this in a remote setting with a panel of three developers from the community, who are experienced with working with blocks, and call it Gutenberg Developer Hours. 

Details on Gutenberg Developer Hours

I have heard from many in the community that although there is developer documentation available, it’s hard to get started. When developers hit roadblocks, it also takes a long time to troubleshoot errors and bugs. 

This is an offering to developers new to Gutenberg, to get questions answered or obtain advice on architecture or approach. Having a panel helps with the broad set of topics, distributes the load and takes away the fear of being confronted alone with a question, one might not be able to answer. 

Attendees could bring code issues and talk about those, “I’ve been working on this project, but I hit a roadblock and I have no idea where to go from here.”

As a moderator, I can jump in and ask questions to bridge the silence if we, attendees and panelists, run out of audience questions.

Furthermore, if a question gets too specific or too advanced, the moderator makes a note of it, discusses with the dev team and gets back to the attendee with a response after the event. That could be:

  • an invitation to office hours, 
  • a set of documentation, or 
  • a blogblog (versus network, site) post inspired by the question. 

It’s certainly part of the trial to find out where the boundaries of this support offerings are. 

At the beginning, I envision a frequency of every other week, once there is a pool of volunteer developer panelists available to schedule.

To get attendees interested, it might help to have a short educational segment that people are interested in for the first two or three shows.

The panelists could also pick a topic like:

  • How to tap into Gutenberg filters and 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.?
  • How to add a button to the toolbar?
  • What is a store in ReactJS? 
  • How to add BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Styles?

For promotion, social channels like Twitter and Facebook and make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ will be used.

Each show will be recorded and transcribed. The moderator will communicate the recording part with the attendees and If an attendee rather wants to ask their question outside the recording, the moderator can hit the pause button. 

In post-production, the recording can be cut into smaller educational units and publish it publicly on WordPress.tv. The producers can pull specific questions that stumped the panel and write a separate tutorial about it. The show is not a ‘webinar’ but a normal Zoom meeting, so people can see each other and share their screens and code.

At least for the trial, registration is required. The producers will, of course, respect the attendee’s privacy and use email addresses only for communication regarding the specific Gutenberg Developer Hour session.

I already approached a few developers to be our resident experts with the idea, they committed to want to try it. Depending on the feedback, this initiative can be started fairly soon. If you are a Gutenberg developer with some experience and would like to be part of this initiative, please let me know in the comments.

Administrative tasks:

  • Schedule the Gutenberg Developer Hours, one at a time. 
    • Set-up Zoom space, with registration.
    • Announce the next session via social channels, Make/Project, Gutenberg Times, and other available channels. 
  • Connect with the volunteers on a regular basis so they can schedule themselves. 
  • Recruit volunteers as panelists, moderators and content producers. 
  • Published post with resources and solutions.

If you want to be part of the team working on this initiative, let us know in the comments. I will connect with you via WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. Your comments and suggestions are appreciated.

Please don’t hesitate to connect with me on WP Slack @bph if you have additional questions.

Thank You to @annezazu, @daisyo, and @sparklingrobots for collaboration and refinement of the initiative.
Props @jeffpaul and @audrasjb for peer review.

#gutenberg, #new-contributors

annezazu 2:04 pm on October 6, 2021
Tags: , , gutenberg   

Core Editor Improvement: Continued progress on accessibility

Improving 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) requires ongoing effort and this post seeks to highlight some of the ways in which the project continues to make strides in this area. If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and check out how you can get involved. There’s plenty of important work to be done including testing, giving accessibility feedback, and creating PRs to address feedback. 

Ensuring accessibility from the start with the Navigation 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. [planned for 5.9]

The Navigation Block is a key milestone for the full site editing project that focuses on the experience of editing a site’s 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., both in terms of structure and design. This is a big effort that includes how to make it easy to add submenu items, how to create a responsive navigation experience, how to support multiple different inner blocks, and more. While work is underway to simplify the experience for all (ex: reducing the number of steps to add a page link), this section covers three big pieces of the work, thus far, that have had a particularly strong impact on accessibility:

  1. The first is that when implementing submenus it was intentional that they would open on explicit click rather than focus, when navigating with a keyboard and/or screen reader. The changes made ensure that screen reader users are better informed when tabbing submenus, and can choose whether to enter them or not. Previously it was necessary to tab through every submenu item to get to the next parent item. For a deeper look into the behaviors of the navigation block and submenu items, check out these visualizations that provide more context but have not yet been fully implemented. 
  1. When building the responsive navigation feature in the navigation block, work was done to ensure the hamburger menu was built using proper modal behavior from the start. This means that when you open the responsive burger menu, the tab is kept inside the responsive menu experience until you press Escape. A quick demonstration is shown in the video displayed in this section.
  1. Finally, the markup for the front end was changed to ensure that the Navigation block contains fully semantic markup, no matter what its contents are.

Accessibility benefits with the Gallery Block Refactor [planned for 5.9]

Ahead of WordPress 5.9, an update to the Gallery Block was shipped that essentially allows you to have all of the tools you’re used to with an Image Block for each image in the Gallery Block. Thanks to this change, the Gallery Block now benefits from improved keyboard navigation and the ability to add alt text right within the block 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.. This will make it easier to both produce accessibility friendly content and for those navigating what you create when viewing your site. To learn more about the Gallery Block Refactor, you can check out this WordPress News post dedicated to it. 

The new gallery block with an alt text field for each image within the gallery block itself.

Other noteworthy updates/fixes [in the 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/ 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 today]

There’s a lot of high-impact changes that can be overlooked when not shown altogether. To help capture additional accessibility improvements, here are high impact changes in the editing experience: 

Thank you to @joen who helped provide wonderful insights about the navigation block, including the featured video. Thank you to @kellychoffman @priethor @daisyo for the content review. Thank you to @javiarce for the lovely Gallery Block refactor screenshot.

#core-editor-improvement, #gutenberg

Nik Tsekouras 10:50 am on October 1, 2021
Tags: , , gutenberg,   

What’s new in Gutenberg 11.6 (29 September)

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/ 11.6 has been released! This release includes a number of nice enhancements and as usual many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.’s toolbar!

Locking control at block level

Alongside template level locking, now you can lock individual blocks to prevent moving or removing them; you can do this by adding a lock attribute on the block settings. Block-level lock takes priority over the templateLock feature and currently, you can lock moving and removing blocks.

The toolbar of locked blocks will have the movers hidden, and the Remove block option won’t be available either.

Query Pagination uses Flex Layout

Following previous releases bringing Flex Layouts to blocks, Gutenberg 11.6 improves the Query Pagination block to support the flex layout along with a justification option, for automatic best-fit.

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means the BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. are inherited.

The writing flow has also received some enhancements in this release: the Richtext format toolbar now shows a visual clue for hidden active items and, when using the quick inserter and clicking the Browse all button, your current filter value is now passed to the main inserter without the need to type it again, making this switch between inserters seamless.

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like 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., and is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

  • Post Title block: Add typography formatting options. (31623)
  • Query Pagination block: Use flex layout. (34876)
  • Site logo: Add site logo crop. (31607)
  • Cover: Move cover min-height into dimensions panel via SlotFill. (34065)
  • Group Block: Add information about selected element types for Group Block. (33976)
  • Image Block: Create two-way data binding for ImageSizeControl. (34649)
  • Columns Block: Update block description of columns block. (34705)
  • Gallery block: Add toolbar button to convert old galleries to new format. (34606)

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass 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. value when clicking Browse All. (34912)

Components

  • ColorPicker: Enhance the new color picker design. (34598)
  • ColorPicker: Add reset timeout to ColorPicker’s copy functionality. (34601)
  • ToolsPanel: Refine component behaviour. (34530)
  • Resize Handles: Fix stroke width of resize handles. (34949)
  • ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. (28289)
  • ServerSideRender: Delayed loading state of ServerSideRender component. (35033)

Global Styles

  • Add a simple Global Styles preview to 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.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

Widgets Editor

  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

  • FSE: Add basic support for child themes. (34354)

New APIs

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

  • Introduce lock control at the block-type level. (32457)

Design Tools

  • InspectorControls: Wrap block support slots in ToolsPanel. (34157)

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)

  • Improve file block accessibility by adding aria-describedby to download button. (28062)
  • Button Block: Add prefix to the description ID. (34900)
  • Snackbar: Fix focus loss on dismiss. (34736)

Performance

  • List View: Try disabling async mode provider around selected block in ListView. (34519)

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Prevent external styling of editing UI. (34727)
  • Page List Block: Fix gap in vertical page list. (35026)
  • MediaPlaceholder: Fix media library button opening the file upload modal. (34894)
  • QueryPagination: Fix layout support. (34897)
  • Query Pagination: Fix center alignment. (34739)
  • Group block: Lower CSSCSS Cascading Style Sheets. specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the 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.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

  • Fix Dropdown/DropdownMenu toggle closing in all UAs. (31170)
  • Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. (34721)
  • ToolsPanel: Allow SlotFill injection of panel items. (34632)
  • ToolsPanel: Remove / re-register panel items if the panelId changes. (34726)
  • ToogleGroupControl: Fix update when unmounted. (34756)
  • Unit Control: Always display current unit value if valid. (34768)

Template Editor

  • Fixes left & right floats for blocks that are direct children of .wp-site-blocks. (34635)
  • Fix new template form onSubmit logic. (34988)

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

  • Add missing field _invalid in menu item REST API. (34670)
  • Fix ‘menu_exists’ response status code. (34888)
  • Remove parent and position validation from menu item REST API endpoint. (34672)
  • Filters are incorrectly applied in the __experimental/menu-items controller. (34857)
  • Fix the parent menu item field in REST API responses. (34835)

Themes

  • Fix block gap added to the block templates skip link. (34986)

Widgets Editor

  • Fix disabled blocks logical error on Widgets screen. (34634)
  • Prevent welcome guide overflow x scroll. (34713)

Experiments

Navigation Block

  • Add a Submenu block for use in Navigation. (33775)
  • Initialize responsive modals with window onload event. (34544)
  • Enable open on click for Page List inside Navigation. (34675)
  • Hide theme-provided underlines when menu item is in setup state. (34486)
  • Only capture toolbars on the parent Navigation block when not in vertical mode. (34615)
  • Polish wavy underline. (34954)

Navigation Editor

  • Add initial navigation editor user documentation. (34985)
  • Adjust header toolbar icon styles. (34833)
  • Consolidate menu name and switcher. (34786)
  • Update Navigation Editor to support new submenu block. (34281)
  • Use response messages returned from API for notices. (34903)
  • Add global inserter to Navigation Editor. (34619)
  • Save menu items using the REST API. (34541)
  • Add space between menu name and switcher button. (34960)
  • Keep Navigation Editor snackbar from overflowing notices. (34661)
  • Navigation Editor: Avoid crash when transforming navigation link. (34980)
  • Correctly display notices. (34852)
  • Display error notice inside modal. (34884)
  • Fix navigation editor missing appender not showing appender when no blocks selected. (34678)
  • Fix navigation editor undo button being active when editor loads. (34839)
  • Open link control if submenu parent is link. (34798)
  • Stop submitting Create Menu form in busy state. (34983)
  • Fix saving locations using the “Manage Locations” popup. (34714)

Site Editor

  • Site Editor – add basic 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 support. (34460)

Documentation

Handbook

  • Minor copy improvements. (35015)
  • Update versions to include 5.8.1. (34789)
  • Fix typography.customLineHeight value in the compatibility table. (34791)

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the 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. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

  • Add tests for slug to class/css variable conversion. (34787)
  • Refactor the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data store to thunks. (28389)
  • Remove some low impact APIs that were deprecated on WP 5.3. (34537)
  • Rewrite FocusableIframe as hook API. (26753)
  • Rich text: Only merge neighbouring equal formats when applying a format. (35016)
  • Writing Flow: Merge place caret at edge functions. (30481)
  • Site editor: fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice: Undefined index: __unstableType. (34735)
  • Use rest_is_field_included function in menu endpoints. (34673)
  • Remove duplicate Theme JSON block gap key. (34774)

Block Editor

  • Global shortcuts: Use React events (portal bubbles & contextual). (34539)
  • Rename experimental prop used in BlockControls. (34644)
  • Update callers to handle when getBlockType returns undefined. (34891)

Block Library

  • Latest Comments: Add missing parameter to widget_comments_args. (29403)
  • Navigation submenu block: Replace global shortcut event handlers with local ones. (34812)

Components

  • ColorPicker: Replace global shortcut event handlers with local ones. (34508)
  • Delete the createComponent utility function. (34929)
  • Refactor away from the createComponent function: CardMedia (34915), ControlLabel (34927), Elevation (34916), FlexBlock (34917), FlexItem (34918), Grid (34919), HStack (34920), Heading (34921), Scrollable (34922), Spacer (34923), Surface (34924), Text (34925), Truncate (34926), VStack (34928).
  • Remove all dashicon usages from Storybook stories. (33984)
  • Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. (34966)

Global Styles

  • Fix Global Styles double border. (34906)
  • Rename globalStyles to styles. (34946)

i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.

  • Add a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky 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. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

  • Fix package lock inconsistencies. (34790)
  • Update caniuse package to the latest version. (34685)
  • VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. (34269)
    • Replace usages of workspaceRoot with workspaceFolder. (34887)
  • Bump jest-dev-server to v5. (34560)
  • ESLint Plugin: Update eslint jsdoc dependency. (34338)
  • Storybook: Remove G2 prefix from the Components section. (34734)
  • Block Editor: Update react-spring to 9.2.4. (30979)
  • Move react-native-url-polyfill to dev dependencies. (34687)
  • Use Jest related rules only when the package is installed. (33120)
  • Ensure that all *.asset.php files are included in plugin.zip. (34875)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.67.6 s38.38 ms
Gutenberg 11.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

Thanks to @priethor, @mcsf, @matveb, and @jameskoster for helping with the release!

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

Jorge Costa 3:49 pm on September 28, 2021
Tags: , , , , gutenberg,   

Editor chat summary: Wednesday, 22 September 2021

This post summarizes the weekly editor chat meeting on Wednesday, 22 September 2021, 14:00 UTC held in Slack.

What’s next 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/? (Mid-September 2021)

@jorgefilipecosta said the post with the goals for the Gutenberg project in September is published and referred that the priorities are the template Editor, Patterns, 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., the design tools., and the Navigation 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./navigation editor work.

As a follow-up @ntsekouras brought attention to an experiment to trigger some discussions – a Patterns explorer, asking people to share their thoughts.

Project Updates

Mobile Application

Shipped

  • Improve error handling for embed block
  • Improve Reusable Blocks inserter UIUI User interface

Fixes

  • Fix image block height and border 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.
  • Fix back icon color in dark mode

In Progress

  • Additional Embed block improvements
  • GSS Font size, line height, colors

Components package

Shipping

  • Completed a migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. away from the createComponent function. This simplifies the process of adding new components to the library, using the more straightforward View component.
  • Following up on the recently expanded contributor guidelines, we simplified the structure of the guidelines and added a table of contents.

In Progress

  • @youknowriad merged a PR that introduces a navigation component to the Global Styles sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., which moves us closer to the updated designs. We’re experimenting now with a revised Navigator component that may provide greater flexibility for the design.

Navigation Editor

Lots of work happening on priority items. Thanks to everyone who is contributing so much work.

• 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/. interactions have been improved and more issues identified.
• Started looking at ways to add links in Bulk.
• Using Theme JSON to control the block in the editor has been ruled out.
• Another Hallway Hangout is on the cards – dates/times to be confirmed.

Task Coordination

@annezazu

Hallway hangout for adoption pathways for FSE with Marcus & Dave, continue amplifying the current block theme switching exploration (please check it out!), did some light triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., and shared a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor improvement post on the new Widgets Group block!

@ntsekouras

  • Query Pagination with `flex` layout(#34876, #34897).
  • Pass the search value to inserter, when clicking Browse All(#34912).
  • Delayed loading state of SSR component(#35033).
  • Pattern Explorer experiment(#35006).

@jorgefilipecosta

For the next week, the plan is to continue iterating on the design and address the remaining follow-ups we have thinks like changing the border of the input field from a gray to slightly different gray changing the dimension of inputs from 30px to 40px, changing the focus look on the range control.

@mciampini

Will keep supporting @jorgefilipecosta and other folks working on the @wordpress/components package, including most of the work that is being done on the new Global Styles sidebar.

Open floor

Responsiveness

Roman Axelrod asked the following:

It was mentioned earlier, but… At time moment, core editor doesn’t provide options of setting different styling rules for each device / breakpoint (Preview modes: Desktop, Tablet, Mobile).

Right now, the rules are global. For example if I set padding: 60px to Group block from the right sidebar of the editor, this rule is going to appear on Desktop and Mobile.I curious if we are going to have the same functionality that all popular page builders have? Usually they provide a list of breakpoints and ability to “overwrite” styling rules of previous breakpoint. It gives ability of adapting the design by requirements.Is this something that we can expect soon? Are we going to have something like this in 2021?

@jorgefilipecosta said he thinks that is not something on the roadmap for 5.9, but allowing to control how things look depending on the dimensions of the place where they are rendered is something that will end up existing.

Custom Fields

Roman Axelrod asked the following:

Are there any plans or ideas of using Custom Fields in core blocks?
For example, imagine the situation where I have 20 pages. All pages have a “Hero” section that contains title, text, button on the left and image on the right.
The design is the same but the content is different and unique for each page (kind of a template).Now let’s say, after I built these 20 pages, we realized that the Heading block should be 5px bigger.
How should I fix that? It might be annoying to go page by page and update the font-size of each heading.As a reference, Elementor page builder provides this kind of option – they call it “Dynamic Content”.
I thought that the block-template-parts of FSE will solve this case. But this is still not there. Are there any thoughts/discussions about similar cases?

@jorgefilipecosta answered the following:

Hi Roman, maybe the solution to your issue is to define a CSSCSS Cascading Style Sheets. variable that represents the size. Theme.json provides a mechanism for declaring the css variables, and then instead of using 5px as value you use the css variable as the value. Changing the variable will then change the size in every place.

Roman followed up asking about how non-developers would be able to change those values. @jorgefilipecosta said that If one wants to allow a user to change a CSS variable, one could do it by registering a custom sidebar to change the variable. Maybe one day core offers something that automatically renders a UI where users could change variables registered using theme.json, but it is not part of the road map for now.

Developer Hours online

@bph made a big announcement during the core editor chat:

There will be a make core post with more info, this is just a heads-up, about a trial initiative to hold “Developer Hours online” every other week, with a group of Gutenberg developers, a short topic and then answering attendee’s Block and Theme building questions, with screen sharing of code and follow-up post. Depending how the trial goes, we might expand it. If you want to be part of that initiative let me know or comment on the post.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg, #meeting-notes

Ajit Bohra 6:56 pm on September 20, 2021
Tags: , , , gutenberg,   

Editor chat summary: Wednesday, 15 September 2021

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, on Wednesday, September 15, 2021, 14:00 UTC.

WordPress 5.9

Preliminary Roadmap, a quick overview of the main areas and features currently underway for 5.9 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/.

Gutenberg 11.5.0

Gutenberg 11.5.0 was released on 16th September, this update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools. Check out the release post for a complete list of features and enhancements:

Monthly Plan

The monthly update containing the high-level items that Gutenberg contributors are focusing on for June are:

  • Template Editor
  • Patterns
  • Global Styles and theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. UIUI User interface
  • Design Tools
  • Navigation Block
  • Navigation Editor

For a detailed plan check out monthly priorities post.

Updates on the key projects

Nav Editor:

@get_dave

Rest API:

@zieladam

  • For the REST API changes, saving menu items using rest API.
  • As a nice side-effect, we might get a simple 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. for saving changes in any editor that acts on entities through blocks (e.g. the widgets editor).

Mobile: 

@hypest

Shipped

  • Inline preview support for Instagram, Vimeo. Now supporting all  5 most-used providers (YouTube, Twitter, WordPress, Instagram, Vimeo).

Fixes

  • Refresh embed preview when switching light/dark mode
  • Use device’s localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. in embed previews
  • Ensure inserter button is in view when RTL
  • Translate column block’s control labels

In Progress

  • Embed block.
  • GSS Font size, line height, colors.

Task Coordination

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

@mamaduka

@ntsekouras

In progress:

@jorgefilipecosta

  • Worked on the task to replace the color picker component namely enhance its design and started working on replacing tinycolor with colord.
  • Need some reviews on tinycolor to colord replacements:
  • Simple PR’s to get the ball rolling as long as one is approved I guess we can merge multiple similar ones.
  • Worked on implement the new custom gradient picker design.
  • Currently working on the new color palette editor.
  • For the next week I will continue with improving the global styles related components.
  • Will see how can I best help the effort of implementing the new 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. with its navigation system.
  • Will try to dedicate attention to old PR’s I have that are mostly ready.
  • Mosaic view and block awareness of global styles I hope to merge them so my head becomes free for other challenges and we can submit follow ups on them.

@zieladam

@mciampini

An update from the folks working on the components package

Shipping:

In Progress:

@oandregal

@annezazu

  • Mainly have been doing some light triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors., amplifying the current block theme switching exploration.
  • Working on updating the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party description (PR coming).
  • Ran a hallway hangout for FSE items.
  • Hoping to ship an additional coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor improvement post too in the next week.

@get_dave

This week, I’ve have been mostly workin’ on:

  • Adding Global Inserter to Navigation Editor screen.
  • Experimenting with Theme JSON as means to control many aspect of Navigation block.
  • Fixes from the High priority section of Nav Editor tracking issue.
  • Various Link UI issues.
  • Added “help” descriptions for the various HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element options on the Group block.

@mkaz

Open Floor

@get_dave

  • Could whoever is running the Gutenberg Plugin release please let me know how they found the automated changelog feature grouping? I worked on a couple of PRs on that and I’m curious to know whether anything could
  • Working on how to make the Nav Editor more resilient to changes in the Navigation block. Currently it’s very difficult and not at all resilient.
    • One route I’m exploring is using Theme JSON to control the features of the Nav block. My proposal does two things that I’d like some input on:1. opens up `theme.json` for extensibility by developers via 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./filters.
    • Allows `theme.json` to control features that are unique to particular blocks (as opposed to things that are common across all blocks such as spacing).
    • I’d really like to understand whether this is within the intended scope for Theme JSON.
    • This has large utility outside Nav Editor because I imagine Themers wanting to be able to control multiple facets of blocks (and not just common things such as padding/margin…etc) without having to use complex hooks/filters
    • some dicussion but no conclusion read complete discussion.

@paaljoachim

  • The following comment made by @a4jpcom was posted to last weeks Core Editor Chat agenda after the chat was held.
    • The inserter (add block – the line with plus mark) is missing above the top inserted block.
    • Toggle block inserter doesn’t help here either.
    • Related issues.
    • You currently have to add a block under the top inserted block then move it above the top block each time. It would be nice to get this fixed.
    • If the line that said add block were above the first block added it would just take one click to add new blocks, which is very nice.
  • I would like to bring up one more thing that would be nice to get some eyes on again. 
    • Moving the post/page title to the top bar, so that users can choose to have the title in the layout.
      Here is a PR which has stalled.

Read complete transcript

#meeting-notes, #core-editor, #editor, #gutenberg, #core-editor-summary