Skip to content
Permalink
Browse files

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update changes the following: 

- Improve menu UI to support keyboard navigation in both directions
- Improve more-menu-link visibility when no menu items are hidden
- Improve text-selection custom colors for better contrast and legibility
- Improve support for sticky toolbars in the editor
- Improve table element fonts
- Add .button class support 
- Remove translation escaping
- Fix menu JS to prevent unused touched event listeners
- Fix duplicate more-menu-link issue on selective refresh in the customizer
- Fix editor font-weights for headings
- Fix search form input style
- Fix nested blockquote styles
- Fix download block button style when download text stretches more than one line
- Fix audio block centering issue
- Fix align-full blocks in the editor so they don’t create horizontal scrollbars
- Fix editor to prevent Gutenberg's meta boxes area from overlapping the content

Initial development occurred on GitHub. See: https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, ntwb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins12, peterwilsoncc, DannyCooper, WPprodigy, siriokun, briannaorg, 00travelgirl00, shahjehanali1, ianbelanger79, nadim1992, Ismail-elkorchi, nativeinside, iamchetanp, grappler, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, jasmussen, laurelfulford, mdawaffe, kraftbj, dereksmart, naokomc, mayukojpn, enodekciw, chetansatasiya, ketuchetan, atanas-angelov-dev, carolinan, sharazghouri, artisan-asad, mukeshpanchal27, mukesh27, burhandodhy, @crunnells, aryaprakasa, tlxo, themeroots, whizbangik, yingles, tlxo, youthkee, brentswisher, smy315, ahmadawais, desi-developer, 2ndkauboy, mor10.


