Editor chat summary: Wednesday, 11 January 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, on Wednesday, January 11, 2023, 14:00 UTC.

General Updates

  • Gutenberg 14.9.1 has been released
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 15.0 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). will be released today

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

@mamaduka would like some eyes on Global Styles: Don’t remove Custom CSS for users with the correct caps because the tests pass locally but not on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.

@andraganescu has been working on various items related to Navigation List View: Introduce navigation editable tree view in the inspector controls

Open Floor

@ribaricplusplus wanted to highlight his PR for Global Styles: Save and Delete functionality for user variations to @joen ‘s issue

@hellofromtonya mentioned that Webfonts APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. architecture should be unblocked by Monday Jan 16th for giving courtesy time this week for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Committers to weigh in on the API renaming from “Webfonts” to “Fonts”.

@fabiankaegy brought up @wordpress/eslint-plugin package does not support node.js 18 and will also ask in the core-js how to go about updating node support

@luehrsen raised awarness on a ticketticket Created for both bug reports and feature development on the bug tracker. Drop “local($font_family)” CSS while registering font-family in webfonts_handler and got feedback from @hellofromtonya

@bph invited people to check out the developer blog and called for contributors to topics open for publishing

If you are interested in contributing to the WordPress Developer Blogblog (versus network, site) check out How to contribute and the Tips and Guidelines for Writers.

@hellofromtonya asked that if there is a bugfix, feature, or enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. ready to backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. to Core, please open a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticket for it and create a PR. Instead of waiting until before Feature Freeze.

@paaljoachim opened a discussion to be had around the meeting time. Should we move it 1h later?

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.

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

Editor chat summary: Wednesday, 4 January 2023

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, on Wednesday, January 04, 2023, 14:00 UTC.

General Updates

Async key project updates

Read the latest updates directly from the following tracking issues:

@ntsekouras Updates on Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.

  • Fetch terms suggestions dynamically
  • Connect scoped block variation to inserter variations
  • Moving color block support to the Post Template blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

Task Coordination

@poena

@hellofromtonya Update on the WebFonts API

  • Status: Blocked by architectural work. (Dec 12/19)
  • Done:  The major architectural redesign (See #41481) is now merged. The new architecture is a code rewrite which has breaking changes. Some high-level details:
    • Changes data structures and publicly exposed functions/methods.
    • Includes a temporary backwards-compatible (BC) layer that throws deprecation notices to alert developers of where they need to modify their code to use the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.This BC layer will not be backported to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Next:  There are 2 more architectural tasks that need to be completed to unblock the remaining bugs, performance, and feature work can continue.

@annezazu
Latest Phase 2 work update As expected, a number of PRs are now stalled due to folks taking time off. This is a wonderful and expected pause in the work! Some brief things to note:

@carlosgprim Update from the mobile team
Recently fixed/improved

Open Floor

@wildworks
[New Block] Add post time to read block #43403 I believe the code base is almost complete, but I would like your advice on ideas for moving forward with this PR or if it is releasable.”

@bph

The  WordPress 6.2 Planning Schedule Proposal is out and there are open slots on the release squad.

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

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

Editor chat summary: Wednesday, December 14, 2022

This post summarizes the weekly editor chat meeting on Wednesday, 14 December 2022, 14:00 UTC, held in Slack.

General Announcements.

We started the chat by announcing that the state of the Word was on December 15.

We announced there is going to be a holiday break on coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor chats. The chats return on 4th January 2023.

@welcher was going to start the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 14.8.0 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). right after the chat.

There is an open retrospective about the WordPress 6.1 release process. Feedback is welcome!

Key project updates.

Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..

The off-canvas navigation editor experiment is ready for testing.

Components Team.

The property __experimentalHasMultipleOrigins will be removed from colors and gradient-related components, making them easier to use.

Site Editor and templates.

