Editor chat summary: Wednesday, 16 September 2020

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 16, 2020, 14:00 UTC.

Thank you to all of the contributors who tested 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. releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

WordPress 5.6

Project board to track issues for inclusion in WordPress 5.6.

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

Gutenberg 9.0 was released on 16th September: 

Monthly Plan

September Monthly Priorities.

Updates on the key projects

@andraganescu

  • Both the navigation editor and the widgets editor need all the help they can get. The current target to get the Navigation editor out of experimental is Gutenberg 9.1, and if not it will not make it into WP 5.6 due to too little time for testing and consideration before beta 1
  • The work continues on the widgets editor with a lot of feedback since it was removed from experimental 
  • More details can be tracked on project boards for Navigation editor and Widgets editor

@ntsekouras

  • There is some ongoing work on Query 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 here is where design is discussed/iterated: https://github.com/WordPress/gutenberg/issues/25198.Since there are many things to consider, feedback is more than welcome.

@nosolosw

There’s been some momentum around the Global Styles project lately (with Jorge, Riad, myself, and others working on this), these are the highlights:

  • Gutenberg 9.0 is the first to come with a UIUI User interface for users to update the theme 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. at the site editor).
  • Most of the add_theme_supports have been ported to theme.json  allowing themes to have more fine-grained control about the features.
  • There’s been a reorganization of the theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. (docs) to better clarify its purpose.
  • Discussion on allowing creating your own CSSCSS Cascading Style Sheets. variables via Global Styles

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.

@ntsekouras

  • Added search in Query block
  • Added option to make PostTitle block a link
  • Fixed aspect ratio related classes on embed block
  • Reviews, issues, and triaging

@zieladam

  • Fixed global inserter in widgets editor
  • Moved legacy-widget block to edit-widget package
  • Working on registering widgets as block variations

@nosolosw

  • I’ve been helping others land features related to theme.json (reviews), plus landed some bugfixes and minor follow-ups related to that.

@mcsf

  • Added tiny improvements to Gallery block, ID-less shortcodes fall to 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. block
  • Discuss server-side solutions for block-supports
  • Discuss global styles architecture
  • Release 8.9.3
  • Explore dynamic content solutions for FSE templates
  • Reviews

@addiestavlo

@soean

@mapk

  • Query block iterations
  • 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 feedback and followups

@andraganescu

  • I’ve picked up some issues from Navigation
  • Wrap navigation editing features with filters
  • Added edit in place for menu name

@vindl

@itsjonq

  • Continue to explore/refine Component 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. / style ideas in G2 Components
  • Lately, been focused on the figuring out structure details for control variations that render within Gutenberg via this G2 Layouts/Segmenting controls thread

@aristath

  • I’ve been working on FSE & Global styles, trying to build a theme as a way to discover issues and fix them. Lots of PR reviews, I’ll start working on the Query block next since I’m finding things as I go.

@annezazu

  • Launched the guide for devs navigating the community
  • Focusing on triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. and testing this week to get back up to speed on the latest!

@copons

  • The main focus on the new Navigation component.
  • I’ve recently merged the initial PR which is not used anywhere yet and is exported as experimental.
  • The interface is in active development and will change a lot, though; while it works, it’s really not supposed to be used yet.
  • Meanwhile, it can be tested in the Storybook.
  • I’ve opened several issues for the next steps and discussions about style and accessibility.
  • Once the component is polished and fine-tuned enough, the plan is to start using it as template selector in the Site Editor

@jorgefilipecosta

  • Updated the global styles setProperty mechanism and solved an issue that made custom gradients not work on global styles
  • Refactored the global style’s shape
  • Added separate support keys for color and background-color
  • Continued the iterations on the font-family and font-weight PR’s
  • Did some PR’s reviews and participated in discussions around the repository

Open Floor

@jonsurrell

Some discussion around more descriptive post title for “The Gutenberg Release notes”. suggestion to add the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party version for more clarity. There was no decision and further discussion for same to be done before next release post.

@pierlo

Asked if extending the external preview links dropdown would be included for WP 5.6. A PR is in the work which should very likely be merged well before the 5.6 beta begins 20th October.

@aristath

Some discussion around Query block to inherit default from the global query and allow the user to customize them as needed. This will avoid overriding the global query and replacing loops. No decision, to be discussed further.

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

What’s new in Gutenberg? (16 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/ 9.0 is out! The main focuses for this release are improvements to the Navigation Screen and to the Query 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..

The Navigation screen has a new and improved look, and now supports drag and drop inside the list view:

Lots of cool features have been added to the Query block, including search, filtering by author and support for tags. Here are some pics of the updated interface:

9.0

Features

  • Query block:
    • add search. (25222)
    • add filtering by author support in Query block. (25149)
    • add order and order by support. (24691)
    • add tags support. (25005)
  • Navigation screen:
    • add drag and drop to List View. (23952)
    • implement redesign of screen. (25178)
    • add support for advanced menu item properties. (25062)

Enhancements

  • Drag&Drop: add drag handle to block toolbar. (24852)
  • Drag&Drop: improve single block case. (25107)
  • Include the block variations on the inserter selector. (25182)
  • List view styling improvements. (25143)
  • Update pencil icon. (25135)
  • Refactor and make consistent post and site headers. (25134)
  • Limit the block slash inserter to 9 items and show most used by default. (25113)
  • Polish menu item icon locations. (25106)
  • Improve the block and patterns search algorithm. (25105)
  • Template part: attribute feature parity with group block. (25029)
  • Allow sharp gradients. (24967)
  • Post content: show placeholder if trying to render itself. (24010)
  • Add reusable block icon. (23552)
  • Let ID-less gallery shortcodes fall to 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. block. (25144)
  • Mirror 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 install text for blocks. (25084)
  • Allow inserting an h1 using # + space. (25075)
  • Widgets screen: add plugin area. (25074)
  • Add title attribute to Navigation Link block. (24993)
  • Add a way to change template parts. (24990)
  • Transform multiple heading blocks to list or paragraphs. (24977)
  • Remove redundant type badges in navigation link control. (24885)
  • Fix multiple trailing inserters for nested InnerBlocks. (24836)
  • Search Block: Add button, label, and width options. (24666)
  • Display labels instead of icons in top toolbar. (24304)
  • Add option to show icon labels. (24234)
  • Add a "reinstall" button when a block type is not found. (22631)

Bug Fixes

  • Template part: fix rename before customize 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.. (25206)
  • Template part: fix auto-drafting to support sub-directories. (25063)
  • Template part: use cleaned slug to query. (25030)
  • Classic block: optional chain on possibly null editor. (25163)
  • Classic block: show contents on load. (25162)
  • Embed Block: Fix crash in isFromWordPress helper if preview.htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. is false. (25140)
  • Cover block: fix width 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.. (25103)
  • Navigation block: reduce subnavigation arrow padding. (24200)
  • GlobalStyles: fix nested features algorithm. (25215)
  • GlobalStyles: fix settings name. (25040)
  • Widgets screen: convert the toolbar to ARIA toolbar. (25111)
  • Widgets screen: add labels for settings and close button. (25101)
  • Navigation screen: fix creating Navigation from pages or menu with HTML in title. (24673)
  • Element: add and upgrade @types/{reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.,react-dom} dependencies. (25086)
  • Add safeguard to AuthorSelect component until authors are fetched. (25214)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 error when users don’t have access to the Appearance menu. (25073)
  • Polish horizontal movers. (25037)
  • Fix PHP Notice: Check that the query arg exists before using it. (25006)
  • Fix gradient swatches stacking badly with scrollbar. (25002)
  • Fix unlinked padding controls JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. error. (25000)
  • Show external icon on help button. (24622)
  • Check if block attributes exist before splitting. (25229)
  • Revert "InnerBlocks: Introduce prop to specify render callback for each block.". (25196)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Bring back support for nested _fields values. (25083)
  • Prevent TypeError for projects without a local Prettier configuration. (25068)
  • Image Block: Properly show errors on drag n drop. (25004)
  • Add block inspector virtual bubbling option. (24991)
  • Remove extra slash from $block_json_file. (24829)
  • Inserter: Test to make sure the Inserter menu is closed. (24610)
  • Date: Update moment-timezone package to support string timezones. (22866)
  • Fix enqueue presets for global styles. (25286)
  • Fix stylesheet generation. (25293)

Experiments

  • Group block: add padding support. (24966)
  • Control the block editor via theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.:
    • support for custom link color. (25148)
    • support for custom spacing. (25141)
    • support for custom line heights. (25043)
    • support for custom font sizes. (25038)
    • support for custom gradients. (24964)
  • Navigation component: composition proposal. (25057)
  • Replace accessibilityLabel by label on RadioGroup. (25128)
  • Global styles:
    • add 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. at edit site screen. (24250)
    • print minified css. (24924)
    • centralize style & support mappings for blocks. (25185)
    • centralize client side global styles mappings. (25056)
    • set property to change one property accept all lodash paths. (25159)

Documentation

  • Add readme for UngroupButton. (25142)
  • Fix typo in AlignmentMatrixControl readme. (25125)
  • Update AlignmentMatrixControl readme. (25124)
  • Add preview options component readme. (25104)
  • Add block types list component readme. (25066)
  • Fix typo in block base themes tutorial URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org (25024)
  • Update block inspector component readme. (24998)
  • Add block variation picker component readme. (24995)
  • Update Versions in WordPress doc to include 5.5.1. (24988)
  • Add block parent selector component readme. (24962)
  • Add block icon component readme. (24947)
  • Update dev environment setup. (24871)
  • Correct since version for block parser package. (24819)
  • Add BlockCard component readme. (25150)
  • Fix link to ubuntu docker notes. (25060)
  • Fix/block parent selector component readme. (24997)
  • Update Storybook URL from text to a real link. (24974)
  • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. doc to include pull request mentions. (23105)

Code Quality

  • Repo: Add .gitattributes to specify text=auto. (25224)
  • Block Directory: Use Array.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. to implement new/unused block selectors. (25211)
  • Data: Remove flowRight call from metadata reducer. (25180)
  • Data: Add a comment about why we normalize resolvers to objects with fulfill method. (25102)
  • Api-fetch: Remove redundant next parameter from middleware calls. (25001)
  • Api-fetch: Simplify the code that executes the handlers. (24999)
  • Block Supports: Ensure consistent output in different PHP versions. (25240)
  • Add regression end-to-end test for the classic block initialization issue. (25169)
  • Update or retire deprecated colors. (25213

Build Tooling

  • Env: Update docker volumes during wp-env start. (24778)

Various

  • Update package-lock.json. (25223)
  • Update gradle-node-plugin to use actively maintained fork. (25208)
  • Bump @storybook/react major version. (25161)
  • Use WordPress Menu 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.. (25132)
  • Update modularity.md. (25007)
  • Remove Embeds for Facebook and Instagram. (24472)

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 9.06.96 s28.99 ms
Gutenberg 8.96.97 s28.98 ms
WordPress 5.56.97 s27.54 ms

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

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

What’s new in Gutenberg? (2 September)

The big focuses throughout this release cycle were full site editing (FSE) and the widgets screen. On the FSE front, multiple FSE blocks were implemented and are now available for testing in the FSE experience (“Site Editor”). With regards to the widgets screen, more details are shared below.
Aside from these two focuses, 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/ 8.9 contains some small new features, multiple 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 some performance improvements.

Widgets moved out of experiments

One of the objectives of WordPress 5.6 is to allow using blocks in 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. areas. This is a complex task, and for now there is no decision on whether the new screen should be available for all users or a subset of users. Your feedback may help weigh the options.

In Gutenberg 8.9, the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based widgets screen is enabled by default and replaces the default WordPress widgets screen. Themes and plugins are able to opt out of this screen by calling remove_theme_support( 'widgets-block-editor' ) or by using the gutenberg_use_widgets_block_editor filter respectively.

Your testing, feedback, and insights are very useful to inform the direction of the next iterations. If you come across any bugs, please submit a new issue in the Github repository.

8.9.0 🇧🇯

Features

  • Enable the block-based widgets screen. (24843), (24087)
  • Add character count to the info panel. (24823)
  • Latest Post Block: Allow adding links to featured images. (24548)
  • List block: Add color controls. (21387)

Enhancements

  • Disable the tools menu while the code editor is enabled. (24923)
  • Add picture keyword to the Image block. (24755)
  • Adding a maximum height to the long blocks previews. (24493)
  • Add “read more” keyword to the More block. (24794)
  • Improve the UXUX User experience of inactive widgets area on the widgets screen. (24790)
  • Trim whitespace from rendered widgets. (24789)
  • Block Directory: Explicitly close the inserter on block add. (24709)
  • Make strings translatable in block patterns. (24647)
  • Improve the UIUI User interface of the custom gradient pickers. (23802)
  • Adds suggestions for categories and formats to link controls. (22600)
  • Clarify the font size control label. (24619)
  • Convert all px values in front-facing styles to relative (em) units. (24523)

Bug Fixes

  • Fix infinite 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. in the Disabled component. (24935)
  • Fix wp-env start for non-english WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. sources. (24884)
  • 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. HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure on the widgets screen. (24866)
  • Fix 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. flickering caused by the block preview border. (24739)
  • Don’t use an offset when dragging using a draggable chip. (24707)
  • Fix Image alignment controls styles in the Latest posts block. (24655)
  • Improve the focus state of the tags control remove button. (24632)
  • Fix Crash after undoing with the top toolbar on. (24629)
  • Avoid double borders on the 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. boxes panels. (24627)
  • Fix Inline text-color regex edge-case. (24621)
  • Fix inserter z-index. (24614)
  • Missing selected block highlighting in the list view. (24609)
  • Fix the Pullquote block text color after unsetting the main color. (24600)
  • Fix style specificity for Button blocks with outline style and background colors. (24599)
  • Remove references to $default-font from front-facing styles. (24567)
  • Center-align the block variations buttons. (24547)
  • Fix categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select in QueryControls component. (24516)
  • Image Block: Prevent Alt and caption written during image upload from being discarded. (24471)
  • Correct the Unicode character used to represent the macOS Control key. (24452)
  • Fix undefined $block_type->supports PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 error. (24411)
  • Fix adminadmin (and super admin)-theme colors in the editor canvas. (24408)
  • Limit the number of fetched tags to avoid infinite queries. (23841)
  • Fix error when inserting a 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.) with an apostrophe. (21693)
  • Fix the alignment of the 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. post button. (24889)
  • Make legacy widgets support for non-class-based widgets. (24861) (24792)
  • Remove WP_Widget_Block from the legacy dropdown list. (24787)
  • Fix isSavingWidgetAreas selector. (24788)
  • Inserter: Update the search form placeholder text when changing tabs. (24697) (24802)
  • Avoid lossy HTML entities encoding by setting charset. (24645)
  • Embeds: Don’t transform into specialized embed block variation if it’s not registered. (24559)

Performance

  • Fix getBlocks selector performance issues causing typing lags on Gutenberg 8.8.0. (24835)
  • Preload widgets on the widgets screen. (24855)
  • Only request the required fields to populate the parent page list. (23637)

New APIs

  • Core Data: Implement _fields data reuse for entities. (19498)

Experiments

  • Site Editing: Blocks
    • Add Post Comment block. (24781)
    • Add Post Comment Date block. (24854)
    • Add Post Comment Author block. (24824)
    • Add Post Hierarchical Terms Block. (24091)
    • Adds icons and descriptions to Post blocks. (24603)
    • Make Site title block render a link. (24725)
    • Add heading level toolbar to the Site title block. (24758)
  • Site Editing: UI
    • Alert when trying to leave the Site Editor with unsaved changes. (24659) (24719)
    • Update Template Part Block Placeholder Button Styles. (24633)
    • Template Part block – add border states in the editor. (24498)
  • 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. APIs:
    • Allow enabling/disabling custom colors from theme.json config. (24761) (24932)
    • Rename features.colors to features.color. (24933)
    • useEditorFeature: Take block context into account. (24416)
  • Navigation block and screen:
    • Add Post, Page, Category and Tag variations to Link. (24670)
    • Add block inspector to nav screen. (24669)
    • Add opt-in Navigation block rendering. (24503)
    • Support drag-and-drop for submenus of navigation blocks. (24479)
    • Fix invalid textarea markup. (24641)
    • Add unit tests for edit-navigation store. (24681)

Documentation

  • Document Components
  • Update tutorial Creating a block-based theme. (24736)
  • Correct BoxControl values in README examples. (24717)
  • Add ToggleControl at related components section in FormToggle documentation. (24636)
  • Typos and tweaks: (24857), (24811), (24695), (24650), (24628).

Code Quality

  • Keep the default color CSSCSS Cascading Style Sheets. variables for npm package consumers. (24890)
  • Refactor components as functional components:
  • Refactor and move drag and drop geometry code. (24715)
  • Only update state if we have a valid reference. (24496)
  • Add state for storing dragged block client ids to block-editor store. (24782)
  • Remove commented-out blank line. (24858)
  • Simplify gutenberg_widgets_init when $hook === ‘widgets.php’. (24793)
  • Refactor block drop event handlers into a single hook to support drag and drop in List View. (24649)
  • Move DOM utility functions from wordpress/blocks to wordpress/dom. (24618)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning on text color formatter. (24686)

Build Tooling

  • Update package lock file. (24815)
  • Update the minimum version and the tested up to flag of the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. (24693)
  • Build: Make the watch rate slower to avoid using a lot of CPU while developing. (23998)
  • Fix Performance Tests on CI. (24925)
  • Add tests for slashing behavior. (24785)
  • Add permissions PHPUnit tests. (24784)
  • Update browserlist dependency. (24756)
  • Allow local Prettier configuration to take precedence in the recommended ESLint configuration. (24590)

Performance Benchmark

Gradual changes in the editor have made its rendering pipeline more asynchronous. As a result, the usual metrics (loading time, typing time) that we collect in the performance benchmarks may have not always represented the performance gains and losses experienced by some users.

We are improving the way times are measured to account for the more async nature of the editor rendering. We will update this post with performance results once we are confident that they accurately measure the performance of the editor.

The synchronicity changes in question only affect Gutenberg 8.8 and 8.9.
The numbers shared for previous releases are still an accurate way of measuring the editor’s performance.

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

What’s new in Gutenberg (August 19)

With the release of WordPress 5.5 (🎉) comes a new release of 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 8.8. Contributors have continued to squash bugs, refine experiences, and make progress on several big projects.

Full site editing has progressed with updates to Global Styles, the Post 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. suite, and Template management. The back-compatibility of the new Widget Screen was improved. The Widgets screen is a project that’s part of a wider effort to add more block enabled sections to the WordPress experience.

This release also saw important 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) and mobile improvements to user-interfaces like the Toolbar, navigation menus, and Popovers.

All this and more in the wonderfully jam packed change log below:

8.8.0 🇳🇬

Enhancements

  • Copy: Use “block patterns” strings consistently. (24457)
  • Remove hardcoded color from the Recent Comments block. (24410)
  • Remove hardcoded styles from the Separator block. (24366)
  • Block toolbar: Split switcher from mover and simplify styles. (23971)
  • Use the block label 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 BlockTitle component. (23847)
  • 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.: Translate all strings inside the Large 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. Button block pattern. (24499)
  • Block Movers: Use a bigger mobile touch target. (23761)
  • Block Movers: Use a bigger visible focus rectangle. (23760)
  • Update the top toolbar buttons color. (24420)
  • Remove editor styles from front-facing stylesheets. (24439)
  • Block Toolbar More Menu: Switch back to the vertical ellipsis icon. (24426)
  • Removes hardcoded body text color from some block patterns. (24424)

New APIs

  • Support the default block classnames in dynamic blocks. (24546)
  • Support the custom classnames hook in dynamic blocks. (24483)
  • Stabilize the accessible Toolbar component and deprecate the old usage. (23316)
  • Add store icon to Icons package. (23867)
  • Allow POST requests in <ServerSideRender>. (21068)

Bug Fixes

  • Fix inserter expecting experimental settings to exist in the context. (24554)
  • Fix Image block caption jumps on Safari. (24540)
  • Fix Media Text block: Always show images on top on mobile. (24468)
  • Hide Preview menu on small viewports. (24537)
  • Fix canInsertBlockType selector returning true for blocks that don’t allow inner blocks. (24514)
  • Fix the huge font size on the editor when using the default font sizes presets. (24492)
  • Fix Cover block: Impossible to reset the minimum height value. (24490)
  • Fix Post preview button only appearing on small screens. (24487)
  • Fix deduplication of style rules for server-side block support flags. (24486)
  • Fix the quick inserter results limit for block variations. (24481)
  • Fix tiny editor preview when using Mobile or Tablet options with metaboxes enabled. (24478)
  • Fix custom gradient picker unable to change predefined gradients with hex colors. (24470)
  • Fixing duplicated wp-block classes in block-list. (24466)
  • 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):
    • Make the inserter behave as a popover. (24429)
    • Fix incorrect aria description in the Block List View. (24533)
    • Add arrow navigation in Preview menu. (24465)
    • Add arrow navigation to Warning dropdown menu. (24333)
    • Add an example to the buttons block to avoid focus loss issue. (24434)
  • Fix rendering non-Latin characters on aligned Cover blocks. (24447)
  • Remove --wp-admin-theme-color reference from frontend styles. (24436)
  • Prevent links from being focusable inside the Disabled component. (24397)
  • Image Editing: Fix alignment of aspect-ratio button. (24343)
  • Fix retrying of post-processing of edited images. (24081)
  • Set error state when there is an upload error in during file upload. (24017)
  • Block Directory: Decode entities in block title & description. (24172)
  • Preview menu: Remove redundant “opens in a new tab” hidden text. (24427)
  • Fix uploading PDFs in the File block. (24318)

Experiments

  • InnerBlocks: Introduce prop to specify render callback for each block. (24232)
  • Navigation:
    • Display children of inner block controllers in the block navigator. (24083)
    • Add font-size support to the the Navigation block. (24531)
  • Template Parts and saving flow:
    • Move the title to the block toolbar. (24450)
    • Fix Template Part renaming error. (24500)
    • Fix Site Title Save Bug. (24302)
  • Post Blocks:
    • Post Tags 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. where no tags are rendered. (24082)
    • Post Tags block: Support color, font-size and line-height customization. (24069)
  • Full Site Editing:
    • Load php files only if experiment is enabled. (24182)
  • Global Styles:
    • Consider any user changes to global styles as publishable. (24293)
    • Add support for more style properties in the global context. (24298)
  • Widgets screen:
    • Refactor the widgets screen to rely on dedicated endpoints. (24290)
    • Make the list of widgets excluded from the legacy widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. block extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software. via a 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.. (24271)

Documentation

  • Add undocumented global styles blocks & properties. (24421)
  • Remove “experimental” from title of editor filters. (24382)
  • Add instructions for disabling the Block Directory. (24357)
  • Remove duplicate questions in FAQ. (24355)
  • Indicate custom-fields support is required for registering 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.. (24325)
  • Add block directory submission guidelines. (23545)
  • Typos and tweaks: (24511) (24244) (24491) (24361) (24340)
  • Update the “Create a Block” Tutorial. (24545)
  • Getting started: Add a MAMP section. (24241)

Code Quality

  • Refactor embed block to single block with block variations. (24090)
  • Upgrade ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. version to 16.13.1. (21289)
  • Update lodash to 4.17.19. (24401)
  • Register the block attributes server-side for blocks with support flags. (24400)
  • Refactor components as functional components:
  • Remove unnecessary selector from the PostTitle block. (24418)
  • Remove unnecessary ad-hoc class application for dynamic blocks. (24223)

Build Tooling

  • Run wp-env start before PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 unit tests in package scripts. (23797)
  • Upgrade eslint-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-jsdoc to latest version. (24586)
  • Add full parameters for emulateNetworkConditions. (24144)
  • Add an end-to-end 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. test for the “Browse All” inserter button. (24396)

Performance Benchmark

Update: Gradual changes in the editor have made its rendering pipeline more asynchronous. As a result, the usual metrics (loading time, typing time) that we collect in the performance benchmarks may have not always represented the performance gains and losses experienced by some users.

We are improving the way times are measured to account for the more async nature of the editor rendering. We will update this post with performance results once we are confident that they accurately measure the performance of the editor.

The synchronicity changes in question only affect Gutenberg 8.8 and 8.9.
The numbers shared for previous releases are still an accurate way of measuring the editor’s performance.

A big thanks to all the wonderful contributors that helped with this release! 👏

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

What’s new in Gutenberg (August 5)

WordPress 5.5 is around the corner and 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/ contributors have been busy fixing a number of important issues to make sure the editor on 5.5 is as stable as possible. Gutenberg 8.7 changelog reflects that with a number of fixes including important 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) ones.

At the same time, contributors are increasing the development pace on the next big projects. Global styles are being worked heavily on with the hope of shipping it by WordPress 5.6.

This release also saw a lot of improvements to the Post 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. suite that constitutes one of the important bricks for the Full Site Editing project.

8.7.0 🇹🇼

Enhancements

  • Make “Attempt Block Recovery” the default option of block invalidation. (24263)
  • Add a block example to the Buttons block. (24249)
  • Make the padding for the nav block inserter content the same for all sides. (24084)
  • Improve margin within the media replace popover. (24309)
  • Move “Convert to regular blocks” button to the reusable block toolbar. (24066)
  • Consistently autosave edits. (23962)
  • Use Post Type label for Document tab in Settings 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.. (17311)
  • Update the Group block description. (24297)
  • Remove bottom margin of components dropdown menu item. (24227)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Block Patterns improvements:
    • Adds “Heading and paragraph” pattern. (24143)
    • Updates “Large header and a paragraph” pattern. (24142)
    • Updates the “Large header” pattern. (24141)
    • Updates the “Quote” pattern. (24140)
    • Updates “Two images” pattern. (24139) (23856)
    • Updates “Three columns of text with buttons” pattern. (24138)
    • Updates “Three buttons” pattern. (24137)
    • Updates “Two buttons” pattern. (24136)
    • Updates ‘”wo columns of text” pattern. (24135)
    • Update “Two columns of text with images” pattern. (24134)
    • Update the “Large header and button” block pattern. (24177)
  • Block Directory: Use local assets with automatic asset detection. (24117)

New APIs

  • Add support for delete operations to @wordpress/core-data entities. (21557)
  • Add server-side handling for the block ‘align’ supports flag. (24122)
  • Add isDestructive style to Button. (22921)
  • wordpress/create-block: Enable loading translations for created blocks. (24125)

Bug Fixes

  • Fix htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. mode for non light blocks. (24335)
  • Fix block movers overlapping. (24349)
  • Fix List RichText backward compatibility for multiline root 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.). (24324)
  • Block patterns: Fix translatable strings. (24317)
  • Preserve the seconds when editing dates using the TimePicker component. (24305)
  • A11y:
    • Announce block selection changes manually on windows. (24299)
    • Fix arrow navigation in the LinkControl suggestions. (24222)
    • Avoid focus style from being cut on the categories panel. (24197)
    • Avoid focusing the block selection button on each render. (24195)
    • Avoid rendering the clipboard textarea inside the button. (24194)
    • Fix missing focus outline in Add New Tag. (24187)
    • Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover. (24186)
    • Fix the gallery buttons focus style. (24157)
    • Update the editor landmark regions. (24196)
    • Mover control: Remove drag cursor. (23759)
  • Fix block insertion place after clicking Browse All in the inline inserter. (24285)
  • Fix last.fm svg icon alignment. (24278)
  • Cover: Fix padding controls showing null units. (24251)
  • Consistently show the default style variation if none provided. (24217)
  • Fix gradient RGBA/HSLA inputs’ width. (24214)
  • Popover: Fix arrow color to match content border color. (24208)
  • Fix dragging multiple blocks downwards resulted in blocks inserted in wrong position. (24183)
  • Fix Button block colors in the editor. (24153)
  • Fix the save shortcut in the code editor. (24151)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 notices when a block hasn’t declared ‘supports’. (24131)
  • Fix Block Directory icons. (24086)
  • Block Breadcrumb: Fix arrow direction in RTL. (24074)
  • 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.:
    • Fix missing plural forms for block related strings. (24071)
    • Merge similar translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings in the RSS block. (24159)
    • Merge similar translation strings – tables. (24169)
  • useBlockSync: Fix race condition when onChange callback changes. (24012)
  • Allow enter to insert line breaks even if template is locked. (23330)

Experiments

  • Full Site Editing and Site editor:
    • Add alignment support to post content block. (24014) (24077)
    • Post Title Block: Add style attributes. (24246)
    • Remove more initial PHP state. (23775)
    • Template Part: Improve title editing interactions. (23661)
    • Update the Post author, 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. and Comment blocks to use lightBlockWrapper. (24253)
    • Query blocks: Support wide alignments in the editor. (24229)
    • Post Comments Block: add block alignment support. (24226)
    • Post Excerpt block: Added icon and description to Post Excerpt block. (24203)
    • Post Date block: Added Post Date icon and updated block with icon and desc. (24178) (24225)
    • Post Author block: Added a description. (24171)
    • Post Comments Counts: Add style attributes. (24167)
    • Post Comments Form: Add style attributes. (24162)
    • Post Author and Post Excerpt: change editor selector class. (24104)
    • Post Comments block: add style supports for text and background settings. (24080)
    • Post excerpt block: Add color, fontSize, lineHeight, and text alignment. (23945)
    • Add Post Tags block description and icon. (23496)
    • Add a description to the Post Title block. (23494)
    • Update Post Author block to use __experimentalColor and __experimentalLineHeight. (23044)
  • Global styles:
    • Fix link color style property name in global styles. (24296)
    • Fix merge algorithm. (24294)
  • Navigation Block and screen:
    • Fix Navigation Block submenu being overlapped by Cover block overlay. (24062)
  • APIs:
    • Add initial support for themes to control the editor. (24275)
    • Prefix useSimulatedMediaQuery __experimental. (24279)
    • URLInput Customizable control rendering. (24115)

Documentation

  • Update Gutenberg FAQ with more recent information. (24202)
  • Clarify custom link color documentation for themes. (24056)
  • Add a link to the WordPress Data guide. (24327)
  • Document the new block tools theme support and core block patterns. (24265)
  • Replace the demo link of the Gutenberg Storybook in the documentation. (24212)
  • Docs: Update default values for Popover props ‘noArrow’ and ‘position’. (24207)
  • Added missing documentation link for contributor handbook. (24179)
  • Docs: Convert Block Registration RFC to the Block Metadata document. (23832)
  • Typos and tweaks: (23899) (24057) (24033) (24211) (24100)

Code Quality

  • Improve rootClientId comparison in useBlockDropZone. (24307)
  • Clarify wp.blocks.createBlock error message. (24287)
  • Convert blocks to function component with 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.:
    • BlockInvalidWarning. (24284)
    • ReusableBlockConvertButton. (24015)
  • Add missing prop to WPBlockVariation type definition. (24110)
  • Remove deprecated blockType.context support. (24155)
  • Wrap LinkControlSearchInput in forwardRef. (24119)

Build Tooling

  • Perf Tests: Set up 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". only once for all test suites. (24123)
  • Revert “Build: Use .min.js suffix for bundled JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.”. (24239)
  • Add a GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. Diff to the output of the static checks job on failure. (24154)

Various

  • Fix intermittent Navigation block test failure. (24146)

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 8.76.97 s26.63 ms
Gutenberg 8.66.84 s27.15 ms
WordPress 5.49.55 s43.81 ms

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

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

Editor chat summary: Wednesday, 29 July 2020

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, July 29, 2020, 14:00 UTC.

WordPress 5.5 RC 1

The first release candidate for WordPress 5.5 is now available. This is an important milestone in the community’s progress toward the final release of WordPress.

Thank you to all of the contributors who tested 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. releases and gave feedback. Testing for bugs is a critical part of polishing every release and a great way to contribute to WordPress.

Project Board For WordPress 5.5

The remaining issues are located in the Project board.

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

Gutenberg 8.6 was relased on 22nd July.

Monthly Plan

What is next in Gutenberg for July.

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.

@annezazu

@ntsekouras

Refactor embed 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 be a single block ( with block.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. ) and block variations. (https://github.com/WordPress/gutenberg/pull/24090)

@sageshilling

Working on coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. media block editor proposal

@shaunandrews

Design work continues for the new editor sidebar

@mapk

@itsjusteileen

Testing in FSE. Moving to a new machine and will need to give @paaljoachim, @mkaz, and @Noah Allen dev environment tutorial a run on setting up from scratch for testing Gutenberg.

@nrqsnchz

  • Merged the last remaining PRs for Block Patterns and tested across Core default themes.
  • Been helping with testing and feedback on various 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)-related issues

@mcsf

  • WP5.5: Review fix/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. PRs, review/help with 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.
  • Review many PRs or comment in issues
  • Try to improve Docker performance on macOS (24001)
  • Support some other contributors at an individual level

@andraganescu

@michael-arestad

I’m working on a flow for creating a template from scratch – Currently, I’m  exploring “designing” a layout via document-level grid. I’m also planning a jam session or two next week. 

@zieladam

  • Focused on in-toolbar link editing (#24021)
  • Investigating the way forward for the widgets editor
  • Working on fixing e2e tests on the AutosaveMonitor fix in #23962

@itsjonq

  • Continuing with Design Tools Efforts (in general)
  • Focus lately has been advancing @wordpress/components in the spirit of the new “G2” designs. Approaching it systematically from foundations (much needed IMO) rather than applying tweaks on top.

@zeb

  • Got a PR merged that moves the reusable block’s “Convert to regular blocks” button to the block toolbar! https://github.com/WordPress/gutenberg/pull/24066
  • A few days ago I created a PR to implement an `itemWrapper` prop for `InnerBlocks` that allows child blocks to each be wrapped with a given element. It’s a rather significant change and there may be better ways of implementing it, so any technical feedback and ideas are much appreciated! https://github.com/WordPress/gutenberg/pull/24232

@isabel_brison

  • I’m working on adding labels to the editor icon buttons (10524 and 15311). I’ve done an initial PR to add an option to show labels, but it only affects the post editor for now. I think we’re going to need this functionality in the site editor too, and am wondering what would be the best way of having a setting that works across both editors. Thoughts welcome!

Open Floor

Patterns and WordPress 5.5

@joyously asked about the pattern, are they part of GB or part of WP? The reason is that the images are stored on .org, and the text goes through .org translations. @youknowriad clarified that Patterns live in Core codebase and the images are hosted in wp.org like the block examples.

Cherry picking from Gutenberg 8.7 for WordPress 5.5

@jeffpaul asked are there any 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 performance improvements that are planned to be cherry-picked from Gutenberg 8.7 to merge into WordPress 5.5? To prepare WordPress 5.5 Field GuideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the WordPress release cycle. The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page.. @youknowriad mentioned that the potential addition fixes might not be worth mentioning.

Documentation “Keeping up with gutenberg” Index

@annezazu shared about a new page in the core handbook called “Keeping up with Gutenberg”. It’s an index of Gutenberg related posts from various Make blogs to make it easier to follow development. Feedback is very welcome to improve it. Props to @bph and @williampatton who led these efforts. @swissspidy raised if there is a way we can somehow automate that list of posts? as currently its manually curated and seems tedious to maintain.

Galleries as composed image block

@andraganescu raised @Zeb added https://github.com/WordPress/gutenberg/pull/24232 and @noisysocks raised the PR for discussion here as it affects some implementations that count on InnerBlocks including the blocks in navigation feature and the implementation of galleries as composed image blocks

Some discussion around wrapper for the inner block but no decision. Further discussion to continue on the PR for introducing prop to specify the wrapper

Missing post update action

@paaljoachim highlighted the issue of missing “Update post” action when there’s an autosave.

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

#core-editor-summary

New editor preview options

You can now preview editor content in different screen sizes. Replacing the old preview button there is now a dropdown with “Desktop”, “Tablet” and “Mobile” sizes, as well as the previous front end preview option.

The new preview options currently only work on medium to large screens (>= 600px). In the future, there may be a way to preview large screens on a phone.

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

If you’re a block developer and would like to have responsive styles for your blocks in the editor, use the #start-resizable-editor-section and#end-resizable-editor-section markers to define responsive styles. Styles between these markers will be picked up by the editor and render correctly when it is resized. As an example, this is what your styles would look like:

#start-resizable-editor-section {
    display: none;
}

/* add all responsive styles here */

#end-resizable-editor-section {
    display: none;
}

Currently, we aren’t able to manipulate theme editor styles because they are loaded inline in a <style> 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.), instead of a separate stylesheet.

Related pull request 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/ for this feature: https://github.com/WordPress/gutenberg/pull/19082.

#5-5, #dev-notes, #editor, #gutenberg

What’s new in Gutenberg (July 22)

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/ 8.6 has been released. Keeping with our July focuses, we’ve been working hard to get ready for WordPress 5.5 while continuing to ship various enhancements to continue to expand Gutenberg. In particular, this release focuses on local UIUI User interface improvements, performance improvements, and 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. As part of this work, some of these fixes have made their way to WordPress 5.5 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. 3.

Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. video position controls

The positioning of video backgrounds in the Cover block can now be adjusted. Previously, these positioning controls were available only to image backgrounds. The focal point picker and the input controls support cursor and keyboard interaction alike.

8.6 🇯🇲

Features

  • Cover Block: Add video position controls. (22531)
  • Block pattern updates: Large 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 paragraph, Large header, Text two columns, Three buttons, Two buttons, Quote. (23858) (23857) (23853) (23849) (23848) (23881)

Enhancements

  • Editor: Display Site Icon (if one is set) in full-screen mode. (22952)
  • Block Variations: Add support for finding variations using keywords. (24040)
  • Classic Block: Move the “convert to blocks” option from menu to own toolbar button. (23704)
  • 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): Use composite pattern to improve keyboard navigation on the inserter. (23610)
  • Date: Add timezone hint to post-scheduling UI. (23400)
  • Panel: Improve scroll view handling when expanding. (23327) (24046)

New APIs

  • Support disabling coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block patterns. (24042)
  • Make the line height and custom units theme support flags consistent and opt-in. (23964) (23904)
  • Image: Add the ability for a 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 to disable Image Editor. (23966)

Experiments

  • Site Editor:
    • Change references to section back to template part. (23765)
    • Post Date Block: Add style attributes and restructure the edit function. (23931)
    • Edit Site: Integrate quick inserter. (23516)
  • Navigation screen and blocks:
    • Try: Customizable toolbar contents. (23613)
    • Navigation screen: Restore block movers for blocks with just one sibling. (23680)
    • Navigation screen: Add error boundary to experimental navigation screen. (23679)
    • Navigation screen: Show block appender by default. (23676)
    • Block Navigation: Use quick inserter. (23737)
    • Navigation screen: Add .editor-styles-wrapper. (23736)
  • Fix Inserter on the widgets screen. (24045)

Bug Fixes

  • Prevent JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. error when using arrow navigation in URLInput. (24047)
  • a11y: Persist tooltips on hover. (23959)
  • a11y: Components: Fix Toolbar arrow key navigation in RTL contexts. (24043)
  • a11y: RichText: Restore aria-multiline. (24041)
  • a11y: Fix Copy block button focus loss and try to remove the visually hidden textarea. (24022)
  • a11y: Fix radio control in Windows High Contrast mode. (23706)
  • Block Patterns: Override patterns that were registered by Core. (24004)
  • Fix block wrapper selector. (23991)
  • Fix block icon mouse-out gesture issue. (23980)
  • Fix components utils export for use-update-effect. (23969)
  • Fix blocks dropping to incorrect position in inner block lists. (23950)
  • RangeControl: Adapt slider color to color scheme. (23936)
    • (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.) Color Values: Rename brand to theme. Add fallback values. (24059)
  • Prevent content loss after refreshing an editor with unsaved auto-draft post. (23928)
  • Fix edited Classic block’s content deletion when switching to Code editor. (23927)
  • Fix drag and drop to empty block lists. (23923)
  • Fix drag and drop for aligned blocks. (23916)
  • Fix comment capitalization/punctuation. (23912)
  • Fix block merging 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.. (23901)
  • Inserter: Order quick inserter items by frecency. (23900)
  • Inserter: Set quick inserter content width to 100% on screens below 782px. (23896)
  • Autocomplete: Fix closing slash inserter with ESC. (23859)
  • Inserter: Hide inserter’s block preview when searching. (23827)
  • apiFetch: Fix fetch-all preloading. (23807)
  • Fix error triggered when a tab is removed from TabPanel component. (23784)
  • Fix block movers in navigator on experimental navigation page displaying horizontally. (23779)
  • Search: Fix attribute defaults. (23777)
  • Apply the reset mixin to the inserter panel. (23744)
  • 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. controls: Add more space for German and other locales. (23738)
  • Block Library: Standardize post block placeholders. (23690)
    • 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.: Block Library: Translate post block placeholders. (23774)
  • Fix issue where block inserted in wrong place when selection is in nested block list, but root appender is used. (23668)
  • Fix an issue where dragging while the page has no scrollbar results in a console error. (23666)
  • Updated styling to match the post editor. (23525)
  • UnitControl: Fix internal unit parsing to handle incoming unit prop. (23521)
  • Table block: Fix focus loss in between row/column insertions. (23508)
  • Editor: Fix block highlight rendering after block is moved. (23425)
  • Inserter: Fix line to show again. (20792)
  • Button: Properly handle border radius reset. (23887)
  • Block Directory: Remove “contact adminadmin (and super admin)” messaging. (23948)