git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43904 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
allancole
allancole committed Nov 16, 2018
1 parent f29f39b commit ea48d8514b785a3ef40d4939a310925c361195f0
@@ -26,17 +26,20 @@ function twentynineteen_custom_colors_css() {
* @param int $saturation Color saturation level.
*/
$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
$saturation = $saturation . '%';
$saturation = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
$saturation = $saturation . '%';
$lightness = absint( apply_filters( 'twentynineteen_custom_colors_lightness', 33 ) );
$lightness = $lightness . '%';
$saturation_selection = absint( apply_filters( 'twentynineteen_custom_colors_saturation_selection', 50 ) );
$saturation_selection = $saturation_selection . '%';
$lightness_hover = absint( apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 ) );
$lightness_hover = $lightness_hover . '%';
$lightness = absint( apply_filters( 'twentynineteen_custom_colors_lightness', 33 ) );
$lightness = $lightness . '%';
$lightness_selection = absint( apply_filters( 'twentynineteen_custom_colors_lightness_selection', 90 ) );
$lightness_selection = $lightness_selection . '%';
$lightness_hover = absint( apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 ) );
$lightness_hover = $lightness_hover . '%';
$lightness_selection = absint( apply_filters( 'twentynineteen_custom_colors_lightness_selection', 90 ) );
$lightness_selection = $lightness_selection . '%';
$theme_css = '
/*
@@ -82,7 +85,7 @@ function twentynineteen_custom_colors_css() {
* - Widget links
*/
a,
a:visited,
a:not(.button):visited,
.main-navigation .main-menu > li,
.main-navigation ul.main-menu > li > a,
.post-navigation .post-title,
@@ -168,10 +171,10 @@ function twentynineteen_custom_colors_css() {
/* Text selection colors */
::selection {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */
background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */
}
::-moz-selection {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */
background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */
}';
$editor_css = '
@@ -186,7 +189,8 @@ function twentynineteen_custom_colors_css() {
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
.editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color),
.editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__textlink {
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
@@ -209,7 +213,8 @@ function twentynineteen_custom_colors_css() {
/* Hover colors */
.editor-block-list__layout .editor-block-list__block a:hover,
.editor-block-list__layout .editor-block-list__block a:active {
.editor-block-list__layout .editor-block-list__block a:active,
.editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__textlink:hover {
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}
@@ -205,19 +205,19 @@ function twentynineteen_add_ellipses_to_nav( $nav_menu, $args ) {
if ( 'menu-1' === $args->theme_location ) :
$nav_menu .= '<div class="main-menu-more" >';
$nav_menu .= '<div class="main-menu-more">';
$nav_menu .= '<ul class="main-menu" tabindex="0">';
$nav_menu .= '<li class="menu-item menu-item-has-children">';
$nav_menu .= '<a href="#" class="screen-reader-text" aria-label="More" aria-haspopup="true" aria-expanded="false">' . esc_html( 'More', 'twentynineteen' ) . '</a>';
$nav_menu .= '<span class="submenu-expand main-menu-more-toggle" tabindex="-1">';
$nav_menu .= '<a href="#" class="screen-reader-text" aria-label="More" aria-haspopup="true" aria-expanded="false">' . esc_html__( 'More', 'twentynineteen' ) . '</a>';
$nav_menu .= '<span class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1">';
$nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
$nav_menu .= '</span>';
$nav_menu .= '<ul class="sub-menu hidden-links is-hidden">';
$nav_menu .= '<ul class="sub-menu hidden-links">';
$nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
$nav_menu .= '<a class="menu-item-link-return" id="menu-item-link-return-1877" href="#menu-item-link-1877" onclick="event.preventDefault();" tabindex="-1">';
$nav_menu .= '<span class="menu-item-link-return">';
$nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
$nav_menu .= esc_html__( 'Back', 'twentynineteen' );
$nav_menu .= '</a>';
$nav_menu .= '</span>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</li>';
@@ -1,4 +1,41 @@
(function() {

/**
* Debounce
*
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
*/
function debounce(func, wait, immediate) {
'use strict';

var timeout;
wait = (typeof wait !== 'undefined') ? wait : 20;
immediate = (typeof immediate !== 'undefined') ? immediate : true;

return function() {

var context = this, args = arguments;
var later = function() {
timeout = null;

if (!immediate) {
func.apply(context, args);
}
};

var callNow = immediate && !timeout;

clearTimeout(timeout);
timeout = setTimeout(later, wait);

if (callNow) {
func.apply(context, args);
}
};
}

/**
* Prepends an element to a container.
*
@@ -18,111 +55,137 @@
*
* @param {Element} element
*/
function showElement(element) {
function showButton(element) {
// classList.remove is not supported in IE11
element.className = element.className.replace('is-hidden', '');
element.className = element.className.replace('is-empty', '');
}

/**
* Hides an element by removing the hidden className.
*
* @param {Element} element
*/
function hideElement(element) {
function hideButton(element) {
// classList.add is not supported in IE11
if (!element.classList.contains('is-hidden')) {
element.className += ' is-hidden';
}
}

/**
* Toggles the element visibility.
*
* @param {Element} element
*/
function toggleElementVisibility(element) {
if (element.classList.contains('is-hidden')) {
showElement(element);
} else {
hideElement(element);
if (!element.classList.contains('is-empty')) {
element.className += ' is-empty';
}
}

var navContainer = document.querySelector('.main-navigation');
// Adds the necessary UI to operate the menu.
var toggleButton = document.querySelector('.main-navigation .main-menu-more-toggle');
var visibleList = document.querySelector('.main-navigation .main-menu[id]');
var hiddenList = document.querySelector('.main-navigation .hidden-links');
var breaks = [];

/**
* Returns the currently available space in the menu container.
*
* @returns {number} Available space
*/
function getAvailableSpace() {
return toggleButton.classList.contains('hidden') ? navContainer.offsetWidth : navContainer.offsetWidth - toggleButton.offsetWidth - 50;
function getAvailableSpace( button, container ) {
return container.offsetWidth - button.offsetWidth - 50;
}

/**
* Returns whether the current menu is overflowing or not.
*
* @returns {boolean} Is overflowing
*/
function isOverflowingNavivation() {
return visibleList.offsetWidth > getAvailableSpace();
function isOverflowingNavivation( list, button, container ) {
return list.offsetWidth > getAvailableSpace( button, container );
}

/**
* Set menu container variable
*/
var navContainer = document.querySelector('.main-navigation');
var breaks = [];

/**
* Refreshes the list item from the menu depending on the menu size
*/
function updateNavigationMenu() {
function updateNavigationMenu( container ) {

// Adds the necessary UI to operate the menu.
var visibleList = container.parentNode.querySelector('.main-menu[id]');
var hiddenList = visibleList.parentNode.nextElementSibling.querySelector('.hidden-links');
var toggleButton = visibleList.parentNode.nextElementSibling.querySelector('.main-menu-more-toggle');

if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {

if (isOverflowingNavivation()) {
// Record the width of the list
breaks.push(visibleList.offsetWidth);
// Move item to the hidden list
prependElement(hiddenList, visibleList.lastChild);
breaks.push( visibleList.offsetWidth );
// Move last item to the hidden list
prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild );
// Show the toggle button
showElement(toggleButton);
showButton( toggleButton );

} else {

// There is space for another item in the nav
if (getAvailableSpace() > breaks[breaks.length - 1]) {
if ( getAvailableSpace( toggleButton, container ) > breaks[breaks.length - 1] ) {
// Move the item to the visible list
visibleList.appendChild(hiddenList.firstChild.nextSibling);
visibleList.appendChild( hiddenList.firstChild.nextSibling );
breaks.pop();
}

// Hide the dropdown btn if hidden list is empty
if (breaks.length < 2) {
hideElement(toggleButton);
hideElement(hiddenList);
hideButton( toggleButton );
}
}

// Recur if the visible list is still overflowing the nav
if (isOverflowingNavivation()) {
updateNavigationMenu();
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
updateNavigationMenu( container );
}
}

// Event listeners
// Run our sub-menu function as soon as the document is `ready`
/**
* Run our priority+ function as soon as the document is `ready`
*/
document.addEventListener( 'DOMContentLoaded', function() {
updateNavigationMenu();

updateNavigationMenu( navContainer );

// Also, run our priority+ function on selective refresh in the customizer
var hasSelectiveRefresh = (
'undefined' !== typeof wp &&
wp.customize &&
wp.customize.selectiveRefresh
);

if ( hasSelectiveRefresh ) {
// Force a full refresh on partial content renders to re-run updateNavigationMenu()
wp.customize.selectiveRefresh.bind('partial-content-rendered', function () {
wp.customize.preview.send('refresh');
});
}
});

/**
* Run our priority+ function on load
*/
window.addEventListener('load', function() {
updateNavigationMenu();
updateNavigationMenu( navContainer );
});

window.addEventListener('resize', function() {
updateNavigationMenu();
});
/**
* Run our priority+ function every time the window resizes
*/
var isResizing = false;
window.addEventListener( 'resize',
debounce( function() {
if ( isResizing ) {
return;
}

toggleButton.addEventListener('click', function() {
toggleElementVisibility(hiddenList);
});
isResizing = true;
setTimeout( function() {
updateNavigationMenu( navContainer );
isResizing = false;
}, 150 );
} )
);

/**
* Run our priority+ function
*/
updateNavigationMenu( navContainer );

updateNavigationMenu();
})();

0 comments on commit ea48d85

Please sign in to comment.
You can’t perform that action at this time.