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.
@dryanpress outlined the goal of the project: To replace hard-coded colors in WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. stylesheets with CSS Custom Properties
Work is continuing on (ryelle/wordpress-develop)[https://github.com/ryelle/wordpress-develop/pull/2]
Last week’s chat summary here covers our discussion around box-shadow, why we can’t use HSL and that we’ll be continuing discussion on this PR
This project is targeted for experimental release in WordPress 5.9 and then a stable release in 6.0. To make WordPress 5.9, the project probably needs to be merge-ready by end of August
If you have ever added a custom link to an image 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 then tried to do the same on a Gallery image, you will understand the frustration and confusion of not having consistency between different types of image blocks. This inconsistency is because the coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Gallery block stores the details of the included images as nested <img> elements within the block content. Therefore, the images within a gallery look and behave different from images within an individual image block. There are some long-standing open issues related to this:
The only way to fix this with the Gallery block in its current state is to try and replicate the additional functionality that the Image block has in the Gallery block, and vice versa. While this would be possible, it would lead to an additional maintenance overhead to keep the UIUIUser interface and underlying code in sync between the two blocks.
Changes made
To make the behavior of images consistent between the Image Block and Gallery, while avoiding code duplication, the core Gallery block has been refactored to save the individual images as nested core Image blocks using the standard core innerBlocks APIs. To make this work with the innerBlocksAPIAPIAn 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., the gallery structure also had to change from an ordered list to a collection of figure elements within a figure. This structure change also brings the core Gallery block into line with the W3C WAI guidelines on the grouping of images.
The structure change means that Gallery images now have the ability to add custom links, or custom styles, for each image. An example of the flexible Gallery layouts this opens up can be seen below.
Gallery images will also automatically inherit new functionality that is added to the Image block, including those added by plugins. Below is an example of a Gallery block making us of the Image wave style and vintage 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. option added by the CoBlocks 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.
Other benefits include being able to use the standard move, drag and drop, copy, duplicate, and remove block functionalities. Keyboard navigation also benefits from the adoption of the standard block model by the Gallery block.
What theme and plugin authors need to do before 5.9
To support the new Gallery block format, plugin and theme authors should aim to do the following before the December release of this change in WordPress 5.9.
Any gallery related CSSCSSCascading Style Sheets. should have additional selectors added to target images in the following structure in both the editor and front end (existing selectors must remain to support the existing gallery block content). The new structure can be seen below. See this issue for an example of the type of additional selectors that may need to be added.
For custom blocks with options to transform->from and transform->to the core Gallery block the plugin should be tested with 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/ plugin to ensure that these transformations work correctly with both existing gallery content and the new gallery block format
In the future, when the new Gallery format is stable in a core release, the transformation filters will be deprecated, and plugin authors will need to update their transformations to handle both Gallery formats. Notice will be given ahead of this change being made.
It is also expected that existing gallery content will be automatically migrated to the new format. This will allow the old gallery version’s code to be removed from the codebase. There is currently no time frame set for this to occur.
Additional context and considerations
Other existing solutions
Third-party block developers are currently solving some of the problems caused by the limitations of the core Gallery block by implementing their custom Gallery blocks. These include some of the missing functionality, like the ability to add custom links to individual images. This can be problematic for site owners and content editors due to a large number of Gallery blocks that offer very similar functionality, but none of which appear to provide a close match to the functionality available with individual core Image blocks.
There do not appear to be any examples of plugins that already solve this problem in a way that utilizes Image blocks as inner blocks.
Backwards compatibility considerations
This is a breaking change due to the fundamental change in the underlying Gallery structure. Due to the large number of Gallery blocks already in use, along with themes and plugins that may rely on the existing structure, the following steps have been taken to mitigate the impact of this change on theme and plugin developers as much as possible:
Initially, there will be no automatic migrationMigrationMoving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of existing gallery content. This means that all existing gallery content will behave the same in the editor and front end as it does now, so will be compatible with existing plugins and themes. Only new gallery blocks added after this change will have the new structure in the editor and the front-end.
The refactored Gallery format has been tested against the following sample block libraries that have existing transforms to and from the core Gallery block:
While the refactored gallery works effectively with these plugins and themes, there may be edge cases in other plugins and themes that have not been accounted for. Themes that heavily modify the gallery CSS based on the existing <ul><li></li></ul> will definitely need to be updated if the same style changes need to be applied to the new gallery format. Therefore, it is recommended that theme and plugin authors test the changed gallery block well in advance of the 5.9 release.
Topic: comparing and contrasting the classic menu screen with the experimental 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 navigation screen.
Goal: derive a list of tasks that are required in order for the two screens to have feature parity (from both UXUXUser experience and UIUIUser interface perspectives).
Intended Audience: past and future contributors to the navigation editor and block. Contributors to other related parts of WordPress.
Note Taker: any volunteers to be the official note keeper?
Preparation:
Please could participants test drive the old and new screens. Try creating the same menus on both screens.
Then come prepared with features they feel are missing from the block-based Navigation screen that are present in the classic Menu screen, or any bugs encountered.
Agenda
Introduction
Facilitator introductions.
Welcome to attendees.
Recap hangout topic and goal.
Terminology – block-based vs classic Navigation screens.
Format
Explain the format.
Facilitator will share screen to demonstrate which parts of the experience are being discussed.
Questions to consider about the new screen:
Where is it lacking polish?
What bugs are in evidence?
What steps are harder to achieve?
What steps are not possible to achieve?
What steps are easier to achieve?
What features are entirely missing?
Summary
Brief summary of key discussion points from notetaker.
Summary of action points including Issues to be created or further explorations required.
Two weeks have passed since 11.2, so here we are again for a new 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, 11.3.0. This update includes inserter performance improvements, new controls 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. Dimensions, and some enhancements around how we handle Featured Post Images.
New Dimensions Panel
Replacing the Spacing Panel, this new Dimensions Panel gives us a deeper control over supported spacing, size, and other related style options. It also offers the ability to customize what you’d like to have shown. This is a great addition that builds on the overall dimension controls work across blocks.
Block inserter performance improvements
The block inserter is getting a big performance boost! Enjoy searching and inserting blocks with speed and ease.
Dimension controls for 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. Block
There are now new height, width, and scale controls for the featured image block, bringing it into greater parity with the Image block. This change impacts the 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 in a big way by allowing even more layout options.
New icons for Reusable Blocks and Template Parts
New icons are now available for Reusable Block and Template Parts to make them each more recognizable and more intuitive to interact with.
Post Featured Image: Add basic dimension controls. (31634)
Template Part: Try new icons for reusable blocks and template parts. (34002)
Block Patterns
Add translationtranslationThe process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context on titles. (33734)
Update snackbar to use framer motion instead of reactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. spring. (33717)
Reduce specificity of reset & classic styles. (32659)
Document Settings
Disable spellcheck and autocomplete in permalink slug field. (33708)
Global Styles
Dimensions Panel: Add new ToolsPanel component and update spacing supports. (32392)
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/.
Improve the likelihood of getting rich link previews by modifying UA string for URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details REST API endpoint. (33747)
Template Mode: Add busy state to template creation modal. (33076)
Widgets Editor
Add error boundaries to 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. screens. (33771)
Bug Fixes
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)
Button: Fix justification for button block when selected. (33739)
Image: Fix issue with canInsertCover not being set to false for empty arrays. (33863)
Query Pagination Numbers: Fix first page’s link. (33629)
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.
Dimensions Support: Switch dimensions block support back to using spacing key. (34030)
Block Editor
Closing the block inserter decrements block type impressions. (33906)
Fix block appender position in classic themes. (33895)
Fix positioning discrepancy with draggable chip. (33893)
Force link text to wrap in the Link UIUIUser interface when encountering extra long link text. (33753)
Improve display of LinkURL menu and fix spacing. (33652)
Only show rich preview for image and description if data is available. (33660)
URL Details: Avoid PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when parsing protocol-relative icon URLs. (33779)
Components
useBreakpointIndex: Attach resize event listener to window instead of document. (33902)
Components: Fix RTL on custom gradient picker. (33831)
FontSizePicker: Use number values when the initial value is a number. (33679)
FormTokenField: Avoid error when maxLength value is hit. (33623)
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
Fix Safari 13 metaboxes from overlapping the content. (33817)
Navigation Editor
Avoid React warning when creating a new menu. (33843)
Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. (33748)
Improve the performance of the parser by removing the automatic custom classnames handling. (33903)
Post Editor
Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. (33418)
Template Editor
Template Mode: Remove ‘per_page’ argument from the template data selector. (33742)
Experiments
Full Site Editing
Site Editor: Implement a settings object 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.. (33737)
Template part selection popover – minor style updates for visiblity. (33733)
Template Part placeholder – Add title step to creation flow. (33703)
Navigation Block
Navigation: Fix navigation block appender 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.htmlHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (33964)
Enable the ability to remove a link from the Nav Link block in the Nav Block. (33777)
fix: Broken link in documentation to block support mechanism. (33780)
Update documentation to reflect new automated process for feature grouping. (33573)
link fix: Block 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. Tutorial. (33308)
Use the __unsafe_useEmotionCache in the useCx hook. (33982)
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Data
Deprecate getAuthors in favor of getUsers. (33725)
Global Styles
No longer read from experimental-theme.json. (33904)
Remove the experimental prefix and rename theme.json files. (33925)
Post Editor
Refactor MetaBoxesArea to to functional components using 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.. (30542)
Add search performance measures and make other measures more stable. (33848)
Avoid double parsing the content when loading the editor. (33727)
Block Hierarchy Navigation waits for the column to be highlighted. (33721)
Widgets Editor: Try to fix flaky 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. inspector test. (33890, 33965)
Build Tooling
Readable JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. assets 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: Fix webpack 5 support. (33785)
Scripts: Use cssnano to minimize CSS files with build. (33750)
Scripts: Webpack configuration update to minimize CSS. (33676)
Scripts: Add missing fallback for target in webpack 5 configuration. (34112)
ESLint
Include .jsx extenstion when linting import statements. (33746)
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/ Contributor Templates
Update 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. issue template to use forms. (33713, 33786, 33761)
Correct function_exists() check typo introduced in #33331. (33513)
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.3
7.23s
38.57ms
Gutenberg 11.2
7.82s
37.89ms
WordPress 5.8
7.99s
41.44ms
Kudos to all the contributors that helped with the release! 👏
Thanks to@javiarce for our preview assets, @cbringmann and @mkaz for proof reading this post, @annezazu‘s great copy edits, @priethor for shepherding the process along so helpfully, @youknowriad for helping 🧑🚒 with the release, and everybody else who contributed to this release for your wonderful work!
@dryanpress (fka @Dave Ryan) linked to his PR which introduces some commonly used theme variables to defined colours indicating statuses such as success and error :
@robertgasked a question about where new custom properties should be defined. @ryelle answered that they should be in custom-properties.css, in the body selector so that they can be overridden by colour themes later
@notlaura started the 20 minute session where contributors can work on the project while having help available in the SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel
@robertg asked if the :hover and :focus pseudo-classes should have separate custom-properties. @ryelle answered that one custom-property can be defined for --hover and also used for :focus
@wazeter asked about the timeline. @notlaura replied that for the 5.9 release we would be aiming for the end of August. @ryelle clarified that this is the target for “early“ consideration. We’ll know the target for the completed project when the real cutoff has been announced but she expects it to be around early-mid October
@notlaura added that next week’s meeting (August 18) is the last scheduled week for working time
@wazeter asked where questions about quirks should be addressed. @notlaura replied post in the #core-css channel or comment in the PR
@robertg asked if we are just targetting color, background-color, and border-colors for now. @notlaura added box-shadow, noting that this will need some additional discussion
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.
Navigation Block & Navigation Editor.
Template editor.
Patterns.
Styling.
Mobile Team.
Task Coordination.
Open Floor.
If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:
If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.
Do you have something to propose for the agenda, or a specific item relevant to the usual agenda items above?
Please leave a comment, and say whether or not you’ll be in the chat, so the group can either give you the floor or bring up your topic for you accordingly.
This meeting happens in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack.
Focused on substituting existing colors throughout CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. stylesheets, the CSS Custom Properties project aims to make working with Adminadmin(and super admin) Themes & Admin Color Schemes easier and more reliable both in Core and Plugins.
On August 17, the Upgrade/Install component met to discuss the proof of concept that builds on the rollback update failure 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 to prepare it to merge in CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. Slack logs.
In the post and during the meetings a number of concerns and potential improvements were mentioned, so here are the next steps:
@aristath will write steps for manual testing, in time for the next Test scrub (Friday, August 20) ✅ Instructions in the Pull Request
@francina will liaise with the Test Team and Hosting Team (aka cross post 😇) so the PR can be tested ✅
@sergeybiryukov will do the code review once there is a good amount* of testing.
The conversation led to other two topics
Unit tests for the updater classes. They don’t exist. Should they exist? Yes. But it’s a big task and it needs a dedicated initiative. Let’s take one step at a time.
#51928 is independent from the auto-updates/failures/rollback items, but closely related. As @pbironmentioned, failure data can give information about areas in the updater that could use more error checking/recovery logic, etc. The results are anonymous and seen only by the .org system folks.
If you have input on any of the above, please leave a comment – here or on the relevant PR/Tickets.
You must be logged in to post a comment.