What’s new in Gutenberg 14.6? (23 November)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Table of Contents

  1. Add a Variation Picker to the Group Block Placeholder
  2. Add List-Based Editing to Navigation Block
  3. Hide Block Toolbar when Spacing Visualizer is Shown
  4. Transform Paragraph into Heading via Keyboard Shortcut
  5. Update the Design of the Focal Point Handle
  6. Fluid typography: Adjust font size min and max rules
  7. Define a Minimum Height
  8. Generate New Color Pallets Automatically
  9. Changelog
  10. Performance Benchmark
  11. First Time Contributors
  12. Contributors

Add a Variation Picker to the Group 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. Placeholder

When a new Group block gets inserted into the page it now presents the user with a variation picker to instantly choose which type of layout they want to use.

Add List-Based Editing to Navigation Block

Managing the order of menu items just got a lot easier by allowing you to modify the arrangement of the individual menu items in a list view right inside the block settings sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. This works similarly to the list view but is isolated to just the current navigation you are editing. Clicking on the “Edit” button selects the menu item in the editor so you can edit it inline.

Hide Block Toolbar when Spacing Visualizer is Shown

The spacing visualizer has seen some improvements in the last few releases already. In 14.6 it now automatically hides the blocks toolbar as soon as you hover over the spacing setting allowing you to focus on the content whilst you adjust the spacing.

Transform Paragraph into Heading via Keyboard Shortcut

You can now easily transform paragraph blocks into headings using the new control + option + 16 keyboard shortcut.

Update the Design of the Focal Point Handle

In order to make it more clear that the focal point picker is selecting a broader region instead of a fine point the handle was updated to better fit the precision of the input.

Fluid typography: Adjust font size min and max rules

The minimum and maximum value calculations for fluid font sizes have been adjusted to prevent inconsistencies in certain viewports, such as having a bigger maximum than the custom size setting. You can check the github issue for the full set of rules.

Define a Minimum Height

The new “Minimum Height” dimension control is now available for the Group and Post Content block. For example, it can be used to make sure the site footer always stays at the bottom of the viewport.

Generate New Color Pallets Automatically

Coming up with the perfect color palette is hard. Sometimes you just want to explore some new quick ideas. This new “Randomize colors” feature is a subtle algorithm that can generate alternative color palettes on the fly.

Changelog

Enhancements

Block Library

  • Latest posts: Add color support. (41874)
  • Latest posts and latest comments: Add spacing support. (45110)
  • Navigation: Adds a list view. (45546)
  • Navigation: Add a new ManageMenusButton component. (45782)
  • Navigation: Reposition the navigation selector. (45555)
  • Navigation Link: Add the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field to the Navigation Link inspector controls. (45751)
  • Author: Make the Author selector display all users instead of just 10. (45640)
  • Columns: Add transform to unwrap the contents. (45666)
  • Read More: Add aria-label and screen reader text. (45490)
  • Group: Use a variation picker in the placeholder. (43496)

Components

  • Use new theming accent color in all components. (45289)
  • CheckboxControl: Replace margin overrides with new opt-in prop. (45434)
  • FocalPointPicker: Update the design of the focal point handle. (45053)
  • FontSizePicker: Update hint text to match the design. (44966)
  • CheckboxControl: Move icons out of labels. (45535)

Block Editor

  • Converts paragraphs to headings with keyboard shortcuts. (44681)
  • Restore the empty paragraph inserter. (45542)
  • Transform: Select all blocks if the result has more than one block. (45015)
  • Content-only locked patterns: Move “Modify” to the ellipsis menu. (45391)
  • Patterns: Adjust the space in the pattern explorer list. (45730)
  • Update: Lock icon to outline. (45645)
  • Don’t use capital case for ‘Distraction free’ strings. (45538)
  • Replace Justification/Orientation controls with ToggleGroupControl. (45637)

Site Editor

  • Replace FSE with Site Editor. (45699)

Design Tools

  • Add a minHeight block support under dimensions. (45300)
  • Hide the block toolbar when the spacing visualizer is showing. (45131)

Global Styles

  • Fluid typography: Adjust font size min and max rules. (45536)
  • Elements: Add a text decoration control to link elements. (45643)
  • Global styles: Convert preset font size values to CSSCSS Cascading Style Sheets. vars. (44967)
  • Try generating random color palettes. (40988)

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

  • Updates tested up to version to 6.1. (45630)

