CSS Chat Summary: 22 October 2020

The meeting took place here on Slack. @danfarrow (me!) facilitated, standing in for @notlaura.

Housekeeping

There were no housekeeping items this week.

CSSCSS Cascading Style Sheets. Audit (#49582)

@ryelle reminded us that we have a basic report available on Github. General feedback on the content would be welcome!

@kburgoine posited adding a link to the report to ticketticket Created for both bug reports and feature development on the bug tracker. #26350: !important audit to show some progress on that issue.

@ryelle suggested holding off as the report’s presentation is likely to change soon, and @danfarrow added that, as part of his styling contributions, he’ll be adding in-page links which would allow us to link directly to the !important section of the report.

Color Scheming (#49999)

@ryelle reminded us that she has an environment set up for testing her reduced-colors 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".:

If you’re comfortable setting up a dev environment, you can run this branch; but if you just want to see a demo, you can log into this test site. The username & password are:

username: color-author
password: fPj1ugpm5SMlRR^Evf%zg5)f

(fyi, that’s just an author-level account, and if anything starts getting spammy I’ll reset the password)

There is a dashboard note on the test site showing details of how to contribute.

@ryelle went on to share a Slack post from @helen which clarified an issue which had probably already been lurking at the back of our minds:

Yeah this is unfortunately really hard to judge without (dun dun dun) visual 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. testing…

We had a brief chat about that particular rabbit hole. @kburgoine mentioned being impressed by percy.io‘s githubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ integration, and @danfarrow mentioned recently enjoying backstop.js.

The discussion concluded with two suggestions:

  1. It would be useful at some point to recap the current landscape of visual regression testing in WordPress in order to judge the feasibility
  2. The colors project could perhaps be put on a back-burner for the time being until 5.6 is released in December and we could focus our attentions on the CSS audit

CSS links share + Open floor

@ryelle posted a call for testing Twenty Twenty-One as a good place for CSS folks to help out, with PRs to review and issues up for grabs. The 5.6 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. would also benefit from your attention – get those issues while they’re hot!

@kburoine shared a link to a very entertaining CSS Tricks article from John Rhea who hand-coded daily CSS animations for 60 days on the theme of zombies.

@danfarrow shared a link to the proposed CSS nesting syntax which would make CSS a bit more SASSy.

Finally @danfarrow concluded the meeting by thanking everybody in #core-css for being so welcoming & supportive since he first attended back in June 2020.

Thanks everybody for attending!

#summary

Code review/commit office hours for 5.6

I will be running daily office hours for the rest of the 5.6 cycle in an effort to get more code reviewed and committed. These are to complement scheduled bug scrubs and are specifically meant to focus on reviewing and hopefully committing patches for the release cycle, not triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. or future wishlist items. My hope is that by defining specific hours people who have more structured schedules will be able to carve out that time as needed, and that other committers will be able to plan to join as much as they can.

Here are the hours I have planned, noting that in the cases where they overlap with a scheduled 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. scrub I will just stop early or start late.

  • Monday-Thursday from 16:30 UTC to 18:30 UTC
  • Fridays from 14:30 UTC to 16:00 UTC

Since the time shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. doesn’t seem to manage just times without a date, here is when the next 5 are in your timezone (2 hours long Monday-Thursday, 1.5 hours on Friday):

I recognize that these times may not work very well for certain timezones, as I am but one person, and encourage committers in those time zones to see if there’s an opportunity there to band together and hold additional regularly scheduled code review/commit office hours.

Widgets Screen Not Shipping in 5.6

The Widgets Screen project was pencilled in for 5.6, but as of BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1, work on its major features was not complete, so Release LeadRelease Lead The community member ultimately responsible for the Release. @chanthaboune, CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Tech Lead @helen, Editor Tech Lead @isabel_brison and some of the contributors working actively on the project — @noisysocks, @talldan and @kevin940726 — decided to exclude it from 5.6. Thank you to everyone who tested and gave feedback as it helped inform this decision! 

The Reasoning

Making the Customizer work with the block editor is a challenging process, and one that needs  substantial and thoughtful work to make sure that we deliver the best possible user experience. At the current stage of this project a bulk of that work is done, but more focused testing revealed notable concerns for overall usability (including customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. interactions, some confusions between 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. & legacy widgets, and UXUX User experience disparities between the old and new screens). You can read more in the ticket.

Next Steps

We will continue working on the Widgets screen, and will keep the new screen as the default option when using 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 to encourage more feedback.  At the top of the year, we’ll explore where this fits in the larger roadmap for future releases. For those looking to get involved until then, check out the options below: 

  • It’s been tentatively added to the WP5.7 milestone, with an early 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.) so that it comes up in scrubs as quickly as possible.
  • If you’re interested in following the status of the project, you can find the top priority issues and current focuses on the Widgets Editor project board in GitHub
  • If you can help with development, we encourage you to attend or review the weekly triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions in the #core Slack channel on Wednesdays at 7am UTC.
  • If you can help with testing, please feel free to leave comments on the Call for Testing for us to review or to open issues directly in GitHub. In particular, we’d love to hear from plugin and theme authors. 