Performance

  • Optimize more selector calls. (23930)
  • Performance testing: Cover Site Editor loading time. (23842)
  • Avoid re-rendering the PostSavedState component on each change. (23829)
  • Small performance tweaks. (23825)
  • Env: Only perform expensive install work when required. (23809)
  • Env: Improve install performance. (23806)

Documentation

  • Expand and update block-based themes documentation page. (23750)
  • Docs/update button component props. (24013)
  • Docs: Update plugin FAQ with versions link. (24005)
  • Remove the experimental flag from the block patterns documentation. (23954)
  • Docs: Add links for Create a Block Tutorial. (23946)
  • Adds basic documentation for the ToolbarButton component. (23909)
  • Docs: Title and markdown formatting for table. (23850)
  • Update documentation contributors guide. (23840)
  • Create new page listing Gutenberg releases in each WordPress version. (23773)
  • Docs: Clarify the interactive mode for create-block. (23752)
  • Docs: Add a tutorial on how to create a block-based theme. (23732)
  • Docs: Move ESNext to JavaScript tutorial. (23725)
  • Docs: Move DevEnv to own section for documentation. (23593)
  • Added readme to matrix alignment toolbar. (23341)
  • Update nested-blocks-inner-blocks.md. (23935)
  • Update block-registration.md. (23933)
  • Link to theme-experiments repo in block-based theme documentation. (23748)

Code Quality

  • Refactor URLPopover to use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Hook. (23918)
  • Refactor Disabled component to use React 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.. (23917)
  • Refactor More block. (23758)
  • Remove navigation block styles. (23678)
  • Refactor MediaPlaceholder to function component. (23671)
  • Remove duplicate selectors. (23466)
  • Refactor Tag Cloud block to use React Hooks. (23426)
  • Convert PostSavedState to functional component. (23038)
  • Types: Improve project setup. (21581)
  • Refactor ReusableBlockEditPanel to use hooks (and add type info). (21181)
  • Updates text, buttons colors and labels. (23855)

Build Tooling

  • Env:
    • Allow wp-env to start without configuration. (23913)
    • Add support for different options in each environment. (22568)
  • Build: Use .min.js suffix for bundled JavaScript. (23926)
  • Try running the performance tests as a 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/ action. (23818)
  • Improve the performance tests setup. (23817)
  • Automation:
    • Limit tests to not run on documentation-only changes. (23834)
    • Add paths-ignore **.md for unit tests checks. (23845)
    • Switch workflows to use paths-ignore and **.md. (23843)
  • Fix action GitHub action workflow YAML syntax errors. (23844)

Various

  • Embeds: Remove unsupported core-embed/hulu block. (23984)
  • E2E: Remove duplicate blocks in setup file. (23981)
  • 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/.: Check for WP5.5 and skip registering routes. (23880)
  • LinkControl: Extract reusable parts. (23869)
  • Updates image size to match columns width. (23854)
  • InputControl: Add prefix prop. (23824)
  • Block Navigation: Change the visible labels for “Block navigation” to “List view”. (23796)
  • Site Tagline Block. (23788)
  • Image Editor: When editing, pass the edited image src. (23703)
  • Replace SEO settings nofollow toggle with rel text 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.. (23682)
  • Use global registry on the experimental navigation screen. (23675)
  • Env: Mark breaking change in changelog. (23776)
  • Cancel previous running workflows when a new commit is made. (23587)
  • Add title to image and video selection sheets. (23083)
  • Site Title: Add support settings for colors, fonts, and line height. (23007)
  • Add fix to make inputs of type email return true from isTextField. (21162)
  • Full Site Editing: Add a Site Logo block. (18811)

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 8.69.62 s35.05 ms
Gutenberg 8.510.38 s37.55 ms
WordPress 5.413.48 s54.65 ms

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

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

What’s new in Gutenberg (8 july)

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/ 8.5 has been released. This is the last 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 release that is going to be included entirely (without experimental features) in WordPress 5.5.

Drag and Drop

Since its first introduction, the experience of drag and dropping blocks to reorder them has stayed almost untouched. This release includes several iterations to improve on this interaction. Drag and drop supports vertical reordering more clearly, it replaces the cloned element with a nice little drag chip and smooth the scroll-on-drag behavior.

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

One important addition in this release is the possibility to disable arrow navigation across blocks. While writing long form content, it’s very important to be able to navigate using arrow keys between blocks, this can be confusing for screen reader users. We now have an option to disable that behavior.

Easy upload for external images.

Another workflow people use while writing is to rely on external tools to write or collaborate on their posts and when ready, copy/paste these into the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor.

The downside is that any external images used there are hosted elsewhere and may not always persist. In this release, if an image block is using an external images, you’ll have the possibility to upload it to the media library while keeping it as is on the post with a single click.

8.5 🇸🇪

Features

  • 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): Add an option to keep the caret inside blocks in edit mode. (23546)
  • Add anchor/id support to all static blocks. (23197)

Enhancements

  • Add an edit button to the gallery images. (23554)
  • Image block: Allow uploading external image if image host allows it. (23565)
  • Drag And Drop:
    • Enable for multi selection. (23477)
    • Improve the drag and scroll behavior. (23082) (23448)
    • Don’t show a cloned block while dragging. (23024)
    • Polish the block drag chip. (23609)
  • Image editing:
    • Move zoom control to toolbar dropdown. (23677)
    • Add original aspect to dropdown. (23659)
    • Add 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. to 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/. image edit. (23539)
    • Polish zoom slider. (23418)
    • Add permission checks to the endpoint. (23423)
  • Block Directory:
    • Return inactive plugins in search results. (23688)
    • Use CDN for block directory assets. (23499)
  • Add line height rule to the post title. (23656)
  • Avoid ordering block types per frecency inside block categories. (23643)
  • Polish the document 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. controls. (23578)
  • Add modern color scheme support. (23558)
  • Use a consistent close icon across the UIUI User interface. (23551)
  • Redesign the transform menu. (23028) (23449)
  • Redesign the canvas inserter. (22789)
  • Unify tooltip styles. (23382)
  • Add block variations to the slash inserter. (23364)
  • Hide the most used blocks by default and add an option to enable it. (23358)
  • Add reusable block tab to inserter. (23296)
  • Add keyboard shortcuts for moving blocks. (23276)
  • Cover block: Don’t show the matrix alignment button when no background set. (23196)
  • Spacer: Show tooltip with height value on resize. (23077)
  • Improve post publish buttons alignment. (22390) (23487)
  • Make Preview and Save Draft buttons use the same style. (21192)
  • Add unlink URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to buttons block. (23445)
  • Clean the patterns list to include in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (23608)
  • Add pullquote block tranformations. (23562)
  • Remove block label from child block appender. (23393)
  • A11y: Move blocks between levels using keyboard. (22453)

New APIs

  • Support orientation prop in InnerBlocks. (23416)
  • Support a flexible useItems 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 the autocompleters API. (22853) (23385)
  • Stabilize the image editing REST API endpoint. (23536)
  • Stabilize the block directory REST API endpoint. (23528)
  • Add descriptions to Block patterns. (23070)

Experiments

  • Site Editor:
    • Remove the button block appender. (23436)
    • Improve the template parts insertion flow. (23295)
    • Fix template part resolution for edited files. (23591)
    • Fix inspector panels buttons. (23464)
    • Add template part block keyword. (23623)
    • Allow wide alignment. (23488)
    • Remove templateIds state. (22893)
  • Navigation screen and block:
    • Fix saving issues. (23559)
    • A11y: Improve keyboard navigation on the Navigation block toolbar. (23281)
    • Fix text size no longer overwritten. (23360)
    • Adjust Navigation block submenu padding and spacing. (23380)
    • Update placeholder label. (23297)
    • Hide the block toolbar on the navigation screen. (23021)
    • Allow setting up menus that auto add new pages. (22697)
    • Allow Search block to be added alongside links. (22656)

Bug Fixes

  • Block Directory:
    • Support .svg extension for results icons. (23442)
    • Throw error if we have an issue registering blocks. (23439)
    • Remove the overflow on the Add button. (23409)
    • Fix double border in block list. (23625)
  • Fix the upload icon size. (23553)
  • Allow scrolling over Popovers. (23696)
  • Fix quote left border color in dark mode. (23692)
  • Fix empty block list appender visibility on aligned blocks. (23672)
  • Fix horizontal Block Mover Layout. (23640)
  • Fix invisible drop target indicator. (23638)
  • Rich text: Fix soft line break in caption on enter. (23622)
  • Fix clicking Gallery items buttons on Safari. (23586)
  • Hide block list appender in a reusable block if it’s not being edited. (23584)
  • Revert “Remove the style CSSCSS Cascading Style Sheets. class when the default style variation is chosen”. (23548)
  • Classic block:
    • Add height: Auto to content wrapper. (23547)
    • Add scroll to last edit position. (23544)
    • Adjust placement of the toolbar. (23438)
    • Prevent content loss by regularly dispatching changes. (23408)
    • Fix undo keyboard shortcut. (23376)
  • Fix the Gallery images buttons rendering. (23471)
  • Fix Post title top margin. (23447)
  • Fix file names generation for edited image files. (23440)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when cropping imùges. (23432)
  • Polish block moving animation. (23401) (22640)
  • Fix small RTL 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 Buttons block. (23390)
  • Fix centered legacy button. (23381)
  • Fix React warning while unmounting slots. (23365)
  • Don’t show the “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.” action if the user is not allowed to delete posts. (23174)
  • add inline font-sizes and colors to the editor for themes that don’t enqueue the preset classes. (22356) (22668) (23717)
  • Create Block: Fix missing scripts section in scaffolded package.json. (23443)
  • Scripts: Fix build script with style.css files. (23710)
  • Restore removed props and behavior back to Query Controls. (23419)
  • Add support for hexadecimal colors in gradient presets. (23363)

Performance

  • Improve the performance of the keyboard shortcuts binding. (23394)

Documentation

  • Add a documentation page explaining how the repository is organized. (23563)
  • Document the WordPress 5.5 backported code. (23478) (23708)
  • Add .markdownlint.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. configuration extending scripts configuration. (23655)
  • Add “Create a Block” tutorial Create a Block tutorial. (22831) (23654)
  • Update wp-env Ubuntu documentation. (23650)
  • Add documentation for InnerBlocks orientation prop. (23641)
  • Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. (23577)
  • Update categories in block registration documentation. (23572)
  • Update ESNext usage in public API. (23475)
  • Clarify the wp-block-styles documentation. (23359)
  • Add documentation for setting up Prettier for markdown. (23286)
  • Typos and tweaks: (23542) (23489) (23590) (23300) (23534) (23467)

Code Quality

  • Optimize useSelect calls (dependencies) (23255) (23247) (23245) (23249)
  • Reduced the number of SASS color variables. (23648) (23454)
  • Remove unused getBlockIndex selector from useBlockDropZone hook. (23634)
  • Scroll on drag: Remove blockNodes context dependency. (23561)
  • Add missing notices dependency. (23517)
  • Remove BlockPopover key prop and related code. (23504)
  • Show a warning when SlotFillProvider is missing. (23493)
  • Block toolbar: Remove data-align attribute. (23468)
  • Extract block draggable scroll behaviour into React hook. (23444)
  • Refactor Dropdown to use functional component. (23142)
  • Refactor Embed Edit component: Class component to Function component. (22846)
  • Extract navigation link rendering code from the navigation block. (21075)
  • Block editor: Use vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. instead of Lodash if possible. (21063) (23633)
  • Add “engines” to the package.json and “engine-strict = true” to the package.json. (23600)
  • Block Directory: Remove custom permission check in favor of canUser. (23624)
  • Remove REST_WP_REST_Block_Types_Controller_Test which now exists in WordPress Core. (23500)
  • Editor: Remove unnecessary block directory dependency. (23476)
  • Plugin Controller: Return the plugin without the extension. (23395)
  • Clean up image editor REST route. (23368)
  • Make slash inserter tests more stable. (23367)
  • Post Author block: Fix end-to-end test fixture indentation. (23209)

Build Tooling

  • Add new command for pre-releasing npm packages. (23357)
  • Move the CI setup from Travis to 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. (23523) (23520) (23518) (23470) (23538)
  • Add npm cache to Github workflows and use checkout v2. (23482)
  • Update bin/validate-package-lock.js error message. (23435)
  • Minor improvements to the release tool and release documentation. (23441)
  • Tools: Always append prerelease to version update in package.json when preparing npm release. (23480)
  • Scripts: Add custom TerserPlugin configuration. (22990)
  • Scripts: Exclude node_modules from source map processing in start script. (23711)
  • Fix rc version number added to the CHANGELOG. (23433)
  • Tests: Jest – Add typeahead plugin. (23366)
  • Tests: Run end-to-end tests only as an adminadmin (and super admin). (23588)
  • End-2-end Tests: Add test for using block variation with the slash inserter. (23585)

Various

  • RangeControl: Integrate NumberControl + update internal state flow. (23006)
  • Create Block: Generate a block.json file. (23399)
  • Sync Block Context changes from Core. (23602)
  • Scripts: Remove default exclude rule for node_modules for SVG, CSS and Sass files. (23495)
  • REST API: Sync /themes endpoint with Core’s. (23321)

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 8.56.86 s27.84 ms
Gutenberg 8.47.22 s27.85 ms
WordPress 5.48.91 s40.52 ms

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

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

What’s new in Gutenberg (24 June)

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/ 8.4 has been released. This is the second last 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 release before WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 and it’s a big one! Gutenberg 8.4 includes image editing, multi 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. controls, and we’ve enabled the Block Directory. This release also includes many fixes, countless refinements, and a tonne of iteration on the Full Site Editing and the Navigation experiments.

Image editing

Are you a photography geek who cares about things like the “rule of thirds”? Now you can make quick crops without leaving the block editor. Just hit the Crop button in the toolbar and you can adjust the aspect ratio, zoom level, and position.

You can also rotate the image right then and there. Great for when your iPhone-using friend sends you a picture!

Multi block controls

How’s this for a little big improvement: Now, if you select multiple blocks of the same type, you can change their attributes all at once. Nice!

Enabling the Block Directory

Now you can discover, install, and insert third-party blocks into your posts from the comfort of your editor. Search for the block you want in the inserter and, if you don’t already have it, you’ll see a prompt to install it right then and there.

We call this the Block Directory, and it’s one of the big ticketticket Created for both bug reports and feature development on the bug tracker. items in the WordPress Roadmap. It’s powered by the WordPress.org Plugin Directory and we’re super excited to see what our fabulous community of plugin developers will do with it.

We’ll be posting more info about the Block Directory—including how you can publish your own blocks to it—shortly. Watch this space!

8.4 🇧🇷

Features

  • Add image editing. (23349)
  • Enable block directory. (23389)
  • Allow block attributes to be modified while multiple blocks are selected. (22470)

Enhancements

  • Show movers next to block switcher. (22673)
  • Support drag and drop in blocks like Social Links and improve drop zone detection. (23020)
  • Improve the accessibliity of toolbars by implementing roving tab index.
    • Embed block toolbar. (23278)
    • Custom HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block toolbar. (23277)
    • Table block toolbar. (23252)
    • Grouped blocks toolbars. (23216)
    • 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. (22354)
  • Tweak colors of disabled buttons to match rest of WP Adminadmin (and super admin). (23229)
  • Unify style of subheadings. (23192)
  • Make Popover scrolling and position behavior adapt to the content changes. (23159)
  • Reduce block appender hover delay. (23046)
  • Improve the alignment of children in the CardHeader and CardFooter components. (22916)
  • Add ability to transform a Preformatted block into a Code block. (22634)
  • Add a border to blocks while hovering with the Select tool active. (22508)
  • Consolidate disparate “copy block” actions. (23088)
  • Remove margin from last button if buttons in Buttons block are centered. (23319)
  • Adapt the block switcher styles to the new Popover component. (23232)
  • Make UIUI User interface more consistent. (23202)
  • Remove canvas padding. (22213)
  • Image Editing
    • Update Rich Image Icons. (22819)
    • Consolidate crop ratios. (22817)
    • Use snackbar notifications. (23029)
    • Batch editing in cropper component. (23284)
    • Move to image block. (23053)
    • Change Edit label to crop icon. (23387)
    • Use percentage instead of multiplier. (23362)

New APIs

  • Update the theme colors to rely on CSSCSS Cascading Style Sheets. variables. (23048)
  • Extend register_block_type_from_metadata to handle assets. (22519)
  • Enable custom classnames on <CustomSelectControl>. (23045)
  • Add onFilesPreUpload property toMediaPlaceholder. (23003)
  • Improve error customization inMediaReplaceFlow. (22995)
  • Add context properties to block types REST endpoint. (22686)

Bug Fixes

  • Fix pixel shift for toggles. (23191)
  • Fix useBlockSync race condition. (23292)
  • Avoid overriding popover content padding. (23270)
  • Fix block parent selector border radius. (23250)
  • Fix plus radius. (23240)
  • Fix Inserter’s handling of child blocks. (23231)
  • Create Block: Fix errors reported by CSS linter in ESNext template. (23188)
  • Add context property mapping to block registration. (23180)
  • Remove z-index from placeholder fieldset. (23152)
  • Fix possibly outdated onChange in color palette’s color picker. (23136)
  • Fix updateSlot missing from defaultSlotFillContext. (23108)
  • Add check theme support is an array before indexing. (23104)
  • Add 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. to padding ‘reset’ button. (23099)
  • Fix group block moving animation not working correctly. (23084)
  • Use a light block DOM for the Media & Text block. (23062)
  • Popover: Ensure popovers consider border width’s in their positioning. (23035)
  • Remove child space inTooltip. (23019)
  • Fix drag and drop for blocks that don’t use __experimentalTagName for their inner blocks. (23016)
  • Fix am / pm i18n 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.. (22963)
  • Fix plugin document setting panel name. (22763)
  • Fix plus icon. (22704)
  • Fix Typography panel rendering from style 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.. (22605)
  • Fix “Cannot read property ‘end’ of undefined” error on babel-plugin-makepot. (22394)
  • Fix “ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. does not recognize isSelected prop in ComplementaryAreaToggle” warning. (22967)
  • Cover padding: Fix reset and visualize on hover. (23041)
  • Fix color picker saturation bug. (23272)
  • Fix image size feature. (23342)
  • Remove block preview paddings. (23386)
  • Block Directory
    • Fix “no result” UI flash. (22783)
    • Uninstall unused block types. (22918)
    • Fix installing blocks. (23096)
    • Add plugins 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/. endpoints. (22454)
    • Use plugin 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 installing & deleting block-plugins. (23219)
    • Use a more specific <script> matching pattern. (23407)
    • Fix missing padding. (23346)
  • Image Editing
    • Fix image size on crop. (23173)
    • Avoid re-render on select. (23009)
    • Preserve crop position through rotations. (23374)

Performance

  • Memoize useSelect callbacks on the header toolbar items. (23337)
  • Enqueue assets for rendered blocks only. (22754)
  • Call isMultiSelecting and isNavigationMode selectors where needed. (22135)

Experiments

  • Full Site Editing
    • Move initial template fetch to client. (23186)
    • Fix Template Part Auto-draft creation. (23050)
    • Fix template part switching instability. (23282)
    • Fix $theme-color error in Template Part block. (23221)
    • Add auto-drafting for theme supplied template parts. (23254)
    • Add template part previews to placeholder block. (22760)
    • Fetch template parts in Template Switcher from REST API. (21878)
    • Post Title block: Add alignment and heading level support. (22872)
    • Post Author block: Update functionality and visual parity. (22877)
    • Add theme exporter. (22922)
  • Navigation block & Navigation screen
    • Visual improvements to the block navigator. (22796)
    • Improve flow when creating from menu. (23187)
    • Renamed Navigation Link to Link. (23163)
    • Only show appender for the currently selected block. (22998)
    • Fix navigation block dark style appender. (23165)
    • Fix saving on navigation screen. (23157)
    • Extract and refactor placeholder from navigation block edit function. (23109)
    • Better README for the edit-navigation package. (23018)
    • Remove navigator from the navigation block inspector. (23022)
    • Separate block navigator focus from the editor focus. (22996)
    • Change MenuLocationsEditor to use a card instead of a panel. (23151)
    • Change Create Menu UI to use a Card instead ofPanel. (23150)
    • Enable creation from existing WP Menus. (18869)
    • Don’t announce external value changes in custom select control. (22815)
    • Refactor Navigation screen to use @wordpress/data. (23033)

Documentation

  • @wordpress/env: add login details to documentation. (23343)
  • Grammatical fixes in modularity.md. (23336)
  • Update modularity.md. (23322)
  • Use correct package for importing useState in BoxControl examples. (23243)
  • Rename architecture index.md to readme.md. (23242)
  • Scripts: Update changelog to move unreleased entries to Unreleased section. (23178)
  • Handbook: Udpate documentation for package release. (23162)
  • Use deny/allow list. (23120)
  • Move ESNext as default code example. (23117)
  • Handbook: Update release documentation. (23002)
  • Update theme-support.md for experimental supports. (23310)
  • RichText: Add missing param documentation for getActiveFormats(). (23160)
  • API description: Use a period at the end. (23097)
  • Improve JSDoc comment in ESNext template in edit.js file. (23164)
  • Blocks: Update block registration default values. (23348)

Code Quality

  • Refactor header toolbar items to use @wordpress/data hooks. (23315)
  • Use useLayoutEffect to compute the popover position. (23312)
  • Reduce unnecessary selector specificity for Button block. (23246)
  • Button component – remove isLarge prop. (23239)
  • Upgrade Reakit to version 1.1.0. (23236)
  • Refactor column block to use hooks. (23143)
    RichText: Rewrite with hooks. (23132)
  • Refactor ToggleControl to use functional component. (23116)
  • Refactor Media & Text to use functional components. (23102)
  • Image block: Split huge component. (23093)
  • SimplifyuseImageSizes. (23091)
  • Block: Move align wrapper out of Block element. (23089)
  • Remove Gutenberg plugin’s deprected APIs for version 8.3.0. (23001)
  • Block: Remove animation component so it is just a hook. (22936)
  • Remove asterisk icon. (22855)
  • Image Editing
    • Use hooks. (23008)
    • REST API Code Cleanup. (23037)

Copy

  • Cover block: update copy for Opacity label. (23287)

Build Tooling

  • Packages: Fix the changelong updater for initial npm release. (23166)
  • Scripts: Fix style.css handling in the build and start commands. (23127)
  • Scripts: Clean up the build folder via clean-webpack-plugin. (23135)
  • Scripts: Update stylelint dependencies to latest versions. (23114)
  • Remove volumes and networks in wp-env destroy. (23101)
  • Build: Replace “release” with “build” in script for building a package. (23063)
  • Release tool: Fix bug on reporting message error. (22994)
  • Scripts: Remove temporary workaround in ESLint configuration. (22915)
  • ESLint plugin: Allow ESLint 7.x as peer dependency. (23190)
  • Packages: Add “gutenberg” to the list of keywords in package.json. (23161)
  • Update package-lock.json. (23052)

Various

  • Initialize the content size used in Popover computation. (23279)
  • Make the block grouping test more stable. (23266)
  • Try to improve heading custom color E2E test stability. (23260)
  • Attempt to fix RTL end-to-end test. (23203)
  • Add verification for Create Block to Continues Integration. (23195)
  • Remove padding inheritance on lists in editor-styles. (23080)
  • Change select parent button styles. (23230)
  • Make link color control opt-in. (23049)
  • Use showBlockToolbar consistently in e2e tests. (23311)

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 TimeKeyPess Event (typing)
Gutenberg 8.47.69 s31.91 ms
Gutenberg 8.37.23 s28.30 ms
WordPress 5.49.00 s41.17 ms

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

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