Patterns

  • Pattern Directory 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.: Add support for pagination parameters. (45293)
  • Update bundled patterns compat directory. (45620)

Bug Fixes

Block Library

  • Change the order of the pseudo-states in the pseudo-selectors array. (45559)
  • Cover: Avoid content loss when the templateLock value is all or contentOnly. (45632)
  • Fix alignment of create new post link. (45638)
  • Fix navigation appender position to prevent obstructing its items. (43530)
  • Fix: Button block text alignment. (45663)
  • Query Pagination: Fix positioning of the next link in editor when the parent is selected. (45651)
  • Site Logo: Use the correct home URL setting. (45476)
  • Switch background color to text color on the block separator. (44943)
  • Table Block: Apply borders and padding on both front end and editor. (45069)
  • Table block: Fix error in margin value. (45674)
  • Template Part Block: Update block isActive method. (45672)
  • Navigation: Fix overflowing menu name in the navigation selector dropdown. (45647)

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)

  • Fix focus return when closing the Post publish panel. (45623)
  • Fix navigate regions backwards for macOS Firefox and Safari. (45019)
  • Fix the Save buttons labeling and tooltip. (43952)
  • Fix the navigate regions focus style. (45369)
  • Fix: Contrast checker appears unexpectedly on some blocks. (45639)
  • Fix: Contrast checker does not update properly. (45686)

Components

  • Autocomplete: Fix unexpected block insertion during IME composition. (45510)
  • Fix ESLint warning for Dashicon. (45795)
  • FormTokenField: Fix duplicate input in IME composition. (45607)
  • Making size prop work for icon components using dash icon strings. (45593)
  • ToolsPanel: Prevent calling deselect when panel remounts. (45673)
  • Color Picker: Prevent all number fields to become 0 when one of them is an empty string. (45649)
  • ToggleGroupControl: Only show the enclosing border when isBlock. (45492)
  • Autocomplete: Check key events more strictly in IME composition. (45626)

CSS & Styling

  • Inherit font from theme on overlay close button. (45635)
  • Navigation: Fix font inheritance when using text menu button. (45514)
  • Remove hover style to button on dark block tools UIUI User interface. (45653)
  • Remove width from block mover button focus style. (45665)
  • Site editor hover/select: Fix double border. (45589)
  • Remove duplicate output of existing classnames in layout classnames. (45499)

Post Editor

  • BlockManagerCategory: Fix styles for indeterminate. (45564)
  • Fix: Updated names from List View to Document Overview. (45524)
  • Strip HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from Post Title when pasting multiline title containing HTML. (35825)

Site Editor

  • Decode entities in template title and description. (45716)
  • Link to homeUrl from site editor view menu. (45475)

Block Editor

  • Fix Link UI popover positioning when inspector control input is focused. (45661)
  • Paste: Fix list only paste from Google documentation. (45498)
  • Make Manage Reusable blocks match similar links. (45641)(45689)
  • List View: Disable 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". expansion when block editing is locked. (45541)
  • Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. (45739)

Experiments

  • A list view duplicate for use in navigation list view experiment. (45544)
  • Introduce experiment for inspector based navigation editing. (45515)

Documentation

  • Add missing CHANGELOG entry. (45691)
  • Change Title: How to use 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/. with Gutenberg. (45323)
  • Docs: Update the readme for the integration test fixtures. (45581)
  • Summarize “Available commands” section and refer them it to scripts documentation. (45636)
  • Update applying-styles-with-stylesheets.md. (45604)
  • [create-block] Reorganized sections to provide a better learning experience of this package. (45676)
  • Change “block style variations” references to “block style”. (45650)

Performance

  • Lodash: Refactor away from _.reduce(). (45460)
  • Lodash: Refactor block editor away from _.reduce(). (45455)
  • Lodash: Refactor blocks away from _.reduce(). (45457)
  • Lodash: Refactor site editor away from _.reduce(). (45459)
  • Lodash: Refactor post editor away from _.reduce(). (45458)
  • Do not look for block variants, if not supporting block-templates. (45362)
  • List: Disable nested list drop zone so dropping list items works. (45321)
  • Use low-level cache for get_user_data_from_wp_global_styles. (45634)
  • Update: Improve performance of block template object retrieval. (45646)

Code Quality