Thanks in advance for everyone’s help making sure that this key element is a success!

#5-6, #5-7

CSS Chat Agenda: 22 October 2020

Note: One hour before the meeting this week, @kburgoine will lead the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSSCSS Cascading Style Sheets. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.! Triages are every other week one hour before the weekly chat, at 4pm EDT.

This is the agenda for the upcoming CSS meeting scheduled for Thursday, October 22, at 5:00 PM EDT.

This meeting will be held in the #core-css 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 there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping
  • Updates
  • Open floor + CSS link share

#agenda, #core-css

Twenty Twenty-One: Dark Mode Discussion

Yesterday in #core-themes, we discussed Dark Mode support for Twenty Twenty-One. Dark Mode is a setting in some operating systems and browsers that allows individual users to request a “dark” version of the website they’re browsing.

Dark Mode support was added to Twenty Twenty-One during its development phase, and needs testing and refinement during BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. for it to be successful. Unsurprisingly, it’s a pretty complicated feature to wrap one’s head around. There are a lot of conditionals and remaining questions we need to solve.

Dark/Light Toggle

We’ve built in a CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. setting that lets site owners opt their sites out of supporting Dark Mode, for greater design control. Additionally, we’re considering adding a front-end toggle so site viewers can turn Dark Mode on/off, regardless of their OS/Browser preference. This setting would only show if a site allows Dark Mode support.

The idea of a toggle to turn Dark Mode on and off on the user side has been brought up a number of times in issues. There’s currently a PR to explore how it would work in Twenty Twenty-One. Today’s discussion focused around the intersection of this setting, along with the ability to disable Dark Mode entirely.

Dark Mode support is a good 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) improvement; some folks, for example, enable Dark Mode because they are sensitive to bright lights, or find find dark color schemes less of an eye strain.

We identified five possible scenarios:

Option 1

  • Allow site owners to disable all dark mode support on their site, regardless of what the user has selected in their OS/browser.
  • If enabled, allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Offers the most balanced amount of control for both site owners and site viewers.
  • Cons:
    • Allows site owners to remove an accessibility feature.

Option 2

  • Allow site owners to disable all dark mode support on their site, regardless of what the user has selected in their OS/browser.
  • Don’t allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Less visual clutter on the front-end of the site.
  • Cons:
    • Site viewers who prefer Dark Mode might have situations where they’d prefer to toggle Light Mode, and vice-versa; for example, a change in lighting conditions.

Option 3

  • Don’t allow owners to disable dark mode support.
  • Allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Most amount of flexibility for site viewers.
  • Cons:
    • WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. does not provide a way to control how sites look in Dark Mode. For example, if you have a dark logo, your logo will be hard to see or even invisible in Dark Mode. There’s no way to add a lighter logo for Dark Mode without using custom CSSCSS Cascading Style Sheets.. Transparent images could face similar visibility issues.

Option 4

  • Don’t allow owners to disable dark mode support.
  • Don’t allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Least amount of UIUI User interface.
  • Cons:
    • Least amount of flexibility for site owners.
    • There are situations where site viewers might prefer the inverse of their default color mode.

Option 5

  • Don’t support dark mode in the theme at all.
  • Pros:
    • Easiest for us; we revert and boom, we don’t need to tackle the many situations and edge-cases that will arise during Beta.
    • No potential conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. between what site viewers see, and what the site owner intends.
    • We won’t need to worry about issues like transparent images or dark logos becoming invisible.
    • If a site builder is using Dark Mode, they might not realize their site colors are different for most users than what they themselves are seeing for their site.
    • WordPress itself doesn’t support Dark Mode yet, so we’re not getting ahead of core.
  • Cons:
    • We’re in a unique position to help support and grow a new web/OS feature.
    • We’re also in a unique position to influence best-practice for Dark Mode support within the wider WordPress theme community.

Amongst the folks involved in the discussion, there seemed to be a preference for Option 3, which forced Dark Mode support but allows individual site viewers to toggle it on/off. This late in the game, though, there are also compelling reasons to go with Option 5.

Showing Dark Mode when editing your site

We also talked a little bit about whether or not Dark Mode should be on within wp-adminadmin (and super admin) (specifically, the Customizer and the editor), and whether that front-end toggle should also show within those two admin contexts. This would be useful for site owners who use Dark Mode, so they could easily and quickly toggle it on/off while customizing or creating new content for their site.

Creating a UI control independent of either editor toolbars and 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. boxes within the editor would be a new and unexpected move for a default theme, and would likely create usability and accessibility concerns. Because default themes are used as an example for theme developers, deciding to show the toggle in the editor would require much more discussion from both the default theme team and the Themes team (+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//themes). This would have to be outside of the scope of WordPress 5.6.

@sarahricker also suggested that we only ship a proof-of-concept for Dark Mode in 5.6 without the front-end toggle, and then push for native editing of Dark Mode within core for 5.7:

My suggested approach method might be:

Step 1) Proof of concept > theme switches colors based on user’s device
Step 2) In 5.7 – Core adopts support for editing based on user’s device / toggle in backend
Step 3) In 5.7 – TT1 extends POC to integrate with Core AND provides front end toggle

Once core supports being able to customize the design of your site in Dark Mode, we could add that support in to Twenty Twenty-One. We’d also ship the front-end toggle at this time. However, as @williampatton mentioned, default themes rarely get updated with new features after release because of backwards compatibility concerns.

@ryelle suggested that perhaps Step 2 could be more feedback gathering which we push upstream to core and 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/:

step 2 would be listening to the feedback & issues we’re finding in TT1, and pushing that feedback to core/gutenberg to get more native support there; and theoretically nothing from a 5.7 TT1 would change except maybe a new “add_theme_support”, things would just work nicer because we have core support

A new add_theme_support to enable a Dark Mode editor for core that allows you to preview and make edits to your site’s Dark Mode styles (maybe something similar to the AMP plugin, but using the Full Site Editing framework?) could be great.

There is a PR adding the front-end toggle in GitHub.

Design tweaks to Dark Mode

We didn’t have a chance to discuss this synchronously, but one other topic I’d like us to consider is making minor design tweaks to improve Dark Mode. I have two issues open which I’d love input on, especially from folks who have Dark Mode enabled on their computers:

Are there any other improvements we can make to Dark Mode which will improve the overall accessibility and usability of the feature?


Videos

Dark Mode in Twenty Twenty-One 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.:

Dark Mode front-end toggle in PR #622:

#bundled-theme, #dark-mode, #twenty-twenty-one

Dev Chat Summary – 21 October 2020

This post summarizes this week’s meetings happening on Wednesday, October 21, 2020, 07:00 AM GMT+2 and Wednesday, October 21, 2020, 10:00 PM GMT+2 on the agenda.

0500 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. devchat

0500 Full meeting transcript on 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/.: https://wordpress.slack.com/archives/C02RQBWTW/p1599022834165200

@peterwilsoncc facilitated the meeting and took notes.

2000 core devchat

The meeting was facilitated by @laurora while @thelmachido took notes. Full meeting transcript on slack

Both groups followed this agenda.

First item: celebrating the first beta release of WordPress 5.6 on October 20! Please download the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. version, experiment with it on a test installation (not a live site!) and share any bugs you find or issues that come up.

Announcements

@annezazu announced the Widgets Screen won’t land in 5.6. A Make Core post is coming soon that will discuss where the feature is and what the next steps will be. And though the feature isn’t ready for the current release, it is still on the roadmap, and the team points out they still need feedback on the current work. You can give them that feedback, or share any other thoughts, here or on GitHub.

