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 our bug tracker.
WordPress 5.8 was released on 20th July check out the release post for a complete list of features and enhancements.
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/ 11.1.0
Gutenberg 11.1.0 was released on 21st July check out the release post for a complete list of features and enhancements:
The monthly update containing the high-level items that Gutenberg contributors are focusing on for June are:
Global Styles.
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.-based 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.
I was out last week but am working on a few things this week for the #fse-outreach-experiment including a hallway hangout happening likely tomorrow (to be announced soon), a survey of block theme authors, and the next call for testing.
Hoping to fit in some time to triagetriageThe act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. too.
If it’s okay, I’d be interested in shadowing someone close to my timezone (JST, so I’m guessing APAC or EU would work best) on a Gutenberg release, to learn more about what’s involved.
I’d eventually love to be able to help with running one, and hoping that would help with learning about the knowledge gaps to fill.
Could whoever is running 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 release today please let me know how they found the automated changelog feature grouping? I worked on a couple of PRs on that and I’m curious to know whether anything could be improved. My DM’s are open.
Also on that note, please can I make a plea for folks to consider being even more proactive in assigning labels to GithubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Issues? With the correct labels assigned creating the release changelog can be far more automated. I’ve noticed a number of recent PRs without any labels and so I’m hopeful that we can reverse that trend for the benefit of the release leads. Much appreciated.
WordPress 5.8 is already here, an exciting release marked by the inclusion of many Full Site Editing features that have been big-picture focuses in recent times. Because of this important achievement, in contrast to normal monthly updates, this post seeks to review the status of Full Site Editing and summarize the next high-level focuses within 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/ Phase 2.
Full Site Editing is the lighthouse goal for phase 2 of Gutenberg. As such, it’s good to remember it is a collection of projects that allow site editing with blocks, bringing powerful capabilities for a smooth editing experience.
WordPress 5.8 includes some of these Full Site Editing projects and features; while some of them will continue as ongoing focuses for subsequent Gutenberg releases (⚒️), others can be considered stable and enter a maintenance phase (✅)
Without further ado, let’s look at the current status of the milestones that have guided Full Site Editing work in the last months and the updated scope for Site Editing.
Site Editing Infrastructure and UIUIUser interface
The Site Editing Infrastructure and UI provide foundational work for the rest of FSE projects, mainly in the Site/Template Editor, Template parts, and the numerous APIs that support work around Full Site Editing.
The first two iterations of the site editor milestone introduced editing 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. themes and all their template files. The ongoing third one offers the possibility of creating custom block templates in classic themes and is available in WordPress 5.8 for those themes that opt-in to the site editing experience. Work will continue to finalize the Site Editor naming and placement: the current Site Editor as we know it in 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 may evolve for better navigation flows and interactions.
Thanks to feedback from different FSE Outreach Program testing rounds, the next focus for site experience and tooling improvement include:
Global Styles comprises two major areas that fall underneath the global styles umbrella: centralized theme configuration and an interface for manipulating visual aspects of blocks globally.
Theme configuration absorbs things like declaring color palettes, presets, different supports and settings, and toggle on or off the available block design tools (typography, colors, dimensions, etc.). All of this can be managed through the 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. configuration file and is one of the key features available in WordPress 5.8. After a few iterations and open testing, this feature is considered stable and moved to a maintenance phase.
The other major part of global styles is the user interface to make edits to blocks globally. With theme.json in place, the next release cycle will have the Global Styles UI as one of its main focuses, allowing users to tweak the theme easily. Color handling will be an important focus, not only to better theme switch but also to seamlessly integrate color palettes with patterns.
To support the theme building needs outside of the template and template parts infrastructure, there was a need to create many new blocks centered around theme functions. WordPress 5.8 brings several of these blocks, from Site Title, Site Tagline, and Site Logo that allow users to configure site settings with blocks, to the post-related blocks such as Post Title and Post Date, to be used inside 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. to display post data.
Although new theme blocks may be added as the need arises and the existing ones will receive incremental upgrades, the basics of this milestone are complete.
Among the theme blocks, the Query Loop Block has been a significant area of the site editing focus in the past months, deserving its own milestone. Taking some of the block 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. infrastructures to the limit, such a powerful block has proven challenging to expose at a user level. As a result of the feedback collected in the FSE Outreach Program, the block has been renamed to clear confusion, and usability enhancements have been implemented before launching it in WordPress 5.8.
With the Query Loop foundations in place, the next iterations will seek to ease the user interactions and flows, even more, thanks to two fundamental Gutenberg tools – block patterns and block variations. The former will continue to help set the inner block structure and content. In contrast, the latter will present the powerful Query Loop’s features in the form of preconfigured blocks and consolidate similar blocks to use the Query Loop Block as their underlying mechanism.
Along with the Query Loop Block, the Navigation Block is another theme block that stands out as a project in its own right. This block has seen great improvements in the last few months, from improved overlays to responsive menus. New blocks are available as well, such as the Home Link block. Shortly, we will see the Navigation block house whole new kinds of blocks thanks to the recent frontend markup adjustments that allow blocks other than links in an accessible way.
Full Site Editing represents a new paradigm in site and theme building in the well-established WordPress ecosystem, and as such, providing the right tools is key to gradual adoption. Tools like the Widgets Editor and Navigation Editor bring block editing capabilities to traditional features that can’t take full advantage of their native block counterpart implementation.
WordPress 5.8 brings the power of blocks to both the Block Widgets Editor and the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Users will be able to add blocks 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. areas, add widgets and blocks with live preview, and schedule and share directly from the Customizer.
On the other hand, the Navigation Editor has also seen its share of iterative improvements in the last months. Together with the Navigation Block, it will remain an ongoing focus for the next WordPress release cycle.
As mentioned with regards to Query and Navigation blocks, the complexity of the editor increases as site editing capabilities are introduced with advanced block structures and customization options. This highlights the need to expand our APIs and interactions — which are well suited for simple block structures — to better support container blocks.
Another challenging editing experience with the increased number of container and inner blocks is adjusting parent block settings when editing a child block. Users often need to switch between different child and parent blocks to change settings like layout or positioning. In turn, it is necessary to explore Toolbar absorption mechanisms that allow parent blocks to expose their toolbar on their children.
Patterns everywhere
At this stage, it is no secret that block patterns represent considerable potential for users to add many blocks with different preset layouts and settings easily. By using patterns, users don’t need to individually add blocks to achieve rich representations in headers, columns, or Query blocks, as patterns act as a jumpstart blueprint that can be tweaked and adjusted to the user’s needs.
An example of the improved interaction block patterns is demonstrated by the Query block, which allows users to select block patterns in its placeholder state. This is just the tip of the iceberg in terms of the ways patterns can leverage the editing experience, and as such, efforts will continue improving pattern insertion capabilities.
Thanks to the recently released Block Pattern Directory, patterns can be copied and pasted into the block editor; upcoming Gutenberg iterations will connect and retrieve patterns from this directory, allowing users to choose from huge amounts of beautiful patterns without leaving the editor. Both to ease navigating the big number of patterns users will be able to choose from and accommodate increased pattern complexity and richness, such as in Query or 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. patterns, revisiting the pattern insertion UI will be an ongoing focus in the months to come.
Several design tools are needed to ensure a wide range of exquisitely crafted patterns can support powerful settings and rich block customizations. These encompass all tools related to the appearance of blocks and range from colors, typography, alignments, and positioning to filters like duotone, cropping, and background media and will need to integrate seamlessly with theme.json mechanics.
Going further, controls like font size, even if exposed as single values to users in the UI, are built behind the scenes to accommodate different viewport ranges. Apart from providing access to the underlying mechanisms through theme.json, responsive-previewing and device-specific editing will be necessary to support this.
To support the ever-increasing number of tools, 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., while secondary in some regards to the block canvas and toolbar, will need to accommodate many of these tools, whereas the Component System will provide a shared design language between all these controls.
While the above items are our focuses, don’t forget that you can always help with triage, testing issues, good first issues, and reviewing PRs. In particular, if you’re interested in helping with triagetriageThe act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. but don’t know where to start, there’s a course on Learn WordPress for how to do triage on GitHub! Check it out and join us.
If there’s anything we can do to make contributing easier, let us know in the comments or #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.
Two weeks have passed since the last 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/ release, which means a new version is available! Gutenberg 11.1 adds the ability to edit a 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. border easily, enables drag and drop support for the List View component, and includes 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 centered around the Widgets Editor and Block Library.
Block supports: border
Take an early look at custom block borders! When borders are enabled in a theme.json file, and a block declares that it supports it with the block supportsAPIAPIAn 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., a new block panel is available that lets us change the border radius, width, style, color, and border units.
Adminadmin(and super admin) panel available as PWA. (33102, 33310)
Block Breadcrumbs: Small chevron icon for breadcrumb separators. (33042)
Block Library:
Columns Block:
Add stack on mobile setting to allow for columns without mobile breakpoints. (31816)
Add the percent unit to the default units in CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. (33468)
Latest posts: Remove grey color for dark themes. (33325)
List Block: Add link color control to list block. (33185)
Post Terms Block: Add a “separator” attribute to post-terms block. (32812)
Set border style none when border width zero. (32080)
Link Editing: Add Unlink button to LinkControl popover. (32541)
List View: Enable drag and drop in List View. (33320)
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: Adds auxiliary class names for editor styles. (33388)
General UI:
Block Settings Menu: Don’t render ‘Move to’ if there is only one block. (33158)
Disable ‘Post Publish’ button if saving non-post entities. (33140)
Preferences: Polish labels and consolidate options in preferences. (33133)
New APIs
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/.: Block editor settings endpoint. (33128)
UI Components: Add a SearchControl component and reuse across the UI. (32935)
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)
Improve high contrast mode rendering of icon buttons. (33062)
Bug Fixes
Block Breadcrumbs: Fix breadcrumbs htmlHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. structure and ReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings. (33159)
Block Editor:
Move layout styles to document head (instead of rendering inline). (32083)
Warn only in edit implementation when using useBlockProps. (33380)
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.: Remove reset styles. (33204)
Block Library:
Buttons Block: Remove green background color in button preview. (33116)
Embed Block: Include missing attributes when upgrading embed block. (33235)
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:
Prevent entering 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. values in the Query Loop block configuration. (33285)
Update getTermsInfo() to workaround parsing issue for translatable strings. (33341)
Search Block:
Fix search block button position dropdown accessibility/UXUXUser experience issues. (33376)
Update search block to handle per corner border radii. (33023)
Site Title: Decode entities in site title. (33323)
Post Except: Fix excerpt_morefilterFilterFilters 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.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. and remove wordCount attribute. (33366)
Design Tools:
Color: Prevent color panel from showing as empty. (33369)
Duotone:
Avoid rendering duplicate stylesheet and SVG. (33233)
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.
Allow themes to provide empty values for color.duotone and spacing.units. (33280)
Specify what settings can be part of settings.layout. (33303)
Site Editor: Close navigation 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. when all posts clicked. (33393)
Fix moving inner blocks in the Widgets CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (33243)
Fix inserter size on Widgets 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.. (33118)
Merge conflicting wp.editor objects into a single, non-conflicting module. (33228)
Retrieve latest widgets before loading sidebars. (32997)
Apply enhancements included in WordPress 5.8. (33252)
Clarify the type of apiVersion in block metadata. (33249)
Fixes a typo in the documentation for block supports. (33247)
Block Editor API: Changes to support multiple admin screens in WP 5.8. (33262)
Custom Block Editor: Fixed bad image syntax and bold text. (32897)
Fix API documentation for data reference guides. (33384)
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 Release: Update Gutenberg release documentation to clarify release post workflow. (33328)
theme.json:
Add examples and highlight backward compatibility. (33421)
Update theme.json documentation for WordPress 5.8. (33131)
Fix codetabs syntax in theme.json documentation. (33417)
Use markdown headings instead of links for API declarations. (33381)
Update documentation for link color in WordPress 5.8. (33162)
NPM Packages: Introduce release types to npm publishing script. (33329)
Plugin: Introduce tools folder with configuration files. (33281)
Workflows:
Release Workflow: Remove “experimental” status from WP 5.8 stable items. (33214)
Re-enable manually triggered workflows on forks. (32821)
Use NPM caching built into action/setup-node. (33190)
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.
Version
Loading Time
KeyPress Event (typing)
Gutenberg 11.1
6.38s
26.12ms
Gutenberg 11.0
6.06s
29.55ms
WordPress 5.7
8.52s
36.26ms
Kudos to all the contributors that helped with the release! 👏
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/ 11.0
“Shout out to the Widgets team who’ve shipped more 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 than I’ve ever seen.”
The focus continues to look out for fixing bugs that are backported to the Betas/RC. The only major thing left at this point is being able to translate strings coming from theme.json at translate.wordpress.org. TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.ticketticketCreated for both bug reports and feature development on the bug tracker.: theme.json strings not extracted for translation.
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. based 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
The widgets editor is looking stable. This 5.8 RC2 release included several fixes and we’re hoping for a stable period with no new major issues. Currently, there are some problems in testing with WP 5.7.2 so please test using the 5.8 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"..
For the navigation block I want to highlight the merge of @tellthemachines’s PR that decouples the markup if the block between the front end and the editor.
Worked on enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. for the Cover block to add alt text support.
I’ve been working mainly on contributing bug fixes to the Widgets screens.
Also focused on facilitating the release of 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 11.0.0, including spending time tweaking documentation and hacking on potential improvements to release tooling.
Main focuses: end user docs for the upcoming release and the FSE outreach program (current call for testing + high level feedback items post). Want to try to test 5.8RCs every day until the release.
Regarding creating a PR. The PR author should also add a comment to the associated issue mentioning that a Pull Request has been made, so that commenters in the issue will get a pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” about the newly created PR. Could some information be added to the PR template to tell PR authors that they need to add a comment to the issue about the PR?
Comment: Not all PRs are tied to a ticket… There are a lot of PRs that are the place where the actual conversation takes place, and that is fine. So if such a comment gets added to the PR template, the wording should be such that makes it clear that if there is a ticket related to the PR, a comment would be welcomed.
I have seen that we are scoping the next steps and key projects and I think it would be good to re-align the editor agenda topics (key project updates), the monthly priorities post, and this work in the coming weeks.
Comment: I agree with that comment from André! I think first things first — the monthly priorities post needs to be adjusted so the key project updates can fall in line @priethor is on it as far as I know.
Topic: I’d like to talk about e2e testing and what can be done collectively to improve the reliability of these tests. I’ve repeatedly seen e2e tests brought up as a major pain point over time. I’d love to hear what ideas folks have but, for now, I think it might be neat to try having dedicated time to discuss e2e tests during meetings.
Comments:
Some of the main points that came up:
e2e tests are important to catch regressions, the more we work on them and feel responsible about their stability (and not just relaunch until it pass), the better.
Look to improve overall stability.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. is starting to build e2e tests following models/patterns from Gutenberg.
What about forming a project to focus on improving the stability and robustness of the Gutenberg e2e tests? It might provide focused attention and effort as well as a board to collect and promote shared collective insights and discussion.
Several tests that can become unstable from time to time, and often times, the reason they break is legitimate just hard to reproduce.
Current state: e2e test suite is robust and stable.
Failed e2e tests are real failures.
Problem: difficult to debug and identify why and where new code is legitimately making existing tests fail.
This changes the discussion and focus: shift towards => how to surface the why and where to help contributors make their tests more robust as well as fix problems in their source code that are making existing tests fail.
Two weeks have passed since the last 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/ release, which means the time is now upon us for Gutenberg version 11.0.0 (released 7th July).
With efforts still concentrated on the WordPress 5.8 release, this version of the Gutenberg Plugin is heavily focused on backports and 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.
That being said however, it is not without its highlights! Gutenberg 11.0 introduces:
The new editing overlay and interaction – shown here on a reusable 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..
When the block is not selected, hovering the block results in a blue overlay, whilst clicking anywhere inside the block will act to select the block itself, preventing its children from being selected before the parent.
This mechanic aims to address feedback from users who were surprised at the lack of friction when editing these reusable symbols, which resulted in a frustrating experience.
The new workflow is an improvement that streamlines the experience of working with these powerful blocks.
Support for CSSCSSCascading Style Sheets. shorthand properties in 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. and block attributes
Theme JSON is becoming a powerful way of defining reusable CSS rules across Themes. As usage of this feature grows, it’s important to support common ways of setting style properties.
For example, the following is an excerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. from an example theme.json file which adds unique padding and border values for the Button block:
Improve insertion point and drag-n-drop in the widgets screen. (32953)
Set Legacy 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. form to display only when not hidden. (33015)
Stretch Widgets editor layout to full height. (32905)
Add ability for Legacy custom HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. widget to transform into custom HTML block. (32862)
Remove the widget switcher block toolbar button for the Legacy Widget. (32733)
Wire handle_legacy_widget_preview_iframe to admin_init_hook. (32854)
Replace “technical” error notice with a user-friendly version. (33165)
Replace legacy widget icon with its new version. (33041)
Block Library:
Media Text block: allow drag and drop media replacement for Media & Text. (29710)
Categories block: Add a label for screen readers. (33060)
Post Template Block: Add post-classes in the 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. for Post Template block. (30497)
Global Styles and Templates:
Allow left/right/center alignments when a layout is defined. (32810)
Allow longhand and shorthand properties in theme.json and block attributes. (31641)
Add filters to get_block_templates functions. (31806)
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Data:
Allow making context-specific requests using the data module. (32961)
Make apiFetch requests abortable via AbortController in @wordpress/api-fetch. (32530)
New APIs
Add an 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 define the default template used for the template mode. (32771)
Bug Fixes
Widgets Editor:
Adjust widget form margins in the new Widgets Editor. (33040)
Adjust Legacy Widget form styles to match editor. (32974)
Fix creating and editing non-multi widgets. (32978)
Fix wide widget styles to allow floated contents. (32976)
Fix to allow adding the same image twice in Widgets Editor. (32951)
Align widget 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. button. (32738)
Add width: 100% to components-base-control inside wp-block-legacy-widget. (33141)
Fix error message – bail out if get_current_screen() returns null. (33261)
CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.:
Fix block toolbar deselection when clicking scrollbar. ([32762]
Avoid adding default block to empty widget areas in customizer. (32979) (#32762))
Fix apparent overflow in Customizer caused by widgets editor. (32749)
[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.] Button block: Add deprecation for style.border.radiusnumber. (33117)
Query loop:
Select first Query Loop found from pattern selection. (32737)
Fix race condition for making Post blocks inside uneditable. (33037)
Fix full width children from scrolling horizontally only in the editor. (32892)
Set default block variations not to inherit from global query. (33163)
Group block: Avoid rendering the layout configuration twice. (33045)
Button block:
Use border support provided styles and classes. (33017)
Adding buttons should respect the preferred style. (31089)
Categories block:
Fix broken experience for lower privileged users when fetching Categories . (32994)
Fix crash when trying to access categories on insertion. (32989)
Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. (32983)
Archives block: add custom classes to archive dropdown. (32971)
Post terms block: Fix broken experience for lower privileged users when fetching Terms. (32947)
Site Title and Site Tagline blocks: readonly view when the user has no the right permissions. (32817)
Image block:
Fix block validation errors when clearing height/width. (32524)
Fix drag and drop indicator above first block and RTL drop indicators. (33024)
Fix glitchy block focus style when multi selecting blocks. (32927)
Fix collapsing appender when paragraph disabled. (32894)
Fix unintended 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. search request in <LinkControl> when showSuggestions is false. (32857)
Ensure only valid URLs or anchors within the text are automatically created as links. (32663)
Fix drag and drop indices when a block list contains a style element. (32776)
Consistent border with focus styles for block appender. (33022)
Set explicit z-index on interface body to ensure it’s pinned under interface 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.. (32732)
Rename .interface-interface-skeleton__bodyz-index to .interface-interface-skeleton__content. (32869)
Template editor:
Fix: Template editor header area is difficult to navigate with screenreaders. (32938)
Do not allow users to create templates with blank titles. (32809)
TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. (32744)
Global styles:
Fix a regression where custom-units are forced as an array. (32898)
Update ESnext code in the block toolbar documentation. (32422)
Fix “Gutenberg” typo in dynamic blocks tutorial. (33013)
Polish the Gutenberg release docs, performance audit section. (32770)
Update 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. in Widget Block Editor documentation. (32759)
Block Editor and Block API:
Add link color supports to Block API documentation. (32936)
Unify Block Editor readme language and example. (31850)
Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. (32921)
ServerSideRender: Update documentation for placeholder props. (33030)
Add ‘area’ key to function doc for gutenberg_get_block_templates. (32746)
Widgets: Add technical implementation details for Widgets Customizer. (33026)
Code Quality
Block Library:
Query Loop: use plain div for wrapper element in patterns. (32867)
Post Template block: remove gutenberg domain from Post Template block. (32804)
Ensure there is no direct import from core/editor store. (32866)
Improve block categories by moving several blocks from Design to Theme. (32568)
Typings:
Begin adding types, starting with redus-store/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./actions. (32855)
Unit control Utils: Update JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. documentation and add basic test coverage. (32774)
Promote lint rule to error when validating store string literals. (32537)
Cleanup PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Codesniffer warnings and enable fail. (26516)
Data: Handle context state updates in core-data reducer on edits. (32991)
APIs: Remove deprecated APIs that are no longer supported in version 11.0. (33258)
Add getCurrentUser() to e2e test utils: , and use it for user switching. (33050)
Fix WP editor 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. e2e test. (32915)
Fix failing PHPUnit test caused by changes in WP core. (32888)
Fix eslint-import resolver with extraneous dependencies. (32906)
Scripts: Update lint-md-docs script to use ignore-path. (32633)
Workflows:
Recursively clear node modules when building for ci. (32856)
Allow point releases after a new RC is out. (32560)
Performance
Add in memory cache for rich link previews data. (32741)
Experiments
Navigation Block and Editor:
Update the function name and correct the comment. (32918)
Correct the case of navigation __unstableLocation. (32783
Navigation block: Add an unstable location attribute. (32491)
Avoid double encoding of URLs in Navigation Link block. (32840)
Site Editor:
Fix logic error on site editor useSetting. (32793)
Fix oEmbeds not working in block template parts. (32331)
Performance Benchmark
Due to an ongoing issue with the benchmark tests details on the performance of Gutenberg 11.0 are currently delayed. They will be published here as soon as they become available.
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.
Version
Loading Time
KeyPress Event (typing)
Gutenberg 11.0
4.82s
29.82ms
Gutenberg 10.9
4.69s
29.54ms
WordPress 5.7
5.51s
29.79ms
Kudos to all the contributors that helped with the release! 👏
This post summarizes the top pieces of feedback of the current experience to help inform ongoing efforts after the 5.8 release and as a follow up to a similar post from March. You might notice that some areas of feedback match the original post but that the specifics are different. This is to be expected due to efforts being consolidated around 5.8, causing some feedback to fall in priority.
Keep in mind that this post is simply a snapshot in time and is inherently going to leave out aspects of the experience that haven’t been the subject of calls for testing yet, for example, Global Styles. It’s also not going to go into great detail about all of the hard work that has gone into addressing these items already, whether through PRs or sharing designs that offer solutions.
This section pulls together everything from feature requests for additional options for different blocks, desire for more control over spacing especially for the Column and 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. blocks, general confusion around why certain settings exist in one place and not another (example with the Query loop block, with Color settings, and Columns block), and how to navigate the complexity of settings with more powerful blocks. As a specific example tying in these various items, let’s say you want the Query loop 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. to display 3 posts from a certain categoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and you want to set various colors for different parts of the set of posts. To accomplish that, you would have to interact with the block 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. settings first to set the category before using the block toolbar to select the number of visible posts. To set various colors, you’d have to use List View or navigate through the nested blocks before opening up the block sidebar settings once more to make sure you’re styling what you want.
Make editing modes distinct (Site, Template, Query Loop block, etc)
Since the calls for testing began to focus on items related to 5.8 in the last couple of months, understanding how best to navigate template editing mode and the Query Loop block became major focuses of feedback. For example, this partially led to the decision to make the Query Loop block’s post content blocks view only. However, while lots of work has been done to provide clarity around what one is editing and adding the right amount of friction, this was still repeated feedback in nearly every test as an area that needs refinement considering how new this functionality is. For example, sharing information in the sidebar upon entering the template editing experience could go a long way in getting a user acquainted with this new experience.
Refine Placeholders & Initial Configuration Steps
With new blocks and new features, the initial placeholders and configuration steps become key to get right in both setting expectations and guiding a person to create what they want. This cuts across many aspects of the full site editing project including template editing mode, the Query Loop block, Navigation block, integrated patterns, and more. For example, if one is adding the Query Loop block with the intent to show a collection of posts, it makes sense to display multiple posts at default rather than just one with the latest implementation. Currently, feedback points to work needing to be done to standardize approaches where it makes sense and to improve each experience overall.
Solidify WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. & Desire for previewing content
Ensure reliability and robustness of the the saving process
Because multi-entity saving (saving multiple aspects at once) is a new WordPress concept and one that underpins many interactions in the site editing experience, this is a key area of feedback to address, especially since the act of saving is so crucial to trust. Generally speaking, feedback falls into the following areas: inconsistent behavior, desire for more functionality, and enhancements to make it clearer what is being saved.
Expand abilities of theme blocks
Since many of the tests relied on interacting with the new theme blocks, numerous enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. requests were raised to improve the experience of using each. Rather than listing this under improving the settings experience, this felt worthy of a separate call out as leveling up these individual theme blocks will unlock more creative power in using these new features. Whether folks wanted more styling options in the Post Title block or to easily add pages in bulk to the Navigation block, people are already looking forward to the next version of these various blocks.
Increase usability of overall experience
This is a “catch-all” category but an important one nonetheless, as it will help various parts of the site editing experience become more intuitive and streamlined. Similar to last time, what follows is a sampling of items both to get a sense of the kinds of issues raised and the spread:
Removing the post content block creates a confusing UXUXUser experience due to the post content block acting as a “container”.
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/ 11.0 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 Release
The latest call for testing is out: FSE Program Testing Call #8: Thrive with Theme.json. As noted in the post, this round of testing targets developer-centric users in order to bring high impact feedback for 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., a new tool for extenders. Feedback is requested by 14 July.
Widgets Editor
See the full 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.-based Widgets Editor dev note for a overview description of the new feature.
The current focus is polishing the theme.json experience by finding and fixing bugs that are back ported to the Betas/RC. Two things left are:
5779 Extract strings provided via theme.json for translationtranslationThe process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. in translate.wordpress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. This depends on a new wp-cliWP-CLIWP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/https://make.wordpress.org/cli/ release that includes this PR and then updating 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. infrastructure.
53494 The global styles need to be enqueued in the footer for classic themes that opt-in into per-block asset loading.
The 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
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. for theme.json was published.
Task Coordination
@Zeb is looking for review on his TOC Block PR after fixing the infinite-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.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. in the Table of Contents block PR.
Making a little progress on nav block menu item setup states, with a little summary here. Otherwise making PRs for a variety of small issues, in fact some of them just need your green checkmarks!
Mainly doing FSE Outreach Program wrangling in the form of shipping the theme.json call for testing post with two lovely collaborators (join in on the fun!) and a “How to Test FSE items for 5.8” post shipping today. I plan to turn my attention towards user docs starting at the end of this week through to the release to help out there alongside responding to feedback that comes in. I also want to spend more time in the land of GitHubGitHubGitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ triaging.
In preparation for the next months after 5.8, we are refining the Site Editing scope, closing issues that have been completed for the most part, and creating new overview issues with the upcoming work.
I am a one person mechanical end to end test runner for the block based widgets editor
Open Floor
What’s the status of FSE in 5.8?
@ironwiller Will there going to be a change at WP 5.8 and have an actual FSE or this one is an ongoing project till the end of the year or even beyond?
@mamaduka Template Mode is on for themes that provide theme.json` file or have special support flag.
@annezazu You can think of full site editing as a collection of features that brings the familiar experience of blocks to all parts of your site. Because it’s a collection of features, it means there’s the option to only release what’s stable and ready in a more gradual way rather than all at once! So… think of it less as an “on/off switch” approach for releasing FSE and more as a steady drip of features being released. In terms of what’s coming, check out this post or you can watch this recent video from another community member that goes over the major features planned. While some items related to FSE are going to be released, like Query Loop Block or Template Editing Mode for classic themes that opt in, this work will be ongoing and is expected to continue beyond this year (my best guess).
Embeds in iFrames Issue
@mrMark Bump to have Embeds looked at e.g. this issue. I added a comment on about embeds being cut off because 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. isn’t expanding for the content.
Replace white screen on home page
@colorful-tones Is there a means to refrain from seeing white screen on home page if a theme just has a theme.json in it? I’ve tested with TwentySomething themes and does not seem to happen, therefore wondering if there is a deprecation jig in place for TwentySomething themes only to gracefully fail. Query Monitor shows wp-content/plugins/gutenberg/lib/template-canvas.php being loaded as template on home page. This is with WP 5.8 RC1-51270 and Gutenberg 10.9.1 active. It looks like an issue needs to be created for this topic for general review.
The new template editor is loaded in an 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. to isolate it from the rest of the adminadmin(and super admin) screen. This has the following benefits:
Admin styles no longer affect the editor content, so there’s no need to reset any of these rules.
Content styles no longer affect the admin screen, so 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. and theme CSSCSSCascading Style Sheets. rules no longer need to be prefixed.
Viewport relative CSS units will work correctly. The dimensions of the editor content is usually not the same as the dimensions of the admin page, so without an iframe units like vw will be relative to the admin page.
Media queries will also work natively, without needing to fake them, as we did before, which is fragile.
In general, it makes the lives of block and theme authors easier because styles from the front-end can be dropped in with very little, if nothing, to adjust. This also applies to lighter blocks, where the editor DOM structure matches the front-end, which we highly recommend when possible.
With a separate window for the editor content, it’s possible for the selection in the editor to remain visible while also having a (collapsed) selection in the editor UIUIUser interface, for example an input field for a URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org.
We currently only iframe new editors. While the new template editor has been iframed, the post editor remains unchanged. We do this to gradually test how existing blocks from plugins work within an iframed editor, since there are cases where a block could look broken or (less likely) error. We hereby urge 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 test their blocks with the new template editor and contact us if they need help to adjust blocks to work in the iframe.
Document and window
The iframe will have a different document and window than the admin page, which is now the parent window. Editor scripts are loaded in the admin page, so accessing the document or window to do something with the content will no longer work.
Most blocks written in ReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. should continue to work properly, except if you rely on document or window. To fix, you need to create ref to access the relative document (ownerDocument) or window (defaultView). Regardless of the iframe, it is good practice to do this and avoid the use of globals.
If you attach event handlers, remember that the useEffect callback will not be called if the ref changes, so it is good practice to use the new useRefEffectAPIAPIAn 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., which will call the given callback if the ref change in addition to any dependencies passed.
For the editor, scripts such as jQuery are loaded in the parent window (admin page), which is fine. When using these to interact with a block in the iframe, you should pass the element reference.
But what if the library is using the global window or document and it’s out of your control?
Submit an issue or PR for the library to use ownerDocument and defaultView instead of the globals. Ideally, any library should allow initialisation with an element in an iframe as the target. It’s never impossible. Feel free to contact us to mention the issue.
In the meantime, you can use the script that is loaded inside the iframe. We’ve loaded all front-end scripts in the iframe to fix these cases, but note that ideally you shouldn’t use scripts loaded in the iframe at all. You can use defaultView to access the script.
const ref = useRefEffect( ( element ) => {
const { ownerDocument } = element;
const { defaultView } = ownerDocument;
// Use the script loaded in the iframe.
// Script are loaded asynchronously, so check is the script is loaded.
// After the dependencies have loaded, the block will re-render.
if ( ! defaultView.jQuery ) {
return;
}
defaultView.jQuery( element ).masonry( … );
return () => {
defaultView.jQuery( element ).masonry( 'destroy' );
}
} );
const props = useBlockProps( { ref } );
And that’s it! In summary, any problem that a block might have in the iframe is caused by using the document or window global at the root of it, either in the block’s code or a third party library. Ideally, all code uses the ownerDocument and defaultView relative properties.
WordPress 5.8 introduces Global Settings and Global Styles. They allow theme authors to control and style the available features in the editor and the different blocks using 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..
By using a theme.json file, in addition to the Global styles and settings capabilities, theme authors opt-in into the layout feature for 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. containers.
Layout config
Historically, themes had the responsibility to provide CSSCSSCascading Style Sheets. styles in order to support aligning content (left, right). With the introduction of the block editor in WordPress 5.0, new alignments has been added to the mix (wide, full). In addition to that, the block editor allowed users to use container blocks (group, columns blocks) which potentially can change how their inner blocks are positioned and aligned. Taking all these variations into consideration has become a very difficult task for theme authors. To address these issues, WordPress 5.8 introduces the layout feature and config.
How do I migrate my theme
Themes that have a centered content area, need to define a layout setting in their `theme.json` file:
The block-editor will automatically read this config and provide the corresponding styles in the editor. It will allow all alignments to work properly without requiring the `add_theme_support( ‘align-wide’ )` call.
Themes are still required to provide the corresponding styles in the frontend of their sites, something like:
It’s not possible for WordPress to generate these styles automatically for all themes because the entry-content className in the example above is not mandatory and may not exist. In the future, with the introduction of the upcoming block themes, these styles won’t be needed anymore.
Nested Blocks
For themes with the layout config enabled, container blocks (like group blocks) do not automatically inherit the layout config. Meaning the blocks added inside the containers will by default take all the available space and not have any wide/full alignments options unless the user defines the wide and content sizes for that particular container block or “inherits” the config from the default layout.
This also means that themers can drop any alignment specific CSS that was added specifically to support nested blocks.
Expanding on previously implemented 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. supports in WordPress 5.6 and 5.7, WordPress 5.8 introduces several new block supports flags and new options to customize your registered blocks.
New Supports
color._experimentalDuotone – Adding duotone support to your block is a new experimental feature. To test, set this property to a string that specifies the CSSCSSCascading Style Sheets. selector where you want to apply duotone. For example, in your block metadata:
Related ticketticketCreated for both bug reports and feature development on the bug tracker.: #31524
Stabilized Supports 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.
Two features that were experimental in WordPress 5.7 have been stabilized in WordPress 5.8
The spacing support was updated and expanded to work for server-side blocks, as well as adding granular support to configure spacing for sides (top, right, bottom, left) individually. For example:
The following example configures side support for just top and bottom:
supports: {
spacing: {
margin: [ 'top', 'bottom' ], // Enable margin for arbitrary sides.
padding: true, // Enable padding for all sides.
}
}
The spacing supports can target specific blocks using theme.json, or it’s own attributes. For example, customizing the top and bottom margins for the core/separator block:
Props to @mkaz and @nosolosw for help with compiling this 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
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..
You must be logged in to post a comment.