Skip to content
Permalink
Browse files

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

This update changes the following: 

- Fix JS errors in customizer caused by menu scripts
- Fix footer menu spacing
- Fix pullquote block borders to follow Gutenberg’s described style
- Fix editor-only styles so they don't appear on the frontend when not needed
- Fix search field widget width on mobile
- Fix :visited .button link colors
- Fix Block toolbar position in the editor
- Fix off-canvas mobile menu to prevent text from overflowing
- Improve column block formatting for the editor and frontend
- Improve CSS optimization for selectors that add `dashes` to multi-level lists
- Improve editor font sizes to use pixels over ems
- Improve styles for galleries in the Classic Editor block
- Improve priority+ more-menu threshold to allow more space for menu-items
- Improve logo size on mobile devices
- Improve customizer color options to present a single, unified color option
- Improve print stylesheet for better spacing and colors
- Add more color options to Gutenberg editor 

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

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard



git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43909 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
allancole
allancole committed Nov 19, 2018
1 parent 9ea3656 commit 12546370e72fe3df291160256b7349ec2aebe93d
Showing with 1,101 additions and 1,042 deletions.
  1. +57 −7 src/wp-content/themes/twentynineteen/functions.php
  2. +20 −11 src/wp-content/themes/twentynineteen/inc/color-patterns.php
  3. +18 −42 src/wp-content/themes/twentynineteen/inc/customizer.php
  4. +3 −3 src/wp-content/themes/twentynineteen/inc/template-functions.php
  5. +3 −3 src/wp-content/themes/twentynineteen/js/customize-controls.js
  6. +9 −9 src/wp-content/themes/twentynineteen/js/customize-preview.js
  7. +31 −6 src/wp-content/themes/twentynineteen/js/priority-menu.js
  8. +14 −3 src/wp-content/themes/twentynineteen/print.css
  9. +17 −4 src/wp-content/themes/twentynineteen/print.scss
  10. +149 −32 src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
  11. +3 −3 src/wp-content/themes/twentynineteen/sass/media/_galleries.scss
  12. +8 −29 src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
  13. +23 −60 src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss
  14. +14 −13 src/wp-content/themes/twentynineteen/sass/site/footer/_site-footer.scss
  15. +13 −13 src/wp-content/themes/twentynineteen/sass/site/header/_site-header.scss
  16. +8 −0 src/wp-content/themes/twentynineteen/sass/site/secondary/_widgets.scss
  17. +1 −15 src/wp-content/themes/twentynineteen/sass/variables-site/_fonts.scss
  18. +84 −49 src/wp-content/themes/twentynineteen/style-editor.css
  19. +65 −9 src/wp-content/themes/twentynineteen/style-editor.scss
  20. +280 −365 src/wp-content/themes/twentynineteen/style-rtl.css
  21. +281 −366 src/wp-content/themes/twentynineteen/style.css
@@ -107,21 +107,71 @@ function twentynineteen_setup() {
// Enqueue editor styles.
add_editor_style( 'style-editor.css' );
// Add custom editor font sizes
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => __( 'Small', 'twentynineteen' ),
'shortName' => __( 'S', 'twentynineteen' ),
'size' => 19.5,
'slug' => 'small',
),
array(
'name' => __( 'Normal', 'twentynineteen' ),
'shortName' => __( 'M', 'twentynineteen' ),
'size' => 22,
'slug' => 'normal',
),
array(
'name' => __( 'Large', 'twentynineteen' ),
'shortName' => __( 'L', 'twentynineteen' ),
'size' => 36.5,
'slug' => 'large',
),
array(
'name' => __( 'Huge', 'twentynineteen' ),
'shortName' => __( 'XL', 'twentynineteen' ),
'size' => 49.5,
'slug' => 'huge',
),
)
);
// Editor color palette.
add_theme_support(
'editor-color-palette',
array(
array(
'name' => __( 'Primary Color', 'twentynineteen' ),
'name' => __( 'Primary', 'twentynineteen' ),
'slug' => 'primary',
'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'colorscheme' ) ? 199 : get_theme_mod( 'colorscheme_primary_hue', 199 ), 100, 33 ),
'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 33 ),
),
array(
'name' => __( 'Secondary', 'twentynineteen' ),
'slug' => 'secondary',
'color' => twentynineteen_hsl_hex( 'default' === get_theme_mod( 'primary_color' ) ? 199 : get_theme_mod( 'primary_color_hue', 199 ), 100, 23 ),
),
array(
'name' => __( 'Dark Gray', 'twentynineteen' ),
'slug' => 'dark-gray',
'color' => '#111',
),
array(
'name' => __( 'Light Gray', 'twentynineteen' ),
'slug' => 'light-gray',
'color' => '#767676',
),
array(
'name' => __( 'White', 'twentynineteen' ),
'slug' => 'white',
'color' => '#FFF',
),
)
);
// Add support for responsive embedded content.
add_theme_support( 'responsive-embeds' );
}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
@@ -193,7 +243,7 @@ function twentynineteen_editor_customizer_styles() {
wp_enqueue_style( 'twentynineteen-editor-customizer-styles', get_theme_file_uri( '/style-editor-customizer.css' ), false, '1.0', 'all' );
if ( 'custom' === get_theme_mod( 'colorscheme' ) ) {
if ( 'custom' === get_theme_mod( 'primary_color' ) ) {
// Include color patterns
require_once get_parent_theme_file_path( '/inc/color-patterns.php' );
wp_add_inline_style( 'twentynineteen-editor-customizer-styles', twentynineteen_custom_colors_css() );
@@ -207,16 +257,16 @@ function twentynineteen_editor_customizer_styles() {
function twentynineteen_colors_css_wrap() {
// Only include custom colors in customizer or frontend.
if ( ( ! is_customize_preview() && 'default' === get_theme_mod( 'colorscheme', 'default' ) ) || is_admin() ) {
if ( ( ! is_customize_preview() && 'default' === get_theme_mod( 'primary_color', 'default' ) ) || is_admin() ) {
return;
}
require_once get_parent_theme_file_path( '/inc/color-patterns.php' );
if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) {
if ( 'default' === get_theme_mod( 'primary_color', 'default' ) ) {
$primary_color = 199;
} else {
$primary_color = absint( get_theme_mod( 'colorscheme_primary_hue', 199 ) );
$primary_color = absint( get_theme_mod( 'primary_color_hue', 199 ) );
}
?>

@@ -8,14 +8,14 @@
*/
/**
* Generate the CSS for the current custom color scheme.
* Generate the CSS for the current primary color.
*/
function twentynineteen_custom_colors_css() {
if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) {
if ( 'default' === get_theme_mod( 'primary_color', 'default' ) ) {
$primary_color = 199;
} else {
$primary_color = absint( get_theme_mod( 'colorscheme_primary_hue', 199 ) );
$primary_color = absint( get_theme_mod( 'primary_color_hue', 199 ) );
}
/**
@@ -60,13 +60,13 @@ function twentynineteen_custom_colors_css() {
.image-filters-enabled .entry .post-thumbnail:after,
.main-navigation .sub-menu,
.sticky-post,
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .wp-block-button .wp-block-button__link:not(.has-background),
.entry .button, button, input[type="button"], input[type="reset"], input[type="submit"],
.entry .entry-content > .has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"].has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"] .has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-primary-background-color,
.entry .entry-content .wp-block-file .wp-block-file__button {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
@@ -85,7 +85,7 @@ function twentynineteen_custom_colors_css() {
* - Widget links
*/
a,
a:not(.button):visited,
a:visited,
.main-navigation .main-menu > li,
.main-navigation ul.main-menu > li > a,
.post-navigation .post-title,
@@ -97,11 +97,11 @@ function twentynineteen_custom_colors_css() {
.comment .comment-metadata .comment-edit-link:hover,
#colophon .site-info a:hover,
.widget a,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.entry .entry-content > .has-primary-color,
.entry .entry-content > *[class^="wp-block-"] .has-primary-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color p {
color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
@@ -147,8 +147,13 @@ function twentynineteen_custom_colors_css() {
a:hover, a:active,
.main-navigation .main-menu > li > a:hover,
.main-navigation .main-menu > li > a:hover + svg,
.post-navigation .nav-links a:hover,
.post-navigation .nav-links a:hover .post-title,
.author-bio .author-description .author-link:hover,
.entry .entry-content > .has-secondary-color,
.entry .entry-content > *[class^="wp-block-"] .has-secondary-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color p,
.comment .comment-author .fn a:hover,
.comment-reply-link:hover,
.comment-navigation .nav-previous a:hover,
@@ -165,7 +170,11 @@ function twentynineteen_custom_colors_css() {
.main-navigation .sub-menu > li > .menu-item-link-return:hover,
.main-navigation .sub-menu > li > .menu-item-link-return:focus,
.main-navigation .sub-menu > li > a:not(.submenu-expand):hover,
.main-navigation .sub-menu > li > a:not(.submenu-expand):focus {
.main-navigation .sub-menu > li > a:not(.submenu-expand):focus,
.entry .entry-content > .has-secondary-background-color,
.entry .entry-content > *[class^="wp-block-"].has-secondary-background-color,
.entry .entry-content > *[class^="wp-block-"] .has-secondary-background-color,
.entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-secondary-background-color {
background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}
@@ -1,6 +1,6 @@
<?php
/**
* Twenty Nineteen Theme Customizer
* Twenty Nineteen: Customizer
*
* @package WordPress
* @subpackage Twenty_Nineteen
@@ -35,10 +35,10 @@ function twentynineteen_customize_register( $wp_customize ) {
}
/**
* Custom colors.
* Primary color.
*/
$wp_customize->add_setting(
'colorscheme',
'primary_color',
array(
'default' => 'default',
'transport' => 'postMessage',
@@ -47,22 +47,22 @@ function twentynineteen_customize_register( $wp_customize ) {
);
$wp_customize->add_control(
'colorscheme',
'primary_color',
array(
'type' => 'radio',
'label' => __( 'Color Scheme', 'twentynineteen' ),
'label' => __( 'Primary Color', 'twentynineteen' ),
'choices' => array(
'default' => _x( 'Default', 'color scheme', 'twentynineteen' ),
'custom' => _x( 'Custom', 'color scheme', 'twentynineteen' ),
'default' => _x( 'Default', 'primary color', 'twentynineteen' ),
'custom' => _x( 'Custom', 'primary color', 'twentynineteen' ),
),
'section' => 'colors',
'priority' => 5,
)
);
// Add primary color setting and control.
// Add primary color hue setting and control.
$wp_customize->add_setting(
'colorscheme_primary_hue',
'primary_color_hue',
array(
'default' => 199,
'transport' => 'postMessage',
@@ -73,36 +73,31 @@ function twentynineteen_customize_register( $wp_customize ) {
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'colorscheme_primary_hue',
'primary_color_hue',
array(
'label' => __( 'Primary Color', 'twentynineteen' ),
'description' => __( 'Changes the Color of the Featured Image overlay, Buttons, Links etc.', 'twentynineteen' ),
'description' => __( 'Apply a custom color for buttons, links, featured images, etc.', 'twentynineteen' ),
'section' => 'colors',
'mode' => 'hue',
)
)
);
// Add image filter setting and control.
$wp_customize->add_setting(
'image_filter',
array(
'default' => 'active',
'sanitize_callback' => 'twentynineteen_sanitize_image_filter',
'default' => 1,
'sanitize_callback' => 'absint',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
'image_filter',
array(
'label' => __( 'Featured Image Color Filter', 'twentynineteen' ),
'section' => 'colors',
'type' => 'radio',
'description' => __( "Twenty Nineteen adds a color filter to featured images using your site's primary color. If you disable this effect, the theme will use a black filter in individual posts to keep text readable when it appears on top of the featured image.", 'twentynineteen' ) . '<br/><span style="font-style: normal; display: block; margin-top: 16px;">' . __( 'On Featured Images, apply', 'twentynineteen' ) . '</span>',
'choices' => array(
'active' => __( 'A color filter', 'twentynineteen' ),
'inactive' => __( 'A black filter', 'twentynineteen' ),
),
'label' => __( 'Apply a filter to featured images using the primary color', 'twentynineteen' ),
'section' => 'colors',
'type' => 'checkbox',
)
);
}
@@ -143,7 +138,7 @@ function twentynineteen_panels_js() {
add_action( 'customize_controls_enqueue_scripts', 'twentynineteen_panels_js' );
/**
* Sanitize image filter choice.
* Sanitize custom color choice.
*
* @param string $choice Whether image filter is active.
*
@@ -161,22 +156,3 @@ function twentynineteen_sanitize_color_option( $choice ) {
return 'default';
}
/**
* Sanitize image filter choice.
*
* @param string $choice Whether image filter is active.
*
* @return string
*/
function twentynineteen_sanitize_image_filter( $choice ) {
$valid = array(
'active',
'inactive',
);
if ( in_array( $choice, $valid, true ) ) {
return $choice;
}
return 'active';
}
@@ -106,10 +106,10 @@ function twentynineteen_can_show_post_thumbnail() {
* Returns true if image filters are enabled on the theme options.
*/
function twentynineteen_image_filters_enabled() {
if ( 'inactive' === get_theme_mod( 'image_filter' ) ) {
return false;
if ( get_theme_mod( 'image_filter', 1 ) ) {
return true;
}
return true;
return false;
}
/**
@@ -10,9 +10,9 @@

wp.customize.bind( 'ready', function() {

// Only show the color hue control when there's a custom color scheme.
wp.customize( 'colorscheme', function( setting ) {
wp.customize.control( 'colorscheme_primary_hue', function( control ) {
// Only show the color hue control when there's a custom primary color.
wp.customize( 'primary_color', function( setting ) {
wp.customize.control( 'primary_color_hue', function( control ) {
var visibility = function() {
if ( 'custom' === setting.get() ) {
control.container.slideDown( 180 );
@@ -8,20 +8,20 @@

(function( $ ) {

// Default color.
wp.customize( 'colorscheme', function( value ) {
// Primary color.
wp.customize( 'primary_color', function( value ) {
value.bind( function( to ) {
// Update custom color CSS.
var style = $( '#custom-theme-colors' ),
hue = style.data( 'hue' ),
css = style.html(),
color;

if( to === 'custom' ){
//If a "custom" color option is selected, use the currently set colorscheme_primary_hue
color = wp.customize.get().colorscheme_primary_hue;
if( 'custom' === to ){
// If a custom primary color is selected, use the currently set primary_color_hue
color = wp.customize.get().primary_color_hue;
} else {
//If the "default" option is selected, get the default primary_hue
// If the "default" option is selected, get the default primary_color_hue
color = 199;
}

@@ -31,8 +31,8 @@
});
});

// Primary color.
wp.customize( 'colorscheme_primary_hue', function( value ) {
// Primary color hue.
wp.customize( 'primary_color_hue', function( value ) {
value.bind( function( to ) {

// Update custom color CSS.
@@ -49,7 +49,7 @@
// Image filter.
wp.customize( 'image_filter', function( value ) {
value.bind( function( to ) {
if ( 'active' === to ) {
if ( to ) {
$( 'body' ).addClass( 'image-filters-enabled' );
} else {
$( 'body' ).removeClass( 'image-filters-enabled' );

0 comments on commit 1254637

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