Highlighted Posts

Introducing Github actions for automated testing.

Please check it out! Your contributions are welcome.

Component Updates

PHP 8 call for testing

@sergeybiryukov highlighted the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 call for testing.

Build/Test Tools

Again, GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions are now running automated tests. See this post and this ticket for more.

@whyisjake is looking at a 5.5.2 release on Tuesday, October 27 or Thursday. October 29. He hopes to run a scrub tomorrow and then put the release docs together over the weekend.

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)

With the Beta 1 released, the team plans to switch gears to accessibility: namely, to review and package the Accessibility Statement feature as a 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. @jonnyvaughan and Alice Williams, who have begun coding the feature, would love some feedback and testing. Interested? Check out this GitHub repo.

Media

@mikeschroder asked for testing on #42663, which landed on October 20. He’s especially interested in your help if you write plugins that use stream wrappers.

He has two priorities:

  1. Make sure existing stream implementations still work.
  2. How hard is it to integrate those implementations with this new one?

Look for a 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 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. from Mike as we get closer to final release. slack

Open Floor

@garrett-eclipse opened #51584 to ask if anyone else had hit the problem. After some discussion, the group concluded it is reproducible but doesn’t appear to be a 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. in WP 5.6 slack

@garrett-eclipse shared that he’s been wondering if WP notices should be active or passive. He has been leaning towards the convention that Google has and was wondering if he can add that to the handbook? @pbiron mentioned that US English spelling is mentioned in the handbook. Follow the conversation here slack.

Next Dev Chat meetings

The next meetings will take place on Wednesday, October 28, 2020, 07:00 AM GMT+2 and Wednesday, October 28, 2020, 10:00 PM GMT+2 in the #core Slack channel. Please feel free to drop in with any updates or questions. If you have items to discuss but cannot make the meeting, please leave a comment on this post so that we can take them into account. 

#5-6, #devchat

What’s new in Gutenberg? (21 October)

9.2 was the final release to make it into 5.6 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.! Featured goodies in this release are:

Support for video subtitles 🎉

Subtitles dropdown on video 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.. Props to @jorgefilipecosta for the screenshot.


Ability to transform multiple selected blocks into a Columns block:

Transforming three images into a three-column columns block.


And background patterns in Cover blocks!

Adding background patterns to a Cover block. props to @retrofox for the gif.

9.2 🇭🇺

Features

  • Add video tracks functionality. (25861)
  • Transform multiple selected blocks to Columns block. (25829)
  • Cover: Add repeated background option. (26001)

Enhancements

  • Add dropdown button to view templates in 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.. (26132)
  • Gallery block: Use image caption as fallback for alt text. (26082)
  • Table block: Use 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. + 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. v2. (26065)
  • Refactor document actions to handle template part titles. (26043)
  • Info panel layout improvement. (26017)
  • Remove non-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks from default editor content. (25844)
  • Add very basic template information dropdown. (25757)
  • Rename "Options" modal to "Preferences". (25683)
  • Add single column functionality to the Columns block. (24065)
  • Add more writing flow options: Reduced UIUI User interface, theme styles, spotlight. (22494)
  • Add option to make 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. a link. (25714)
  • Widgets Screen:
    • Add 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. inspector card component. (26142)
    • Show the legacy widget name in list view. (26138)
    • Add unsaved changes warning to widgets screen. (26081)
    • Display Widget Area’s name and description in the sidebar. (25943)
    • Widgets editor: Add basic options for extensibility. (25758)
    • Disallow multiple instances of reference widgets. (26148)
    • Embed widget type. (26093)
    • Add widget type endpoint. (26042)
    • Make edit-widgets package public. (26016)
    • Uncollapse widget area when block is dragged over. (25992)
    • Add meaningful labels for the Widgets screen ARIA landmarks. (25867)
    • Load custom block assets. (25826)
    • Test for storing raw htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. in widgets. (24886)