Block Editor

  • Block Editor: Improve LinkControl tests. (45609)
  • Block Editor: Improve ResponsiveBlockControl tests. (45610)
  • Block Editor: Improve ReusableBlocksTab tests. (45652)
  • LinkControl: Suppress errors on null values. (45742)
  • Simplify ResizableEditor component. (45578)
  • Remove duplicate colon. (45763)
  • Extract the manage menus button to a shared component to reduce duplicate code. (45769)
  • 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. pseudo selector comments from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (45619)
  • unstableSubscribeStore: Support store descriptors. (45481)

Components

  • BaseField: Remove unnecessary .firstChild from tests. (45687)
  • DateTime: Remove unused types. (45615)
  • Draggable: Convert component to TypeScript. (45471)
  • Fix no-container violations in FormGroup tests. (45662)
  • Fix testing-library/no-node-access in TreeGrid tests. (45554)
  • FontSizePicker: Use components instead of helper functions. (44891)
  • Improve tests for ToggleGroupControl. (45627)
  • MenuGroup: Convert component to TypeScript. (45617)
  • Popover: Fix exhaustive-deps warning. (45656)
  • Refactor ItemGroup to pass exhaustive-deps. (45531)
  • Refactor useFlex to pass exhaustive-deps. (45528)
  • Refactor withNotices to pass exhaustive-deps. (45530)
  • RefactorPaletteEditListView to ignore exhaustive-deps. (45467)
  • TabPanel: Fix the exhaustive-deps warning. (45660)
  • ToolsPanel: Fix exhaustive-deps hook warning. (45715)
  • Truncate: Remove unnecessary .firstChild from tests. (45694)
  • View component: Rename index.js to index.ts. (45667)
  • ColorPalette, BorderBox, BorderBoxControl: Polish and DRY prop types, add default values. (45463)
  • NavigatorScreen: Satisfy exhaustive-deps eslint rule. (45648)
  • Fix useCx story to satisfy exhaustive-deps eslint rule. (45614)
  • URLPopover: Use new placement prop instead of legacy position prop. (44391)
  • Tidy and minor refactor of Link UI code. (37833)

Block Library

  • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.: Escape the ‘get_author_posts_url()’. (45427)
  • Button: Remove unnecessary ‘useCallback’. (45584)
  • Make unwrapping columns slighly more efficient. (45684)
  • Simplfy handling of save of Nav block uncontrolled inner blocks. (45517)
  • Lodash: Refactor block library away from _.reduce(). (45456)

Tools

Testing

  • Components: Add exhaustive-deps eslint rule. (41166)
  • Fix typos in Paragraph block end-to-end tests. (45611)
  • FontSizePicker: Fix a buggy unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (45529)
  • Ignore warnings for window.wp in Playwright. (45598)
  • Migrate mentions tests to playwright. (43064)
  • Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. (45726)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native unit tests: Migrate getByA11yLabel usages. (45454)
  • Unit Tests: Rewrite ReactDOM.render usages to RTL. (45453)
  • E2E: Add site and 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 supports for ensureSidebarOpened. (45480)

Build Tooling

  • Include TS and JSX files to testing-library lint. (45533)
  • Remove use of set-output in workflows. (45357)

Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.

  • Configure labels for GHA Dependabot PRs. (45516)

Performance Benchmark

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

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.610.27s49.63 ms
Gutenberg 14.512.08s70.53ms
WordPress 6.14.1s31.3 ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.69.58s48.65ms
Gutenberg 14.59.35s77.82ms
WordPress 6.13.84s22.79ms

First Time Contributors

The following PRs were merged by first time contributors:

  • @edanzer: Template Part Block: Update block isActive method. (45672)
  • @TimBroddin: Fix alignment of create new post link. (45638)
  • @wojtekn: Make Author block selector to display all users instead of just 10. (45640)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @Copons @DaisyOlsen @desrosj @dinhtungdu @draganescu @dsas @edanzer @ellatrix @enejb @flootr @getdave @glendaviesnz @hz-tyfoon @jasmussen @javierarce @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @juhi123 @kevin940726 @Mamaduka @matiasbenedetto @mikachan @mirka @mmtr @mtias @ndiego @nielslange @noisysocks @ntsekouras @peterwilsoncc @ramonjd @ryelle @scruffian @spacedmonkey @t-hamano @TimBroddin @tyxla @vcanales @walbo @wojtekn @youknowriad @yuliyan

