Dev chat summary: May 12, 2021

@lukecarbis and @jeffpaul led the 0500 UTC devchat and 2000 UTC devchats, respectively, on this agenda.

Here’s a combined summary from those discussions …

Highlights from blogblog (versus network, site) posts

In short order, the standout posts of the week are:

While the group opened browser tabs and bookmarked those posts, the chat moved on to …

Upcoming releases

A schedule reminder for 5.8: Feature Freeze is coming in 13 days (ed. note: at this writing, twelve) on Tuesday, May 25th. Per the published schedule, that means no commits for new enhancements or feature requests for the last two weeks before 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. Instead, the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team will focus on bugs during that period.

To that end, @lukecarbis and @chaion07 have published the bug-scrub schedule. If you’d like to add a scrub, you can — whether you’re a developer or not, whether you’re already a contributor or not! And it gets you official props as a Core contributor to 5.8. (Ed. note: You are also free to tailor your scrub to the tickets, issues, and features that matter most to you. It is, quite literally, your scrub.)

There’s also a new(ish) kind of scrub called a testing scrub. If you’d like to get ready to help with those, here’s a handy how-to guide from @boniu91.

@helen reminded the group that 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.-based widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor needs a lot more testing.

Details on the Marketing plans for 5.8 are noted in the Full Site Editing Pre-Merge Overview post, if you’re interested in helping out there please consider attending Marketing meetings which are held every Wednesday at 14:00 UTC.

Components check-in and status updates.

For more details on any change, check the ticketticket Created for both bug reports and feature development on the bug tracker. that makes the commit. You’ll get the all the conversation about the issue, what changed and why, and — of course — the patches and screenshots that took the change from concept to commit, all in one place.

@sergeybiryukov:

  • Ticket #53101 updates the Requests library to version 1.8.0, making it a lot faster to use cURL.
  • Ticket #50105 pulls infinite scrolling out of the Media Library and replaces that feature with a Load More button that the user controls (accessibly!)
  • Also in Media, ticket #35725 brings WebP image-format support to Core.
  • No major news this week on Build/Test Tools, Date/Time, General, 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., or Permalinks.

@audrasjb:

@marybaum checked in on Help/About. There’s no major news right now, but that component gets very busy starting at feature freeze.

Open Floor

@markparnell has a 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. on #49278 that’s passing unit tests, looking for review in hopes of landing in 5.8; @peterwilsoncc likes the approach of improving DQ query performance and feels it needs to be an early ticket but unsure if we’re still early in the 5.8 cycle for it to be considered; @lukecarbis noted some dev-feedback from someone experienced with SQL would help

@christos12 raised a concern about removing infinite scroll from the Media Library possibly surprising some users. A brief discussion followed, with @desrosj weighing in on the Load More button and @davidbaumwald noting that he has written a plugin that will let a user restore Infinite Scroll.

In a late-breaking comment on the devchat agenda, @paaljoachim asked the group for recommended resources on WordPress 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 design (not development or information design, but visual design). @jeffpaul suggested the Plugin Handbook; a little later, @megphillips91 recommended this guide to plugin UI in the block editor.

Props to @jeffpaul for reviewing this post.

#5-8, #core-css, #core-media, #dev-chat, #hosting, #mobile, #openverse, #summary

Previewing Site Responsiveness in the Customizer

This proposal was merged to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.Core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in [36532]. Download the latest nightly build and give it a try!

The customizer is a framework for live-previewing changes to WordPress sites. And by now, nearly every WordPress theme/site features responsive designs intended to look good on any device. Previewing site changes is just important on mobile as it is on desktop, to ensure that front-end user experience is exactly as intended.

Bringing these ideas together, #31195 proposes a new feature in the customizer that allows users to quickly preview their site on various device sizes. Here’s a quick walkthrough:

customize-device-preview

The proposed feature focuses on simplicity. The device previewer is in the customizer controls footer, near the “Collapse” button. Only three options are available by default, and they’re intentionally ambiguous. Rather than looking like specific devices, the intent is to understand what a site may look like on a roughly tablet-sized, portrait-orientation device or a roughly phone-sized device, in addition to the standard desktop view. A further extension in #34051 may allow larger screen sizes to be previewed on smaller devices with forced horizontal scrolling; for now, the feature is only available on larger devices.

For Developers

Along with this feature would come a couple of ways to customize the behavior. Please keep in mind that these are proposed and subject to change.

The new customize_previewable_devices filter lets you customize the devices available for preview. One use case may be to turn off this feature entirely:

add_filter( 'customize_previewable_devices', '__return_empty_array' );

Or, developers can add additional custom device preview buttons. The button element will be rendered and the appropriate JS applied to custom devices when the button is clicked; however, developers need to provide CSS to add an icon to the button and to react to the preview size changing.

In JavaScript, themes and plugins can react to changes in the device size being previewed with:

wp.customize.previewedDevice.bind( function( newDevice ) {
     // Do something to adapt to the new device being previewed.
});

This is particularly useful if your theme requires a JS trigger for responsive elements to apply, instead of using CSS solely.

Summary