New APIs

  • Make block supports server-side explicit. (26192)
  • New hook: UseDebounce for speak function. (25948)
  • Make the custom spacing theme support flag and block support API stable. (25788)
  • Mark the line height support flag as stable. (25769)
  • Mark the font size support flag as stable. (25695)
  • Mark the color support flag as stable. (25694)
  • Add a button to allow resetting the ComboboxControl value. (25692)
  • Block API: Light block edit/save symmetry. (25644)
  • Block API: Stabilize light block hook. (25642)
  • Inner blocks: Try hook approach. (25633)
  • API: Stabilize localAutosave() as autosave( { local: True } ). (20149)

Experiments

  • Query Block:
    • Add Custom Post Types support in Query block. (25903)
    • Set focus on Query block on insertion. (26267)
    • Add loading message to Query block while fetching results. (26199)
    • Add no results placeholder in Query block. (25984)
  • Site Editor:
    • Clear the active menu state when closing the sidebar. (25957)
    • Add missing localization to the templates sidebar. (25897)
    • Mount both wp_template and wp_template_part EntityProviders to avoid remounting. (25870)
    • Navigation templates. (25739)
    • Update Navigation Panel Toggle UI. (25622)
    • Move page switcher to navigation panel. (25620)
    • Add template switcher to navigation panel. (25615)
    • Pass editor features dynamically. (25795)

Bug Fixes

  • Fix for current_parsed_blocks value when block has inner blocks. (26291)
  • Fix updating clientId mapping. (26290)
  • Fix typo in wrapper attributes. (26282)
  • Fix: Keep the ‘Insert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org’ entered value on ImagePlaceholder. (26262)
  • Fix align order in heading block. (26260)
  • Widgets screen: Add a filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. function to registerCoreBlock. (26259)
  • Use ToolbarButtons instead of Buttons in the Legacy Widget block’s toolbar. (26258)
  • Widgets screen: Add "Browse all" option to the inserter. (26256)
  • Fix: Post schedule label showing wrong time if site and user timezones did not match. (26212)
  • Fix Site Title block’s heading levels appearance. (26202)
  • Writing flow: Fix in-between inserter for aligned blocks. (26197)
  • Fix Site Tagline block’s text alignment. (26191)
  • Fix separator and spacer blocks after api v2 refactoring. (26157)
  • Global Styles sidebar (blocks tab): Protect against not registered blocks. (26149)
  • Block templates: Recognize and convert old or derivative block types to their canonical form. (26147)
  • Fix editing Legacy Widgets doesn’t enable "Save" button. (26144)
  • Fix Cover width 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.. (26143)
  • Fix tabbing in widgets not triggering auto-scrolling. (26139)
  • Cover block: Improve overlay opacity handling. (26133)
  • Fix icons type annotation. (26129)
  • FullscreenMode: Remove the is-fullscreen-mode CSSCSS Cascading Style Sheets. class from body on unmount. (26103)
  • Make sure Global Styles CPT includes a theme reference. (26061)
  • Restrict legacy widget block to only being a child of widget area. (26053)
  • Fix/wrong classes search block. (26052)
  • Fix drag and drop in empty widget area. (26051)
  • Fix unit tests by updating cover block fixtures. (26044)
  • Upgrade autoprefixer to fix fit-content in firefox. (26019)
  • Fix widget area title font. (26018)
  • Widgets screen: Fix WP Adminadmin (and super admin) Bar Widgets screen link. (26015)
  • Hide parent selector in widget area. (26011)
  • Document Actions: Fix unexpected label wrapping. (26004)
  • Fix template part theme identifier. (25995)
  • Show all widget areas on widget screen. (25977)
  • Fix block editor example in storybook. (25976)
  • Fix 9:16 aspect ratio styling. (25972)
  • Fix gallery caption not centered in the front-end issue. (25962)
  • Widgets screen: Add save keyboard shortcut. (25944)
  • Widgets screen: Remove default hover background in panel title. (25939)
  • Fix failing previews end-to-end test. (25938)
  • Fix input control drag and box control change. (25933)
  • Fix end-to-end tests related to template parts. (25923)
  • Fix insertion indicator margin. (25893)
  • Fix blue line indicator not showing at the end. (25849)
  • Fix incorrect attribute type specified in Search block. (25813)
  • Document Actions: Fix Block Editor Inserter Overlap with Document Titles. (25801)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 warning in widget utils REST controller. (25797)
  • Include edit-widgets php files in build. (25792)
  • Docs: Fix typo in GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. Workflow. (25779)
  • Widgets screen: Fix widget-area 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). (25732)
  • Widgets screen: Fix insertion point in widget areas. (25727)
  • Document Settings: Fix document title hover and select animations. (25719)
  • Define text color for warning message component. (25713)
  • RichText: Remove native props for web. (25700)
  • Use h3 in the legacy widget title. (25690)
  • Navigation block: Use unbounded query when requesting top level pages. (25689)
  • Document Actions: Fix document title misalignment with an open nav sidebar. (25630)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. error in wordpress/block-editor documentation usage example caused by applying args to setState call. (25492)
  • Cover Block: Show spinner while uploading. (25401)
  • Button block: Reduce chance of style conflicts. (24919)
  • Fix skipped shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. transforms in raw handling. (22840)
  • Media links: Fix linking for images inserted from URL. (22195)
  • Refactor reusable block edit component using hooks (and fix interactions with multiple instances of the same reusable block). (21427)

