Editor Chat Agenda: 2 November 2022

Facilitator and notetaker: @get_dave

This is the agenda for the weekly editor chat scheduled for Wednesday, November 2 2022, 04:00 PM GMT+1. This meeting is held in the #core-editor channel in the Making WordPress 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/..

WordPress 6.1 “Misha” was released 1st of November.
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 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). should be released 2nd of November.

Key project updates:

Task Coordination.

Open Floor – extended edition.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: Wednesday, October 26 2022

This post summarizes the weekly editor chat meeting on Wednesday, 26 October 2022, 04:00 PM GMT+2 held in 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/.. You can view the full transcript here.

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

At the time of the meeting the 3rd release candidate was published and available for testing. There since have been two more release candidates.

For anyone that is interested and hasn’t seen it yet here is the Field Guide for 6.1.

Gutenberg 14.4

Gutenberg 14.4 was released by @juanmaguitar. The “What’s new in Gutenberg 14.4” release post has since also been published.

Key project updates

Task Coordination

@colorful-tones is planning to work on some designs and help triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. tickets related to the search 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.. You can follow the progress in the Tracking issue: Expand Search block customization.

@get_dave shared the priorities list for the Navigation Block in WordPress 6.2. Contributors have posted some revised designs for new editing experiences which we are proposing as a focus for the next release(s).

Open Floor

@alexstine shared the ticket to move document information and outline to list view panel. The ticketticket Created for both bug reports and feature development on the bug tracker. could use additional feedback.

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

What’s new in Gutenberg 14.4? (26 October)

“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.


Gutenberg 14.4 has been released and is available for download!

It introduces a distraction-free mode for text-based content creation, it redesigns the main pattern inserter, it continues to improve recent responsive design features such as Fluid Typography and much more!

Fun fact: Johannes Gutenberg invented the printing press in 1440 and this version of Gutenberg is the 14.4.0

Table of Contents

Explore easier navigation and larger previews of patterns in the Inserter

A new design offers a split view between categories and patterns, improving the navigation between categories and providing larger previews for patterns, resulting in improved discoverability and at a glance context.

Enjoy distraction free writing

Gutenberg 14.4 includes a new mode that reduces various parts of the editor interface, allowing for a more focused writing experience. When enabled, the sidebars are closed and toolbars fade away, leaving your content to take center stage. You can toggle this mode on/off as you’d like, depending on what you’re looking for.

Control image captions from 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. toolbar

With this release, you can now add or remove a caption for an image directly from the block toolbar. If a caption has already been set, it will be included by default when the image is added to your content.

Lock the ability to edit the navigation block

The Navigation block offers an additional option when locking to restrict the ability to edit the content on its inner blocks (links and submenus). This helps further curate the experience, especially if you’re taking advantage of the ability to use block template parts in classic themes.

Lock modal open for the navigation block with all options locked, including the ability to edit a block.

Take advantage of improvements to Fluid Typography

In Gutenberg 13.8, Fluid Typography for font size presets was introduced to allow themers to generate fluid font size presets 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.. This release of Gutenberg builds on this work by automatically converting custom font sizes to fluid values when fluid typography is enabled.

Changelog

Enhancements

  • Add prop to disable block selection clearer in BlockList. (44517)
  • Multi-select: Fix 1px indent. (44709)
  • ServerSideRender: Add new skipBlockSupportAttributes prop. (44491)
  • Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. (44597)
  • Try: Add a small radius to the multi selection style. (44708)
  • Rich Text: Use fallback icon for highlight format. (44705)
  • Create Block: Allows custom keys to be generated in block.json files and package.json files. (44649)

Block Library

  • Comments: Add spacing support. (45102)
  • Tag Cloud: Add typography supports (except font size). (43452)
  • Block Locking: Adds content locking to the navigation block. (44739)
  • Image: Add toolbar button to add a caption. (44965)
  • List Item: Adopt typography supports. (43312)