Work is going on to allow the user to choose between starting blank or using the current fallback when creating a new template. Soon when patterns can specify a template they fit into ( by merging https://github.com/WordPress/gutenberg/pull/45814), patterns will also appear as possible start points.

Task coordination.

@jorgefilipecosta

His main focus will be landing the navigation sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. on browse mode. Also wants to polish some PR’s in progress and wants to fix a serious regressionregression A 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. currently in the trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. where editing as blocks for content-locked blocks is not working.

@mikachan

Has two PRs needing reviews:

Meanwhile, they were approved and merged.

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

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

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


Table of Contents

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

Add a Variation Picker to the Group BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Placeholder

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

Add List-Based Editing to Navigation Block

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

Note: This is still experimental and needs to be enabled on the Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 + 16 keyboard shortcut.

Update the Design of the Focal Point Handle

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

Fluid typography: Adjust font size min and max rules

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

Define a Minimum Height

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

Generate New Color 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.

Changelog

Enhancements

Block Library

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

Components

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

Block Editor

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

Site Editor

  • Replace FSE with Site Editor. (45699)

Design Tools

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

Global Styles

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

Plugin

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

Patterns

  • Pattern Directory APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.: Add support for pagination parameters. (45293)
  • Update bundled patterns compat directory. (45620)

Bug Fixes

Block Library

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

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

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

Components

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

CSS & Styling

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

Post Editor

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

Site Editor

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

Block Editor

  • Fix Link UI popover positioning when inspector control input is focused. (45661)
  • Paste: Fix list only paste from Google documentation. (45498)
  • Make Manage Reusable blocks match similar links. (45641)(45689)
  • List View: Disable branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". expansion when block editing is locked. (45541)
  • Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. (45739)

Experiments

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

Documentation

  • Add missing CHANGELOG entry. (45691)
  • Change Title: How to use JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. with Gutenberg. (45323)
  • Docs: Update the readme for the integration test fixtures. (45581)
  • Summarize “Available commands” section and refer them it to scripts documentation. (45636)
  • Update applying-styles-with-stylesheets.md. (45604)
  • [create-block] Reorganized sections to provide a better learning experience of this package. (45676)
  • Change “block style variations” references to “block style”. (45650)

Performance

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

Code Quality

Block Editor

  • Block Editor: Improve LinkControl tests. (45609)
  • Block Editor: Improve ResponsiveBlockControl tests. (45610)
  • Block Editor: Improve ReusableBlocksTab tests. (45652)
  • LinkControl: Suppress errors on null values. (45742)
  • Simplify ResizableEditor component. (45578)
  • Remove duplicate colon. (45763)
  • Extract the manage menus button to a shared component to reduce duplicate code. (45769)
  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. pseudo selector comments from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (45619)
  • unstableSubscribeStore: Support store descriptors. (45481)

Components

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

Block Library

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

Tools

Testing

  • Components: Add exhaustive-deps eslint rule. (41166)
  • Fix typos in Paragraph block end-to-end tests. (45611)
  • FontSizePicker: Fix a buggy unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (45529)
  • Ignore warnings for window.wp in Playwright. (45598)
  • Migrate mentions tests to playwright. (43064)
  • Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. (45726)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native unit tests: Migrate getByA11yLabel usages. (45454)
  • Unit Tests: Rewrite ReactDOM.render usages to RTL. (45453)
  • E2E: Add site and widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor supports for ensureSidebarOpened. (45480)

Build Tooling

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

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

  • Configure labels for GHA Dependabot PRs. (45516)

Performance Benchmark

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

Post Editor

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

Site Editor

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

First Time Contributors

The following PRs were merged by first time contributors:

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

Contributors

The following contributors merged PRs in this release:

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

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

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

Editor chat summary: Wednesday, 9 November 2022

This post summarizes the latest weekly Editor meeting (agenda, slack transcript), held in the #core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel, on Wednesday, November 09, 2022, 14:00 UTC.

General Updates

  • WordPress 6.2 Development Cycle.
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 14.5 has been released and is available for download!

Async key project updates

Read the latest updates directly from the following tracking issues:

Task Coordination

@andraganescu

@mamaduka

Open Floor

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

Note: Anyone reading this summary outside of the meeting, please drop a comment in the post summary, if you can/want to help with something.

Read complete transcript

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

Editor chat summary: Wednesday, 20 October 2022

This post summarizes the weekly editor chat meeting on Wednesday, 20 October 2022, 14:00 UTC held in Slack.

WordPress & GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases

WordPress 6.1

WordPress 6.1 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). was released yesterday from the editor side things are going smoothly.

WordPress 6.0.3 & Gutenberg PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 14.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 coreCore Core 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 UIUI User 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.

WordPress 6.2

@annezazu shared the following on the agenda:

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!

@jorgefilipecosta added:

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 a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team

@annezazu shared this topic on the agenda:

Wanted to call out a great collaboration between the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

@alexstine said the following on the agenda:

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?

@jorgefilipecosta and @ndiego shared feedback/insights on the pull request.

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

Simplified data access with new React hooks in WordPress 6.1

The @wordpress/core-data JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. package in 6.1 ships new ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hooksHooks In 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 HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. query to pass to the requested APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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?

Documentation: @wordpress/core-data packages

Props for review @bph, @gziolo, and @webcommsat

#6-1, #wordpress-data, #dev-notes, #dev-notes-6-1, #editor

Roster of design tools per block

For WordPress 6.1, there was a concerted effort to add design tools consistently to blocks, via blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. support and make them available via Inspector Controls and for themes in theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file.

In this post, you will find a roster for quick reference showing which block has which controls.

If you need a list of blocks for each control displayed separately, visit the post Core Editor Improvement: Catalyst for creativity and control.

BlockTypographyColorDimensionBorderLayoutDuotone
Archives
Audio
AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
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
HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.
Image
Latest Comments#43310
Latest Posts
List
List Item#43312
Login/logout
Media & Text
More (Read More)
Navigation
Navigation Link
Navigation Submenu
Next Page (Page Break)
Page List#43316
Paragraph
Post Author
Post Author Biography
Post Author Name
Post Comments Count
Post Comments Form
Post Comments Link
Post Content
Post Date
Post ExcerptExcerpt An 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 image A 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.
Post Navigation Link
Post Template
Post Terms
Post Title
Preformatted✅ no link
Pullquote
Query
Query No Results
Query Pagination
Query Pagination Next
Query Pagination Numbers
Query Pagination Previous
Query Title
Quote
Read More
RSS
Search
Separator
Site Logo
Site Tagline
Site Title
Social Link
Social Links
Spacer
Table
Tag Cloud#43452
Term Description
Verse
Video

Legend: ⏳ Adoption of block supports is pending block refactoring e.g. Caption inner blocks

Props to @aaronrobertshaw for prep work on a similar table in #43242 , @annezazu and @webcommsat for review.

#6-1, #dev-notes, #dev-notes-6-1, #editor

Miscellaneous editor changes for WordPress 6.1

This dev notedev note Each 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor for WordPress 6.1.

Updated 10/14 (@bph)

  • 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element they need, but in doing so, introduce an a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issue.

With this update in WordPress 6.1, developer can add ARIA labels in their templates and blocks.

Example Code.

<!-- wp:group {"tagName":"aside","layout":{"inherit":true}} -->
<aside aria-label="first aside" class="wp-block-group"><!-- wp:paragraph -->
<p>Aside 1</p>
<!-- /wp:paragraph --></aside>
<!-- /wp:group -->

<!-- wp:group {"tagName":"aside","layout":{"inherit":true}} -->
<aside aria-label="second aside" class="wp-block-group"><!-- wp:paragraph -->
<p>Aside 2</p>
<!-- /wp:paragraph --></aside>
<!-- /wp:group -->

Start content patterns for all post types

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:

register_block_pattern( 'custom-pattern', array(
			'title'      => _x( 'Start post pattern', 'Block pattern title', 'gutenberg' ),
			'blockTypes' => array( 'core/paragraph', 'core/post-content' ),
			'postTypes' = array( 'product' ),
			'content'    => '<!-- wp:paragraph -->
<p>A start post pattern</p>
<!-- /wp:paragraph -->',
		) );

Props to @jorgefilipecosta for writing the dev note.

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.

Details on PR #41605 / Documentation: Placeholder component

A set of Placeholder Component illustration examples

Props to @andraganescu for dev note

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.

A skeletonized filter example follows.

add_filter(
	'block_core_navigation_render_inner_blocks',
	function( $inner_blocks ) {
		$menu_item = [
			'blockName'    => 'core/navigation-link',
			'attrs'        => [],
			'innerBlocks'  => [],
			'innerHTML'    => '',
			'innerContent' => [],
		];
    	$inner_blocks->offsetSet( null, $menu_item );

	return $inner_blocks;
	}
);

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.

Current:

<div class="wp-duotone-xxxxxx-xxxxxx-x wp-block-cover has-parallax" style="background-image:url(http://example.com/wp-content/uploads/2022/10/cover.jpg)">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
	<div class="wp-block-cover__inner-container">
		<p>Inner Contents</pss=>
	</div>
</div>

New:

<div class="wp-duotone-xxxxxx-xxxxxx-x wp-block-cover has-parallax">
	<span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span>
	<div role="img" class="wp-block-cover__image-background wp-image-xx has-parallax" style="background-image:url(http://example.com/wp-content/uploads/2022/09/cover.jpg)"></div>
	<div class="wp-block-cover__inner-container">
		<p>Inner Contents</p>
	</div>
</div>

For more information visit #40554.

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.

For more information visit #43663.

Props to @wildworks for the code contribution and dev note.

Moving block CSSCSS Cascading Style Sheets. to JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.

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:

"__experimentalStyle": {
	"typography": {
		"fontSize": "1.5em",
		"lineHeight": "1.6"
	}
}

This will output the following CSS in the frontend:

.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}

Resources

Props for the dev note to @scruffian, for reviews to @bph and @webcommsat

Starting from WordPress 6.1, the Social Links block will automatically prepend emails with the mailto: if the protocol is missing.

For more information, visit #42186.

Example:

<!-- wp:social-links -->
<ul class="wp-block-social-links">
<!-- wp:social-link {"url":"editor@example.com","service":"mail"} /-->

<!-- wp:social-link {"url":"mailto:editor@example.com","service":"mail"} /--></ul>
<!-- /wp:social-links -->

Props to @mamaduka for the dev note.

Deprecated APIs and Components

BlockColorsStyleSelector

WordPress 6.1 will deprecate the BlockColorsStyleSelector block editor component. Instead, use Supports APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to signal that the block supports color-related properties. Visit pull request #40502.

Props to @mamaduka for the dev note.

Blocks: “children” and “node” attribute sources for RichText deprecated

These have been unofficially deprecated for 4 years now, there hasn’t been an official deprecation warning in the console.log.

If you are still using “children” or “node” sources in the block attribute definition, like in this example

content: {
 	type: 'array',
 	source: 'children',
 	selector: 'p',
 }

Use the HTML source instead to remove the deprecation warning:

content: {
 	type: 'string',
 	source: 'html',
 	selector: 'p',
 }

That’s it! Check the section Introducing Attributes and Editable Fields for more information.

Props to @ellatrix for the dev note.

Props to @webcommsat for review of this post.

#6-1, #dev-notes, #dev-notes-6-1, #editor

Block styles generation (Style Engine)

A new APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways., known as the “Style Engine”, has been shipped in WordPress 6.1 to provide a single, centralized agent responsible for generating and rendering consistent blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 CSSCSS Cascading Style Sheets. and class names were compiled and/or enqueued, both in JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. and PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 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 HTMLHTML HyperText 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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). The amount of unique style tags for a single page were potentially without limit.

<style>.wp-block-columns.wp-container-1 { flex-wrap: nowrap; }</style>
<style>.wp-block-columns.wp-container-2 { flex-wrap: nowrap; }</style>
<style>.wp-block-columns.wp-container-3 { flex-wrap: nowrap; }</style>

As of 6.1, layout CSS rules with matching CSS definitions are combined in a single HTML style tag:

<style>.wp-block-columns.wp-container-1, .wp-block-columns.wp-container-2, .wp-block-columns.wp-container-3 { flex-wrap: nowrap; }</style>

Public Functions (API)

The following is a general overview of the public functions introduced in 6.1.

Please refer to the API documentation: @wordpress/style-engine for detailed information and example usage.

wp_style_engine_get_styles()

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.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.. Through it, one can store CSS for later retrieval and eventual enqueuing on the frontend.

wp_style_engine_get_stylesheet_from_css_rules()

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.

wp_style_engine_get_stylesheet_from_context()

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. 

compileCSS()

Compiles and returns a CSS stylesheet for a given style object and selector. 

getCSSRules()

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:

$block_styles = array(
     'spacing'    => array(
        'padding' => '10px',
        'margin'  => array(
            'top' => '1em'
            ),
        ),
     'typography' => array(
        'fontSize' => '2.2rem'
    ),
);

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.

$styles = wp_style_engine_get_styles(
    $block_styles,
    'options' => array( 'context' => 'block-supports' ),
);

/* 
    $styles is equal to:
    array(
       'css'          => 'padding:10px;margin-top:1em;font-size:2.2rem',
       'declarations' => array( 'padding' => '10px', 'margin-top' => '1em', 'font-size' => '2.2rem' )
    )
*/

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:

function enqueue_my_block_supports_styles() {
    $block_supports_stylesheet = wp_style_engine_get_stylesheet_from_context( 'block-supports' );

    if ( ! empty( $block_supports_stylesheet ) ) {
       wp_register_style( 'my-block-supports-stylesheet', false, array(), true, true );
       wp_add_inline_style( 'my-block-supports-stylesheet', $stylesheet );
       wp_enqueue_style( 'my-block-supports-stylesheet' );
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_block_supports_styles' );

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.

$my_styles = array(
   array(
       'selector'     => '.orange',
       'declarations' => array( 'color' => 'orange' )
   ),
   array(
       'selector'     => '.red',
       'declarations' => array( 'color' => 'red' )
   ),
);

$my_stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
   $my_styles,
   array(
       'context' => 'my-styles',
   )
);

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 GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 coreCore Core 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 extensibleExtensible This 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
  • further reducing the footprint of rendered styles

Ongoing development is taking place in WordPress/gutenberg: see the tracking issue and project board.

You can find more context on the history and planned features of the Style Engine on Block editor styles: initiatives and goals.

Further reading

  • Block editor styles: initiatives and goals 
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ tracking issue #38167
  • GitHub project board.
  • API documentation: @wordpress/style-engine

Props: @webcommsat and @bph for review

#6-1, #core-editor, #dev-notes, #dev-notes-6-1, #editor, #gutenberg