Performance

  • Paragraph: Avoid selector to improve performance. (26150)
  • Remove transition on block selection indicator. (25974)
  • Widgets screen: Preload request to /sidebars. (25726)

Documentation

  • Bring the block-based theme tutorial up to date. (25830)
  • Add more CI status badges to README. (26090)
  • Getting started: MAMP: Add tip to fix WP-CLIWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/. (26057)
  • Update colors readme with additional definitions. (25954)
  • Document isMultiBlock param for block transforms. (25952)
  • Update CI status badge in README. (25907)
  • Adds missing Curly brace. (25748)
  • Add documentation for colors component. (25567)
  • InspectorAdvancedControls: Add README.md. (25566)
  • Add documentation for useResizeCanvas. (25558)
  • Add/block navigation component readme. (24882)
  • Update Block Based Themes Documentation. (25710)

Code Quality

  • Pass all extra attributes down in get_block_wrapper_attributes. (26280)
  • Editor: Refactor PostFormatPanel to use React hooks. (26273)
  • BlockListBlock: Reduce passed props. (26251)
  • Editor: Refactor PostFormat to use React hooks. (26238)
  • Latest posts: Use hooks + API v2. (26122)
  • Latest comments: API v2. (26113)
  • Categories block: Use API v2. (26112)
  • Rename ReusableBlocksButtons to ReusableBlocksMenuItems. (26099)
  • Reusable block: Use API v2. (26091)
  • Gallery block: Use hooks. (26088)
  • Pullquote block: Use hooks + API v2. (26068)
  • Components: Start adding types progressively. (26066)
  • File block: Use hooks + API v2. (26063)
  • HTML block: Use hooks and API v2. (26055)
  • Update all blocks to API v2. (26054)
  • editor: Remove two unused registry controls. (26048)
  • Tweak styles of the document actions area. (26038)
  • Site Editor: Navigation panel replace hardcoded menu strings with constants. (26026)
  • Move left sidebar state to redux. (26003)
  • Refactor Categories to function component. (25806)
  • Classic block: Use hooks. (25737)
  • Remove animation from mover buttons. (25728)
  • Move widget-area to edit-widgets. (25673)
  • InnerBlocks: Add select dependencies. (25672)
  • Refactor Buttons block native edit component to use hooks. (25636)
  • Data: Build the basic data controls into every store. (25362)
  • Block Editor: Use optional chaining and nullish coalescing instead of Lodash.get. (23632)
  • Refactor Latest Comments block to use function component. (23557)
  • WordCount: Add types. (22077)

Security

  • PostCSS Plugins Preset: Update vulnerable dependency. (26140)

Breaking Change

  • Add separate widgets endpoint. (25958)