Thanks to @xavortm for helping with the assets for this post and to @javiarce & @priethor for reviewing.

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

Editor chat summary: 23 November 2022

This post summarises the weekly editor chat meeting (agenda here) held on Wednesday, November 23, 2022, 14:00 UTC in Slack. Moderated by @andraganescu.

Announcements and Links

Key project updates

Task Coordination

N/A

Open Floor

@andraganescu noticing that the meeting was the lowest engagement and participation ever recorded, confirming quite a long and steady trend of this meeting loosing its purpose, raised that we should make the meeting twice a month and also reshape its usefulness.

This is also a requirement because 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/ appears to be managed by the community much better than a couple of years a go:

  • there are consistently updated tracking issues
  • there are repeated and well done outreach programs
  • most of the editor issues end up as GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues

Therefore having a meeting just to have it seems pointless.

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.

Read complete transcript

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

Editor Chat Agenda: November 23, 2022

Facilitator and notetaker: @andraganescu

This is the agenda for the weekly editor chat scheduled for Wednesday, November 23, 2022, 2:00 PM UTC. This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

General Announcements and Links.

  • Gutenberg 14.5.4 released on Nov. 18
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 14.6 to be released on Nov. 20, 22

Key project updates

Task Coordination.

Open Floor – extended edition.

If you cannot attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: 16 November 2022

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, November 16, 2022, 14:00 UTC in Slack. Moderated by @bph.

Announcements and Links

Key project updates

@andrewserong posted an update on the Layout Option post

@annezazu updated the High Priority list of the issues for Phase 2 Customization 

There are quite a few issues, for which designs are available, and they are now in need of developers.

Global Styles

Editor

Navigation

Templates

Should any of these issues interest you to tackle, and you have the bandwidth, you could add yourself as assignee via the project board

Also, even if you are not yet ready to contribute, and some of us have full plates, you can still chime in on the issues and discuss the most recent approach.

Task Coordination

@getdave commented on the agenda post: He’d like to flag this bugfix for the Link UI text replacement. It would be great to get some reviews on it. Dave also has been working with other contributors on the new UX for Editing Menus in the Navigation block. Reviewers and contributors are very welcome.

@paaljoachim commented on the Agenda post: I would like to bring some attention to this comment by @aaronrobertshaw
“We want a means of setting text decoration (including none) on individual blocks as well as 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. & global styles.”

Open Floor

 No open floor discussion topics were raised during the meeting.

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.

Read complete transcript

Props to @paaljoachim for review

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

Editor Chat Agenda: November 16, 2022

Facilitator and notetaker: @bph

This is the agenda for the weekly editor chat scheduled for Wednesday, November 16, 2022, 2:00 PM UTC. This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.

General Announcements and Links.

  • Last Week’s Meeting Summary
  • WordPress 6.1.1 Released on Nov. 15, 2022
  • What’s new in Gutenberg 14.5? (9 November)
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 14.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). expected on Nov. 16, stable released on Nov. 20, 22
  • WordPress 6.1 ‘Misha’ Retrospective by Hector Prieto

Key project updates

Task Coordination.

Open Floor – extended edition.

If you cannot attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

Post reviewed by @paaljoachim. Thank you.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: Wednesday, 9 November 2022

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, November 09, 2022, 14:00 UTC.

General Updates

  • WordPress 6.2 Development Cycle.
  • 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/ 14.5 has been released and is available for download!

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

@andraganescu

@mamaduka

Open Floor

Should we rethink how CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Chat works (again)?
The attendance and purpose of the chat seem to be both withering for the past six months or more. Let’s spend some time to figure out what happens and what could we change to make use of our time and participation in a relevant and impactful manner.

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.

Read complete transcript

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

What’s new in Gutenberg 14.5? (9 November)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 14.5 has been released and is available for download!

It consolidates the list view and document information, expands margin and padding support while improving spacing visualizers, and sets the groundwork for future releases with numerous code quality 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.

Table of Contents

Access the list view and document information all from one panel

Prior to Gutenberg 14.5, there were separate icons in the Editor toolbar for “List View” and “Details.” The Details popover presented a document outline and information like the character and word count. The List View panel displayed a hierarchical view of all blocks in the document.

The Details popover and List View panel have now been combined into a single panel offering a more streamlined way to manage the current document. This new “Document Overview” panel is accessible by clicking on the original List View icon in the toolbar.