Any feedback and testing is much appreciated. Device previews in the Customizer can be tested with the latest patch on #31195.

Comments are welcome on this post, the ticket (#31195), or our continuous chat in #core-customize on Slack.

#customize, #mobile, #needs-testing

Mobile Flow Update

Here’s the state of the open mobile flow tickets we’ve been calling out in the jumpstart posts.

#29989 Hide Media Buttons on small screens

I’ve really wanted this one for awhile. There was some good design momentum, but we’ve faltered as we moved to implementation. This ticketticket Created for both bug reports and feature development on the bug tracker. needs developer feedback. We really need these improvements to post-new.php for mobile.

#31187 Allow swiping the adminadmin (and super admin) menu open and closed on touch devices

This one has gained some momentum. We need code review and testing. I’d really like to land this one.

#29906 Submenus can’t be dismissed on mobile.

During the first NUX meeting, the importance of the toolbar was called out by several. The toolbar needs help on mobile. There’s a working 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. on this ticket that needs code review. There’s another case to cover that needs discussion and eventual patching.

#29993 Media action links are cramped on small screens

This needs a patch refresh and more discussion.

#29992 Cramped 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.) action links on small screens

This has a patch that needs CSSCSS Cascading Style Sheets. review and testing.

#15930 Make trashed posts/pages still readable

This is a possibly very simple patch that will remove a lot of frustration from certain flows. Read about one such flow.

#31233 Dismissable admin notices

This isn’t really a mobile flow ticket, but I like it enough to tack it on here as bonus. There’s a first pass patch on the ticket already. I’d love to see this go somewhere. More here: https://core.trac.wordpress.org/query?status=!closed&keywords=~make-flow

#4-2, #flow, #mobile

Improving Mobile Flow in 4.2

Over on make/flow, we’ve been flow testing coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., posting visual records, and opening tickets tagged make-flow. During 4.2, we’re going to highlight a couple of these flow tickets every week, with an emphasis on mobile. Here is a small selection of mobile make-flow tickets to consider for 4.2. From log in, to the toolbar and adminadmin (and super admin) menus, on to the editor media buttons, these tickets note some of the annoying little UXUX User experience issues that impede flow on phones. Fixing these would improve our mobile flows significantly.

The logo 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. on the log in screen is too large a tap target
https://core.trac.wordpress.org/ticket/31185

Submenus can’t be dismissed on mobile.
https://core.trac.wordpress.org/ticket/29906

Hide Media Buttons on small screens
https://core.trac.wordpress.org/ticket/29989

Prevent device keyboard from displaying after selecting an image in TinyMCE
https://core.trac.wordpress.org/ticket/31162

Allow swiping the admin menu open and closed on touch devices
https://core.trac.wordpress.org/ticket/31187

If you’re curious about Flow and Visual Records, check out the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. on make/flow, the Flow Glossary, and the #core-flow 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.

#4-2, #flow, #mobile

Tablets and Touch UIs in WordPress 3.4

We’ve had some terrific progress made in the realm of supporting touch interfaces and tablet UIs for 3.4!

The main areas that we’ve focused on for this release were improving touch support in the user interface, resolving incompatibilities for our target devices, and enhancing the UIUI User interface’s methods for adapting to more restrictive screen sizes.

Target Devices

Our target devices for the 3.4 release were the iPad and the Kindle Fire. The iPad stands as an obvious choice, and the Kindle Fire’s steep climb to over 50% of market share amongst Android tablet devices justifies its presence as well.

Improving Touch Support

For touch-supportive devices, we’ve added a fantastic jQuery extension to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., jQuery UI Touch Punch. This has enabled ‘drag and drop’ support on mobile devices. Whether editing a post, customizing the dashboard, or modifying a Nav Menu, you’re now able to easily reposition items on a touch interface to your heart’s content, just as you would on your desktop browser.

Caveat: Windows Phone Devices

Windows Phone 7/7.5 phones are wonderful devices. Unfortunately, when Microsoft based the phone’s web browser off IE9, they didn’t add in any touch support. As such, there is no way to detect touch events in the browser — `ontouchstart` doesn’t exist. Dragging support does not work on Windows Phone 7/7.5 devices, but should on Windows 8 tablets and phones when released.

Resolving Incompatibilities

This boiled down primarily to the Kindle Fire. The version of WebKit used in the Kindle Fire’s native Silk browser doesn’t support the contentEditable attribute, so TinyMCE wouldn’t work! To accomodate for this, we added an override to test for the version of webkit that the client is using, and just disable the visual editor if the browser doesn’t support it. This patch should also cross-apply to older versions of iOSiOS The operating system used on iPhones and iPads. and Android as well.

UI Enhancements

In Ticketticket Created for both bug reports and feature development on the bug tracker. #20015, we migrated the dashboard and write screen columns to use primarily @media queries, rather than the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. that had previously been used. This should provide some performance optimizations in mobile browsers.

The Tableteer team for 3.4 was comprised of Andrew Ozz, Zach Abernathy, and George Stephanis.

#android, #mobile, #target-devices, #ui-enhancements