Various

  • Stabilize batching endpoint as v1. (26295)
  • Make batch opt-in more expressive. (26292)
  • Remove experimental sidebars endpoint shim. (26288)
  • Warn about using core/batch-processing store. (26287)
  • Remove WP_REST_Widget_Utils_Controller class. (26274)
  • Minor iterations to grouping for preferences panel. (26198)
  • Allow transform to Columns from a single block. (26185)
  • Use batch processing in edit-widgets package. (26164)
  • Minor updates to wordpress/edit-widgets for easier Core integration. (26136)
  • TextareaControl: Use CSS-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.. (26131)
  • Add template lock attribute to column and group. (26128)
  • Reusable blocks support for widgets editor. (26097)
  • Bump @actions/core from 1.0.0 to 1.2.6. (26087)
  • First pass at using the new sidebars and widget endpoints. (26086)
  • Don’t rely on the exact count of registered widgets. (26085)
  • Try: Make class and style tests less brittle. (26079)
  • Components: Remove size prop from Dashicon. (26067)
  • Adjust media-text attributes to default stacked on mobile to true. (26041)
  • Support batch requests in data layer. (26024)
  • Fallback for dropcap when experimentalFeatures is not present. (25979)
  • Social Links: Update Placeholder experience when first inserting Social Links. (25941)
  • Check that get_current_screen is callable. (25935)
  • Social Link: Rename mail to email. (25924)
  • Autocomplete: Use hooks. (25922)
  • Skip broken template-part end-to-end test until it can be fixed. (25918)
  • Heading block: Add wide and full width options. (25917)
  • Social Links: Avoid conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with themes ul text-indent. (25916)
  • Site editor: Store navigation panel’s active menu state in the store. (25906)
  • Version bump to 9.1.1. (25904)
  • Export and document LinkControl’s building blocks. (25901)
  • Prevent networknetwork (versus site, blog) requests related to ephemeral posts in the widgets editor. (25899)
  • FSE Navigation Sidebar: Move navigation sidebar in DOM hierarchy. (25884)
  • Template part selection component – fix keyboard controls. (25881)
  • FSE Document actions – wrap with heading. (25874)
  • Extract wordpress/reusable-blocks from wordpress/editor. (25859)
  • Unify help description text styling. (25852)
  • BaseControl: Use CSS-in-JS. (25842)
  • Iterations on options modal. (25837)
  • BlockSelectionClearer: Use hooks. (25824)
  • Update pull request documentation URLs. (25815)
  • Add a dark mode to the post title. (25796)
  • Automatically generate required preset classes. (25768)
  • Ensure focus of input when InputControl spinner arrows are pressed. (25753)
  • External Link: Use CSS-in-JS. (25751)
  • Update improve backward compatibility for deprecated settings. (25738)
  • Initialize the state before rendering widgets editor. (25736)
  • Add color palette edit functionality to global styles. (25711)
  • UnitControl: Enable keyboard access (via tab) to unit select by default. (25704)
  • Add EditorStyles CSS to the widgets editor. (25699)
  • Display before_widget/after_widget when rendering WP_Widget_Block. (25693)
  • Remove the right margin for the right-most list items in the lastest posts block. (25688)
  • Update and move some Query filters. (25674)
  • Remove duplicate key from tsconfig.base.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.. (25664)
  • Try adding a ‘spotlight mode’ type effect when template part or child is selected. (25656)
  • Gallery: Add labels to img, figure and figcaption elements for accessibility. (25560)
  • Navigation component: Add back button click handler. (25556)
  • Hide the quick side inserter when the user is typing. (25548)
  • Add border to block "Edit as HTML" style. (25539)
  • Show PostFeaturedImage in editor. (25412)
  • Don’t allow duplicate selectors in styles. (25399)
  • Gallery: Add a margin declaration. (25291)
  • Page parent selector with ComboboxControl. (25267)
  • Add Align support to Separator block. (25147)
  • REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.: Introduce batch controller. (25096)
  • Upgrade TypeScript to v4. (24892)
  • Use UnitControl instead of RangeControl for column width. (24711)
  • Add UI tests to unsupported block editor. (23729)
  • Add a description to the Site Title block. (23462)
  • Add storybook story for the FocusableIframe component. (22324)

Performance benchmark

VersionLoading TimeKeyPress Event (typing)
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/ 9.25.1s31.29ms
Gutenberg 9.15.3s31.03ms

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

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

Dev Chat Agenda: October 21st 2020

Here is the #agenda for this week’s meetings happening at:
Wednesday, 21 October 2020, 0500UTC and Wednesday, 21 October 2020, 2000UTC .

Bit of a late entry for agenda posts, apologies for that, it’s been a hectic couple of days… can you say BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1?!! We’ll no doubt talk about that, but please also share any items you’d like to include in the comments below.

  • Announcements – let’s celebrate the release of Beta 1 of 5.6
  • Highlighted blogblog (versus network, site) posts