Confidently edit 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. spacing using improved visualizers

Configuring block spacing (margin, padding) can be tricky, especially when determining how the spacing of one block will impact those blocks around it. Spacing visualizers significantly improve this experience by allowing you to “visualize” each change you make.

Gutenberg 14.5 enhances this functionality by displaying visualizers as soon as you hover over a spacing control rather than just when edited. This is a small change, but an important one since most CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks now support spacing controls. The release itself adds spacing to numerous comment-related blocks.

Changelog

Enhancements

  • Add block pattern categories’ descriptions to the REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. and update the descriptions. (45244)
  • Create Block: Update templates to use APIs introduced in WP 6.1. (44185)
  • setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. (45156)
  • Spacing visualizer: Add option to trigger with mousover as well as value change. (44955)
  • Style Engine: Add support for dimensions.minHeight property. (45334)
  • Try: Add layout classnames to inner block wrapper. (44600)

Block Library

  • Audio, Video: Add toolbar button to add/remove caption. (45112, 45113)
  • Comment Template, Post Comment Count, Post Comments Form, Post Comments Link: Add spacing support. (45101, 45150, 45091, 45184)
  • Gallery: Register styles with Style Engine. (43070)
  • Navigation: Return undefined from useEffect. (45239)
  • Social Icons: Add rel attribute. (45469)
  • Video: Update tracks editor icon to text button. (45245)

Components

  • Block mover button: Do not show focus styles on pointer interactions. (45126)
  • BorderControl, BorderBoxControl, BorderRadiusControl: Update control components to allow 40px height. (41860)
  • BoxControl, Card, ToolsPanel: Remove unnecessary wrappers in stories. (45305)
  • Button: Change the color on the destructive button focus state. (44427)
  • Button: Refactor Storybook to controls and align documentation. (44105)
  • ColorPalette: Convert to TypeScript. (44632)
  • DateTimePicker: Add __next* props in Storybook. (45164)
  • FontSizePicker: Update design when withSlider is set. (44598)
  • FormFileUpload: Remove unused story file. (45286)
  • NumberControl: Add custom spin buttons. (45333)
  • RadioGroup: Mark as deprecated. (45389)
  • Navigator: Revert the removal of overflow styles from NavigatorScreen. (45303)
  • SelectControl: Add onChange, onBlur, and onFocus to storybook actions. (45432)
  • Storybook: Addon to wrap stories in max-width div. (45134)
  • TextControl: Set Storybook control types on help, label and type. (45405)
  • ToggleGroupControl: Add de-selectable variant. (45123)
  • ToggleGroupControl: Remove invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. props from types. (45114)

Post Editor

  • Edit Post: Improve distraction-free mode notices. (45348)
  • hasChangedContent: Remove obsolete blocks check. (45090)
  • Move document information and outline to list view panel. (44788)

Global Styles

  • Add :visited pseudo selector to theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. schema. (45236)
  • Embed, Gallery, Video: Add deprecation for the caption element. (45166, 45173, 45169)
  • File Block: Add a deprecation for the button element class name. (45159)
  • Table Block: Add a deprecation for the figcaption element class name. (45161)

Bug Fixes

  • Ensure block content is always returned as a string after processing. (45330)
  • Fix distraction free shortcut typo. (45186)
  • Fix resizeable editor scrolling. (45189)
  • Fix handling of nullish comments in the pot-to-PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher script. (45414)
  • Fix image caption supports Voice Control. (44850)
  • Fix PHP warning in pattern categories REST API controller. (45410)
  • Fix Prevent 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 Tag Processor in certain truncated documents. (45537)
  • Hide insertion point when moving out of the canvas. (45420)
  • Metaboxes: Perform hasMetaBoxes check on every save. (45145)
  • Prevent unexpected copying of the post title. (41284)
  • Raw Handling: When pasting bullet characters, convert to astericks for markdown converter. (45017)
  • Web Font: Fix ascent/descent-override property typo. (45125)

Block Library

  • Button: Reset background-image property for outline button style. (45234)
  • Cover, Search, Spacer: Fix control widths. (45329)
  • Navigation: Fix saving/loading experience of uncontrolled blocks. (45486)
  • Navigation: Add padding to buttons when Submenus Open on click is enabled. (44605)
  • List: Fix migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. when the nested list is invalid. (44822)
  • Page List: Allow direct selection of nested Page List block by avoiding dual rendering within block. (45143)
  • Site Tagline: Fix user permission HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. errors. (45140)
  • Site Title: Avoid 403 errors for users with low permissions. (45093)

Components

  • AnglePickerControl: Set Storybook label control type to text. (45122)
  • AutocompleteUI: Close popup when click happens outside of the popover. (44795)
  • BorderControl: Await floating-ui state changes when rendering/opening popover to fix unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. failures. (45241)
  • Button component: Fix RTL alignment when containing icon and text. (44787)
  • ColorPalette: Fix transparent checkered background pattern. (45295)
  • ExternalLink: Update to support onClick handler. (45214)
  • InputControl: Allow inline styles to be applied to wrapper instead of inner input. (45340)
  • ItemGroup: Fix RTL text alignment when item is clickable. (45280)
  • Popover: Fix deprecations. (45195)
  • PublishDateTimePicker: Retrieve all future posts in a given month. (44540)
  • SpacingSizesControl: Remove UnitControl inline style use. (45412)
  • TabPanel: Add tests and changelog for onSelect behavior change. (45211)
  • UnitControl: Fix disabled style is overridden by forms.css. (45250)
  • Visual Editor: Fix permission error. (45262)

Site Editor

  • Fix clipped body background style in the Site Editor. (45261)
  • Only mark the ‘Site’ menu item active when editing a home template. (42807)

Performance

Documentation

  • Add a readme to the letter spacing component. (45308)
  • Add changelogs for internal refactorings using inert. (45269)
  • Add “Do not use in production” message to content locking experimental 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.’s. (45291)
  • Add Storybook intro. (45115)
  • Code Quality: Fix some misspelled words. (45222)
  • Disabled: Update documentation to clarify the absence of inert polyfill. (45272)
  • Fix incorrect character in code example. (45355)
  • Fix missing anchor link in FAQ URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (45232)
  • FontSizePicker: Update changelog for #45041. (45180)
  • Updating curation document to include content lock ability. (44908)
  • useAnchorRef: Update deprecation message. (45302)

Code Quality

  • Block Editor: Improve MediaReplaceFlow tests. (45424)
  • Block Editor: Refactor align tests to RTL. (45152)
  • Editors: Refactor icon tests to follow no-container rule. (45422)
  • Fix indent and quote in dependbot.yml. (45167)
  • Fix PHP 8.1 deprecation for strncmp(). (44829)
  • Popover: Use new placement prop instead of legacy position prop. (44392, 44387, 44389, 44398, 44399, 44394, 44395, 44390, 44396, 44388)
  • PostTextEditor test: Wrap .blur calls in act(). (45243)
  • Replace the MainDashboardButton slot with a setting in the site editor. (45149)
  • Run script loader test. (45288)
  • Site Editor: Move the save view state to the edit site store. (45200)
  • Small follow-ups to the distraction free mode PR. (45151)
  • Tests: Use container instead of container.firstChild for snapshots. (45278)
  • useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. (45317)
  • useFocusableIframe: Refactor to TypeScript. (45428)

Components

  • Add a popover variant prop and refactor popovers to use it, deprecate isAlternate. (45137)
  • Add parseQuantityAndUnitFromRawValue tests. (45260)
  • FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. (45298)
  • BorderBoxControl: Improve tests. (45208)
  • ContextSystemProvider, useUpdateEffect, SlotFill, Snackbar, TabPanel: Refactor to pass exhaustive-deps. (45044, 44403, 44934, 44935)
  • Remove unnecessary .firstChild from tests. (45419)
  • Update some ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18 related types. (45279)

Global Styles

  • Add wp_theme_has_theme_json as a public API to know whether a theme has a theme.json. (45168)
  • Deprecate WP_Theme_JSON_Resolver:Theme_has_support(). (45380)

Tools

Testing

  • Add Playwright Compatibility-classic-editor Test. (43979)
  • Add end-to-end tests for Drag-and-Drop in the inserter. (44631)
  • Cleanup after the writing flow end-to-end tests. (45119)
  • Fix failing PHPUnit tests. (45265)
  • Fix uploading artifacts even when the tests are successful. (45187)
  • Migrate iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.-rendering test case. (44535)
  • Migrate tests to Playwright. (43963, 45267, 44916, 44507, 45393, 43964, 45202)
  • Re-enable skipped Gallery block end-to-end test. (45266)
  • Try fixing Site Title flaky end-to-end tests. (45160)
  • Update Playwright to v1.27. (45193)

