The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA 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.?Create a ticket in the bug tracker.
Notes are mainly powered by an AI note taker so please leave a comment if anything feels wildly off.
Overview
Kevin Jahns presented a demonstration on utilizing Yjs to enhance real-time editing capabilitiescapabilityA capability is permission to perform one or more types of task. Checking if a user has a capability is performed by the current_user_can function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability). in WordPress, addressing existing challenges such as content synchronization and potential conflicts during simultaneous edits. He introduced features like automatic conflictconflictA conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. resolution and a heartbeat APIAPIAn 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 near real-time updates, emphasizing that while the current implementation may not fully replicate the Google Docs experience, it significantly improves user trust and collaboration. Participants were encouraged to explore Yjs further and consider its applications in their projects.
Jahns discussed the technical obstacles in implementing collaborative editing, particularly the lack of WebSocket support across various PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher engines and the limitations of WebRTC, which requires multiple servers for reliable operation. He proposed using HTTPHTTPHTTP 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. requests for syncing while allowing WebRTC as an optional enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.. Additionally, he highlighted issues with blockBlockBlock 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. validation errors and synchronization challenges with custom block types in the GutenbergGutenbergThe 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/ editor, suggesting the creation of a special editor binding for Yjs to improve synchronization. Security concerns regarding the WebRTC setup were also raised, with a focus on the need for role-based collaboration restrictions to prevent document manipulation.
The session also covered the storage and management of Yjs documents, with Jahns explaining that Yjs content is stored as comments in post content, facilitating straightforward revision creation. He acknowledged the challenges of managing real-time changes and the impact of Yjs documents on content size. Discussions included the limitations of WebRTC, particularly its reliance on costly TURN servers, and the need for ongoing testing to ensure the reliability of collaborative editing features. Jahns emphasized the importance of prioritizing collaborative editing to enhance the editor’s evolution and received appreciation for his transparency and commitment to the Gutenberg project.
Real-Time Editing Demo with Yjs Kevin Jahns presented a demo on real-time editing with Yjs, emphasizing its role in enhancing collaborative features in WordPress. He explained the limitations of the current WordPress editor regarding content synchronization and introduced new features like automatic conflict resolution and the heartbeat API for better real-time collaboration.
Collaborative Editing in WordPress Kevin Jahns addressed the difficulties of enabling collaborative editing in WordPress, noting that WebSockets are not universally supported across PHP engines. He explained that while WebRTC could be used as a fallback, it is not reliable enough for all users. Instead, he proposed using HTTP requests for syncing, with WebRTC as a progressive enhancement for those who can utilize it.
Block Synchronization and Customization Challenges Kevin Jahns addressed synchronization issues with block types (and ran into an error with block validation in the process!). He explained that while standard elements like text and images function properly, custom block types may encounter difficulties due to Gutenberg’s design, which does not fully accommodate changes from multiple peers. Jahns emphasized the need for a special editor binding for Yjs to enhance synchronization.
Discussion on Signaling Server and Security Concerns Kevin Jahns confirmed that Jorge’s signaling server implementation in WordPress remains unchanged. He raised security concerns regarding the WebRTC setup, highlighting that it permits document manipulation by anyone with read access. Jorge noted that to make the system production-ready, several security measures need to be implemented, particularly around user roles and collaboration.
Yjs Document Storage and Revision Management Kevin Jahns responded to Frank’s inquiry about the Yjs implementation and its impact on content revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.. He detailed that Yjs documents are stored as comments within the post content, which facilitates the creation of revisions upon saving. Additionally, he mentioned that future comparisons of revisions could be made using Yjs documents, similar to a git diff, and that attribution for content creation is also supported.
Discussion on Yjs Document Implementation and Security Concerns Kevin Jahns highlighted the downside of Yjs documents inflating content size but reassured that normal users wouldn’t see the comments. Aaron Jorbin pointed out the security implications of allowing users to input unfiltered HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. Kevin also mentioned the potential for filtering user visibility of Yjs comments and the need to track edits made by users, which currently lacks a backend solution.
WebRTC vs. WebSocket for Collaborative Editing in WordPress Kevin Jahns explained that WebRTC is not a reliable option for collaborative editing in WordPress due to its dependency on multiple servers and potential blocking by companies. He suggested using HTTP requests as a baseline for collaboration, which provides a satisfactory experience for most users. For those needing more reliability, he mentioned the possibility of implementing WebSocket servers, which could also enhance security and authentication.
Discussion on WebRTC and TURN Servers Kevin Jahns highlighted the overhead of WebRTC and the expense of hosting TURN servers, indicating that they are not a viable option for everyone. Jorge shared his thoughts about the reliability of TURN servers from providers like Google and Twilio. They noted that while STUN servers are affordable and public, TURN servers are costly and can lead to misuse.
Collaborative Editing and Yjs Integration Kevin Jahns highlighted the challenges faced with collaborative editing in the current editor setup, particularly issues with image handling and the undo-redo functionality. He stressed the necessity of prioritizing collaborative editing and proposed using Yjs as a solution to enhance these features. Kevin also mentioned that recent updates to Gutenberg have caused disruptions, indicating a need for better testing and support.
Yjs Integration and Block Syncing Challenges Kevin Jahns explained the process of syncing textual content through JSONJSONJSON, 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., noting that changes in one block can overwrite changes in another. He acknowledged existing issues with tables and galleries, indicating that these would be addressed in future pull requests. Kevin also highlighted the importance of creating a robust integration with Yjs for better collaboration.
“What’s new in GutenbergGutenbergThe 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 (#gutenberg-new) appear on a biweekly basis after every Gutenberg release, and showcase the latest features and improvements.
Interested in learning more? Here’s an overview of how you can keep up with news and events related to Gutenberg and the BlockBlockBlock 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 last release of 2024 introduces the Style Book to classic themes, a new Query Total block, a swathe of component library enhancements, and code quality improvements.
Support is available for classic themes that either support editor styles via add_theme_support( 'editor-styles' ) or have a theme.jsonJSONJSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file.
The Style Book provides a comprehensive overview of your site’s colors, typography, and block styles in an organized layout. Each block example and style group is labeled, making it easy to preview and understand your theme’s current design settings. Think of it as if your theme threw a party, and all the design elements showed up wearing name tags. 😀
For classic themes that support the Style Book, site patterns have been relocated to Appearance > Design > Patterns, consolidating all design-related functionality from the Site Editor into one place. Previously, patterns were listed under Appearance > Patterns.
Testing is an important step for this feature before it’s introduced to WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. If you have the time, please help identify potential issues, and suggest areas for improvement by logging your feedback on GitHubGitHubGitHub 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 by the repository owner. https://github.com/. Testing instructions can be found on the original PR. Thank you!
Introducing the Query Total block
You know how many results are in your queries, but do your site’s readers? The new Query Total block is here to help.
When added within a Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop block, the Query Total block displays the number of results the query has returned, or, alternatively, the current range in a set of paginated results.
More Highlights
Gutenberg 19.9 introduces phpMyAdmin to wp-env as a launch option. phpMyAdmin will automatically connect to the running mysqlMySQLMySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com database service, allowing you to inspect and manage the local WordPress database as you develop. (#67588).
Featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. backgrounds in the Cover block now come with resolution controls so that you can change their sizes (#67273).
Reset colors for blocks and global styles in the editor with a single click thanks to the inline reset button added to all color controls (#67116).
Looking to replace your Query block’s design? Query block patterns have been relocated from a modal to a dropdown. It’s still in the block toolbar, now under “Change design” (#66993).
You can now also set your site’s home page from within the Site Editor via the page actions menu (#65426). This is the equivalent of updating the Reading Settings in “Settings > Reading”. Under “Pages” in the editor, find the page you’d like to set as your homepage, click on the action menu, and select ‘Set as homepage’.
Changelog
Enhancements
Feature: Add navigation.isLoading state to core/router store. (67680)
Update the title, description, and order of Experiments page. (67762)
Storybook: Update ArgsTable to Controls in preview. (67582)
Storybook: Update control types from null to undefined. (67581)
Storybook: Use manager-api instead of addons package. (67578)
Update @ariakit/reactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces.
https://reactjs.org to 0.4.13. (65907)
Update @ariakit/react to 0.4.15 and @ariakit/test to 0.4.7. (67404)
Block Library
Cover Block: Image size option for featured image. (67273)
Feature: Allow Post Template block to get deeply nested within Query Block. (67657)
Image Block: Change how the Image’s overlay styles are applied. (67788)
Navigation: Enable all non-interactive formats. (67585)
Query block: Move patterns modal to dropdown on block toolbar. (66993)
Separator block: Allow divs to be used as separators. (67530)
New Block: Add Query Total block for displaying total query results or ranges. (67629)
Block Library: Update the relationship of No results block to ancestor. (48348)
DataViews
Add headerHeaderThe 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. to the quick edit when bulk editing. (67390)
Data views: Expand configuration drop down on mobile. (67715)
Inline Commenting: Added new sidebarSidebarA 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. as extension of the canvas. (67347)
Inline Commenting: Re-order the comments in sidebar in which blocks are listed. (66927)
Inline commenting: UXUXUser experience Enhancements for Comments. (67385)
Site Editor
Data Views: Add action for pages to set site homepage. (65426)
Sidebar: Update appearance of active items. (67318)
Data: Expose ‘useSelect’ warning to third-party consumers. (67735)
Data: Include more details when shallow equality fails in ‘useSelect’. (67713)
Global Styles
Controls in grid should match between sidebar panel and editor. (67602)
Shadows: Improve design and a11yAccessibilityAccessibility (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) of remove button. (67705)
Block Editor
Prefer exact matches in Link Search results sorting. (67367)
Fix Site editor navigation menuNavigation MenuA theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. items alignment visual regressionregressionA 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.. (67321)
Fix JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. error in the ‘useTabNav’ hook. (67102)
Fix MetaMetaMeta 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 saving when they’re not present. (67254)
Fix color of disabled buttons in dark toolbar. (67348)
Fix synced pattern editing in write mode and refactor block editing mode to reducer. (67026)
Fix: Remove parent block selector while in Write mode. (67395)
Fix: Write Mode mode persists as enabled in widgetWidgetA 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. (67587)
Global Styles
Edit site: Remove empty preview border and redirect to editor in global styles navigation. (67548)
Fix: Styles section does not moves stylebook to typography. (67423)
Global Styles Preview: Don’t use iframeiframeiFrame 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. component. (67682)
Style Book
Fix critical error when blocks are not registered. (67703)
Design Tools
Global Styles: Fix handling of booleans when stabilizing block supports. (67552)
Block bindings
Revert “Extensibility: Make Block Bindings work with editor.BlockEdit hook”. (67516)
Patterns
Site Editor: Fix the patterns route on mobile. (67467)
Fix List View not updating when switching editor modes. (67379)
Extensibility
Make Block Bindings work with editor.BlockEdit hook. (67370)
Synced Patterns
Remove use of contentOnly block editing mode for synced patterns. (67364)
Widgets Editor
Block Bindings: Remove client core sources registration in widgets. (67349)
REST APIREST APIThe 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/
Support search_columns argument in the user endpoint. (67330)
AccessibilityAccessibilityAccessibility (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)
[Dataviews] Fix: Space does not triggers the media button on grid view. (67791)
Block Editor
BlockSwitcher: Refactor to use Button layout properly. (67502)
Remove one occurrence of incorrect usage of ItemGroup. (67427)
DataViews
[a11y] Fix: Media button on the page view grid does not have an accessible name. (67690)
Components
Fix incorrect usage of ItemGroup in the Image block filters panel. (67513)
Docs: Fix Playwright Page Object Model link. (67652)
Docs: Include the strategy for setting engines for WordPress packages. (67727)
Docs: Remove invalidinvalidA 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. key projects links on the documentation. (67491)
Storybook: Support keyword search in Icon Library. (67442)
Switch Several Links to httpsHTTPSHTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. in Document Files. (67706)
Reduce the ‘isZoomOut’ selector calls in the block toolbar. (67594)
Remove ‘React.Children’ legacy APIAPIAn 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. in ‘Warning’ component. (67675)
Replace remaining custom deep cloning with ‘structuredClone’. (67707)
Use path based routing instead of query args and site-editor.php routes. (67199)
Post Editor
Editor: Refactor ‘PostPublishPanelPostpublish’ to function component. (67398)
Editor: Use hooksHooksIn 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. instead of HOC in ‘PostPublishButtonOrToggle’. (67413)
Remove PostSlugCheck and PostSlug unused components. (67414)
DataViews
Create a single component for rendering the actions list. (67558)
Fix: Dataviews remove primary field concept from some classes. (67689)
Data Layer
TypeScript: Convert factory utils in data package to TS. (67667)
Shortcodes
Add types for shortcodeShortcodeA 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. package. (67416)
Block bindings
Remove fallback for context.postType in post meta. (67345)
Block hooks
Navigation block: Remove more obsolete Block Hooks helpers. (67193)
Combine the release steps to ensure that releases are tagged. (65591)
Testing
e2e-test-utils-playwright: Increase timeout of site-editor selector. (66672)
Security
npm Packages
Update npm dependencies to fix issues reported by audit. (67708)
Various
Extensibility
Add ability to show drop cap setting in paragraph block by default. (45994)
DataViews: Move template and pattern title fields. (67449)
DataViews: Update usePostFields to accept postType. (67380)
PluginPluginA 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.
Only override REST server for older WP versions. (67779)
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.
The latest release of the Gutenberg pluginPluginA 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. entails a myriad of user experience improvements for selecting section styles, image manipulation and font handling. The DataViews layouts also received important improvements.
In zoom-out mode, users can now apply different sections styles and designs directly from the toolbar, cycling through them and inspecting them in the context of the rest of the page. This enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. streamlines the decision-making and production process. (#67140)
Font family preview in dropdown
Another user experience improvement can be found in the list of fonts: Each font family is now previewed in the font picker dropdown and gives users a better indication as to what the font will look like. (67118)
Success notices for image editing with Undo link
The outcome of the Image manipulation methods are now better communicated in the blockBlockBlock 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 success notices are now displayed at the bottom of the editor. The notices also come with a handy Undo link to revert to the original if necessary. (67314)(67312)
Other Notable Highlights
DataViews improvements
This release also contains some Data View improvements. For instance, the table layout received density options: A user can modify the amount of whitespace that is displayed per row on three levels: comfortable, balanced and compact. (67170) Developers working with the Dataviews can now make use of a new APIAPIAn 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. to programmatically register and unregister fields for the various display methods. (67175).
Block supports from experimental to stable.
📣 Plugin authors and Theme builders might appreciate the stabilization of certain block support settings and functions. A separate make blogblog(versus network, site) post will explain the ins and outs. For now, you can read about it in two GitHubGitHubGitHub 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 by the repository owner. https://github.com/ PRs: (67018) (66918).
Over the last year, Phase 3 of the GutenbergGutenbergThe 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/ roadmap has begun to take form and with it comes a need for an update around what’s been done, how to follow along, and what to expect going forward. This post seeks to provide answers at a high level view of these questions. As a reminder Phase 3 is centered around fostering seamless collaboration, tying together the user experience, and streamlining the content management flows to improve the way creators and teams work together within WordPress. As work progresses, feedback is needed and welcomed to ensure broader adoption.
Real-time collaboration
Over the last few months, Kevin Jahns, the author of Yjs, a popular framework for building collaborative applications has been sponsored by Automattic to work on real-time collaboration, after an initial experiment landed. He kicked off his efforts with some research and dialogue in this discussion issue. More recently, he’s pulled together some prototypes ahead of sharing a full proposal for how to proceed. Right now, consider this work as being in a strong experimental stage without a final approach. The next step is to get the initial approach into a PR for folks to give feedback on and discuss openly.
Below is a demo showing syncing content only relying on HTTPHTTPHTTP 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. APIs with the autosave interval set to 3 seconds. Because it relies on HTTP APIs, this demo would work on all WordPress instances:
Going a step further, you can see more demos in a recent update including adding y-webrtc into the experience to show how real time collaboration would work for users who can establish a peer-to-peer WebRTC connection.
An initial experiment for block-level inline comments landed with Gutenberg 19.6, breaking ground on the first of many async collaboration upgrades. At this point, another iteration on this initial feature is already planned and underway to refine the current experience further. If you’d like to help test and shape the feature further, stay tuned for a dedicated call for testing or start testing today with this WordPress Playground instance and open issues in the Gutenberg GitHubGitHubGitHub 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 by the repository owner. https://github.com/ repository. The aim is to get early feedback and quickly iterate in order to land this new feature in an upcoming major WordPress release. Below is a look at the near term design slated to be shipped next with visuals for adding a comment, leaving a comment, toggling to see resolved comments, and the resulting view when looking at resolved comments:
As a next step of the initial development of DataViews, the more recent DataForm API was later introduced in Gutenberg 18.8 with the aim to reduce expected duplication to create forms in Data Views. Work has continued progressively from there with DataViews and DataForm components influencing each other’s development. You can view each in their respective Storybook views: DataViews and DataForm.
Both of these components have been created with extensibility at the heart of everything being built! For now, pluginPluginA 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. and agency developers can already start using the DataViews component for their WordPress customizations with two different Developer Blogblog(versus network, site) tutorials to get you started: Using Data Views to display and interact with data in plugins and Actions from Data Views: Adding images to the Media Library. If you want to go on a deeper dive, watch a recent hallway hangout that goes through both of these components with folks actively working on them. Expect a continual focus on extensibility as these components evolve. Below is a look at how DataViews comes together with the DataForm work with an easy option to quick edit within one’s pages:
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.
Global Styles available on the main site editor sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
The site editor sidebar is getting increasingly powerful, serving as the entry point to manage all-things your site. Up until this version, the styles panel offered limited style settings, focusing on style variations, color palettes, and typographies. Gutenberg 19.7 changes this by introducing a full-fledged Global Styles panel in its place, giving users site-wide granular control on styles at the top level.
Swifter hiding & showing the template
Switching between editing your site templates and content pages should be as smooth and seamless as possible; sometimes, you need to focus on the post content and hide the rest of the template. This was previously possible in the post settings, but now it is much easier thanks to the `Show template` toggle directly on the preview dropdown in the top toolbar.
Set image blocks as featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.
Featured images offer a nice touch in external previews, making them more attractive to potential readers. However, it can be easy to forget to set one! To help set featured images more easily, image blocks now offer a dropdown action to directly set them as the featured image of the post or page containing the blockBlockBlock 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..
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor project (formerly called Full Site Editing).
Experimental inline comments are available as an experimental feature in Gutenberg. Users will be able to comment on top of blocks, only in non-published posts. In order to activate them, go to Gutenberg > Experiments and enable the BlockBlockBlock 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. Comments checkbox.
Code quality, bugbugA 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 build tooling
The release includes some improvements on the overall site editing experience: a keyboard shortcut for zoom out (66400), a cleaner layout (66255), and a new color tab (65692) for the style book.
The client-side media processing work has started (64845), but keep in mind that this new package is private and experimental.
Also, a few ReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces.
https://reactjs.org Compiler errors have been fixed and packages now use npm workspaces (65681).
HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Force HTML preview in view mode. (66440)
Iterate zoom out shuffle into a more visual control. (66194)
Use the zoom-level value to scale the iframeiframeiFrame 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.. (66280)
Site Editor
Remove synchronization of canvas mode into store. (66213)
Editor Interface: Remove small headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. from global styles/pluginPluginA 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.sidebarSidebarA 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.. (64474)
Remove purple coloring from DocumentBar and PostCard. (66451)
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Add the ‘getEntitiesConfig’ resolver. (65871)
BlockGroupToolbar: Better i18ni18nInternationalization, 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. context for toolbar labels. (66211)
Set ResizableEditor height based on border-box. (66342)
BackportbackportA 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.: Caching of global styles for blocks from core. (66349)
Inline Commenting: Disable comments on published posts for now. (66583)
REST APIREST APIThe 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/
Backport from WordPress core: Improvements for the post format query loopLoopThe 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_LoopfilterFilterFilters 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.. (66037)
Build Tooling
Create Block: Adds --target-dir flag to allow the tool to target where to scaffold. (53781)
Editor: Multi-entity saving: Show correct count of entities to be saved. (66482)
Fix : “Set featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.” button border flashes on focus. (66092)
Fix Parent Check Condition in buildTermsTree. (66006)
Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. (66355)
PostTaxonomiesFlatTermSelector: Restore space between tagtagA 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.) list and most used tags. (66566)
Typo metaboxMetaboxA post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. pane is a metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box panel. (66502)
Block Library
Block registration: Normalize blockType.parent to array. (66250)
Preload: Fix multiple regressions around global styles. (66468)
Build tooling
Create block: Ensure $slug is replaced with passed slug. (66528)
AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)
Block Style Variations: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. (66539)
Block Bindings: Use getEntityConfig instead of getPostTypes to get available slugs. (66101)
Build Tooling
Fix/compare performance with correct branchbranchA 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".. (66196)
Quick Edit: Fix JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. error when bulk editing pages. (66358)
Components: Prevent generated readmes duplicating h1 elements when published. (66180)
Correct documentation on display type in flow layouts. (66224)
Docs: Interactivity APIAPIAn 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 documentation for getServerState() and getServerContext(). (66104)
Fix undo/redo Button size in Storybook playground. (66538)
Fix: JSONJSONJSON, 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 Docgen doesn’t work on Windows OS. (66414)
ItemGroup: Improve stories to default to bordered and separated. (66191)
“What’s new in GutenbergGutenbergThe 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-newtagtagA directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.
This release focuses on stabilizing existing features but also brings some improvements to the general UIUIUser interface and the zooming editing experience, with 116 PRs from 47 contributors.
Gutenberg 19.5 most notable enhancements circle around the zooming out -and in!- experience.
For instance, the Edit button from the zoom-out toolbar has been replaced to favor more friendly interactions and reduce visual overload. Apart from the top toolbar toggle for this mode and the ability to double-click to zoom back, which were introduced in recent releases, a new Enter keyboard interaction brings you back in as well.
With all these easy ways to exit the zoomed-out view, the editor will now zoom out when showing the pattern inserter, a use case where showing a general view of your page/site matters more than focusing on individual blocks.
Moreover, this release brings many bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes to make this feature as stable and solid as possible for the upcoming WordPress 6.7. And the zooming transition is now smoother, too!
Other notable changes
The editor modes writing and editing, as introduced in Gutenberg 19.4, can now be set as a user preference so that the selected mode persists even after exiting the editor or reloading the page.
BlockBlockBlock 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. bindings can now be used on the widgets screen, too. Check out the original pull request to learn more, or keep tuned to the Developer Blogblog(versus network, site) for more comprehensive examples!
Try zooming out when selecting the patterns tab in the inserter. (65785)
Update/replace edit button with enter on selection. (65760)
Global Styles
Improve navigation logic for revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. screen. (65946)
Block bindings
Register bindings sources in widgets screens. (65937)
Position scaled htmlHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. within available container space. (66034)
Restores setting zoom out mode to useZoomOut hook. (65999)
Use consistent canvas frame spacing on device preview and zoom out. (66018)
Code block: Set LTR direction for RTL languages. (65891)
Fix duotone on parallax/repeated featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. cover blocks. (65929)
Fix: Embed Block: Match HTML in the editor and frontend. (65478)
Hide grid visualizer when grid is template locked or block editing mode is not default. (66065)
Post Content Block: Fix conflictconflictA conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. between clearFix and focus ring in the editor. (65364)
Post Content: Fix display of block support styles. (66003)
Post Terms: Fix fatal error when ‘get_the_term_list’ returns ‘WP_Error’. (65848)
Query LoopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop: Fix isControlAllowed and isTemplate combined logic. (65984)
Global Styles: Fix overflow caused by RangeControl tooltip. (65875)
ToggleGroupControl: Don’t set value on focus after a reset. (66151)
Fix: Add missing post.slug dependency to useMemo. (66125)
Interactivity APIAPIAn 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.
Correctly handle lazily added, deeply nested properties with deepMerge(). (65465)
Improvements to the experimental full-page navigation. (64067)
Site Editor
Fix site editor back button visual regressions. (66166)
Zoom Out: When double clicking a template while zoomed out , reset zoom level instead of showing dialog. (65963)
CSSCSSCascading Style Sheets. & Styling
Editor: Prevent wrapping text when showing icon labels in headerHeaderThe 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.. (66038)
Add argument with post ID to the editor.savePost hook. (66165)
AccessibilityAccessibilityAccessibility (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)
Post Editor
Fix metaMetaMeta 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 accessibility. (65466)
Fix navigate regions shortcuts on the back button WP logo slot. (63611)
Improve PostURL terminology and accessibility. (63669)
Match visible label of search inputs with their actual label. (65458)
Components
Fixed : Modal dialog: Small improvement for elementShouldBeHidden. (65941)
ToggleGroupControl: Don’t autoselect option on first group focus. (65892)
Tooltip: Add aria-describedby to anchor only if not redundant. (65989)
Typography
Revert the “Manage fonts” button in Global Styles. (66107)
Performance
Interactivity API
Leverage scheduler.yield in splitTask when available. (66001)
Theme JSONJSONJSON, 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.
BackportbackportA 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. from WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.: improve performance of WP_Theme_JSON::Merge when merging background styles. (66002)
Contrast notes: Update 4.6:1 note with further context. (66168)
Data-basics/4-building-a-create-page-form is ready now. (66100)
Docs: env: Expand examples of path syntax. (65972)
Updated several typos in client-assets.php file. (66084)
Use correct label in PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher Backport documentation. (65908)
add: Usage examples in core editor documentation. (63768)
Consistent with block-development-examples data-basics-59c8f8. (65995)
Code Quality
.screen-reader-text CSS update for responsive-block-control style.scss. (66145)
Fix components coding standards in Zoom Out Toolbar. (65858)
Gutenberg pluginPluginA 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.
Correct capabilitycapabilityA capability is permission to perform one or more types of task. Checking if a user has a capability is performed by the current_user_can function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability). for the Experiments page. (66118)
Tools
Testing
Add an end-to-end test to check the interactions in write mode. (65819)
Composite: Add legacy unit tests to stable version. (65952)
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor project (formerly called Full Site Editing).
This release includes 186 PRs from 54 contributors, and includes several exciting features such as new Write / Design modes and BlockBlockBlock 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. Bindings editor APIs.
The Edit and Select modes are now called Write and Design modes.
In Write mode, you can focus solely on writing, with all layout options hidden from the sidebarSidebarA 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..
If you want to adjust colors, sizes, create columns, and more, switch to Design mode!
Block Bindings Editor APIs are public
Gutenberg 19.4 and WordPress 6.7 will allow developers to use certain block binding APIs that were previously private and used only in CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. A dev notedev noteEach 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, and 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. and documentation will be published for the WordPress 6.7 release, but here is an overview:
getBlockBindingsSource, getBlockBindingsSources: The first retrieves a specific block binding source and its properties, while the second retrieves a list of all block binding sources.
updateBlockBindings: Similar to updateBlockAttributes, this function allows you to create or remove connections between a block and any source.
removeAllBlockBindings: Removes all connections from a block to any source.
registerBlockBindingsSource, unregisterBlockBindingsSource: Enables registering and unregistering block bindings in the editor. Registering them in the editor allows modification of source fetching and editing.
Other Notable Highlights
There are some improvements too that are worthy to mention like:
Comment block components (e.g., author name, date, content, pagination) and Query block components (e.g., no results, pagination, title) will now have previews when hovered over in the inserter panel.
Additionally, the BorderBoxControl, BorderControl, and BoxControl components are now considered stable.(65469, 65475, 65586)
Also the filters PreSavePost and SavePost are now stable. (64198)
Not to mention all the bugs fixed that you can check in the changelog below.
Changelog
Enhancements
Block Library
Added keywords to query loopLoopThe Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop block. (65515)
AvatarAvatarAn 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.: Add block example. (65509)
Move the toggle button to before the device preview dropdown. (65446)
Only show zoom out inserters on block selection. (65759)
Block Editor
Hide block transforms in contentOnly mode for non-content blocks. (65394)
Inserter: Always show the list of all patterns in the inserter. (65611)
MediaPlaceholder: Use InputControl in URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org popover. (65656)
Use proper named File when uploading external images. (65693)
FilterFilterFilters 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.UIUIUser interface: Remove popover max height. (65835)
Block hooksHooksIn 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.
Hooks: Add support for async filters and actions. (64204)
New APIs
Revert “Make wordpress/fields a private package”. (65477)
Link autocompleter: Decode post title HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities. (65589)
Openverse: Prevent multiple insertions during upload. (65719)
Paste Handler: Try to fix pasting text with formatting. (63779)
Fix: Makes edit mode selector persistent in top toolbar mode. (65511)
Global styles: Do not navigate twice to home screen when opening the sidebar. (65523)
Make resizable frame compatible with RTL languages. (65545)
Command Palette: Fix “Add new page” command for hybrid theme. (65534)
Export useResizeObserverReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces.
https://reactjs.org Native version directly. (65588)
Fix aria-checked attribute not set for pluginPluginA 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. settings buttons in Options dropdown. (65667)
Revert “useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state”. (65533)
Focus Mode
Limit zoom out toggle to specific post types. (65732)
Remove additional Typeset screen and surface typesets in the typography panel. (65579)
Widgets Editor
Fixed the focus cutoff of the editor buttons in the widgets editor. (65395)
Post Editor
Omit metaMetaMeta 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 on “design” type posts. (64990)
Temp disable test for Classic Block Media issue. (65793)
Select Mode
Select Mode: Blocks outside the main sections root should be disabled. (65518)
Select Mode: Prevent the inbetween inserter from triggering within sections. (65529)
AccessibilityAccessibilityAccessibility (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)
Post Editor
Make the Settings panel toggle button show its keyboard shortcut in its tooltip. (65322)
Resizable Editor: Make the editor resizable with arrow keys. (65546)
Components
ToggleGroupControl: Fix arrow key navigation in RTL. (65735)
Zoom Out
Don’t show tooltip in zoom out toggle button when showIconLabels is true. (65573)
Block Library
Improve the Query Loop block display settings labels. (65524)
Block Editor
Updates LayoutTypeSwitcher to use ToggleGroupControl. (65498)
Code Quality
A11yAccessibilityAccessibility (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): Move script module HTML printing to 6.7 compat. (65620)
Update to use a11y script module package in Core. (65539)
Move insertionPoint state to block-editor store/rename existing insertionPoint to insertionCue. (65098)
Documentation
Block Bindings: Add @sincetagtagA 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.) in bindings apis JSDocs. (65796)
Block Editor: Fix README for FontFamilyControl component. (65660)
Only pass usesContext properties to editor APIs. (65661)
Refactor passing select and dispatch instead of full Registry. (65710)
Unify logic in getPostMetaFields function. (65462)
Post Editor
Customize widgets, edit post: Refactor Button to new sizes. (65807)
HeaderHeaderThe 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.: Remove unused property isZoomedOutView in useSelect(). (65628)
Global style revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.: Remove unnecessary goTo navigation call. (65810)
GH Actions: Run the tests against PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher 8.3. (65357)
Revert “Temp disable test for Classic Block Media issue.”. (65809)
Build Tooling
Composer: Prevent a lock file from being created. (65359)
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc.
https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.
A total of 174 PRs were merged in Gutenberg 19.3, with 7 first-time contributors! With WordPress 6.7 rapidly approaching, many contributors are focusing on bugbugA 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. However, this release still includes some great features and enhancements, including stabilizing the Zoom Out mode!
The Zoom Out Mode is officially out of the experiment and is available to all users. This new mode allows users to zoom out to edit and create at the pattern level over granular blockBlockBlock 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. editing. This effort aims to provide a new, high-level approach to building and interacting with your site. Follow the 6.7 iteration issue for more information.
Swap the position of the publish buttons
A nice user experience improvement to swap the “Cancel” and the “Publish” buttons in the pre-publish check panel. Now, users don’t have to move their cursor unnecessarily when publishing. (#65317)
Use custom block names in inspector controls
Uses the custom name for a block in the block inspector controls when available. (#65398)
Allow opting out of the “Choose a pattern” modal when adding new pages
The “Choose a pattern” modal can be distracting for power users who always want to start with a blank page. A new preference toggle disables the modal when adding new pages. (#65026)
Automatic phone number linking
The link field can now be automatically populated with tel: when the selected text is a phone number. (#64865)
Allow dropping multiple images to the image block
Multiple images can now be dropped on an image block, converting it to a gallery block. In addition, dropping multiple file types will each create an appropriate block. (#65030, #65144)
Create Block: Update the minimum required PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher version to 7.2. (65166)
Media Utils: Add TypeScript support and export more utils. (64784)
Media placeholders: Add “drag” to the text. (65149)
Restore: Move to trashTrashTrash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. button in Document settings. (65087)
Inspector Controls: Use custom block name in inspector controls when available. (65398)
Navigator Screen: Warn if path doesn’t follow a URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org-like scheme. (65231)
Terms List block: Add Categories-specific variation. (65434)
Zoom Out
Add Zoom Out toggle to editor headerHeaderThe 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. when experiment enabled. (65183)
Add prompt for drag and drop in Patterns tab in Zoom Out mode. (65115)
Close inserter on exiting Zoom Out to edit. (65194)
Use post metaMetaMeta 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. label from register_meta in block bindings workflows. (65099)
Global Styles
Refactor site background controls and move site global styles into Background group. (65304)
Spacing control: Replace sides dropdwon with link button. (65193)
Interactivity APIAPIAn 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.
Update: Rephrase “Force page reload” and move to Advanced. (65081)
REST APIREST APIThe 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/
Global Styles: Allow read access to users with edit_postscapabilitiescapabilityA capability is permission to perform one or more types of task. Checking if a user has a capability is performed by the current_user_can function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability).. (65071)
Query loopLoopThe 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 / Post template: Enable post format filterFilterFilters 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.. (64167)
Inserter: Fix loading indicator for reusable blocks. (64839)
Normalize spacing in Layout hook controls. (65132)
Pattern Inserter: Fix pattern list overflow. (65192)
Remove reset styles RTL from the iframeiframeiFrame 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.. (65150)
Revert “Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (#64048)” (65208)
Components
BoxControl: Unify input filed width whether linked or not. (65348)
Remove zoom out toggle when editor is not iframed. (65452)
AccessibilityAccessibilityAccessibility (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)
A11yAccessibilityAccessibility (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 script-module. (65101)
Interactivity API: Use a11y Script Module in Gutenberg. (65123)
Script Modules API: Print script module live regions HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. in page HTML. (65380)
Form Input: Don’t use flex-direction: Row-reverse for checkbox field. (64232)
Navigation Menus: Remove Warning and add notice for Navigation. (63921)
Global Styles: Fix the shadows Range control accessibility and usability. (63908)
Block Editor: Fix accessibility of the hooked blocks toggles. (63133)
Post Editor
Support keyboard resizing of meta boxes pane. (65325)
Swap position of the Pre-publish checks buttons. (65317)
Performance
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Batch remaining actions in resolvers. (65176)
Block Editor: Use static access for selector in ‘useZoomOutModeExit’. (65337)
Editor: Optimize global styles permission check. (65177)
Experiments
Block bindings REST API: Bring bindings UIUIUser interface in Site Editor. (64072)
Documentation
Add JSDoc block for getSectionRootClientId in block editor package. (65219)
ButtonGroup: Fix story to show what the component does. (65336)
Editor: Use hooksHooksIn 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. instead of HoC in BlockManager. (65349)
Data Views Fields: Migrate store and actions from editor package to fields package. (65261)
PluginPluginA 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.: Remove ‘function_exists’ checks for methods with ‘gutenberg’ prefix. (65260)
Global Styles: Update REST controller override method and backportbackportA port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. changes from Core. (65259)
Patterns: Remove unused method returned from ‘mapSelect’. (65073)
Embed: Convert EmbedPreview component to functional component. (51325)
Components
BoxControl: Fix critical error when null value is passed. (65287)
Over the years of working on the GutenbergGutenbergThe 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/ project, we developed some common practices. These help us preserve the quality and the long-term viability of the project. They differ and often contradict what people are used to in other projects (especially outside WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.).
These practices should be applied during implementation and PR reviews. Sharing and embracing them helps contributors make the right decisions and be more autonomous when working on the project.
This list is non-exhaustive and subject to change. These are guidelines to always keep in mind but shouldn’t be treated as hard rules. Context is always important to consider.
Start APIs as private
Gutenberg is organized in packages. Implementing features means introducing new APIs to one or multiple packages. It’s important to understand that most of the packages‘ APIs are public WordPress APIs. Anything exported from a package and consumed by another package becomes a defacto WordPress APIAPIAn 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.. This API needs to be maintained forever to adhere with the WordPress backwards compatibility strategy. Thus, it’s recommended to start with private APIs.
Be intentional about providing public APIs
Extensibility is important to WordPress. We do want pluginPluginA 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. authors to extend what WordPress provides. We also want them to reuse tools that WordPress uses internally. This point can read as a contradiction with the previous one. But what’s important here is that it needs to be intentional. Before making an API public during the feature work, we should ask ourselves these questions:
Do we want to allow users to use this API?
And are we willing to support it for the next 10 years without breaking changes?
If the answer to both these questions is yes, then we can consider making this API public.
Avoid opening APIs for convenience, embrace copy/paste
Sometimes, for convenience and to abide to the DRY principle, we, developers create APIs and abstractions. This is seen as a good practice in most projects. But in the context of Gutenberg and WordPress, it is something to avoid. The cost of maintaining APIs is too high because of the backward compatibility strategy.
Say you have a low-level function or component already available to plugin authors or npm package users. To achieve their use-case, they maybe have to write some duplicate boilerplate code. Creating a higher-level abstraction to avoid the duplication should be avoided as much as possible. It is true that providing a great Developer Experience is important, though. There are cases where a higher-level abstraction is required. The main approach is that we should have very strong arguments for it and be intentional.
Prefer Semantic Extensibility
Plugin authors in WordPress want to be able to extend every piece of the UIUIUser interface. They also want to give way too much prominence to their own extensions and upsells. As WordPress history teaches us, this quickly leads to a degraded user experience. Who has never seen a WP Adminadmin(and super admin) with hundreds of notices? Who has never seen a WP Admin with menu items and call to actions competing for the user’s attention?
A non curated set of extensibility APIs can lead to stagnation as well. One example here is the metaMetaMeta 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 API in the classic editor and how it created a lot of constraints for the development of the blockBlockBlock 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. These kinds of APIs prevent iteration and evolution. It becomes very hard to improve the UI and UXUXUser experience of these screens. Any change, no matter how small, can lead to breaking changes for plugin authors.
To alleviate these issues, extensibility in Gutenberg is curated and semantic. APIs to register/unregister semantic pieces (blocks, patterns, actions, fields) are preferred. APIs that are too broad and whose purpose is unclear should be avoided. For example:
A slot in the editor headerHeaderThe 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. is not a very semantic API. It’s unclear what it will be used for. This will prevent any redesign and iteration to the header area of the editor.
The ability to set a priority or order to extensions is often an API that we want to avoid. It’s very prone to abuse. Often, plugins authors use these to give priority to their own extensions over what Core provides. It quickly leads to a degraded experience for users.
One package = one clear purpose
Developing features in Gutenberg often involves modifications to multiple packages at the same time. We need to ask ourselves: where should this piece of code live? To answer the question, it’s important to understand the purpose of each package. Here are some common examples:
Most of the editor UI is built within the @wordpress/block-editor package. So developers often change this package directly to accommodate their specific needs in the UI. The problem though is that it’s not the sole package responsible for adding UI to the editor. It is important to understand that this package is the Tinymce of Gutenberg. It can be used to build and integrate block editors within WordPress and outside WordPress. It’s a framework to build block editors. If a part of the UI is specific to WordPress, it’s not the right place to make this change. A recent example I noticed here is the addition of a button to the block settings menu. That button was used to open the WordPress editor sidebarSidebarA 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., but editor sidebars are specific to WordPress block editors.
Making a REST APIREST APIThe 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/ request in a UI component is another common pitfall that happens often. For example, you may want to build a Language Switcher UI component. And you want it to be reusable in the @wordpress/components package. You can’t use a REST API call within the component to fetch the available languages. The components package is a generic WP agnostic UI components package. So instead, it’s better to have a prop to pass of the available languages instead.
It’s also not recommended to add new packages just to share code between two existing packages. Usually, there’s a better solution to the code sharing problem. @wordpress/utils package doesn’t exist for a reason. Utility packages are a place where we can just dump shared code without purpose. As mentioned earlier, copy/pasting is not always a bad idea when it comes to code sharing. It is preferable to avoid early abstractions as much as possible.
Measure then optimize
We, developers have a tendency to over optimize our code. Often these optimizations involve adding some complexity to the code, making it harder to maintain. It is better to avoid these early optimizations. Instead, measure the impact of the change you want to perform to validate that the optimization is worth the added complexity. Important metrics are tracked in the codevitals dashboard.
Other random common pitfalls
Besides the principles above that one needs to follow to make the right calls, here are some common pitfalls that we’ve learned to avoid over time:
Avoid passing editor settings as inline JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. from the backend to the frontend. It is a pattern we used heavily early in the project. We should ideally move away from it and prefer a better separation between client and server (use REST API calls).
Adding settings to the BlockEditorProvider (and the @wordpress/block-editor package) is ok. But we should be intentional about it: what does the setting mean for third-party block editors? Always remember the block editor framework use case.
Be declarative as much as possible. Using state actions and selectors to share UI state is acceptable. But know that it’s risky. It can lead to bugs and race conditions quickly if multiple components compete to set the right state. This happened to us at least in two recent situations:
Insertion position: We moved away from declaratively computing the insertion position based on the selected block. We used setInsertionPoint action and state instead. The issue is that the inserting point is now incorrectly set at times. Or it persists as we navigate away…
Block editing mode: To support different UI modes for blocks (content-only, locking, template-locked mode, zoom-out mode) we introduced a state to manipulate what we call “block editing mode” using setBockEditingMode action. We now have some hidden bugs because of that. These different modes compete to set the right block editing mode.
Avoid using stores in new packages. Be careful when introducing new data stores. Each time we register a new store, there’s added complexity in the system. Stores are singletons by default, they can only be present once in the page. We do support multiple instances of the same store on the page but it’s not without complexity. We need to extend the global registry. We have also seen that using stores in bundled packages like @worpdress/interface is not a good idea. When a plugin wants to use that package/store it leads to the store trying to be registered twice. The wrong store will be accessed from the components when it happens.
You must be logged in to post a comment.