The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in the bug tracker.
“What’s new in GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-newtagtagA directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.
Add a Variation Picker to the Group 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. Placeholder
When a new Group block gets inserted into the page it now presents the user with a variation picker to instantly choose which type of layout they want to use.
Add List-Based Editing to Navigation Block
Managing the order of menu items just got a lot easier by allowing you to modify the arrangement of the individual menu items in a list view right inside the block settings 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.. This works similarly to the list view but is isolated to just the current navigation you are editing. Clicking on the “Edit” button selects the menu item in the editor so you can edit it inline.
Note: This is still experimental and needs to be enabled on 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 settings screen.
Hide Block Toolbar when Spacing Visualizer is Shown
The spacing visualizer has seen some improvements in the last few releases already. In 14.6 it now automatically hides the blocks toolbar as soon as you hover over the spacing setting allowing you to focus on the content whilst you adjust the spacing.
Transform Paragraph into Heading via Keyboard Shortcut
You can now easily transform paragraph blocks into headings using the new control + option + 1 – 6 keyboard shortcut.
Update the Design of the Focal Point Handle
In order to make it more clear that the focal point picker is selecting a broader region instead of a fine point the handle was updated to better fit the precision of the input.
Fluid typography: Adjust font size min and max rules
The minimum and maximum value calculations for fluid font sizes have been adjusted to prevent inconsistencies in certain viewports, such as having a bigger maximum than the custom size setting. You can check the github issue for the full set of rules.
Define a Minimum Height
The new “Minimum Height” dimension control is now available for the Group and Post Content block. For example, it can be used to make sure the site footer always stays at the bottom of the viewport.
Generate New Color Paletts Automatically
Coming up with the perfect color palette is hard. Sometimes you just want to explore some new quick ideas. This new “Randomize colors” feature is a subtle algorithm that can generate alternative color palettes on the fly.
Navigation: Add a new ManageMenusButton component. (45782)
Navigation: Reposition the navigation selector. (45555)
Navigation Link: Add the URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field to the Navigation Link inspector controls. (45751)
Author: Make the Author selector display all users instead of just 10. (45640)
Columns: Add transform to unwrap the contents. (45666)
Read More: Add aria-label and screen reader text. (45490)
Group: Use a variation picker in the placeholder. (43496)
Components
Use new theming accent color in all components. (45289)
CheckboxControl: Replace margin overrides with new opt-in prop. (45434)
FocalPointPicker: Update the design of the focal point handle. (45053)
FontSizePicker: Update hint text to match the design. (44966)
CheckboxControl: Move icons out of labels. (45535)
Block Editor
Converts paragraphs to headings with keyboard shortcuts. (44681)
Pattern Directory APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.: Add support for pagination parameters. (45293)
Template Part Block: Update block isActive method. (45672)
Navigation: Fix overflowing menu name in the navigation selector dropdown. (45647)
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)
Fix focus return when closing the Post publish panel. (45623)
Fix navigate regions backwards for macOS Firefox and Safari. (45019)
Fix the Save buttons labeling and tooltip. (43952)
FormTokenField: Fix duplicate input in IME composition. (45607)
Making size prop work for icon components using dash icon strings. (45593)
ToolsPanel: Prevent calling deselect when panel remounts. (45673)
Color Picker: Prevent all number fields to become 0 when one of them is an empty string. (45649)
ToggleGroupControl: Only show the enclosing border when isBlock. (45492)
Autocomplete: Check key events more strictly in IME composition. (45626)
CSS & Styling
Inherit font from theme on overlay close button. (45635)
Navigation: Fix font inheritance when using text menu button. (45514)
Remove hover style to button on dark block tools UIUIUser interface. (45653)
Remove width from block mover button focus style. (45665)
Site editor hover/select: Fix double border. (45589)
Remove duplicate output of existing classnames in layout classnames. (45499)
Post Editor
BlockManagerCategory: Fix styles for indeterminate. (45564)
Fix: Updated names from List View to Document Overview. (45524)
Strip HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from Post Title when pasting multiline title containing HTML. (35825)
Site Editor
Decode entities in template title and description. (45716)
Link to homeUrl from site editor view menu. (45475)
Block Editor
Fix Link UI popover positioning when inspector control input is focused. (45661)
Paste: Fix list only paste from Google documentation. (45498)
Make Manage Reusable blocks match similar links. (45641)(45689)
List View: Disable 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". expansion when block editing is locked. (45541)
Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. (45739)
Experiments
A list view duplicate for use in navigation list view experiment. (45544)
Introduce experiment for inspector based navigation editing. (45515)
Change Title: How to use JavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. with Gutenberg. (45323)
Docs: Update the readme for the integration test fixtures. (45581)
Summarize “Available commands” section and refer them it to scripts documentation. (45636)
Extract the manage menus button to a shared component to reduce duplicate code. (45769)
BackportbackportA port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. pseudo selector comments from coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. (45619)
unstableSubscribeStore: Support store descriptors. (45481)
Components
BaseField: Remove unnecessary .firstChild from tests. (45687)
AvatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.: Escape the ‘get_author_posts_url()’. (45427)
Fix typos in Paragraph block end-to-end tests. (45611)
FontSizePicker: Fix a buggy unit testunit testCode written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (45529)
Ignore warnings for window.wp in Playwright. (45598)
Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. (45726)
ReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native unit tests: Migrate getByA11yLabel usages. (45454)
Unit Tests: Rewrite ReactDOM.render usages to RTL. (45453)
E2E: Add site and 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 supports for ensureSidebarOpened. (45480)
Build Tooling
Include TS and JSX files to testing-library lint. (45533)
The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.
Post Editor
Version
Loading Time
KeyPress Event (typing)
Gutenberg 14.6
10.27s
49.63 ms
Gutenberg 14.5
12.08s
70.53ms
WordPress 6.1
4.1s
31.3 ms
Site Editor
Version
Loading Time
KeyPress Event (typing)
Gutenberg 14.6
9.58s
48.65ms
Gutenberg 14.5
9.35s
77.82ms
WordPress 6.1
3.84s
22.79ms
First Time Contributors
The following PRs were merged by first time contributors:
@edanzer: Template Part Block: Update block isActive method. (45672)
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/ 14.5 has been released and is available for download!
Async key project updates
Read the latest updates directly from the following tracking issues:
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. fix Disable distraction free preference effects on small viewports
Should we rethink how CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Chat works (again)? The attendance and purpose of the chat seem to be both withering for the past six months or more. Let’s spend some time to figure out what happens and what could we change to make use of our time and participation in a relevant and impactful manner.
Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.
WordPress & 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/ releases
WordPress 6.1
WordPress 6.1 RCrelease candidateOne of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). was released yesterday from the editor side things are going smoothly.
WordPress 6.0.3 & 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 14.3.1.
There were some security issues fixed and included in the 6.0.3 release and release for all the lower versions with auto-updates. Some of these fixes were editor related, so a new version of Gutenberg was also released 14.3.1.
Please ensure that all your websites have Gutenberg and coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. updated!
Key project updates
Site Editor
There is a big PR in progress that redesigns the UIUIUser interface, introduces a browse mode, and makes things much more intuitive for end users. Please leave your feedback at #44770.
Building with patterns project
The Gutenberg team merged a redesign to the pattern inserter #44028. With the aim of making it more user-friendly.
Before a 6.2 roadmap post similar to the ones that have come before is shared, lots of work has been done to revamp the following issue to make it the source of truth for the months ahead: https://github.com/WordPress/gutenberg/issues/33094 If you’re looking for ways to help in the coming months, please take a look at this issue and know it’ll be kept up to date! You’re also welcome to join a hallway hangout in the FSE Outreach Program
Please have a look into the issue and in case there is any feedback leave a comment!
Thank you @annezazu for sharing this with us ensuring the issue will keep being updated!
It is good to have a single issue as the main source of truth for the work that will be done in the coming months.
Let’s try our best to ship the things there, and wrap up the customisation/ site editor phase.
Open floor
Collaboration with the a11yAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team
Wanted to call out a great collaboration between the 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) team and core editor team in this issue: https://github.com/WordPress/gutenberg/pull/44028 It’s worth reviewing to learn from and was called out specifically by @alexstine (a11y team member) saying, “This needs to be highlighted as a good working example. It took much longer, but saves work in the future to go back and make it right.”
@jorgefilipecosta thanked @annezazu for bringing this topic to chat and thanked @alexstine for highlighting this collaboration, congratulating all the people involved in that issue.
Feedback on the Closing List view after selecting 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.
This is one I could use some feedback on. https://github.com/WordPress/gutenberg/pull/45079 This issue has been stale for some time. I am never closed to hearing other ideas, I just would really like a way forward so everyone can maximize the use of the list view since it gets more accessible every release. If my suggestion would not work for you, what would?
The @wordpress/core-dataJavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. package in 6.1 ships new ReactReactReact is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.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. that make accessing WordPress data easier than before.
useEntityRecords
With useEntityRecords developers, can fetch a list of records with a single hook call:
useEntityRecords( 'postType', 'page' )
Below is what it looks like when used in a React component:
import { useEntityRecord } from '@wordpress/core-data';
function PageTitlesList() {
const pages = useEntityRecords( 'postType', 'page' );
if ( pages.isResolving ) {
return 'Loading...';
}
return (
<ul>
{pages.records.map(( page ) => (
<li>{ page.title }</li>
))}
</ul>
);
};
// Rendered in the application:
// <PageTitlesList />
In the above example when PageTitlesList is rendered, the list of records and the resolution details will be retrieved from the store state using getEntityRecords(), or resolved if missing.
The useEntityRecords accepts four arguments:
kind (string) – Kind of the entity, e.g. root or a postType.
name (string) – Name of the entity, e.g. plugin or a post.
queryArgs (object) – Optional 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. query to pass to the requested 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. endpoint, e.g. { "per_page": 10 }
options (object) – Optional hook options. Currently, the only supported option is enabled and determines whether the records will be requested.
It returns an object with the following properties:
records (array) – The requested entity records
isResolving (boolean) – Are these records being resolved at the moment?
hasResolved (boolean) – Have these records resolved already?
status (string) – Resolution status. One of: IDLE, RESOLVING, SUCCESS, or ERROR
useEntityRecord:
Developers can retrieve a single record using the useEntityRecord hook:
import { useEntityRecord } from '@wordpress/core-data';
function PageTitleDisplay( { id } ) {
const page = useEntityRecord( 'postType', 'page', id );
if ( page.isResolving ) {
return 'Loading...';
}
return page.title;
}
// Rendered in the application:
// <PageTitleDisplay id={ 13 } />
In the above example, when PageTitleDisplay is rendered, the page and the resolution details will be retrieved from the store state using getEntityRecord(), or resolved if missing.
The useEntityRecord hook accepts four arguments:
kind (string) – Kind of the entity, e.g. root or a postType.
name (string) – Name of the entity, e.g. plugin or a post.
recordId (string|number) – The ID of the requested entity record.
options (object) – Optional hook options. Currently, the only supported option is enabled and determines whether the records will be requested.
It returns an object with the following properties:
record (object|null) – The resolved entity record.
isResolving (boolean) – Is the record being resolved at the moment?
hasResolved (boolean) – Has the record already resolved already?
status (string) – Resolution status. One of: IDLE, RESOLVING, SUCCESS, or ERROR.
hasEdits (boolean) – Does the record have any in-browser edits?
editedRecord (object|null) – The record with any in-browser edits applied.
edit (function) – Applies the in-browser edits to the edited entity record.
save (function) – Persist the in-browser edits to the server.
Below is an example showcasing the editing capabilities provided by useEntityRecord:
import { useDispatch } from '@wordpress/data';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { TextControl } from '@wordpress/components';
import { store as noticeStore } from '@wordpress/notices';
import { useEntityRecord } from '@wordpress/core-data';
function PageRenameForm( { id } ) {
const page = useEntityRecord( 'postType', 'page', id );
const { createSuccessNotice, createErrorNotice } =
useDispatch( noticeStore );
const setTitle = useCallback( ( title ) => {
page.edit( { title } );
}, [ page.edit ] );
if ( page.isResolving ) {
return 'Loading...';
}
async function onRename( event ) {
event.preventDefault();
try {
await page.save();
createSuccessNotice( __( 'Page renamed.' ), {
type: 'snackbar',
} );
} catch ( error ) {
createErrorNotice( error.message, { type: 'snackbar' } );
}
}
return (
<form onSubmit={ onRename }>
<TextControl
label={ __( 'Name' ) }
value={ page.editedRecord.title }
onChange={ setTitle }
/>
<button type="submit">{ __( 'Save' ) }</button>
</form>
);
}
// Rendered in the application:
// <PageRenameForm id={ 1 } />
In the above example, updating and saving the page title is handled via the edit() and save() mutation helpers provided by useEntityRecord();
useResourcePermissions
Developers can check the current user’s permissions using the useResourcePermissions hook:
import { useResourcePermissions } from '@wordpress/core-data';
function Page({ pageId }) {
const pagePermissions = useResourcePermissions( 'pages', pageId );
if ( pagePermissions.isResolving ) {
return 'Loading ...';
}
return (
<div>
{pagePermissions.canCreate
? (+ Create a new page)
: false}
{pagePermissions.canUpdate
? (Edit page)
: false}
{pagePermissions.canDelete
? (Delete page)
: false}
// ...
</div>
);
}
// Rendered in the application:
// <Page pageId={ 15 } />
In the above example when the Page is rendered, the appropriate record-level page permissions and the resolution details will be retrieved from the store state using the canUser() selector, or resolved if missing.
In the following example, the PagesList component requests permissions for the pages collection and not a specific page record:
import { useResourcePermissions } from '@wordpress/core-data';
function PagesList() {
const pagesPermissions = useResourcePermissions( 'pages' );
if ( pagesPermissions.isResolving ) {
return 'Loading ...';
}
return (
<div>
{pagesPermissions.canCreate
? (+ Create a new page)
: false }
// ...
</div>
);
}
// Rendered in the application:
// <PagesList />
The useResourcePermissions hook accepts two arguments:
resource (string) – The resource in question, e.g., media.
id (string|number) – Optional ID of a specific resource entry, e.g., 10.
It returns an object with the following properties:
status (string) – Resolution status. One of: IDLE, RESOLVING, SUCCESS, or ERROR
isResolving (boolean) – Is the record being resolved at the moment?
hasResolved (boolean) – Has the record already resolved?
create (boolean) – Can the current user create new resources of this type?
read (boolean) – Can the current user read resources of this type?
update (boolean) – Only if id is provided. Can the current user update the requested resource?
delete (boolean) – Only if id is provided. Can the current user delete the requested resource?
For WordPress 6.1, there was a concerted effort to add design tools consistently to blocks, via 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. support and make them available via Inspector Controls and for themes 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. file.
In this post, you will find a roster for quick reference showing which block has which controls.
AvatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
–
–
✅
✅
–
✅
Button
✅
✅
✅
✅
–
–
Buttons
✅
–
✅
–
✅
–
Calendar
✅
✅
–
–
–
–
Categories
✅
–
✅
–
–
–
Code
✅
✅
✅
✅
–
–
Column
✅
✅
✅
✅
✅
–
Columns
✅
✅
✅
✅
✅
–
Comment Author Avatar
–
✅
✅
✅
–
–
Comment Author Name
✅
✅
✅
–
–
–
Comment Content
✅
✅
✅
–
–
–
Comment Date
✅
✅
✅
–
–
–
Comment Edit Link
✅
✅
✅
–
–
–
Comment Reply Link
✅
✅
✅
–
–
–
Comment Template
✅
–
–
–
–
–
Comments
✅
✅
–
–
–
Comments Pagination
✅
✅
–
–
✅
–
Comments Pagination Next
✅
✅
–
–
–
–
Comments Pagination Numbers
✅
✅
–
–
–
–
Comments Pagination Previous
✅
✅
–
–
–
–
Comments Title
✅
✅
✅
✅
–
–
Cover
✅
–
✅
–
–
✅
Embed
⏳
–
–
–
–
–
File
–
–
–
–
–
–
Gallery
⏳
✅
✅
✅
–
Group
✅
✅
✅
✅
✅
–
Heading
✅
✅
✅
✅
–
–
Home Link – Navigation
✅
–
–
–
–
–
HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.
Post 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.
✅
✅
✅
–
–
–
Post 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.
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, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. covers miscellaneous updates and changes made to the blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor for WordPress 6.1.
removed useDisabled as it was already revamped and
removed “Dropping Enzyme” as it’s slated for 6.2
Added New withIllustration option for Placeholder component
Table of Contents
Allow defining an aria-label in group blocks
When there are multiple landmarks of the same type (for instance <nav>, <aside>, <section>) added to a template, assistive technologies cannot differentiate between them. Group blocks allow users to select the HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element they need, but in doing so, introduce an a11yAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issue.
With this update in WordPress 6.1, developer can add ARIA labels in their templates and blocks.
With WordPress 6.0, developers were able to add patterns that appear in a modal each time a new page was created, thus allowing the user to start from a set of pre-made patterns instead of a blank state. In WordPress 6.1, this feature is expanded to all the post types. To use this feature, one should include core/post-content in the blockTypes array (same as what happened for pages) and include the desired postTypes where the modal should appear in a newly introduced postTypes property. If postTypes are specified, the pattern is only available on the post types that were set. Example:
New option for Placeholder component supports illustrations
In WordPress 6.1 the Placeholder component used by blocks like Image or Cover supports a new property called withIllustration. When true this property will instruct the Placeholder component to display an outline SVG illustration when there is no content.
Navigation Block Menu Items 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.
This update added a filter to navigation.php to provide the ability to modify navigation block menu items with code. Developers now can programmatically access the navigation block menu items of a block theme similar to the existing wp_nav_menu_items filter does for traditional themes.
A new filter, block_core_navigation_render_inner_blocks, passes WP_Block_List::$inner_blocks to the developer.
Props to @afragen for the code contribution and dev note.
Improvement of Cover Block
Markup changes
The markup has been changed to resolve the issue that duotone doesn’t work with fixed background. Previously, the background image was applied to the root of the block, but it is now applied to the inner div with the img role and .wp-block-cover__image-background class.
Keep the same position for both LTR and RTL languages
In the cover block, the content inside can be changed the content position, such as “Top Left” or “Center Right”. But when changed to RTL languages, the content position flips left to right as compared to the LTR language. However, content position determines “physical” placement and should not be affected by language direction.
To solve this problem, the same position is now kept for both LTR and RTL languages. Because of this change, the content within the existing cover block in RTL languages is flipped left to right (i.e., in its original position), but if this is not what you are looking for, you can re-position it.
Props to @wildworks for the code contribution and dev note.
Moving block CSSCSSCascading Style Sheets. to 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.
Previous to WordPress 6.1, when themes developers wanted to override default blocks CSS styles using theme.json, a few issues arose due to higher specificity, convoluted selector choices or just quirky behavior.
With WordPress 6.1, it is now possible to express styles in the block.json file, using the same properties as a theme.json file. These styles are merged with the Global Styles settings, together with the theme and user style settings, with theme and user style settings taking priority over block styles. The background processing of all Styles (default, block, theme, and user) via the Style Engine also comes with a performance advantage.
Note: This feature is still experimental and therefore subject to change.
Developers can now add an __experimentalStyle property to their block.json file which defines style for the block. For example, the Pullquote block sets the following:
PR #34180GutenbergGutenbergThe 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/ Repo
WordPress 6.1 will deprecate the BlockColorsStyleSelector block editor component. Instead, use 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. to signal that the block supports color-related properties. Visit pull request #40502.
A new APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., known as the “Style Engine”, has been shipped in WordPress 6.1 to provide a single, centralized agent responsible for generating and rendering consistent 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 styles on the client-side and server-side.
For the 6.1 release, the focus has been on consolidating how WordPress generates block supports (border, color, spacing, and typography) and layout styles in the editor and frontend.
Before 6.1, a multitude of instances existed where block supports CSSCSSCascading Style Sheets. and class names were compiled and/or enqueued, both in JavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. and PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher, resulting in a great deal of duplication in both code and frontend output.
It’s imperative to note that the primary and very specific goal of the Style Engine is to improve how the Block editor compiles and renders block CSS, not to provide a universal approach to generating CSS.
Key enhancements in 6.1
WordPress 6.1 introduces a common way to compile, optimize and sanitize block supports styles. Previously block support CSS and class names were generated on demand creating inconsistencies and duplicated code.
Moreover, and one of the biggest improvements, 6.1 brings a way to add styles across the application to a single stylesheet, and also combine repetitive layout-specific CSS rules.
This functionality reduces the number of inline HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. style tags printed to the page: all block supports and layout styles will be rendered to the page as a single, combined stylesheet.
For example, before 6.1, when a page included multiple block layout styles, a CSS rule for each block would be printed in a separate HTML style tagtagA directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). The amount of unique style tags for a single page were potentially without limit.
A global public function to generate block styles – CSS and class names – from a style object, e.g. the value of a block’s `attributes.style` object or the top-level styles 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.. Through it, one can store CSS for later retrieval and eventual enqueuing on the frontend.
This function compiles and returns a stylesheet for a set of any CSS rules. Through it, one can store CSS for later retrieval and eventual enqueuing on the frontend.
Returns compiled CSS stylesheet from stored styles, if any have been stored. The style engine will automatically merge declarations and combine selectors.
JavaScript public functions
The JavaScript API is limited to use within the editor, and compiles only block support styles for now. It ensures that the styles in the editor match those you see on the frontend site.
Given a style object, it returns a collection of objects containing the selector, if any, the CSS property key (camel case) and the parsed CSS value.
Example usage
WordPress 6.1 primarily uses the public methods cited above to create and enqueue block supports styles from a “style” object usually available as a property on the block attributes.
An individual block’s style object may look like this:
wp_style_engine_get_styles() parses and sanitizes the incoming values, then compiles and returns CSS (a compiled string and an array of declarations), which can be used immediately or, if a context is specified in the options, stored for later retrieval.
Multiple instances of such styles may be “stored” across the application, before the page is rendered, and then retrieved and printed together as a single stylesheet when the page is rendered.
Note: The ‘context’ value is used to group and identify styles, so all styles that belong in the same stylesheet should be stored using the same context value.
The editor could then retrieve the stylesheet for all styles stored under the context value of ‘block-supports’ and enqueue them to be printed to the page in a single style tag:
Using wp_style_engine_get_stylesheet_from_css_rules() is similar only that, instead of a block styles object, the first argument is a collection of CSS rules from which you can create a stylesheet.
Please refer to the API documentation: @wordpress/style-engine for detailed information and example usage.
Backwards compatibility and best practices
The Style Engine is a new API and, while it replaces the way block supports to generate CSS and class names, it does not modify the functionality of any existing global methods.
While backwards compatibility is a priority, the Style Engine is in its first iteration and therefore the underlying mechanics will be subject to some degree of transformation in the GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and, ultimately, future versions of WordPress.
To ensure ongoing compatibility, it is recommended to only use the above-mentioned public functions, and avoid calling public methods of any Style Engine utility class.
Current limitations and future enhancements
The Style Engine’s sole function in 6.1 is to generate coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. block supports CSS for the following styles:
border
color
spacing
typography
In future iterations, this list may be extensibleExtensibleThis is the ability to add additional functionality to the code. Plugins extend the WordPress core software..
The next milestones for the Style Engine are:
to assume the responsibility of processing and rendering optimized frontend CSS for Global styles
providing a way to generate all theme-related styles in one place, and
GitHubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ tracking issue #38167
Gutenberg 14.2.0 has been released and is available for download! It comes with writing flow improvements, a more polished Calendar 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., smarter auto-completion, and much more!.
Shipped the Core Editor Improvement: Catalyst for creativity and control, have a draft of 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) improvements for 6.1.
This early demo runs a full WordPress directly in the browser without a PHPPHPThe web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher server! While it isn’t fully stable yet, it is a major breakthrough that could transform learning, contributing, and using WordPress. This post explores the opportunities and explains in detail how it works.
Your help is needed to realize the vision laid out below. None of the presented mockups and early explorations are currently reliably implemented. This project needs volunteers to stabilize the code and build revolutionary tools on top of it. If you’d like to be a part of it, please say so in the comments!
Learning WordPress in the browser
The code examples in the WordPress handbook could become runeditable, like in this early preview:
Furthermore, an in-browser IDEIDEIntegrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality. could lead new contributors through solving their first “Good first issue” without setting up a local development environment. Just like this early preview:
Finally, a guided code editor could become a primary teaching tool for new developers. They would click a “Build your first 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.” button on 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/ and immediately start coding. This is what it could look like:
WordPress Developer tools
Testing code on different WordPress, PHP, and 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/ versions currently require a tedious setup. With an in-browser WordPress IDE, it wouldn’t require any setup at all. As a developer, you would switch between the different versions by selecting different entries in a box:
Taking it further, the continuous integration pipeline could replay the failed tests right in the browser and provide a code editor to debug and fix the problem on the spot:
On a different note, the desktop and mobile apps could reuse WordPress code by running an actual WordPress instance – even when offline.
Finally, WordPress could potentially be scaled up by spinning up many tiny self-contained WASM instances directly on the edge servers.
Showcasing
Embedding a demo of your 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, pattern, or theme directly on the website makes another great use case. One such demo lives on wpreadme.com, an in-browser WordPress readme.txt editor. Here’s what the plugin directory could look like:
Today, a WordPress server is required, and ideally, one WordPress per user to always present the same initial state.
The in-browser WordPress enables one private WordPress per user with no marginal server cost. Everyone can start logged-in as an adminadmin(and super admin) with no security risks.
Furthermore, importing an existing WordPress website into WASM runtime would create a staging website. Users could try themes and plugins on a copy of their site without affecting the live sites. Then, once the staging website looks good, they’d click a button and publish the changes.
How else would you use the in-browser WordPress? Please share your ideas in the comments so more use cases can be considered in the future.
A service worker traps HTTPHTTPHTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. requests and re-routes them to WordPress.
Firstly, PHP is compiled using an adjusted recipe from the php-wasm repo. It’s powered by Emscripten, a drop-in replacement for the C compiler. Unfortunately, MySQLMySQLMySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. currently cannot run as WASM. However, SQLite can, and WordPress supports SQLite via the wp-db-sqlite plugin.
Emscripten compilation yields two files: webworker-php.wasm, which is the assembly, and webworker-php.js, which downloads the assembly file, creates a virtual heap, and exposes named native functions conveniently wrapped to accept and return JavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. data types.
You need to load the webworker-php.js in a webworker and add a tiny wrapper class:
WebAssembly PHP runtime has its own filesystem and WordPress is shoehorned into it as a data bundle.
First, a fresh WordPress distribution is downloaded and patched with the wp-db-sqlite plugin. It’s about 66MB large, but an optimization pipeline makes that 46MB by minifying the PHP files and removing non-essential static assets. Getting down to just 12MB is possible, but it’s not easy.
Second, the WordPress installation process kicks in. A script serves our WordPress via the built-in PHP server and sends a special curl request to /wp-admin/install.php?step=2. Unfortunately, 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/ is hard-wired to MySQL and not a good match here.
Lastly, Emscripten’s file_packager turns our WordPress copy into a data file named wp.data and a JavaScript loader named wp.js. Loading both the PHP runtime from webworker-php.js and the WordPress data bundle from wp.js allows you to run <?php require “wordpress/index.php”; right in the browser!
A service worker reroutes the HTTP to WordPress
WordPress reads request information from $_SERVER, $_GET, $_COOKIE and so on. Normally these variables are populated by ApacheApacheApache is the most widely used web server software. Developed and maintained by Apache Software Foundation. Apache is an Open Source software available for free., NginxNGINXNGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers. https://www.nginx.com/., or another web server. However, in this case, there isn’t one.
That takes care of the request, but capturing the complete HTTP response is still necessary. The PHP outputs information in only two ways: stdout and stderr. The response body comes out via stdout, but the HTTP status code and headers don’t. They need to be manually streamed to stderr where the JavaScript app can capture them:
The actual code is much more involved, but it’s based on the same idea.
Node.js is supported, too
Running WordPress in different JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. runtimes is a matter of connecting these major building blocks with runtime-specific plumbing. Today there is an in-browser version and a node.js version. Here’s how they differ:
A web worker loads PHP WebAssembly, downloads WordPress, mounts it in PHP’s in-memory filesystem, and registers. Webworker is needed to avoid freezing the UIUIUser interface while handling requests.
A service worker traps the browser’s HTTP requests and re-routes the .php ones to the web worker.
WordPress is rendered 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. by a minimal index.htmlHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. once both workers are loaded.
It could do the same for WordPress docs; see this early preview.
Stackblitz doesn’t need a specialized backend. It runs Node.js, npm, and webpack right in the browser via WebAssembly. Other than hosting and delivering a few megabytes of data, Stackblitz has no marginal costs. This idea is called Web Containers.
Learning WordPress and writing code used to be separated. Now they can be one and the same. From runnable code snippets to new, svelte-like docs formats, WebContainers + WebAssembly WordPress is an educational game-changer.
However, a Node.js WordPress server on Stackblitz is sluggish
Rendering a single wp-admin page takes a second locally but up to 40 seconds on Stackblitz. That’s much longer than most developers are willing to wait. Here’s why that happens:
A local Node.js WordPress server works like this:
WordPress runs on WebAssembly PHP
WebAssembly PHP runs on a native Node.js
However, a Stackblitz Node.js WordPress server has an extra layer:
WordPress runs on WebAssembly PHP
WebAssembly PHP runs on WebAssembly Node.js
WebAssembly Node.js runs on a native Chrome
It’s like a box in a box: A WebAssembly runtime in Chrome runs Node.js that has its own WebAssembly runtime. WordPress runs on the latter, not on the former, and that indirection causes a massive slowdown.
Luckily, the browser can run WebAssembly natively without an intermediate Node.js layer.
It is much faster! Unfortunately, the speed comes at the expense of simplicity.
Stackblitz requires a service worker just like the in-browser WASM WordPress. However, you can only have one per domain. Therefore, the WordPress files in this example are hosted on a Netlify domain.
Then, the Stackblitz files can’t be directly mounted into the in-browser PHP filesystem. The changes need to be synchronized manually. In this example, a node.js file watcher notifies the PHP webworker about the updates via WebSockets and onmessage/postMessage. There are bugs, but all are fixable.
Known issues
WASM WordPress issues:
The in-browser WordPress builds sometimes crash the Chrome tab, see the GitHub issue. Firefox, Safari, and node.js are much more stable.
Stackblitz integration issues:
The in-browser Stackblitz setup doesn’t watch subdirectories.
WordPress exceeds Stackblitz size limits unless imported as a node_module.
Stackblitz corrupts a predefined binary .sqlite database file. A base64-encoded version is shipped instead.
Stackblitz doesn’t pass a server-side set-cookie headerHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. to the browser. That’s 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.. Workaround: the express.js server handles the cookies internally.
Next steps
Your help is needed to fully realize the vision laid above. None of the presented mockups and early explorations is currently reliably implemented. This project needs contributors to stabilize the code and build revolutionary tools on top of it – see the issues list on GitHub. If you’d like to be a part of it, please say so in the comments!
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/ 14.1 RCrelease candidateOne of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta).
This is the last release that goes with WordPress 6.1.
WordPress 6.1
Things are going well for us to have a smooth release, on the day before the chat there was a demo of what is going to be included, and we had the chance to see multiple things from the editor side, e.g., template edit, content locking, etc. It is going to be a huge release
There are still some backports in progress and any help is welcome.
Write the dev notesdev noteEach important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.
Some component 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./code improvements e.g: gradients and colors.
You must be logged in to post a comment.