Dev Chat summary: December 11, 2019

@davidbaumwald facilitated based on this agenda; @marybaum is your faithful reporter.

You can find the full transcript here.

Announcements and highlighted posts

No announcements, but David and the crew highlighted these posts. If you have thoughts, be sure to get your comments in as soon as possible if you want them to hit the 5.4 milestone:

@audrasjb added this dev note from 5.3.1:

Upcoming Releases

5.3.1

@audrasjb updated the group on 5.3.1.

Before Tuesday’s release of the RC1, the team got the milestone completely clear, to the tune of 44 tickets, and issued props to @sergeybiryukov and @azaozz for final commits and the build.

Some new/reopened tickets landed in the milestone after the release, so @audrasjb planned at RC2 for shortly after the chat and then the final release of 5.3.1 on Thursday. (ed. note: That all did happen as planned.)

5.4

Taking back the mic, @davidbaumwald reminded the group about the 5.4 call for tickets. Please publicize!

Components

@davidbaumwald formally welcomed @imath to the group. He and David have adopted the Comments component.

Two other Components, the Filesystem API and Rewrite Rules, still need maintainers.

Open Floor

Holiday scheduling

@carike asked if #devchat would meet this coming week, on December 18.

After a bit of discussion, @azaozz confirmed that we would, but would not meet on December 25 or January 1.

Happy holidays if you celebrate any; please accept two more hours in your week(s) otherwise!

Webfonts API

@carike brought up ticket #46370, a new feature request, that proposes building a webfonts API to register and enqueue web fonts.

You can find the discussion here.

#5-3-1, #5-4

WordPress 5.3.1 RC 2

WordPress 5.3.1 Release Candidate 2 (RC 2) is now available for testing!

You can test it in one of two ways:

What’s in this release candidate?

Beyond the tickets that were already fixed in WP 5.3.1 RC 1, this second release candidate includes three new patches, on these three tickets:

  1. #48943: comment_form() expects optional “email” field to be passed
  2. #47069: The admin bar on the front end has reduced functionality and bugs when jQuery not being used (reopened for some improvements)
  3. #48927: Aesthetic Issues with Language Select on Install introduced in 5.3.1 RC1

Final release is planned for December 12th.

Thanks @marybaum for proof-reading this post and @sergeybiryukov for building the packages.

#5-3-1, #minor-releases

Admin form controls height and alignment standardization in WordPress 5.3.1

WordPress 5.3 introduced some notable Admin CSS changes to improve administration accessibility and consistency with the block editor.

These changes made more obvious that form controls heights and alignments were not consistent across WP Admin.

Before WordPress 5.3, there were already some inconsistencies between form controls. For reference, WordPress 5.2 form controls various alignments and heights are grouped in the screenshot below:

Form controls alignment and height inconsistencies in WordPress 5.2

WordPress 5.3 Admin CSS changes brought more attention to those general inconsistencies on form controls. And several users and contributors reported these inconsistencies as regressions from 5.3.

Example of form controls inconsistencies in WordPress 5.3

Although these inconsistencies cannot be considered as regressions from 5.3 since they existed before 5.3 Admin CSS changes, WordPress 5.3.1 introduces some fixes on heights and alignments.

5.3
5.3.1
5.3
5.3.1
5.3
5.3.1

WordPress 5.3.1 changes include:

  • Standardized height basis of 30px for all form controls
  • Consistent line height basis of 30px across the interface
  • 14px font size basis for select controls option text
  • Remove various top/bottom margin and padding

These changes are part of a continuous effort to improve styling and consistency of all form controls in the WordPress admin pages. In general, plugin authors and WordPress developers are encouraged to:

  • remove any fixed height: flexible heights are now the WordPress recommended standard to allow form controls to better scale with text zoom
  • remove any custom top and bottom padding values
  • remove any custom line-height value
  • remove any custom min-height value
  • update custom focus/hover styles on custom UI components to match the new WordPress focus/hover styles

For full details about these changes, see the related changeset on WordPress Trac. WordPress developers and plugin authors may also want to visit the related Trac ticket: #48420

#5-3-1, #core-css, #dev-notes

Alternate color schemes changes in WordPress 5.3.1

WordPress 5.3 added some noteworthy CSS changes to WordPress Admin. These changes also impacted alternate color schemes, especially concerning secondary buttons.

Indeed, secondary button borders unexpectedly inherited their scheme’s primary color, which resulted in arguable visual aspect and poor readability for most color schemes.

“Blue” alternate color scheme in WordPress 5.3
“Coffee” alternate color scheme in WordPress 5.3
“Midnight” alternate color scheme in WordPress 5.3

A bug also occurred on :active state, where the background color of the button was quite the same than the text color.

On the right: secondary button with :active state on “Blue” color scheme in WordPress 5.3
On the right: secondary button with :active state on “Midnight” color scheme in WordPress 5.3

WordPress 5.3.1 will fix these issues by unifying WP-Admin secondary buttons for all alternate color schemes.

Secondary button styles will be the same for all bundled alternate color schemes. This change also fixes the :active state CSS issue.

Please note this change also introduces some hardcoded colors for both gray borders and texts. Plugin authors who provide specific support for alternate color schemes can use these new hardcoded colors.

New secondary button CSS/Sass styles in WP 5.3.1:

.button {
	border-color: #7e8993;
	color: #32373c;
}

