Skip to content
Snippets Groups Projects
Commit b039a2b0 authored by agata's avatar agata
Browse files

[auto] theme: twentytwenty 1.3

parent 7aa638da
Branches
Tags
No related merge requests found
Showing
with 8188 additions and 6450 deletions
{ {
"extends": [ "extends": [
"stylelint-config-wordpress" "stylelint-config-wordpress"
], ],
"plugins": ["stylelint-a11y"], "plugins": ["stylelint-a11y"],
"rules": { "rules": {
"font-family-no-missing-generic-family-keyword": null, "font-family-no-missing-generic-family-keyword": null,
"no-descending-specificity": null, "no-descending-specificity": null,
"a11y/no-outline-none": true, "a11y/no-outline-none": true,
"a11y/selector-pseudo-class-focus": true "a11y/selector-pseudo-class-focus": true
} }
} }
<?php <?php
/** /**
* The template for displaying the 404 template in the Twenty Twenty theme. * The template for displaying the 404 template in the Twenty Twenty theme.
* *
* @package WordPress * @package WordPress
* @subpackage Twenty_Twenty * @subpackage Twenty_Twenty
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
*/ */
get_header(); get_header();
?> ?>
<main id="site-content" role="main"> <main id="site-content" role="main">
<div class="section-inner thin error404-content"> <div class="section-inner thin error404-content">
<h1 class="entry-title"><?php _e( 'Page Not Found', 'twentytwenty' ); ?></h1> <h1 class="entry-title"><?php _e( 'Page Not Found', 'twentytwenty' ); ?></h1>
<div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.', 'twentytwenty' ); ?></p></div> <div class="intro-text"><p><?php _e( 'The page you were looking for could not be found. It might have been removed, renamed, or did not exist in the first place.', 'twentytwenty' ); ?></p></div>
<?php <?php
get_search_form( get_search_form(
array( array(
'label' => __( '404 not found', 'twentytwenty' ), 'label' => __( '404 not found', 'twentytwenty' ),
) )
); );
?> ?>
</div><!-- .section-inner --> </div><!-- .section-inner -->
</main><!-- #site-content --> </main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php <?php
get_footer(); get_footer();
This diff is collapsed.
/* global Color */ /* global Color */
/* eslint no-unused-vars: off */ /* eslint no-unused-vars: off */
/** /**
* Color Calculations. * Color Calculations.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @param {string} backgroundColor - The background color. * @param {string} backgroundColor - The background color.
* @param {number} accentHue - The hue for our accent color. * @param {number} accentHue - The hue for our accent color.
* *
* @return {Object} - this * @return {Object} - this
*/ */
function _twentyTwentyColor( backgroundColor, accentHue ) { function _twentyTwentyColor( backgroundColor, accentHue ) {
// Set the object properties. // Set the object properties.
this.backgroundColor = backgroundColor; this.backgroundColor = backgroundColor;
this.accentHue = accentHue; this.accentHue = accentHue;
this.bgColorObj = new Color( backgroundColor ); this.bgColorObj = new Color( backgroundColor );
this.textColorObj = this.bgColorObj.getMaxContrastColor(); this.textColorObj = this.bgColorObj.getMaxContrastColor();
this.textColor = this.textColorObj.toCSS(); this.textColor = this.textColorObj.toCSS();
this.isDark = 0.5 > this.bgColorObj.toLuminosity(); this.isDark = 0.5 > this.bgColorObj.toLuminosity();
this.isLight = ! this.isDark; this.isLight = ! this.isDark;
// Return the object. // Return the object.
return this; return this;
} }
/** /**
* Builds an array of Color objects based on the accent hue. * Builds an array of Color objects based on the accent hue.
* For improved performance we only build half the array * For improved performance we only build half the array
* depending on dark/light background-color. * depending on dark/light background-color.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @return {Object} - this * @return {Object} - this
*/ */
_twentyTwentyColor.prototype.setAccentColorsArray = function() { _twentyTwentyColor.prototype.setAccentColorsArray = function() {
var self = this, var self = this,
minSaturation = 65, minSaturation = 65,
maxSaturation = 100, maxSaturation = 100,
minLightness = 30, minLightness = 30,
maxLightness = 80, maxLightness = 80,
stepSaturation = 2, stepSaturation = 2,
stepLightness = 2, stepLightness = 2,
pushColor = function() { pushColor = function() {
var colorObj = new Color( { var colorObj = new Color( {
h: self.accentHue, h: self.accentHue,
s: s, s: s,
l: l l: l
} ), } ),
item, item,
/** /**
* Get a score for this color in contrast to its background color and surrounding text. * Get a score for this color in contrast to its background color and surrounding text.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @param {number} contrastBackground - WCAG contrast with the background color. * @param {number} contrastBackground - WCAG contrast with the background color.
* @param {number} contrastSurroundingText - WCAG contrast with surrounding text. * @param {number} contrastSurroundingText - WCAG contrast with surrounding text.
* @return {number} - 0 is best, higher numbers have bigger difference with the desired scores. * @return {number} - 0 is best, higher numbers have bigger difference with the desired scores.
*/ */
getScore = function( contrastBackground, contrastSurroundingText ) { getScore = function( contrastBackground, contrastSurroundingText ) {
var diffBackground = ( 7 >= contrastBackground ) ? 0 : 7 - contrastBackground, var diffBackground = ( 7 >= contrastBackground ) ? 0 : 7 - contrastBackground,
diffSurroundingText = ( 3 >= contrastSurroundingText ) ? 0 : 3 - contrastSurroundingText; diffSurroundingText = ( 3 >= contrastSurroundingText ) ? 0 : 3 - contrastSurroundingText;
return diffBackground + diffSurroundingText; return diffBackground + diffSurroundingText;
}; };
item = { item = {
color: colorObj, color: colorObj,
contrastBackground: colorObj.getDistanceLuminosityFrom( self.bgColorObj ), contrastBackground: colorObj.getDistanceLuminosityFrom( self.bgColorObj ),
contrastText: colorObj.getDistanceLuminosityFrom( self.textColorObj ) contrastText: colorObj.getDistanceLuminosityFrom( self.textColorObj )
}; };
// Check a minimum of 4.5:1 contrast with the background and 3:1 with surrounding text. // Check a minimum of 4.5:1 contrast with the background and 3:1 with surrounding text.
if ( 4.5 > item.contrastBackground || 3 > item.contrastText ) { if ( 4.5 > item.contrastBackground || 3 > item.contrastText ) {
return; return;
} }
// Get a score for this color by multiplying the 2 contrasts. // Get a score for this color by multiplying the 2 contrasts.
// We'll use that to sort the array. // We'll use that to sort the array.
item.score = getScore( item.contrastBackground, item.contrastText ); item.score = getScore( item.contrastBackground, item.contrastText );
self.accentColorsArray.push( item ); self.accentColorsArray.push( item );
}, },
s, l, aaa; s, l, aaa;
this.accentColorsArray = []; this.accentColorsArray = [];
// We're using `for` loops here because they perform marginally better than other loops. // We're using `for` loops here because they perform marginally better than other loops.
for ( s = minSaturation; s <= maxSaturation; s += stepSaturation ) { for ( s = minSaturation; s <= maxSaturation; s += stepSaturation ) {
for ( l = minLightness; l <= maxLightness; l += stepLightness ) { for ( l = minLightness; l <= maxLightness; l += stepLightness ) {
pushColor( s, l ); pushColor( s, l );
} }
} }
// Check if we have colors that are AAA compliant. // Check if we have colors that are AAA compliant.
aaa = this.accentColorsArray.filter( function( color ) { aaa = this.accentColorsArray.filter( function( color ) {
return 7 <= color.contrastBackground; return 7 <= color.contrastBackground;
} ); } );
// If we have AAA-compliant colors, always prefer them. // If we have AAA-compliant colors, always prefer them.
if ( aaa.length ) { if ( aaa.length ) {
this.accentColorsArray = aaa; this.accentColorsArray = aaa;
} }
// Sort colors by contrast. // Sort colors by contrast.
this.accentColorsArray.sort( function( a, b ) { this.accentColorsArray.sort( function( a, b ) {
return a.score - b.score; return a.score - b.score;
} ); } );
return this; return this;
}; };
/** /**
* Get accessible text-color. * Get accessible text-color.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @return {Color} - Returns a Color object. * @return {Color} - Returns a Color object.
*/ */
_twentyTwentyColor.prototype.getTextColor = function() { _twentyTwentyColor.prototype.getTextColor = function() {
return this.textColor; return this.textColor;
}; };
/** /**
* Get accessible color for the defined accent-hue and background-color. * Get accessible color for the defined accent-hue and background-color.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @return {Color} - Returns a Color object. * @return {Color} - Returns a Color object.
*/ */
_twentyTwentyColor.prototype.getAccentColor = function() { _twentyTwentyColor.prototype.getAccentColor = function() {
var fallback; var fallback;
// If we have colors returns the 1st one - it has the highest score. // If we have colors returns the 1st one - it has the highest score.
if ( this.accentColorsArray[0] ) { if ( this.accentColorsArray[0] ) {
return this.accentColorsArray[0].color; return this.accentColorsArray[0].color;
} }
// Fallback. // Fallback.
fallback = new Color( 'hsl(' + this.accentHue + ',75%,50%)' ); fallback = new Color( 'hsl(' + this.accentHue + ',75%,50%)' );
return fallback.getReadableContrastingColor( this.bgColorObj, 4.5 ); return fallback.getReadableContrastingColor( this.bgColorObj, 4.5 );
}; };
/** /**
* Return a new instance of the _twentyTwentyColor object. * Return a new instance of the _twentyTwentyColor object.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
* *
* @param {string} backgroundColor - The background color. * @param {string} backgroundColor - The background color.
* @param {number} accentHue - The hue for our accent color. * @param {number} accentHue - The hue for our accent color.
* @return {Object} - this * @return {Object} - this
*/ */
function twentyTwentyColor( backgroundColor, accentHue ) {// jshint ignore:line function twentyTwentyColor( backgroundColor, accentHue ) {// jshint ignore:line
var color = new _twentyTwentyColor( backgroundColor, accentHue ); var color = new _twentyTwentyColor( backgroundColor, accentHue );
color.setAccentColorsArray(); color.setAccentColorsArray();
return color; return color;
} }
/* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */ /* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */
/** /**
* Customizer enhancements for a better user experience. * Customizer enhancements for a better user experience.
* *
* Contains extra logic for our Customizer controls & settings. * Contains extra logic for our Customizer controls & settings.
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
*/ */
( function() { ( function() {
// Wait until the customizer has finished loading. // Wait until the customizer has finished loading.
wp.customize.bind( 'ready', function() { wp.customize.bind( 'ready', function() {
// Add a listener for accent-color changes. // Add a listener for accent-color changes.
wp.customize( 'accent_hue', function( value ) { wp.customize( 'accent_hue', function( value ) {
value.bind( function( to ) { value.bind( function( to ) {
// Update the value for our accessible colors for all areas. // Update the value for our accessible colors for all areas.
Object.keys( twentyTwentyBgColors ).forEach( function( context ) { Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
var backgroundColorValue; var backgroundColorValue;
if ( twentyTwentyBgColors[ context ].color ) { if ( twentyTwentyBgColors[ context ].color ) {
backgroundColorValue = twentyTwentyBgColors[ context ].color; backgroundColorValue = twentyTwentyBgColors[ context ].color;
} else { } else {
backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get(); backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();
} }
twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to ); twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );
} ); } );
} ); } );
} ); } );
// Add a listener for background-color changes. // Add a listener for background-color changes.
Object.keys( twentyTwentyBgColors ).forEach( function( context ) { Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) { wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
value.bind( function( to ) { value.bind( function( to ) {
// Update the value for our accessible colors for this area. // Update the value for our accessible colors for this area.
twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to ); twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to );
} ); } );
} ); } );
} ); } );
} );
// Show or hide retina_logo setting on the first load.
/** twentyTwentySetRetineLogoVisibility( !! wp.customize( 'custom_logo' )() );
* Updates the value of the "accent_accessible_colors" setting.
* // Add a listener for custom_logo changes.
* @since Twenty Twenty 1.0 wp.customize( 'custom_logo', function( value ) {
* value.bind( function( to ) {
* @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc. // Show or hide retina_logo setting on changing custom_logo.
* @param {string} backgroundColor The background color (HEX value). twentyTwentySetRetineLogoVisibility( !! to );
* @param {number} accentHue Numeric representation of the selected hue (0 - 359). } );
* } );
* @return {void} } );
*/
function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) { /**
var value, colors; * Updates the value of the "accent_accessible_colors" setting.
*
// Get the current value for our accessible colors, and make sure it's an object. * @since Twenty Twenty 1.0
value = wp.customize( 'accent_accessible_colors' ).get(); *
value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {}; * @param {string} context The area for which we want to get colors. Can be for example "content", "header" etc.
* @param {string} backgroundColor The background color (HEX value).
// Get accessible colors for the defined background-color and hue. * @param {number} accentHue Numeric representation of the selected hue (0 - 359).
colors = twentyTwentyColor( backgroundColor, accentHue ); *
* @return {void}
// Sanity check. */
if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) { function twentyTwentySetAccessibleColorsValue( context, backgroundColor, accentHue ) {
// Update the value for this context. var value, colors;
value[ context ] = {
text: colors.getTextColor(), // Get the current value for our accessible colors, and make sure it's an object.
accent: colors.getAccentColor().toCSS(), value = wp.customize( 'accent_accessible_colors' ).get();
background: backgroundColor value = ( _.isObject( value ) && ! _.isArray( value ) ) ? value : {};
};
// Get accessible colors for the defined background-color and hue.
// Get borders color. colors = twentyTwentyColor( backgroundColor, accentHue );
value[ context ].borders = colors.bgColorObj
.clone() // Sanity check.
.getReadableContrastingColor( colors.bgColorObj, 1.36 ) if ( colors.getAccentColor() && 'function' === typeof colors.getAccentColor().toCSS ) {
.toCSS(); // Update the value for this context.
value[ context ] = {
// Get secondary color. text: colors.getTextColor(),
value[ context ].secondary = colors.bgColorObj accent: colors.getAccentColor().toCSS(),
.clone() background: backgroundColor
.getReadableContrastingColor( colors.bgColorObj ) };
.s( colors.bgColorObj.s() / 2 )
.toCSS(); // Get borders color.
} value[ context ].borders = colors.bgColorObj
.clone()
// Change the value. .getReadableContrastingColor( colors.bgColorObj, 1.36 )
wp.customize( 'accent_accessible_colors' ).set( value ); .toCSS();
// Small hack to save the option. // Get secondary color.
wp.customize( 'accent_accessible_colors' )._dirty = true; value[ context ].secondary = colors.bgColorObj
} .clone()
}( jQuery ) ); .getReadableContrastingColor( colors.bgColorObj )
.s( colors.bgColorObj.s() / 2 )
.toCSS();
}
// Change the value.
wp.customize( 'accent_accessible_colors' ).set( value );
// Small hack to save the option.
wp.customize( 'accent_accessible_colors' )._dirty = true;
}
/**
* Shows or hides the "retina_logo" setting based on the given value.
*
* @since Twenty Twenty 1.3
*
* @param {boolean} visible The visible value.
*
* @return {void}
*/
function twentyTwentySetRetineLogoVisibility( visible ) {
wp.customize.control( 'retina_logo' ).container.toggle( visible );
}
}( jQuery ) );
This diff is collapsed.
/** /**
* Remove squared button style * Remove squared button style
* *
* @since Twenty Twenty 1.0 * @since Twenty Twenty 1.0
*/ */
/* global wp */ /* global wp */
wp.domReady( function() { wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/button', 'squared' ); wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
} ); } );
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment