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

Dev Chat Summary: November 6, 2019 (5.3 week 12)

This post summarizes the weekly dev chat meeting from November 6th 2019 (agenda / Slack archive).

Announcements

WordPress version 5.3 Release Candidate 4 was released on Tuesday 5th. Everyone please help by testing out the RC.

Upcoming Releases – 5.3

@joyously asked where to look to see how translations are going for WordPress 5.3. @mapk shared the link to the project summary on Translate.

@collet raised some issues discovered on Twenty Twenty:

  • One issue related to nested rules in full-width Group & Cover blocks: 965.
  • Four issues related to column 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.: 960, 961, 962 and 963.
  • One issue related to nested blocks on starter content: #959
  • Also mentioned a pull request (701) that would be a worth inclusion in 5.3

@johnbillion answered Twenty Twenty can be updated independently of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. It’s ultimately up to the team behind the theme to decide if any of these bugs need to go into Twenty Twenty before 5.3 is released, or whether they can wait until 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. releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of the theme.

@anlino will take a look at fixes for the columns issues today and tomorrow. Hopefully he can get those fixes before 5.3 final release. If there isn’t time to get them tested and merged properly, at least we’ll have the fixes good to go post-release.

The issues will be discussed in Twenty Twenty GitHub repository and in the core-themes and core-editor SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channels to see what can land in time for final release of 5.3.

@collet also mentioned an issue related to the About page. In the about page. it’s said that “Heading blocks now offer controls for text and background color”. However, there is no control to change the background color inside the editor. It doesn’t appear to be related to Twenty Twenty. It needs to be updated in the About page.

Finally, @mikeschroder asked for more testing concerning a recent post published on Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility)./Core: Use of the “wp_update_attachment_metadata” filter as “upload is complete” hook

Open floor

@isabel_brison asked if a core-css channel could be created on Make WordPress Slack team to discuss CSSCSS Cascading Style Sheets. stuff. Given the amount of positive reactions, the Slack channel was immediately created by @peterwilsoncc 💥🕺💃

@mpcube asked for a review on ticketticket Created for both bug reports and feature development on the bug tracker. #48506. Discussion to continue in the proper ticket.

Move Dev chat meeting time (end of daylight saving time)

@audrasjb asked for a final decision about moving the dev chat meeting time with end of daylight savings time (DST). The meeting attendees agreed to move it from 20:00 UTC to 21:00 UTC starting on Wednesday 13th November. The New Contributor Meeting will also move from 19:00 UTC to 20:00 UTC.

These notes were taken by @audrasjb and proofread by @davidbaumwald

#5-3, #css, #devchat, #twentytwenty

Twenty Twenty Weekly Meeting Agenda

This is the agenda for the weekly Twenty Twenty meeting. We’ll try to keep it within 30 minutes this time. It will be held on 19:00 UTC in the #core-themes channel.

  • Housekeeping
  • Discussion topics
    • RC 1 Prep
  • Open Floor

If there is anything you would like to see added to the agenda, please leave a comment in the thread!

#agenda, #meeting, #twentytwenty

Twenty Twenty Weekly Meeting Agenda

This is the agenda for the weekly Twenty Twenty meeting. We’ll try to keep it within 30 minutes this time. It will be held on 19:00 UTC in the #core-themes channel.

  • Housekeeping
  • Discussion topics
    • Upcoming Bug Scrub dates/times
    • 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. 3 Prep
  • Open Floor

If there is anything you would like to see added to the agenda, please leave a comment in the thread!

#agenda, #meeting, #twentytwenty

Twenty Twenty Weekly Meeting Agenda

This is the agenda for the weekly Twenty Twenty meeting. We’ll try to keep it within 30 minutes this time. It will be held on 19:00 UTC in the #core-themes channel.

  • Housekeeping
  • Discussion topics
    • Upcoming Bug Scrub dates/times
    • 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. 2 Prep
  • Open Floor

If there is anything you would like to see added to the agenda, please leave a comment in the thread!

#agenda, #meeting, #twentytwenty

Twenty Twenty Bug Scrub

We will be having our first 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 for Twenty Twenty on Friday, Sept 20th at 16:00 UTC, led by @ianbelanger in the #core-themes channel. All are invited to attend. Come help us scrub some bugs before the 5.3 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software..

Reminder #1 – Monday, Sept 23rd is 5.3 Beta 1

Reminder #2 – We will be freezing commits to the github repo on Sunday, Sept 22nd 4:00 UTC to prepare for 5.3 Beta 1

As a refresher, here’s a post from the 4.7 release cycle answering questions about bug scrubs.

#5-3, #bug-scrub, #twentytwenty