.button:hover {
	border-color: darken( #7e8993, 5% );
	color: darken( #32373c, 5% );
}

.button:focus {
	border-color: #7e8993;
	color: darken( #32373c, 5% );
	box-shadow: 0 0 0 1px #32373c;
}

See /wp-admin/css/colors/_admin.scss.

New CSS styles for secondary buttons in alternate color schemes:

Secondary buttons in WordPress 5.3.1
“Midnight” alternate color scheme in WP 5.3.1
“Coffee” alternate color scheme in WP 5.3.1

For reference, see the related Trac tickets: #48585 and #48598.

#5-3-1, #accessibility, #core-css, #dev-notes

WordPress 5.3.1 RC 1

WordPress 5.3.1 Release Candidate 1 (RC 1) is now available for testing!

There are two ways to test the WordPress 5.3.1 release candidate: try the WordPress Beta Tester plugin (you’ll want to select the point release nightlies option), or you can download the release candidate here (zip).

What’s in this release candidate?

5.3.1 features 44 bug and regression fixes, including improvements concerning the block editor, Twenty Twenty bundled theme, accessibility focus, Admin CSS, internationalization, media, date/time…

Here’s the full list:

  • #30429: wp.newPost gets non-GMT date calculation wrong
  • #31245: Replace alloptions with a key cache
  • #42437: Thumbnails can overwrite other uploads if filename matches
  • #48271: Media Library: Tab structure does not use tab semantics
  • #48313: Administration email verification uses the site locale instead of the user’s locale
  • #48324: Undefined index: full in/wp-includes/media.php on line 214
  • #48334: Allow the remind interval for the admin email verification to be filtered
  • #48355: Media: add semantic indication for the buttons group active state
  • #48371: Update sodium_compat to v1.12.1
  • #48376: Update kses safecss_filter_attr function to allow gradient backgrounds
  • #48406: Dashboard: Some links can be identified as such only by their color
  • #48409: Menus: form controls disabled only visually when creating a new menu
  • #48420: Admin CSS: standardize form controls heights, alignments, etc.
  • #48550: Twenty Twenty: Customizer option to show or hide author bio
  • #48551: Twenty Twenty: Replace JS-based smooth scroll with CSS
  • #48582: Better to have some hover effects on credits list
  • #48585: Color contrast changes impact color schemes negatively
  • #48588: Unable to Replace Image in Image widget is using “Insert from URL”
  • #48592: About display of tag cloud widget
  • #48598: :active button color issue in all color schemes except for “Default”
  • #48601: Twenty Twenty: document.body is null
  • #48606: Some date formats get incorrectly output in Italian
  • #48619: Twenty Twenty: Author bio and bottom post meta misaligned on mobile
  • #48623: WP 5.3 time problem causes day number shifts in permalinks
  • #48624: Twenty Twenty: Duplicate array key/value in TwentyTwenty_Non_Latin_Languages::get_non_latin_css
  • #48652: Twenty Twenty: Input wp-comment-cookies-consent Checkbox in Comment Form is Too Small
  • #48674: Typo in wp_credits_section_title documentation
  • #48675: mysql2date adding timezone offset when given GMT time
  • #48688: TwentyTwenty: Issue with instagram oembed css
  • #48692: Add PHP time zone check to Site Health
  • #48696: Remove the CollegeHumor oEmbed provider
  • #48704: Twenty Twenty: Spelling correction of a variable and inline documentation.
  • #48725: Additional Capabilities list displayed in user-edit broke after 5.3 update
  • #48736: Exclude PNG images from scaling after upload
  • #48763: Twenty Twenty: SmoothScroll is broken
  • #48815: Select comment checkbox is partially hidden on pending comments in mobile
  • #48866: TwentyTwenty: Paginated comments don’t work
  • #48876: Twenty Twenty: High input fields are misaligned in Firefox
  • #48884: Update WordPress packages with fixes targeted for 5.3.1
  • #48906: Twenty Twenty: Add context for twentytwenty_start_of_post_meta_list and twentytwenty_end_of_post_meta_list
  • #48907: Media Editor: Consistent width for Scale and Crop inputs
  • #48918: Twenty Twenty: echoing bloginfo()
  • #48599: Warning: count(): Parameter must be an array or an object that implements Countable in ../wp-admin/includes/plugin.php on line 1392
  • #47069: Twenty Nineteen: the admin bar on the front end has reduced functionalities and bugs due to jQuery not being used

#5-3-1, #minor-releases

Twenty Twenty: animated scroll changes in WordPress 5.3.1

In WordPress 5.3, Twenty Twenty new bundled theme added smooth scroll animations to anchor links. These animations were handled by native JavaScript and it caused several issues, mentioned in the following Trac tickets and GitHub issues:

  • #48763 – Twenty Twenty: SmoothScroll is broken
  • #48551 – Twenty Twenty: Replace JS-based smooth scroll with CSS
  • #48866 – TwentyTwenty: Paginated comments don’t work
  • GitHub issue 476 – Consider removing JS-based smooth scroll

Additionally to the multiple issues listed in the above tickets, JavaScript-based scroll animations add a bunch of relatively complex JS code, override natural anchor behavior and may interfere with how specific user agents handle in-page scrolling.

In WordPress 5.3.1, the current smooth scroll JavaScript implementation will be replaced with “scroll-behavior” CSS property.

This change fixes the issues encountered with the current JavaScript implementation, and also includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that have opted in to reduced motion in their browser settings.

For further explanation on this media query, see Mozilla Developer Network documentation.

Browsers that don’t support scroll-behavior CSS property will fallback to default HTML anchor behavior. For reference, see full browsers support for this CSS property on MDN.

New CSS scroll animation implementation in Twenty Twenty:

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Developers are able to remove scroll-behavior effect on specific elements by using a class CSS selector, as follows:

.disable-smooth-scrolling {
    scroll-behavior: auto;
}

For reference, see the related changeset in 5.3.1 branch.

#5-3-1, #accessibility, #bundled-theme, #core-css, #dev-notes, #twentytwenty