Bundled Themes: Update Twenty Twenty.

This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.

For a complete list of changes since [46445], see 7246fd6...bc89c51.

Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, netweb, joyously, mahesh901122, josephscott, byalextran, amolv, Clorith.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46551


git-svn-id: http://core.svn.wordpress.org/trunk@46348 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2019-10-15 18:47:02 +00:00
parent 02810533c4
commit 908961974e
15 changed files with 171 additions and 150 deletions

View File

@ -1,7 +1,12 @@
{
"extends": "stylelint-config-wordpress",
"extends": [
"stylelint-config-wordpress"
],
"plugins": ["stylelint-a11y"],
"rules": {
"font-family-no-missing-generic-family-keyword": null,
"no-descending-specificity": null
"no-descending-specificity": null,
"a11y/no-outline-none": true,
"a11y/selector-pseudo-class-focus": true
}
}

View File

@ -57,14 +57,14 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-italic-var.woff2) format("woff2");
}
/* Structure --------------------------------- */

View File

@ -57,14 +57,14 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-italic-var.woff2) format("woff2");
}
/* Structure --------------------------------- */

View File

@ -30,14 +30,14 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-italic-var.woff2) format("woff2");
}
/* Structure --------------------------------- */

View File

@ -30,14 +30,14 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
src: url(../fonts/inter/Inter-italic-var.woff2) format("woff2");
}
/* Structure --------------------------------- */

View File