Components

  • BorderBoxControl: Omit unit select when values are mixed. (44592)
  • SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. (44573)

Block Editor

  • Introduce distraction free mode. (41740)
  • Redesign the main pattern inserter. (44028)
  • Inserter: Add a more pronounced hover effect. (44711)

Design Tools

  • SpacingSizesControl: Increase slider’s max value to 300. (44956)
  • Style engine: Permit wp custom CSSCSS Cascading Style Sheets. properties. (43071)
  • Try color theming. (44668)
  • Global Styles: Modify Frame animation of styles grid. (39717)

Bug Fixes

  • Clickable placeholder upload button. (44817)
  • Insertion point showing up unexpectedly. (44702)
  • Overflowing patterns. (44853)
  • Inspector is usable on the top level block even if it is content locked. (44878)
  • Use active variation as the parent block if available. (44609)
  • Placeholder for the navigation link label, to be about the label. (44733)
  • Hide the inbetween inserter consistently as you move the mouse. (44814)
  • Margin visualiser: Apply negative value to margins with calc(). (44718)
  • Placeholder: Fix hover style. (44701)
  • Post editor: Rename view to Preview. (45074)
  • Prevent empty block toolbars from showing empty slots. (44704)
  • Use inert attribute instead of useDisabled. (44865)
  • cleanForSlug: Replace multiple hyphens with a single one. (44873)
  • Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. (44998)
  • Most used tags: Try fixing label. (44859)
  • Only include theme.css if the theme declares support for wp-block-styles. (44640)
  • Merge inner blocks if wrappers are equal. (43181)
  • Try nested patterns previews with block editor setting. (44784)
  • Design Tools Adjust the custom range steps to match the units chosen. (44959)
  • Global Styles: Invoke zoomed-out view when selecting a style variation. (44987)

Block Library

  • Avoid querying block templates during installation. (44584)
  • Buttons: Add specificity for the editor. (44731)
  • Embed Block: Add support for Tumblr Dashboard URLs. (44854)
  • Fix list outdents on Enter in quote block. (44809)
  • Fix the cover block focal point picker. (44991)
  • Fix typo for word occurred. (44914)
  • Fix visibility of nested Group block appender. (45050)
  • Fix: Follow discussion settings in the comments block edit. (44463)
  • Group, Row, Stack, Columns. Fix missing border 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.. (44696)
  • List Item: Allow Gutenberg to override coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block type. (44911)
  • List v2: Selection when creating paragraph from empty list item. (44864)
  • Remove anchor support from the navigation block. (44721)
  • Removes __unstableMaxPages attribute from Page List block (and Nav block). (44415)
  • Site Logo: User permission 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. errors. (45104)
  • Site logo: Centered state, for upload button. (44861)
  • Media: Cover block text color heuristic for cross origin media. (44552)
  • Icons: Arrow icons being misaligned. (44666)
  • Patterns: Hide list items from content area of content locked blocks. (44676)
  • Templates 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.: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher warning when getting dynamic template data. (44783)
  • Block Settings: Show move to on nested blocks when only one root block. (44827)
  • Navigation: Fallback to a classic menu if one is available. (44173)

Site Editor

  • Toggle Navigation Menus 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.. (44860)
  • Zoomed out view: Keep list view open when entering mode. (44781)

Block Editor

  • Cover: Fix erroneous focus style in editor. (44707)
  • Native inner blocks merge where appropriate. (45048)

Typography

  • Fluid typography: Convert server-side block support values. (44762)
  • Fluid typography: Covert font size number values to pixels. (44807)
  • Fluid typography: Ensure fontsizes are strings or integers. (44847)
  • Font Size Picker Hint: Fallback to font size slug if name is undefined. (45041)
  • Make custom font sizes appear fluid in the block editor when fluid typography is enabled. (44765)
  • Search block: Ensure font sizes values are converted to fluid in the editor. (44852)
  • Fluid typography: Convert font size inline style attributes to fluid values. (44764)

Components

  • FontSizePicker: Fix headerHeader The 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. order in RTL languages. (44590)
  • Navigator: Restore focus only once per location. (44972)
  • Spacing Sizes Control: Try improving layout spacing. (44858)

Global Styles

  • Ensure style card effect doesn’t cause scrollbars to appear. (44823)
  • Fluid Typography: Fix bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. in global styles where fluid clamp rules were not calculated for custom values. (44761)

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)

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.414.9s78.81ms
Gutenberg 14.315.3s84.59ms
WordPress 6.110.4s38.95ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.41.5s77.73ms
Gutenberg 14.34.7s75.05ms
WordPress 6.17.6s41.51ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @afercia @ajlende @alanjacobmathew @amustaque97 @andrewserong @annezazu @BE-Webdesign @benridane @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @costdev @danielbachhuber @dcalhoun @desrosj @dinhtungdu @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jasmussen @jeremylind @jorgefilipecosta @joshuatf @jrfnl @jsnajdr @kevin940726 @Mamaduka @mikachan @mirka @mtias @noisysocks @ntsekouras @oandregal @ockham @pento @PooSham @ramonjd @ryanwelcher @sabernhardt @SantosGuillamot @scruffian @Soean @t-hamano @talldan @tellthemachines @thelovekesh @tyxla @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @benridane: Fix list outdents on Enter in quote block. (44809)
  • @jeremylind: FIX: Typo in block.json schema default scope values. (44944)
  • @PooSham: Add support for ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 18 and later to jest-preset-default. (44680)
  • @thelovekesh: package(prettier-config): Update documentation. (44620)

Kudos to all the contributors that helped with the release! 👏

Thanks to @priethor and @annezazu for their assistance with the release, and props to @javiarce for the images and videos!

#block-editor, #core-editor, #gutenberg

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

Editor Chat Agenda: October 26th 2022

Facilitator and notetaker: @fabiankaegy.

This is the agenda for the weekly editor chat scheduled for Wednesday, October 26th, 2022, 04:00 PM GMT+2.

This meeting is held in the #core-editor channel in the Making WordPress 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/..

If you cannot attend the meeting, you are encouraged to share anything relevant to the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.
  • If you have anything to propose for the open floor because you can’t make it, please leave a comment below.

#agenda, #core-editor-agenda, #meeting

Editor Chat Agenda: October 19, 2022

Facilitator and notetaker: @jorgefilipecosta

This is the agenda for the weekly editor chat scheduled for Wednesday, 19 October 2022, at 15:00 WESTThis meeting is held in the #core-editor channel in Making WordPress 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/..

General Announcements and Links.

  • 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). 2.
  • WordPress 6.0.3.
  • 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 14.3.1.

Key project updates

WordPress 6.2.

Task Coordination.

Open Floor – extended edition.

If you cannot attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

Editor chat summary: 12 October 2022

This post summarizes the weekly editor chat meeting (agenda here) held on Wednesday, October 12, 2022, 14:00 UTC in Slack. Moderated by @bph.

Announcements and Links

Gutenberg 14.3 was released

Key project updates

Mobile Team update by @siobhan

@ramonopoly shared an update in the comments

  • I’ve added a new tracking issue for Fluid typography and ongoing enhancements.
  • Work on the Style Engine has paused during 6.1. I’ll provide an update on planned iterations for 2022/23 in a future agenda.

Open Floor

 @tellthemachines commented last week:

  • I can’t be present at the chat because of timezones, but would like to bring up the “Key project updates” list in the agenda:
  • Is this approach working? How useful is it for folks?
  • How can we make sure to keep it up to date?

“Keeping it up to date well that can be a bit tricky as there is probably various amounts of work being done in each tracking issue each week.” – @paaljoachim

“It would be helpful if authors of tracking issues could on occasion drop by and give a general update of how a specific issue is coming along” – @paaljoachim


@KubiQ

“hi, i’m just testing WordPress 6.1-RC1-54503, and I still cannot see inner container in 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.” referring to this issue, and that it was supposed to be merged for 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). 1.

@wildworks discovered that it didn’t make it into RC 1, but is slated to be fixed in RC 2


@piermario

“I thought I’d bring up a request from @glorialchemica, which will be a speaker at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Italia 2022 and is preparing a talk about using patterns. She ran into a problem while trying to use patterns on a test site, and wrote a request on this channel, who that got unnoticed so far. Is there anybody who can look into this or direct her to the right channel she can ask about this?

“Sometimes I get the problem when I try to use a pattern or block going from an older site to a new site. now I don’t know which version the pattern directory is running on. So, the next steps I would suggest, file an issue / bugbug A 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. report on 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/ repo. Answer all the questions in the issue template. Then check out when the next metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team meeting is also DM me when it’s posted, so I can take another look and see if I can reproduce” — @bph

“The error should be shown in the browser console, so it might be a good idea to submit an issue with the error message, WordPress version, your theme” — @wildworks


To get more details go directly to the Open Floor discussions in the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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.

Props to @paaljoachim for review

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

What’s new in Gutenberg 14.3? (12 October)

“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.


Gutenberg 14.3 has been released and is available for download!

It continues to build on recent writing flow improvements, refines image 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. creation via drag-n-drop, adds an enhanced tools panel to the Styles interface, and much more!

Table of Contents

Quickly navigate blocks of text

Continuing on from the improvements to writing flow in the last release. Gutenberg 14.3 includes support for alt + arrow keyboard combinations to make navigating blocks of text a breeze.

For example, if your cursor is towards the end of a long paragraph, you can quickly press alt + up arrow to move to the beginning of that paragraph. If you are already at the beginning of a text block, you’ll move to the start of the previous paragraph. Similarly, alt + down arrow will move you to the end of a block of text.

Improved drag and drop for images

As of Gutenberg 14.3, you can now drop an image onto an empty paragraph block to replace it with a new Image block.

Improved tools panels for the Styles typography controls

Building on past releases, Gutenberg 14.3 now brings the Tools Panels to the Styles interface. This makes the Styles interface consistent with the Block Settings interface, but it also makes it more usable by being able to reset values and opens the door to adding hidden-by-default controls, too!

Changelog

Enhancements

Post Editor

  • Optimize legacy post content layout. (44506)
  • Remove right border when sidebars are closed. (44613)

Block Library

  • Comment Pagination Numbers: Add background color. (43902)
  • Navigation Submenu: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • Post Author: Include option to link author archive. (42670)
  • Post Terms: Add spacing support. (43646)
  • 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.: Hide instructions for FormTokenField. (44641)
  • Tag Cloud: Remove strtolower around taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. name. (16112)
  • Video: Update placeholder style. (44215)

Components

  • FontSizePicker: Make control take up full width. (44559)
  • Placeholder: Remove unnecessary background color. (44497)
  • Placeholder: Update placeholder style. (44190)
  • ToggleGroupControl: Fix unselected icon color. (44575)
  • ToolsPanel: Add subheadings and reset text to tools panel menu. (44260)

Block 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.

  • Blocks: Deprecate non-string descriptions. (44455)
  • Tag Processor: Document and test XSS prevention in set_attribute. (44447)
  • Tag Processor: Throw error when supplied with unacceptable attribute names. (44431)
  • Tag Processor: Use (start,length) values for tracking tag name. (44479)
  • Tag processor: Update ‘since’ version tags to 6.2.0. (44432)

Global Styles

  • Hide the done button of the Global Style palette editor when there aren’t colors to edit. (44372)
  • Use ToolsPanel in Global Styles → Typography. (44180)

Block Editor

  • Allow dropping an image on an empty paragraph block to create an image block. (42722)
  • Writing flow: Implement Alt+Arrow. (44081)

Site Editor

  • Allow drag and drop for blocks and patterns in zoom-out mode. (44402)

Block Directory

  • Use ‘tertiary’ in missing block warning. (44368)

New APIs

Block Library

  • WP_HTML_Tag_Processor: Inject dynamic data to block HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (42485)

Bug Fixes

  • Add a correct TS signature for useEntityRecords. (44448)
  • BlockDraggable: Change prop name passed to children when dragging is disabled. (44371)
  • Fix Lint warning/errors in cherry-pick script. (44662)
  • Fix: Content blocks with nested blocks always appear as top level. (44098)
  • Hide the Classic block in the Site Editor. (44554)
  • PHP 8.2: Remove deprecated callable in Style Engine value functions. (44561)
  • Persisted preferences: Fix context property of user metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. configuration. (44489)
  • Resizable editor: Fix height setting bugbug A 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.. (44637)
  • Style engine: Kebab case preset slugs in the editor. (44406)
  • Add submenu block href only if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is not empty. (44337)
  • Update 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. $schema to allow pseudo selectors on button property. (44303)
  • Preserve the generic signature of getEntityRecord and getEntityRecords through currying. (44453)
  • Template editor: Fix crashes due to undefined vars. (44482)
  • Add missing value to CSSCSS Cascading Style Sheets. font-display descriptor in theme.json. (44622)
  • Rich text: Avoid updating partial selection unnecessarily. (44330)
  • useMergeRefs: Don’t call/mutate refs passed if unused. (44629)

Block Library

  • Code Block: Add box-sizing to fix inconsistent layout. (44580)
  • Comment Author: Fix empty links created for the author’s name. (44650)
  • Comments: Support nested comments settings in the comments blocks. (44351)
  • Group: Legacy Group inner block wrapper should work with a constrained layout. (44660)
  • Image: Fix rotated image crop area aspect ratio. (44425)
  • Image: Upgrade reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-easy-crop to bring in fix for site editor iframeiframe iFrame 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.. (44408)
  • Navigation: Fix console error. (44594)
  • Navigation: Fix semitransparent burger icon. (44525)
  • Navigation: Try fixing link color in some TT2 contexts. (44578)
  • Paragraph: Disable drop cap control if text is aligned. (42326)
  • 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.: Fix borders after addition of overlay feature. (44286)
  • Post Featured Image: Fix application of default border style in editor. (44520)
  • Query Loop: Fix condition for displaying ‘parents’ control. (44630)
  • Query Loop: Rename Query Loop variations allowControls to allowedControls. (44523)
  • Quote block: Stop slash inserter popup showing in the citation. (44634)
  • Site Title: Fix link color not being applied in editor #37071. (44333)
  • Template part: Prevent adding block in post editor or inside post template or content blocks. (44480)
  • Video: Don’t display placeholder SVG when Video block selected. (44564)

Global Styles

  • Fix empty color indicator with a custom style. (44364)
  • Re-add styles that were removed for classic themes. (44334)
  • Remove border from Global Styles previews. (44556)
  • Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides. (44141)
  • Style cards: Fix focus style. (44612)
  • Theme.json: Fix some shadow properties not working properly in the site editor. (44569)
  • Use color hex + index as key in the Palette component color indicator. (44344)

Design Tools

  • Fix padding/margin visualizer accuracy. (44485)
  • Fix padding/margin visualizer placement. (44484)
  • Fix spacing property generation in flow layout type. (44446)

Components

  • BorderBoxControl: Ensure the most common unit selection is maintained. (44565)
  • Popover: Fix limitShift logic by adding iframe offset correctly (and a custom shift limiter). (42950)
  • Popover: Refine position-to-placement conversion logic, add tests. (44377)
  • Navigator Screen: Fix bug where focus moved erroneously. (44239)

Block Editor

  • Fix block search for non-Latin characters. (44652)
  • Prevent empty block toolbars from showing empty slots. (44704)

