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 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 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 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. 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 ticketticket Created for both bug reports and feature development on the bug tracker. #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, #dev-chat

WordPress 5.3.1 RC 2

WordPress 5.3.1 Release Candidaterelease 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 (RC 2) is now available for testing!

You can test it in one of two ways:

  • Install the WordPress Beta Tester 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 (you’ll want to select the point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. nightlies option)
  • Download the release candidate here (zip).

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

These changes made more obvious that form controls heights and alignments were not consistent across WP Adminadmin (and super 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 CSSCSS Cascading Style Sheets. 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, 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 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 UIUI User interface components to match the new WordPress focus/hover styles

For full details about these changes, see the related changeset on WordPress TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.. WordPress developers and plugin authors may also want to visit the related Trac ticketticket Created for both bug reports and feature development on the bug tracker.: #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 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. 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-Adminadmin (and super 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 CSSCSS Cascading Style Sheets. issue.

Please note this change also introduces some hardcoded colors for both gray borders and texts. 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 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 TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #48585 and #48598.

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

WordPress 5.3.1 RC 1

WordPress 5.3.1 Release Candidaterelease 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 (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 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 (you’ll want to select the point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. 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 blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor, Twenty Twenty bundled theme, 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) focus, Adminadmin (and super admin) CSSCSS Cascading Style Sheets., 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 localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. 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: 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. option to show or hide author bio
  • #48551: Twenty Twenty: Replace JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.-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 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. is using “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
  • #48592: About display of 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.) 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 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. 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 PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 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 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 it caused several issues, mentioned in the following TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets and 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/ issues:

  • #48763 – Twenty Twenty: SmoothScroll is broken
  • #48551 – Twenty Twenty: Replace JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.-based smooth scroll with CSSCSS Cascading Style Sheets.
  • #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 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) enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. 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