No other current posts to review. But please test and review the beta version and bring any issues/bugs to chat to discuss.

  • Calls from component maintainers and/or focus leads
  • Open Floor: If you have something else you want to include to the agenda, please mention it in the comments below.

The #dev-chat meetings will be held on Wednesday, 21 October 2020, 05:00UTC and Wednesday, 21 October 2020, 2000UTC. These meetings are held in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack .

#5-6

Editor chat summary: 7 October, 2020

This post summarizes the weekly editor chat meeting (agenda here) held on 2020-10-14 14:00 UTC in Slack. Moderated by @andraganescu.

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/ 9.1

  • @youknowriad reiterated the main points of the release: improvements for 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. shape and developpers APIs to control the editor, the widgets screen improved and a few nice UIUI User interface iterations including 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. patterns selection on the inserter.

5.6 Project board

  • @isabel_brison drew some attention to the issues in the To do and the Needs Review columns
  • @cguntur shared the issue tracking dev notesdev 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 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. and @youknowriad noticed it could use some updates  to remove some of the 5.5 dev notes labels from the PRs

Monthly Plan & Key Project Updates

We requested updates on the key projects.

Widgets screen

@andraganescu provided some updates:

  • Many bugs fixed in the past week
  • Ongoing work to improve drag and drop
  • Reusable blocks will be ready for the widgets editor
  • The project board was shared

Global Styles

@jorgefilipecosta provided the update:

Full Site Editing

@vindl updates on Milestone 2:

  • The PR for porting pages selector dropdown to 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. is ready to be merged once e2e tests are fixed.
  • The initial PR that adds a basic document settings dropdown to the site editor has been merged. There are ongoing design iterations to determine the right content for it.
  • Spotlight mode for template parts has been merged and we closed the template part visibility issue. The hover interaction for template parts is still being discussed and it’s not clear whether we’ll end up landing it.

@ntsekouras provided an update on Milestone 5:

  •  The `Query` block now supports Custom Post Types and (soon to be merged) we have a Latest Pages block variation

CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.

@andraganescu provided some updates:

  • there are explorations to make the Customizer work with the new blocks in 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. areas functionality
  • there were also a couple suggestions on how to best solve it architecturally

Task Coordination

  • @mkaz
    • I’m focusing on various Social Links issues since the widget screen is going live, social could use some love. The two biggest ones left are Placeholder experience and icon sizing.
  • @timothyblynjacobs
    • I worked on moving the widgets screen to use the new sidebars & widgets endpoints. This could really use more eyes: PR: 26086
  • @annezazu
  • @vcanales
    • I have been working on refactoring @wordpress/date  to move away from momentjs. Tests passing right now, but there are a couple of formatting options that were ported from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 that are a bit tougher to achieve PR: 25782
  • @ntsekouras
  • @itsjonq
  • @paaljoachim
  • @youknowriad
    • ComboboxControl for parent page selector
    • Block 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.
    • Reviewing a number of PRs (templateLock, video tracks, usage of block api v2)
    • Helping with the merge with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • @jorgefilipecosta
    • Continued the iterations on some PR’s I have open, namely video tracks, template lock updates
    • Improved the code samples of the scripts I used that will be shared as part of the Block Editor Release Process doc (these scripts were for personal use and deserved a little bit of polishing to be publicly shared).
    • Rewrote and clean up the “Package update and core path” and “Cherry picking” sections of the Block Editor Release Process doc.
    • Update core to be able to use wp-scripts packages-update command to make core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. creation easier.
    • Submitted and commit the WordPress core update patch.
    • Made some improvements to the back-compatibility required for WordPress 5.6.
    • Iterated and merged the automatic generation of preset classes and the user-editable color palette.
    • Did Multiple PR reviews and answered pings I had pending.

Open Floor

Cover: add repeated background option.

Character count in the post editor

Extending the global styles typography options

  • @kirilzhelyazkov shared this issue to get more eyes as it extends the global styles typography options

Thanks to everyone who attended.

X-post: Block-based Themes Meeting Agenda: October 21

X-post from +make.wordpress.org/themes: Block-based Themes Meeting Agenda: October 21