Widgets Editor

  • Add extra guarding against legacy 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. preview errors. (44635)

Themes

  • Theme export: Fix broken spacingScale export. (44555)
  • Theme export: Stop slugs being cast to integers when a theme is exported. (44589)

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)

  • TokenInput field: Try alternative approach to fix screen reader focus issue. (44526)

Patterns

  • Fix patterns drag and drop in Safari. (44366)

Post Editor

  • Add layout styles from Post Content block to post editor. (44258)

Performance

  • Compose: Introduce an in-house throttle() utility, deprecate Lodash version. (44225)
  • Improve Slot/Fill performance. (44642)

Documentation

  • Add documentation for extending the Query Loop block via variations. (44137)
  • Add more details about possible values for block assets in block.json. (44199)
  • Add missing import statement for useBlockProps. (44607)
  • Instruct people to keep using wp-scripts even when extending webpack. (44348)
  • Style engine: Updating and fleshing out documentation. (44405)
  • Style engine: Update readme. (44308)
  • Add callout for experimental packages. (44056)
  • Expand class-level documentation for WP_HTML_Tag_Processor. (44478)
  • Experiments: Add README.md and CHANGELOG.md. (44457)
  • Remove the package name from the sub-menu item for clarity. (44643)

Code Quality

  • Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. (44658)
  • Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. (44323)
  • CS/QA: Various minor fixes. (44551)
  • CS: Always use parentheses when instantiating objects. (44550)
  • CS: Remove redundant parentheses for include/require statements. (44544)
  • CS: Use pre-increment instead of post-increment. (44549)
  • Fix comment typo in document generation tools. (44583)
  • I18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Use consistent string: ‘Link rel’. (20162)
  • PHP 8.2 | Fix deprecated embedded variables in text strings. (44538)
  • PHP 8.2 | Fix for partially supported callback. (44537)
  • PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS.: Use PHPCompatibilityWP. (44542)
  • QA: No control structures with empty body. (44548)
  • Script loader: Remove 6.1 wp actions. (44519)

Components

  • Components refactor Mobile to ignore exhaustive-deps. (44207)
  • Convert FontSizePicker to TypeScript. (44449)
  • FontSizePicker: Replace SCSS with Emotion + components. (44483)
  • RangeControl: Remove unused UseDebouncedHoverInteractionArgs type. (44411)
  • Refactor Notice to pass exhaustive-deps. (44157)
  • Refactor ResizableBox to pass exhaustive-deps. (44370)
  • Refactor Sandbox to pass exhaustive-deps. (44378)
  • Refactor SearchControl native files to ignore exhaustive-deps. (44381)

Block Library

  • Archive Block: Remove unnecessary spaces from class attributes. (44440)
  • Archive: No need to escape class variable. (44468)
  • Gallery: Remove unnecessary caption state. (44383)
  • Remove unnecessary view.js file from navigation-submenu block. (44570)

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

  • CS: All methods must declare visibility. (44543)
  • Move wp_enqueue_block_view_script to experiments. (44414)

Layout

  • 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. code quality changes from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to Gutenberg. (44661)

Parsing

  • Block Serialization Default Parser: Bring back no-more-tokens type. (44459)

Global Styles

  • Add blocks to the list of valid origins for theme.json. (44363)

Lodash

  • Lodash: Remove completely from @wordpress/compose package. (44568)
  • Lodash: Remove completely from @wordpress/library-export-default-webpack-plugin package. (44571)
  • Lodash: Remove completely from @wordpress/list-reusable-blocks package. (44567)
  • Lodash: Refactor away from _.flow(). (44500)
  • Lodash: Remove completely from @wordpress/block-directory package. (44206)
  • Lodash: Remove completely from @wordpress/rich-text package. (44204)

Tools

  • Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • Limit access to experimental APIs to WordPress codebase. (43386)
  • Cherry Pick Script: Restore retrieval of merge_commit_sha. (44890)

Testing

  • Autocomplete Component: Add end-to-end tests (take two). (42905)
  • Fix failing quote to reusable block conversion end-to-end test. (44350)
  • Add strict meta schema validation test for block.json. (44423)
  • Migrate iframed block test to Playwright. (44164)
  • Add theme.json schema tests. (44252)
  • Remove enzyme completely. (44494)
  • Fix typo from in writing flow spec. (44358)
  • Fix typo in WP_Navigation_Page_Test. (44685)
  • Popover: Convert unit tests to TypeScript and modern RTL assertions. (44373)
  • Refactor AlignmentMatrixControl tests to use @testing-library/react. (44670)
  • End-to-end Test Utils: Don’t use hardcoded login credentials. (44331)
  • Refactor PluginPostPublishPanel tests to use RTL render. (44667)
  • Refactor AutosaveMonitor tests to @testing-library/react. (44492)
  • Refactor PostPreviewButton tests to @testing-library/react. (44470)
  • Refactor BlockSwitcher tests to @testing-library/react. (44493)
  • Refactor ResponsiveBlockControl tests to use @testing-library/react. (44669)
  • Style engine: Add JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests for outline properties. (44518)

Build Tooling

  • Upgrade Lerna to the latest version. (44456)
  • wp-env: Use case insensitive regex when checking WP version string. (44887)

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.314.3s79.51ms
Gutenberg 14.212.6s76.31ms
WordPress 6.09.8s41.28ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.310.8s72.89ms
Gutenberg 14.210.3s66.83ms
WordPress 6.07.5s36.81ms

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @ajlende @alecgeatches @andrewserong @anton-vlasenko @BE-Webdesign @BenoitZugmeyer @blindingstars @carolinan @chad1008 @ciampo @derekblank @dmsnell @ellatrix @getdave @glendaviesnz @gziolo @imanish003 @inc2734 @jameskoster @jasmussen @javierarce @jorgefilipecosta @jrfnl @kevin940726 @loxK @Lucisu @luisherranz @Mamaduka @michalczaplinski @ndiego @noisysocks @ntsekouras @oandregal @pagelab @philwp @ramonjd @Rink9 @ryanwelcher @SantosGuillamot @scruffian @Soean @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @vcanales @youknowriad

The following PRs were merged by first time contributors:

  • @alecgeatches: Add theme.json schema tests. (44252)
  • @BenoitZugmeyer: Use get_queried_object_id when setting current-menu-item classes. (44474)
  • @blindingstars: Update Theme JSON $schema to allow pseudo selectors on button property. (44303)
  • @imanish003: Add missing import statement for useBlockProps. (44607)
  • @loxK: Scripts: Use default value for process.env.WP_SRC_DIRECTORY. (44367)
  • @Lucisu: Fix empty links being created for the author’s name comment. (44650)
  • @philwp: Post Author block now includes option to link author archive. (42670)

Kudos to all the contributors that helped with the release! 👏

Props to @talldanwp, @priethor, @getdave, and @gziolo for their assistance with the release, and props to @joen for the images and videos!

#block-editor, #core-editor, #gutenberg

Editor Chat Agenda: October 12, 2022

Facilitator and notetaker: @bph

This is the agenda for the weekly editor chat scheduled for Wednesday, October 12 2022, 2:00 PM UTC. This meeting is held in the #core-editor channel in the Making WordPress 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/..

General Announcements and Links.

  • WordPress 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). 6.1 – schedule for Tuesday Oct 11
  • Field GuideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the WordPress release cycle. The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page. – published also Tuesday Oct 11
  • 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 14.3 to be released Oct 12. (RC is already available)

Key project updates

Task Coordination.

Open Floor – extended edition.

If you cannot attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

Post reviewed by @paaljoachim. Thank you.

#agenda, #core-editor, #core-editor-agenda, #meeting

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