@ -92,7 +92,8 @@ twentytwenty.coverModals = {
// Handle cover modals when they're toggled
onToggle: function() {
document.querySelector( '.cover-modal' ).addEventListener( 'toggled', function( event ) {
document.querySelectorAll( '.cover-modal' ).forEach( function( element ) {
element.addEventListener( 'toggled', function( event ) {
var modal, body;
modal = event.target;
@ -110,6 +111,7 @@ twentytwenty.coverModals = {
}, 500 );
}
} );
} );
},
// Close modal on outside click
@ -413,7 +415,7 @@ twentytwenty.modalMenu = {
init: function() {
// If the current menu item is in a sub level, expand all the levels higher up on load
this.expandLevel();
this.goBackToCloseButton();
this.keepFocusInModal();
},
expandLevel: function() {
@ -433,74 +435,54 @@ twentytwenty.modalMenu = {
} );
},
// If the current menu item is the last one, return to close button when tab
goBackToCloseButton: function() {
document.addEventListener( 'keydown', function( event ) {
var closeMenuButton, mobileMenu, isDesktop, menuLinks, firstLevelmenuLinks, lastMenuLinkToggleButton, lastToogleSubMenuLinkNotOpened, lastMenuLinkHasSubClosedMenu, socialLinks, hasSocialMenu, lastModalMenuItems, focusedElementParentLi, focusedElementIsInsideModal, lastMenuItem, isFirstModalItem, isLastModalItem;
keepFocusInModal: function() {
var _doc = document;
closeMenuButton = document.querySelector( '.toggle.close-nav-toggle' );
mobileMenu = document.querySelector( '.mobile-menu' );
_doc.addEventListener( 'keydown', function( event ) {
var clickedEl = twentytwenty.toggles.clickedEl,
toggleTarget, modal, selectors, elements, menuType, bottomMenu, activeEl, lastEl, firstEl, tabKey, shiftKey;
if ( mobileMenu ) {
return false;
if ( clickedEl && _doc.body.classList.contains( 'showing-modal' ) ) {
toggleTarget = clickedEl.dataset.toggleTarget;
selectors = 'input, a, button';
modal = _doc.querySelector( toggleTarget );
elements = modal.querySelectorAll( selectors );
elements = Array.prototype.slice.call( elements );
if ( '.menu-modal' === toggleTarget ) {
menuType = window.matchMedia( '(min-width: 1000px)' ).matches;
menuType = menuType ? '.expanded-menu' : '.mobile-menu';
elements = elements.filter( function( element ) {
return null !== element.closest( menuType ) && null !== element.offsetParent;
} );
elements.unshift( _doc.querySelector( '.close-nav-toggle' ) );
bottomMenu = _doc.querySelector( '.menu-bottom > nav' );
if ( bottomMenu ) {
bottomMenu.querySelectorAll( selectors ).forEach( function( element ) {
elements.push( element );
} );
}
}
isDesktop = window.getComputedStyle( mobileMenu, null ).getPropertyValue( 'display' ) === 'none';
lastEl = elements[ elements.length - 1 ];
firstEl = elements[0];
activeEl = _doc.activeElement;
tabKey = event.keyCode === 9;
shiftKey = event.shiftKey;
menuLinks = isDesktop ?
document.querySelectorAll( '.menu-modal .expanded-menu .modal-menu li' ) :
document.querySelectorAll( '.menu-modal .mobile-menu .modal-menu li' );
firstLevelmenuLinks = isDesktop ?
document.querySelectorAll( '.menu-modal .expanded-menu .modal-menu > li' ) :
document.querySelectorAll( '.menu-modal .mobile-menu .modal-menu > li' );
if ( firstLevelmenuLinks ) {
return false;
}
lastMenuLinkToggleButton = firstLevelmenuLinks[firstLevelmenuLinks.length - 1].querySelector( '.sub-menu-toggle' ) || undefined;
lastMenuLinkHasSubClosedMenu = lastMenuLinkToggleButton && ! lastMenuLinkToggleButton.classList.contains( 'active' );
lastToogleSubMenuLinkNotOpened = isDesktop ?
document.querySelector( '.menu-modal .expanded-menu .modal-menu .sub-menu .sub-menu-toggle:not(.active)' ) :
document.querySelector( '.menu-modal .mobile-menu .sub-menu .sub-menu-toggle:not(.active)' );
socialLinks = document.querySelectorAll( '.menu-modal .social-menu li' );
hasSocialMenu = document.querySelectorAll( '.menu-modal .social-menu' ).length > 0;
lastModalMenuItems = hasSocialMenu ? socialLinks : menuLinks;
focusedElementParentLi = twentytwentyFindParents( event.target, 'li' );
focusedElementIsInsideModal = twentytwentyFindParents( event.target, '.menu-modal' ).length > 0;
lastMenuItem = lastModalMenuItems[lastModalMenuItems.length - 1];
isFirstModalItem = event.target === closeMenuButton;
isLastModalItem = focusedElementIsInsideModal && focusedElementParentLi[0] ?
focusedElementParentLi[0].className === lastMenuItem.className :
undefined;
if ( lastMenuLinkToggleButton && lastMenuLinkHasSubClosedMenu && ! hasSocialMenu ) { // Last 1st level item has submenu and is closed
isLastModalItem = event.target === lastMenuLinkToggleButton;
lastMenuItem = lastMenuLinkToggleButton;
}
if ( lastMenuLinkToggleButton && ! lastMenuLinkHasSubClosedMenu && ! hasSocialMenu ) { // Last 1st level item has submenu is opened
isLastModalItem = event.target === lastToogleSubMenuLinkNotOpened || event.target === menuLinks[menuLinks.length - 1].querySelector( 'a' );
lastMenuItem = lastToogleSubMenuLinkNotOpened || menuLinks[menuLinks.length - 1].querySelector( 'a' );
}
if ( ! event.shiftKey && event.key === 'Tab' && isLastModalItem ) {
// Forward
if ( ! shiftKey && tabKey && lastEl === activeEl ) {
event.preventDefault();
closeMenuButton.focus();
firstEl.focus();
}
if ( event.shiftKey && event.key === 'Tab' && isFirstModalItem ) {
// Backward
if ( shiftKey && tabKey && firstEl === activeEl ) {
event.preventDefault();
if ( lastMenuItem.querySelector( 'a' ) ) {
lastMenuItem.querySelector( 'a' ).focus();
} else {
lastMenuItem.focus();
lastEl.focus();
}
}
} );
@ -645,9 +627,13 @@ twentytwenty.toggles = {
// Toggle aria-expanded on the toggle
twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
if ( self.clickedEl && -1 !== toggle.getAttribute( 'class' ).indexOf( 'close-' ) ) {
twentytwentyToggleAttribute( self.clickedEl, 'aria-expanded', 'true', 'false' );
}
// Toggle body class
if ( toggle.dataset.toggleBodyClass ) {
_doc.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass );
_doc.body.classList.toggle( toggle.dataset.toggleBodyClass );
}
// Check whether to set focus
@ -777,7 +763,7 @@ function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
if ( falseVal === undefined ) {
falseVal = false;
}
if ( element[ attribute ] !== trueVal ) {
if ( element.getAttribute( attribute ) !== trueVal ) {
element.setAttribute( attribute, trueVal );
} else {
element.setAttribute( attribute, falseVal );

View File

@ -26,6 +26,12 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
/**
* Removes the background image section.
* The theme only supports the background color option.
*/
$wp_customize->remove_section( 'background_image' );
$wp_customize->selective_refresh->add_partial(
'blogname',
array(

View File

@ -459,7 +459,7 @@ function twentytwenty_block_editor_settings() {
array(
'name' => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
'size' => 24,
'size' => 26.25,
'slug' => 'large',
),
array(
@ -481,20 +481,6 @@ function twentytwenty_block_editor_settings() {
add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
/**
* Read More Link
* Overwrite default (more ...) tag
*/
function twentytwenty_read_more_tag() {
return sprintf(
'<a href="%1$s" class="more-link faux-button">%2$s <span class="screen-reader-text">"%3$s"</span></a>',
esc_url( get_permalink( get_the_ID() ) ),
__( 'Continue reading', 'twentytwenty' ),
esc_html( get_the_title( get_the_ID() ) )
);
}
add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
/**
* Enqueues scripts for customizer controls & settings.
*
@ -647,7 +633,7 @@ function twentytwenty_get_elements_array() {
'background' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
),
'background' => array(
'color' => array( '.social-icons a', '.overlay-header .header-inner', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
'color' => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
'background' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
),
'text' => array(

View File

@ -121,25 +121,16 @@
<?php
}
$header_toggles_classes = '';
if ( ! has_nav_menu( 'expanded' ) && false === $enable_header_search ) {
$header_toggles_classes .= ' hide-on-desktop';
}
if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) {
?>
<div class="header-toggles hide-no-js<?php echo $header_toggles_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<div class="header-toggles hide-no-js">
<?php
$nav_toggle_wrapper_classes = '';
// Add a class indicating whether the navigation toggle wrapper can be hidden on desktop.
if ( has_nav_menu( 'expanded' ) ) {
$nav_toggle_wrapper_classes .= ' has-expanded-menu';
}
?>
<div class="toggle-wrapper nav-toggle-wrapper<?php echo $nav_toggle_wrapper_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>">
<div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
<button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
@ -153,6 +144,8 @@
</div><!-- .nav-toggle-wrapper -->
<?php
}
if ( true === $enable_header_search ) {
?>
@ -172,6 +165,9 @@
?>
</div><!-- .header-toggles -->
<?php
}
?>
</div><!-- .header-navigation-wrapper -->

View File

@ -257,14 +257,16 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(./assets/fonts/inter/Inter-upright.var.woff2) format("woff2");
font-display: swap;
src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(./assets/fonts/inter/Inter-italic.var.woff2) format("woff2");
font-display: swap;
src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");
}
@ -534,11 +536,11 @@ dd + dt {
blockquote {
border-color: #cd2653;
border-style: solid;
border-width: 0 0.2rem 0 0;
border-width: 0 0 0 0.2rem;
color: inherit;
font-size: 1em;
margin: 4rem 0;
padding: 0.5rem 2rem 0.5rem 0;
padding: 0.5rem 0 0.5rem 2rem;
}
cite {
@ -1560,7 +1562,8 @@ ul.primary-menu {
}
.primary-menu a:hover,
.primary-menu a:focus {
.primary-menu a:focus,
.primary-menu .current_page_ancestor {
text-decoration: underline;
}
@ -1666,12 +1669,15 @@ ul.primary-menu {
.primary-menu ul ul::after {
border-bottom-color: transparent;
border-right-color: #000;
border-left-color: #000;
bottom: auto;
left: -1.6rem;
top: 2rem;
}
.rtl .primary-menu ul ul::after {
transform: rotate(-180deg);
}
/* -------------------------------------------------------------------------- */
@ -1800,7 +1806,8 @@ button.close-nav-toggle .toggle-text {
.modal-menu a:focus,
.modal-menu a:hover,
.modal-menu li.current-menu-item > .ancestor-wrapper > a {
.modal-menu li.current-menu-item > .ancestor-wrapper > a,
.modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
text-decoration: underline;
}
@ -2613,7 +2620,7 @@ h2.entry-title {
/* Block Typography Classes ------------------ */
.has-text-align-left {
text-align: right;
text-align: left;
}
.has-text-align-center {
@ -3171,8 +3178,8 @@ hr.wp-block-separator {
}
.wp-block-quote[style="text-align:right"] {
border-width: 0 0 0 0.2rem;
padding: 0 0 0 2rem;
border-width: 0 0.2rem 0 0;
padding: 0 2rem 0 0;
}
/* STYLE: LARGE */
@ -4012,7 +4019,7 @@ div.comment:first-of-type {
/* Widget: RSS ------------------------------- */
.widget_rss a.rsswidget:first-of-type {
.widget_rss .widget-title a.rsswidget:first-of-type {
display: none;
}
@ -4992,6 +4999,14 @@ a.to-the-top > * {
margin-top: 4rem;
}
.alignleft {
margin: 0.3rem 0 2rem 2rem;
}
.alignright {
margin: 0.3rem 2rem 2rem 0;
}
.alignwide,
.alignfull {
margin-bottom: 6rem;

View File

@ -257,14 +257,16 @@ Inter variable font. Usage:
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: normal;
src: url(./assets/fonts/inter/Inter-upright.var.woff2) format("woff2");
font-display: swap;
src: url(./assets/fonts/inter/Inter-upright-var.woff2) format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
font-style: italic;
src: url(./assets/fonts/inter/Inter-italic.var.woff2) format("woff2");
font-display: swap;
src: url(./assets/fonts/inter/Inter-italic-var.woff2) format("woff2");
}
@ -534,10 +536,14 @@ dd + dt {
blockquote {
border-color: #cd2653;
border-style: solid;
/*rtl:ignore*/
border-width: 0 0 0 0.2rem;
color: inherit;
font-size: 1em;
margin: 4rem 0;
/*rtl:ignore*/
padding: 0.5rem 0 0.5rem 2rem;
}
@ -1562,7 +1568,8 @@ ul.primary-menu {
}
.primary-menu a:hover,
.primary-menu a:focus {
.primary-menu a:focus,
.primary-menu .current_page_ancestor {
text-decoration: underline;
}
@ -1668,12 +1675,17 @@ ul.primary-menu {
.primary-menu ul ul::after {
border-bottom-color: transparent;
/*rtl:ignore*/
border-left-color: #000;
bottom: auto;
right: -1.6rem;
top: 2rem;
}
.rtl .primary-menu ul ul::after {
transform: rotate(180deg);
}
/* -------------------------------------------------------------------------- */
@ -1802,7 +1814,8 @@ button.close-nav-toggle .toggle-text {
.modal-menu a:focus,
.modal-menu a:hover,
.modal-menu li.current-menu-item > .ancestor-wrapper > a {
.modal-menu li.current-menu-item > .ancestor-wrapper > a,
.modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
text-decoration: underline;
}
@ -2615,6 +2628,8 @@ h2.entry-title {
/* Block Typography Classes ------------------ */
.has-text-align-left {
/*rtl:ignore*/
text-align: left;
}
@ -3173,8 +3188,12 @@ hr.wp-block-separator {
}
.wp-block-quote[style="text-align:right"] {
/*rtl:begin:ignore*/
border-width: 0 0.2rem 0 0;
padding: 0 2rem 0 0;
/*rtl:end:ignore*/
}
/* STYLE: LARGE */
@ -4018,7 +4037,7 @@ div.comment:first-of-type {
/* Widget: RSS ------------------------------- */
.widget_rss a.rsswidget:first-of-type {
.widget_rss .widget-title a.rsswidget:first-of-type {
display: none;
}
@ -5006,6 +5025,14 @@ a.to-the-top > * {
margin-top: 4rem;
}
.alignleft {
margin: 0.3rem 2rem 2rem 0;
}
.alignright {
margin: 0.3rem 0 2rem 2rem;
}
.alignwide,
.alignfull {
margin-bottom: 6rem;

View File

@ -166,7 +166,7 @@
* Output comments wrapper if it's a post, or if comments are open,
* or if there's a comment number and check for password.
* */
if ( ( 'post' === $post->post_type || comments_open() || get_comments_number() ) && ! post_password_required() ) {
if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
?>
<div class="comments-wrapper section-inner">

View File

@ -33,7 +33,7 @@
if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
the_excerpt();
} else {
the_content();
the_content( sprintf( '<span class="faux-button">%1$s</span> <span class="screen-reader-text">"%2$s"</span>', __( 'Continue reading', 'twentytwenty' ), get_the_title() ) );
}
?>
@ -75,7 +75,7 @@
* Output comments wrapper if it's a post, or if comments are open,
* or if there's a comment number and check for password.
* */
if ( ( 'post' === $post->post_type || comments_open() || get_comments_number() ) && ! post_password_required() ) {
if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
?>
<div class="comments-wrapper section-inner">

View File

@ -22,7 +22,7 @@
);
?>
<button class="toggle search-untoggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field">
<button class="toggle search-untoggle close-search-toggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field">
<span class="screen-reader-text"><?php _e( 'Close search', 'twentytwenty' ); ?></span>
<?php twentytwenty_the_theme_svg( 'cross' ); ?>
</button><!-- .search-toggle -->

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3-beta3-46550';
$wp_version = '5.3-beta3-46551';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.