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

Theming with Twenty Seventeen

In 4.7, WordPress gets a new default theme: Twenty Seventeen. Like all default themes, it’s easily customizable for users and developers. This post will cover developer features and a few tricks when customizing the theme.

Of note

  • Twenty Seventeen only works on 4.7 and above.
  • It uses the new video 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. and starter content features, each launched in 4.7.
  • The theme also implements new theme functions to make child theming easier.

Override enqueued styles and scripts

With the use of get_theme_file_uri, introduced in 4.7, Twenty Seventeen lets child themes override styles and scripts with ease. For example, if you want to replace the theme’s global.js file, you can do so by including the same file in your child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. in the same path.

Filters

Twenty Seventeen includes a handful of filters, all of which are documented in line in the code.

Content width

The value is filterable in the event a child theme needs to change it.

function childtheme_content_width( $content_width ) {
    if ( twentyseventeen_is_frontpage() ) {
        $content_width = 960;
    }
    return $content_width;
}
add_filter( 'twentyseventeen_content_width', 'childtheme_content_width' );

Custom header settings

Like past default themes, Twenty Seventeen filters the arguments for add_theme_support( 'custom-header' );. These can be changed in a child theme. Here, we’ll add flex-width to the current args.

function childtheme_custom_header_args( $args ) {
    $args['flex-width'] = true;
    return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'childtheme_custom_header_args' );

Header video settings

The theme changes the default provided by CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but that can be modified by a child theme. Here, we change the text on the button in a child theme:

function childtheme_setup() {
    remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
}
add_action( 'after_setup_theme', 'childtheme_setup' );

function childtheme_video_controls( $settings ) {
	$settings['l10n']['play'] = '__( 'Play my awesome video', 'childtheme' );
	$settings['l10n']['pause'] = '__( 'Pause my awesome video', 'childtheme' );
	return $settings;
}
add_filter( 'header_video_settings', 'childtheme_video_controls' );

Front page sections

Twenty Seventeen uses the 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. to add sections to the front page. These are filterable with the twentyseventeen_front_page_sections filer. They can changed like so:

function childtheme_front_page_sections() {
	return 6;
}
add_filter( 'twentyseventeen_front_page_sections', 'childtheme_front_page_sections' );

With 6 being a new number there. In this way, the number of sections can be adjusted in a child theme.

SVGs

One of the theme’s most notable behind-the-scenes features, the use of SVGs means better 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) for icons, they look great on any device and they’re easier to customize.

First, the list of social link icons is filterable, so child themes can change it.

function childtheme_social_links_icons( $social_links_icons ) {
    $social_links_icons['mysocialsite.com'] = 'mysocialsite';
    return $social_links_icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );

All of Twenty Seventeen’s icons are decorative in nature. But if a child theme wanted to include an icon that needed to be described in an accessible way, it can thanks to built-in options.

These examples are documented in the code itself. However, for example:

Using a title:

<?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'childtheme' ) ) ); ?>

Another example with title and desc (description):

<?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'childtheme' ), 'desc' => __( 'This is longer desc', 'textdomain' ) ) ); ?>

For more information on SVG accessibility, see Using ARIA to enhance SVG accessibility.

Custom Colors

Like other default themes, this one comes with some color options so you can 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). the theme your own. Twenty Seventeen uses saturation to create a custom color scheme that will look great. That saturation level can be adjusted, like so:

function childtheme_custom_colors_saturation() {
	return 25;
}
add_filter( 'twentyseventeen_custom_colors_saturation', 'childtheme_custom_colors_saturation' );

So the lower the number there, the more muted a color appears, and the higher it is, the more intense a color becomes.

You can also add new CSSCSS Cascading Style Sheets. to the existing CSS output for custom colors.

By adding 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., child themes can add additional selectors onto the custom color scheme CSS. Like so:

// Add child theme selectors for color schemes.
function dynamic_seventeen_custom_colors_css( $css, $hue, $saturation ) {
	$css .= '
	.colors-custom .content-menu > article:not(.has-post-thumbnail),
	.colors-custom .content-menu > section:not(.has-post-thumbnail) {
		border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
	}';
	return $css;
}
add_filter( 'twentyseventeen_custom_colors_css', 'dynamic_seventeen_custom_colors_css', 10, 3 );

Enjoy customizing Twenty Seventeen and happy theming!

#4-7, #bundled-theme, #dev-notes, #twenty-seventeen

Twenty Seventeen: Agenda for Nov 4, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

Reminder: Meetings are every Friday at 18:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Meeting Notes: Oct. 21 2016

Here’s the meeting summary for this week. If I missed anything, let me know in the comments.

Housekeeping

Summary

  • General theme update: The theme merged to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. this week, and now has a demo. The sitesite (versus network, blog) pulls updates from 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. every 10 minutes. All 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 remaining that needed to be addressed were ported to TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..
  • In the tickets, there are a lot of small issues on different devices. I encourage everyone to test and help on those if you have the appropriate devices.
  • #38375: Flatten/rename TwentySeventeen directory structure: The group decided to keep the assets directory as is and rename `components` to template-parts. The ticketticket Created for both bug reports and feature development on the bug tracker. will be updated.
  • #38390: Twenty Seventeen: Playlists don’t render on blogblog (versus network, site)/archive pages: The group decided the best option here for now is to update the core function get_media_embedded_in_content() to check to 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). sure there’s actually a src in the 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.) before pulling out content. The ticket will be updated. @joemcgill offered to help there.
  • The group discussed video headers some, #38172. A new 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. has been added that helps mitigate large file sizes, but should be tested. Adding the functionality to add videos from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, like YouTube, would help this feature progress. It still needs more work though.
  • #38426: Twenty Seventeen: Improve user and developer experience with the 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. integration: This ticket needs to be addressed, but best to do it there since it covers a lot.

 

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 21, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

Reminder: Meetings are every Friday at 18:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Merge Proposal for 4.7

A note from @helen: Before we get into the proposal itself, I’d like to officially introduce its author, @davidakennedy, as a committercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component. for bundled themes. We really should have done this ages ago, but now he’ll get to 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). a big splash with Twenty Seventeen. Congrats, David! 🎉


twenty-seventeen

The team behind Twenty Seventeen has reached that point that we’re ready to propose Twenty Seventeen as the new default theme for WordPress in 4.7. It’s an ambitious theme that focuses on a creative home page and an easy sitesite (versus network, blog) setup experience for users.

Like last year, with Twenty Sixteen, the development process happened on GitHub. The theme will be merged into WordPress from 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. period on, and development will move to TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.. Some remaining tickets will move over to Trac at that time.

Features of Twenty Seventeen

Created with the feedback on previous default themes in mind, and the desire to reach a new audience, Twenty Seventeen was designed for business websites. It offers:

  • multiple sections on the front page, selected in the 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..
  • a striking asymmetrical grid.
  • custom color schemes, built on top of a monochromatic foundation, and adjustable via a hue picker.
  • different headline placement for pages, changeable in the Customizer, via theme options.
  • a great experience in many languages, thanks to language-specific font stacks.
  • SVG icons (a first for a default theme).
  • support for custom logo, custom 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. image and many post formats.
  • the use of new functions in Core for making child theming easier.

Contributions

As usual, a default theme couldn’t happen without the community. This year, Twenty Seventeen has benefited from 57 amazing contributors so far (up from 38 at this point last year). They have helped with:

  • triaging issues.
  • providing code reviews.
  • testing and recommending language specific font stacks.
  • improving the theme’s 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).
  • browser and device testing.
  • numerous 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. fixes, code tidying and countless improvements.

Testing, Feedback and Next Steps

While contributors have tested Twenty Seventeen on various devices and browsers throughout the development process, edge cases still exist. Please test Twenty Seventeen in as many different environments as you can.

Until the merge deadline, contributors to Twenty Seventeen will work on the Core Merge milestone in GitHub, knocking out as many issues as possible.

A big thank you to everyone that has helped make Twenty Seventeen come to life.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 14, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

  • General theme update.
  • Flexbox.
  • Open floor.

Reminder: Meetings are every Friday at 18:00 UTC. Twenty Seventeen Features meeting every Tuesday at 17:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Meeting Notes: Oct. 7 2016

Here’s the meeting summary for this week. If I missed anything, let me know in the comments.

Housekeeping

Summary

The group:

  • gave an update on the theme’s progress. The theme’s initial design implementation is merged and everyone should focus on testing.
  • discussed issue on SVGs instead of icon fonts. @melchoyce has decided on Font Awesome for SVGs, so implementation was discussed. A few fallback methods were discussed, like a simple text fall back or CSSCSS Cascading Style Sheets. image fallback, but some testing will be needed. A pull request should be worked on next week.
  • highlighted other issues that the community is encouraged to comment on and test (both have pull requests):

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 7, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

  • General theme update.
  • There isn’t much that hasn’t been already triaged, so that will be skipped.
  • SVGs instead of icon fonts.
  • Open floor.

Reminder: Meetings are every Friday at 18:00 UTC. Twenty Seventeen Features meeting every Tuesday at 17:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Features Meeting Notes: Oct. 4 2016

Here’s the summary for this week. The meeting was busy, so feel free to add anything missed in the comments.

Housekeeping

Summary

The group:

  • discussed #37974 (Add multi-panel feature to pages through add_theme_support) for the majority of the meeting. The goal was to find a minimum viable productMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia that could be developed in the time left.
  • decided to shoot for this feature to be 1. limited to the front page only. 2. exist in the 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. 3. provide basic markup, created by CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • decided this story board stood out as the strongest to be iterated on and mocked up as a design.
  • decided live preview in the Customizer wasn’t critical at the current time.
  • @helen and I will work on marshaling people to help with the project.
  • @karmatosed will work on the initial mock-up of the feature.
  • briefly discussed #38172 (Enable video headers in custom headers) It also needs to have a minimum viable product defined and those interested were encouraged to comment on the ticketticket Created for both bug reports and feature development on the bug tracker. with that in mind.
  • brought up #19627, and that could be worked on but it’s not a priority over the other major features for Twenty Seventeen.

Next steps

  • For Add multi-panel feature to pages through add_theme_support, the mock up will be created and developers are needed to work on it.
  • For Enable video headers in custom headers, a clearer scope needs defining and more developers are needed to work on it. A basic 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. exists for this ticket. 

Call for help

Twenty Seventeen needs you. Home pages should be fun to create and a heck of a lot easier. Headers can be even more captivating. If you’re interested in working on either of these projects, please let me or @helen know.

#4-7, #bundled-theme, #twenty-seventeen