Build Tooling

  • ESLint: Add and enable eslint-plugin-testing-library. (45103)
  • ESLint: Exclude Playwright tests from testing library rules. (45366)
  • Fix native Demo editor build error when using Xcode 14 to build to a physical device. (45120)
  • Remove comments from compiled styles. (43177)
  • Upgrade rtlcss to v4.0.0. (43208)

Performance Benchmark

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

Post Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.512.08s70.53ms
Gutenberg 14.411.97s69.15ms
WordPress 6.09.29s42.64ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.59.35s77.82ms
Gutenberg 14.411.56s74.72ms
WordPress 6.06.92s37.79ms

Note that the performance benchmark tests were automatically run against 6.0 rather than 6.1. This is because the “Tested up to” version of the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party was not updated to 6.1 once the new version of WordPress was published. This will be corrected for Gutenberg 14.6.

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @alvitazwar @andrewserong @annezazu @aristath @BE-Webdesign @bph @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ellatrix @fluiddot @GeoJunkie @georgeh @getdave @glendaviesnz @gziolo @Initsogar @jorgefilipecosta @jornp @jsnajdr @kevin940726 @KevinBatdorf @kienstra @Mamaduka @mikachan @mirka @noisysocks @ntsekouras @oandregal @pkorzelius @pooja-muchandikar  @ramonjd @SavPhill @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad

The following PRs were merged by first-time contributors:

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

Thanks to @priethor and @mamaduka for their assistance with the release, and props to @joen for the image and video!

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

Editor Chat Agenda: 9 November 2022

Facilitator and notetaker: @ajitbohra

This is the agenda for the weekly editor chat scheduled for Wednesday, November 9 2022, 04:00 PM GMT+1. This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Agenda items

1) Announcements

WordPress 6.2 Development Cycle

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/ 14.5 RC1 is ready to test and Gutenberg 14.5 imminent.

2) Key project updates:

3) Task Coordination.

4) Open Floor – extended edition.

  • Should we rethink how CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Chat works (again))?
    • The attendance and purpose of the chat seem to be both withering for the past six months or more. Let’s spend some time to figure out what happens and what could we change to make use of our time and participation in a relevant and impactful manner.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

Core Editor chat summary: 2nd November 2022

This post summarises the weekly editor chat meeting (agenda here) held on 2022-11-02 14:00 UTC in Slack. Moderated by @get_dave.

Status Updates

  • WordPress 6.1 “Misha” was released on the 1st of November.
  • @annezazu has published an update on the Phase 2 Customization effort.
  • @priethor has created a created a Github project board to track the remaining Phase 2 tasks.
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party

Updates based on updated scope for site editing projects

Task Coordination

The following items were shared by folks to update us on what work is in progress or where help is needed:

@mamaduka – No blockers. I’m primarily working on the “pathway to migrate widgets to block themes” feature this week, and I hope to share my progress soon.

@fabiankaegy – I have two PR’s that I’d like to share because they could use some additional eyes:

@get_dave – I’ve been mainly focused on the Nav 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.:

Open Floor

The full Open Floor discussion is available on 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/.. It was a quiet meeting…

Editor 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. scrubs

@mamaduka – I wanted to mention that @ndiego and I are hosting a weekly Editor bug scrub every Tuesday at 14:00 UTC. Everybody is welcome to join.

Phase 2 & WordPress 6.2

@get_dave – I was curious to hear more based on this question by @fabiankaegy to @priethor: “How does the Phase 2 roadmap relate to the priorities for WP 6.2?”.

@priethor – The complete WP 6.2 roadmap is not available yet, and there is no release date for 6.2 (we closed the 6.1 release around 12 hours ago), so it’s hard to dive specifics other than we should all push forward to finish the main Phase 2 priorities and be able to say FSE is “ready, out of 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.” in 6.2.


Thanks to everyone who attended the chat.

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

Editor Chat Agenda: 2 November 2022

Facilitator and notetaker: @get_dave

This is the agenda for the weekly editor chat scheduled for Wednesday, November 2 2022, 04:00 PM GMT+1. This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

WordPress 6.1 “Misha” was released 1st of November.
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/ 14.5 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). should be released 2nd of November.

Key project updates:

Task Coordination.

Open Floor – extended edition.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting