Twenty Twenty: Import the latest changes from GitHub
For a full list of changes since [49216], see dfe141276c
...trunk/.
Props poena, melchoyce, luminuu, aristath, jffng, ryelle, kishanjasani, rolfsiebers, sresok, desrosj.
See #51526.
git-svn-id: https://develop.svn.wordpress.org/trunk@49247 602fd350-edb4-49c9-b593-d223f7449a82
@ -32,11 +32,11 @@
|
|||||||
|
|
||||||
/* OS dark theme preference */
|
/* OS dark theme preference */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.has-default-light-palette-background body {
|
html.respect-color-scheme-preference body {
|
||||||
background-color: #28303d;
|
background-color: #28303d;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
html.has-default-light-palette-background body{
|
html.respect-color-scheme-preference body{
|
||||||
background-color: #28303d;
|
background-color: #28303d;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -2197,18 +2197,17 @@ table.wp-calendar-table th {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table thead {
|
table.wp-calendar-table thead,
|
||||||
border: 1px solid #28303d;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.wp-calendar-table tbody {
|
table.wp-calendar-table tbody {
|
||||||
border: 1px solid #28303d;
|
color: currentColor;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table caption {
|
table.wp-calendar-table caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-nav {
|
||||||
|
@ -6,7 +6,7 @@ Author: the WordPress team
|
|||||||
Author URI: https://wordpress.org/
|
Author URI: https://wordpress.org/
|
||||||
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
|
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
|
||||||
Requires at least: 5.3
|
Requires at least: 5.3
|
||||||
Tested up to: 5.5
|
Tested up to: 5.6
|
||||||
Requires PHP: 5.6
|
Requires PHP: 5.6
|
||||||
Version: 1.0.0
|
Version: 1.0.0
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
@ -124,11 +124,11 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
|
|
||||||
/* OS dark theme preference */
|
/* OS dark theme preference */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.has-default-light-palette-background body {
|
html.respect-color-scheme-preference body {
|
||||||
background-color: #28303d;
|
background-color: #28303d;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark){
|
@media (prefers-color-scheme: dark){
|
||||||
html.has-default-light-palette-background body{
|
html.respect-color-scheme-preference body{
|
||||||
background-color: #28303d;
|
background-color: #28303d;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1364,11 +1364,11 @@ template {
|
|||||||
|
|
||||||
.entry-content > *.alignleft, .entry-content > *.alignright,
|
.entry-content > *.alignleft, .entry-content > *.alignright,
|
||||||
.entry-content > *.alignleft:first-child + *,
|
.entry-content > *.alignleft:first-child + *,
|
||||||
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
|
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content > *:last-child, .entry-content > *.alignfull {
|
.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -4249,18 +4249,17 @@ table.wp-calendar-table th {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table thead {
|
table.wp-calendar-table thead,
|
||||||
border: 1px solid #28303d;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.wp-calendar-table tbody {
|
table.wp-calendar-table tbody {
|
||||||
border: 1px solid #28303d;
|
color: currentColor;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table caption {
|
table.wp-calendar-table caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-nav {
|
||||||
@ -4809,7 +4808,7 @@ a.custom-logo-link {
|
|||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
color: #28303d;
|
color: #28303d;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
border-top: 3px solid #28303d;
|
border-top: 3px solid #28303d;
|
||||||
}
|
}
|
||||||
@ -5705,6 +5704,7 @@ h1.page-title {
|
|||||||
.primary-navigation > .primary-menu-container {
|
.primary-navigation > .primary-menu-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
z-index: 499;
|
z-index: 499;
|
||||||
|
border: 2px solid transparent;
|
||||||
}
|
}
|
||||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -5716,6 +5716,9 @@ h1.page-title {
|
|||||||
.admin-bar .primary-navigation > .primary-menu-container {
|
.admin-bar .primary-navigation > .primary-menu-container {
|
||||||
height: calc(100vh - 46px);
|
height: calc(100vh - 46px);
|
||||||
}
|
}
|
||||||
|
.primary-navigation > .primary-menu-container:focus {
|
||||||
|
border: 2px solid #28303d;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 481px) {
|
@media only screen and (max-width: 481px) {
|
||||||
@ -6360,7 +6363,7 @@ h1.page-title {
|
|||||||
margin-top: 180px;
|
margin-top: 180px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
color: #28303d;
|
color: #28303d;
|
||||||
font-size: 1rem;
|
font-size: 1.125rem;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -164,7 +164,7 @@
|
|||||||
--footer--color-link: var(--global--color-primary);
|
--footer--color-link: var(--global--color-primary);
|
||||||
--footer--color-link-hover: var(--global--color-primary-hover);
|
--footer--color-link-hover: var(--global--color-primary-hover);
|
||||||
--footer--font-family: var(--global--font-primary);
|
--footer--font-family: var(--global--font-primary);
|
||||||
--footer--font-size: var(--global--font-size-xs);
|
--footer--font-size: var(--global--font-size-sm);
|
||||||
/* Block: Pull quote */
|
/* Block: Pull quote */
|
||||||
--pullquote--font-family: var(--global--font-primary);
|
--pullquote--font-family: var(--global--font-primary);
|
||||||
--pullquote--font-size: var(--heading--font-size-h3);
|
--pullquote--font-size: var(--heading--font-size-h3);
|
||||||
@ -210,7 +210,7 @@
|
|||||||
|
|
||||||
/* OS dark theme preference */
|
/* OS dark theme preference */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.has-default-light-palette-background {
|
html.respect-color-scheme-preference {
|
||||||
--global--color-background: var(--global--color-dark-gray);
|
--global--color-background: var(--global--color-dark-gray);
|
||||||
--global--color-primary: var(--global--color-light-gray);
|
--global--color-primary: var(--global--color-light-gray);
|
||||||
--global--color-secondary: var(--global--color-light-gray);
|
--global--color-secondary: var(--global--color-light-gray);
|
||||||
@ -220,7 +220,7 @@
|
|||||||
--button--color-background: var(--global--color-secondary);
|
--button--color-background: var(--global--color-secondary);
|
||||||
--button--color-background-active: var(--global--color-background);
|
--button--color-background-active: var(--global--color-background);
|
||||||
}
|
}
|
||||||
html.has-default-light-palette-background body {
|
html.respect-color-scheme-preference body {
|
||||||
background-color: var(--global--color-background);
|
background-color: var(--global--color-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1589,13 +1589,15 @@ table.wp-calendar-table th {
|
|||||||
|
|
||||||
table.wp-calendar-table thead,
|
table.wp-calendar-table thead,
|
||||||
table.wp-calendar-table tbody {
|
table.wp-calendar-table tbody {
|
||||||
border: 1px solid var(--global--color-dark-gray);
|
color: currentColor;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table caption {
|
table.wp-calendar-table caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: var(--global--spacing-unit);
|
margin-bottom: var(--global--spacing-unit);
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-nav {
|
||||||
|
After Width: | Height: | Size: 216 KiB |
BIN
src/wp-content/themes/twentytwentyone/assets/images/Reading.jpg
Normal file
After Width: | Height: | Size: 276 KiB |
After Width: | Height: | Size: 280 KiB |
After Width: | Height: | Size: 195 KiB |
After Width: | Height: | Size: 293 KiB |
After Width: | Height: | Size: 293 KiB |
After Width: | Height: | Size: 226 KiB |
After Width: | Height: | Size: 320 KiB |
After Width: | Height: | Size: 265 KiB |
After Width: | Height: | Size: 159 KiB |
@ -0,0 +1,35 @@
|
|||||||
|
/**
|
||||||
|
* Get luminance from a HEX color.
|
||||||
|
*
|
||||||
|
* @param {string} hex - The hex color.
|
||||||
|
*
|
||||||
|
* @return {number} - Returns the luminance, number between 0 and 255.
|
||||||
|
*/
|
||||||
|
function twentytwentyoneGetHexLum( hex ) { // eslint-disable-line no-unused-vars
|
||||||
|
var rgb = twentytwentyoneGetRgbFromHex( hex );
|
||||||
|
return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get RGB from HEX.
|
||||||
|
*
|
||||||
|
* @param {string} hex - The hex color.
|
||||||
|
*
|
||||||
|
* @return {Object} - Returns an object {r, g, b}
|
||||||
|
*/
|
||||||
|
function twentytwentyoneGetRgbFromHex( hex ) {
|
||||||
|
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
|
||||||
|
result;
|
||||||
|
|
||||||
|
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
|
||||||
|
hex = hex.replace( shorthandRegex, function( m, r, g, b ) {
|
||||||
|
return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString();
|
||||||
|
} );
|
||||||
|
|
||||||
|
result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
|
||||||
|
return result ? {
|
||||||
|
r: parseInt( result[1], 16 ),
|
||||||
|
g: parseInt( result[2], 16 ),
|
||||||
|
b: parseInt( result[3], 16 )
|
||||||
|
} : null;
|
||||||
|
}
|
60
src/wp-content/themes/twentytwentyone/assets/js/customize.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
/* global twentytwentyoneGetHexLum, backgroundColorNotice */
|
||||||
|
|
||||||
|
( function() {
|
||||||
|
// Wait until the customizer has finished loading.
|
||||||
|
wp.customize.bind( 'ready', function() {
|
||||||
|
var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() );
|
||||||
|
|
||||||
|
// Hide the "respect_user_color_preference" setting if the background-color is dark.
|
||||||
|
if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
|
||||||
|
wp.customize.control( 'respect_user_color_preference' ).deactivate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add notice on init if needed.
|
||||||
|
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches && wp.customize( 'respect_user_color_preference' ) ) {
|
||||||
|
if ( supportsDarkMode ) {
|
||||||
|
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
|
||||||
|
type: 'info',
|
||||||
|
message: backgroundColorNotice.message
|
||||||
|
} ) );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove notice when the value changes.
|
||||||
|
wp.customize( 'background_color', function( setting ) {
|
||||||
|
setting.bind( function() {
|
||||||
|
setting.notifications.remove( 'backgroundColorNotice' );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle changes to the background-color.
|
||||||
|
wp.customize( 'background_color', function( setting ) {
|
||||||
|
setting.bind( function( value ) {
|
||||||
|
if ( 127 > twentytwentyoneGetHexLum( value ) ) {
|
||||||
|
wp.customize.control( 'respect_user_color_preference' ).deactivate();
|
||||||
|
supportsDarkMode = false;
|
||||||
|
} else {
|
||||||
|
wp.customize.control( 'respect_user_color_preference' ).activate();
|
||||||
|
supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get();
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
// Handle changes to the "respect_user_color_preference" setting.
|
||||||
|
wp.customize( 'respect_user_color_preference', function( setting ) {
|
||||||
|
setting.bind( function( value ) {
|
||||||
|
supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() );
|
||||||
|
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
|
||||||
|
if ( ! supportsDarkMode ) {
|
||||||
|
wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' );
|
||||||
|
} else {
|
||||||
|
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
|
||||||
|
type: 'info',
|
||||||
|
message: backgroundColorNotice.message
|
||||||
|
} ) );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
}() );
|
@ -38,7 +38,7 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) {
|
|||||||
*
|
*
|
||||||
* @param {Element} el - The element.
|
* @param {Element} el - The element.
|
||||||
*/
|
*/
|
||||||
function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
|
function twentytwentyoneExpandSubMenu( el ) { // eslint-disable-line no-unused-vars
|
||||||
// Close submenu that was opened from a hover action.
|
// Close submenu that was opened from a hover action.
|
||||||
// We'll return early in this case to avoid changing the aria-expanded attribute.
|
// We'll return early in this case to avoid changing the aria-expanded attribute.
|
||||||
if ( el.parentNode.classList.contains( 'hover' ) ) {
|
if ( el.parentNode.classList.contains( 'hover' ) ) {
|
||||||
|
@ -32,7 +32,7 @@ class Twenty_Twenty_One_Custom_Colors {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine the luminance of the given color and then return #fff or #000 so that our text is always readable.
|
* Determine the luminance of the given color and then return #fff or #000 so that the text is always readable.
|
||||||
*
|
*
|
||||||
* @access public
|
* @access public
|
||||||
*
|
*
|
||||||
@ -43,7 +43,7 @@ class Twenty_Twenty_One_Custom_Colors {
|
|||||||
* @return string (hex color)
|
* @return string (hex color)
|
||||||
*/
|
*/
|
||||||
public function custom_get_readable_color( $background_color ) {
|
public function custom_get_readable_color( $background_color ) {
|
||||||
return ( 127 < $this->get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
|
return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -115,14 +115,24 @@ class Twenty_Twenty_One_Custom_Colors {
|
|||||||
array(),
|
array(),
|
||||||
(string) filemtime( get_theme_file_path( 'assets/css/custom-color-overrides.css' ) )
|
(string) filemtime( get_theme_file_path( 'assets/css/custom-color-overrides.css' ) )
|
||||||
);
|
);
|
||||||
if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
|
|
||||||
|
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||||
|
if ( 'd1e4dd' !== strtolower( $background_color ) ) {
|
||||||
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
|
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true ); // @phpstan-ignore-line. Passing true instead of default value of false to get_theme_mod.
|
||||||
|
if ( $should_respect_color_scheme && self::get_relative_luminance_from_hex( $background_color ) > 127 ) {
|
||||||
|
// Add dark mode variable overrides.
|
||||||
|
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '@media (prefers-color-scheme: dark) { :root .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); } }' );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get luminance from a HEX color.
|
* Get luminance from a HEX color.
|
||||||
*
|
*
|
||||||
|
* @static
|
||||||
|
*
|
||||||
* @access public
|
* @access public
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
@ -131,12 +141,12 @@ class Twenty_Twenty_One_Custom_Colors {
|
|||||||
*
|
*
|
||||||
* @return int Returns a number (0-255).
|
* @return int Returns a number (0-255).
|
||||||
*/
|
*/
|
||||||
public function get_relative_luminance_from_hex( $hex ) {
|
public static function get_relative_luminance_from_hex( $hex ) {
|
||||||
|
|
||||||
// Remove the "#" symbol from the beginning of the color.
|
// Remove the "#" symbol from the beginning of the color.
|
||||||
$hex = ltrim( $hex, '#' );
|
$hex = ltrim( $hex, '#' );
|
||||||
|
|
||||||
// Make sure we have 6 digits for the below calculations.
|
// Make sure there are 6 digits for the below calculations.
|
||||||
if ( 3 === strlen( $hex ) ) {
|
if ( 3 === strlen( $hex ) ) {
|
||||||
$hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
|
$hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
|
||||||
}
|
}
|
||||||
@ -164,17 +174,12 @@ class Twenty_Twenty_One_Custom_Colors {
|
|||||||
*/
|
*/
|
||||||
public function body_class( $classes ) {
|
public function body_class( $classes ) {
|
||||||
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||||
if ( 127 > $this->get_relative_luminance_from_hex( $background_color ) ) {
|
if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
|
||||||
$classes[] = 'is-background-dark';
|
$classes[] = 'is-background-dark';
|
||||||
} else {
|
} else {
|
||||||
$classes[] = 'is-background-light';
|
$classes[] = 'is-background-light';
|
||||||
}
|
}
|
||||||
|
|
||||||
$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
|
|
||||||
if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
|
|
||||||
$classes[] = 'has-default-light-palette-background';
|
|
||||||
}
|
|
||||||
|
|
||||||
return $classes;
|
return $classes;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -40,8 +40,8 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
|
|||||||
public function register( $wp_customize ) {
|
public function register( $wp_customize ) {
|
||||||
|
|
||||||
// Change site-title & description to postMessage.
|
// Change site-title & description to postMessage.
|
||||||
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
|
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
|
||||||
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
|
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
|
||||||
|
|
||||||
// Add partial for blogname.
|
// Add partial for blogname.
|
||||||
$wp_customize->selective_refresh->add_partial(
|
$wp_customize->selective_refresh->add_partial(
|
||||||
@ -126,7 +126,7 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
|
|||||||
// Get the palette from theme-supports.
|
// Get the palette from theme-supports.
|
||||||
$palette = get_theme_support( 'editor-color-palette' );
|
$palette = get_theme_support( 'editor-color-palette' );
|
||||||
|
|
||||||
// Build the colors array from our theme-support.
|
// Build the colors array from theme-support.
|
||||||
$colors = array();
|
$colors = array();
|
||||||
if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
|
if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
|
||||||
foreach ( $palette[0] as $palette_color ) {
|
foreach ( $palette[0] as $palette_color ) {
|
||||||
@ -146,6 +146,30 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
|
|||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
$wp_customize->add_setting(
|
||||||
|
'respect_user_color_preference',
|
||||||
|
array(
|
||||||
|
'capability' => 'edit_theme_options',
|
||||||
|
'default' => true,
|
||||||
|
'sanitize_callback' => function( $value ) {
|
||||||
|
return (bool) $value;
|
||||||
|
},
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$wp_customize->add_control(
|
||||||
|
'respect_user_color_preference',
|
||||||
|
array(
|
||||||
|
'type' => 'checkbox',
|
||||||
|
'section' => 'colors',
|
||||||
|
'label' => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ),
|
||||||
|
'description' => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ),
|
||||||
|
'active_callback' => function( $value ) {
|
||||||
|
return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
|
||||||
|
},
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -187,6 +187,7 @@ class Twenty_Twenty_One_SVG_Icons {
|
|||||||
$svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
|
$svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @phpstan-ignore-next-line.
|
||||||
return $svg;
|
return $svg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
/*
|
/*
|
||||||
* If the current post is protected by a password and
|
* If the current post is protected by a password and
|
||||||
* the visitor has not yet entered the password we will
|
* the visitor has not yet entered the password,
|
||||||
* return early without loading the comments.
|
* return early without loading the comments.
|
||||||
*/
|
*/
|
||||||
if ( post_password_required() ) {
|
if ( post_password_required() ) {
|
||||||
|
@ -40,9 +40,8 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
|
|||||||
|
|
||||||
/*
|
/*
|
||||||
* Let WordPress manage the document title.
|
* Let WordPress manage the document title.
|
||||||
* By adding theme support, we declare that this theme does not use a
|
* This theme does not use a hard-coded <title> tag in the document head,
|
||||||
* hard-coded <title> tag in the document head, and expect WordPress to
|
* WordPress will provide it for us.
|
||||||
* provide it for us.
|
|
||||||
*/
|
*/
|
||||||
add_theme_support( 'title-tag' );
|
add_theme_support( 'title-tag' );
|
||||||
|
|
||||||
@ -126,6 +125,10 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
|
|||||||
|
|
||||||
// Add support for editor styles.
|
// Add support for editor styles.
|
||||||
add_theme_support( 'editor-styles' );
|
add_theme_support( 'editor-styles' );
|
||||||
|
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||||
|
if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
|
||||||
|
add_theme_support( 'dark-editor-style' );
|
||||||
|
}
|
||||||
|
|
||||||
$editor_stylesheet_path = './assets/css/style-editor.css';
|
$editor_stylesheet_path = './assets/css/style-editor.css';
|
||||||
|
|
||||||
@ -145,43 +148,43 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
|
|||||||
array(
|
array(
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Extra small', 'twentytwentyone' ),
|
'name' => esc_html__( 'Extra small', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'XS', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 16,
|
'size' => 16,
|
||||||
'slug' => 'extra-small',
|
'slug' => 'extra-small',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Small', 'twentytwentyone' ),
|
'name' => esc_html__( 'Small', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'S', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 18,
|
'size' => 18,
|
||||||
'slug' => 'small',
|
'slug' => 'small',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Normal', 'twentytwentyone' ),
|
'name' => esc_html__( 'Normal', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'M', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 20,
|
'size' => 20,
|
||||||
'slug' => 'normal',
|
'slug' => 'normal',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Large', 'twentytwentyone' ),
|
'name' => esc_html__( 'Large', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'L', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 24,
|
'size' => 24,
|
||||||
'slug' => 'large',
|
'slug' => 'large',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Extra Large', 'twentytwentyone' ),
|
'name' => esc_html__( 'Extra Large', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'XL', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 40,
|
'size' => 40,
|
||||||
'slug' => 'extra-large',
|
'slug' => 'extra-large',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Huge', 'twentytwentyone' ),
|
'name' => esc_html__( 'Huge', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'XXL', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 96,
|
'size' => 96,
|
||||||
'slug' => 'huge',
|
'slug' => 'huge',
|
||||||
),
|
),
|
||||||
array(
|
array(
|
||||||
'name' => esc_html__( 'Gigantic', 'twentytwentyone' ),
|
'name' => esc_html__( 'Gigantic', 'twentytwentyone' ),
|
||||||
'shortName' => esc_html__( 'XXXL', 'twentytwentyone' ),
|
'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ),
|
||||||
'size' => 144,
|
'size' => 144,
|
||||||
'slug' => 'gigantic',
|
'slug' => 'gigantic',
|
||||||
),
|
),
|
||||||
@ -521,27 +524,71 @@ require get_template_directory() . '/inc/block-styles.php';
|
|||||||
* @return void
|
* @return void
|
||||||
*/
|
*/
|
||||||
function twentytwentyone_customize_preview_init() {
|
function twentytwentyone_customize_preview_init() {
|
||||||
|
wp_enqueue_script(
|
||||||
|
'twentytwentyone-customize-helpers',
|
||||||
|
get_theme_file_uri( '/assets/js/customize-helpers.js' ),
|
||||||
|
array(),
|
||||||
|
wp_get_theme()->get( 'Version' ),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
wp_enqueue_script(
|
wp_enqueue_script(
|
||||||
'twentytwentyone-customize-preview',
|
'twentytwentyone-customize-preview',
|
||||||
get_theme_file_uri( '/assets/js/customize-preview.js' ),
|
get_theme_file_uri( '/assets/js/customize-preview.js' ),
|
||||||
array( 'customize-preview', 'customize-selective-refresh', 'jquery' ),
|
array( 'customize-preview', 'customize-selective-refresh', 'jquery', 'twentytwentyone-customize-helpers' ),
|
||||||
get_theme_file_path( 'assets/js/customize-preview.js' ),
|
wp_get_theme()->get( 'Version' ),
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
|
add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Calculate any classes we may want to add to the main <html> element.
|
* Enqueue scripts for the customizer.
|
||||||
|
*
|
||||||
|
* @since 1.0.0
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
function twentytwentyone_customize_controls_enqueue_scripts() {
|
||||||
|
|
||||||
|
wp_enqueue_script(
|
||||||
|
'twentytwentyone-customize-helpers',
|
||||||
|
get_theme_file_uri( '/assets/js/customize-helpers.js' ),
|
||||||
|
array(),
|
||||||
|
wp_get_theme()->get( 'Version' ),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_enqueue_script(
|
||||||
|
'twentytwentyone-customize-controls',
|
||||||
|
get_theme_file_uri( '/assets/js/customize.js' ),
|
||||||
|
array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
|
||||||
|
wp_get_theme()->get( 'Version' ),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
wp_localize_script(
|
||||||
|
'twentytwentyone-customize-controls',
|
||||||
|
'backgroundColorNotice',
|
||||||
|
array(
|
||||||
|
'message' => esc_html__( 'You currently have dark mode enabled on your device. Changing the color picker will allow you to preview light mode.', 'twentytwentyone' ),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate classes for the main <html> element.
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*
|
*
|
||||||
* @return void
|
* @return void
|
||||||
*/
|
*/
|
||||||
function twentytwentyone_the_html_classes() {
|
function twentytwentyone_the_html_classes() {
|
||||||
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||||
$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
|
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true );
|
||||||
if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
|
if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
|
||||||
echo 'class="has-default-light-palette-background"';
|
echo 'class="respect-color-scheme-preference"';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
/**
|
/**
|
||||||
* The header for our theme
|
* The header.
|
||||||
*
|
*
|
||||||
* This is the template that displays all of the <head> section and everything up until main.
|
* This is the template that displays all of the <head> section and everything up until main.
|
||||||
*
|
*
|
||||||
|
@ -42,8 +42,8 @@ while ( have_posts() ) {
|
|||||||
array(
|
array(
|
||||||
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
||||||
'after' => '</nav>',
|
'after' => '</nav>',
|
||||||
/* translators: There is a space after page. */
|
/* translators: %: page number. */
|
||||||
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
|
'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
@ -101,7 +101,7 @@ while ( have_posts() ) {
|
|||||||
</footer><!-- .entry-footer -->
|
</footer><!-- .entry-footer -->
|
||||||
</article><!-- #post-## -->
|
</article><!-- #post-## -->
|
||||||
<?php
|
<?php
|
||||||
// If comments are open or we have at least one comment, load up the comment template.
|
// If comments are open or there is at least one comment, load up the comment template.
|
||||||
if ( comments_open() || get_comments_number() ) {
|
if ( comments_open() || get_comments_number() ) {
|
||||||
comments_template();
|
comments_template();
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,7 @@ function twenty_twenty_one_upgrade_notice() {
|
|||||||
echo '<div class="error"><p>';
|
echo '<div class="error"><p>';
|
||||||
printf(
|
printf(
|
||||||
/* translators: %s: WordPress Version. */
|
/* translators: %s: WordPress Version. */
|
||||||
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
|
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
|
||||||
esc_html( $GLOBALS['wp_version'] )
|
esc_html( $GLOBALS['wp_version'] )
|
||||||
);
|
);
|
||||||
echo '</p></div>';
|
echo '</p></div>';
|
||||||
@ -58,7 +58,7 @@ function twenty_twenty_one_customize() {
|
|||||||
wp_die(
|
wp_die(
|
||||||
sprintf(
|
sprintf(
|
||||||
/* translators: %s: WordPress Version. */
|
/* translators: %s: WordPress Version. */
|
||||||
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
|
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
|
||||||
esc_html( $GLOBALS['wp_version'] )
|
esc_html( $GLOBALS['wp_version'] )
|
||||||
),
|
),
|
||||||
'',
|
'',
|
||||||
@ -83,7 +83,7 @@ function twenty_twenty_one_preview() {
|
|||||||
wp_die(
|
wp_die(
|
||||||
sprintf(
|
sprintf(
|
||||||
/* translators: %s: WordPress Version. */
|
/* translators: %s: WordPress Version. */
|
||||||
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
|
esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
|
||||||
esc_html( $GLOBALS['wp_version'] )
|
esc_html( $GLOBALS['wp_version'] )
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
*/
|
*/
|
||||||
function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) {
|
function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) {
|
||||||
|
|
||||||
// Bail early if we have no $selector elements or properties and $value.
|
// Bail early if there is no $selector elements or properties and $value.
|
||||||
if ( ! $value || ! $selector ) {
|
if ( ! $value || ! $selector ) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
@ -34,7 +34,7 @@ function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = ''
|
|||||||
/**
|
/**
|
||||||
* Note to reviewers: $css contains auto-generated CSS.
|
* Note to reviewers: $css contains auto-generated CSS.
|
||||||
* It is included inside <style> tags and can only be interpreted as CSS on the browser.
|
* It is included inside <style> tags and can only be interpreted as CSS on the browser.
|
||||||
* Using wp_strip_all_tags() here is sufficient escaping since we just need to avoid
|
* Using wp_strip_all_tags() here is sufficient escaping to avoid
|
||||||
* malicious attempts to close </style> and open a <script>.
|
* malicious attempts to close </style> and open a <script>.
|
||||||
*/
|
*/
|
||||||
echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput
|
echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput
|
||||||
|
@ -270,8 +270,8 @@ function twenty_twenty_one_get_icon_svg( $group, $icon, $size = 24 ) {
|
|||||||
* @return string
|
* @return string
|
||||||
*/
|
*/
|
||||||
function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
|
function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
|
||||||
$calendar_output = str_replace( '« ', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
|
$calendar_output = str_replace( '« ', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
|
||||||
$calendar_output = str_replace( ' »', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
|
$calendar_output = str_replace( ' »', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
|
||||||
return $calendar_output;
|
return $calendar_output;
|
||||||
}
|
}
|
||||||
add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
|
add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
|
||||||
@ -381,7 +381,7 @@ function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Return the specified styles.
|
// Return the specified styles.
|
||||||
return twenty_twenty_one_generate_css(
|
return twenty_twenty_one_generate_css( // @phpstan-ignore-line.
|
||||||
implode( ',', $elements[ $type ] ),
|
implode( ',', $elements[ $type ] ),
|
||||||
'font-family',
|
'font-family',
|
||||||
implode( ',', $font_family[ $locale ] ),
|
implode( ',', $font_family[ $locale ] ),
|
||||||
@ -398,8 +398,8 @@ function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
|
|||||||
*
|
*
|
||||||
* @param string $block_name The full block type name, or a partial match.
|
* @param string $block_name The full block type name, or a partial match.
|
||||||
* Example: `core/image`, `core-embed/*`.
|
* Example: `core/image`, `core-embed/*`.
|
||||||
* @param string|null $content The content we need to search in. Use null for get_the_content().
|
* @param string|null $content The content to search in. Use null for get_the_content().
|
||||||
* @param int $instances How many instances of the block we want to print. Defaults to 1.
|
* @param int $instances How many instances of the block will be printed (max). Defaults to 1.
|
||||||
*
|
*
|
||||||
* @return bool Returns true if a block was located & printed, otherwise false.
|
* @return bool Returns true if a block was located & printed, otherwise false.
|
||||||
*/
|
*/
|
||||||
@ -422,10 +422,10 @@ function twenty_twenty_one_print_first_instance_of_block( $block_name, $content
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if this the block we're looking for.
|
// Check if this the block matches the $block_name.
|
||||||
$is_matching_block = false;
|
$is_matching_block = false;
|
||||||
|
|
||||||
// If the block ends with *, we should just try to match the first portion.
|
// If the block ends with *, try to match the first portion.
|
||||||
if ( '*' === $block_name[-1] ) {
|
if ( '*' === $block_name[-1] ) {
|
||||||
$is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
|
$is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
|
||||||
} else {
|
} else {
|
||||||
@ -439,7 +439,7 @@ function twenty_twenty_one_print_first_instance_of_block( $block_name, $content
|
|||||||
// Add the block HTML.
|
// Add the block HTML.
|
||||||
$blocks_content .= render_block( $block );
|
$blocks_content .= render_block( $block );
|
||||||
|
|
||||||
// Break the loop if we've reached the $instances count.
|
// Break the loop if the $instances count was reached.
|
||||||
if ( $instances_count >= $instances ) {
|
if ( $instances_count >= $instances ) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -73,6 +73,10 @@ if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
|
|||||||
// Hide meta information on pages.
|
// Hide meta information on pages.
|
||||||
if ( ! is_single() ) {
|
if ( ! is_single() ) {
|
||||||
|
|
||||||
|
if ( is_sticky() ) {
|
||||||
|
echo '<p>' . esc_html__( 'Featured post', 'twentytwentyone' ) . '</p>';
|
||||||
|
}
|
||||||
|
|
||||||
$post_format = get_post_format();
|
$post_format = get_post_format();
|
||||||
if ( 'aside' === $post_format || 'status' === $post_format ) {
|
if ( 'aside' === $post_format || 'status' === $post_format ) {
|
||||||
echo '<p><a href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></p>'; // phpcs:ignore WordPress.Security.EscapeOutput
|
echo '<p><a href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></p>'; // phpcs:ignore WordPress.Security.EscapeOutput
|
||||||
|
@ -16,7 +16,7 @@ while ( have_posts() ) :
|
|||||||
the_post();
|
the_post();
|
||||||
get_template_part( 'template-parts/content/content-page' );
|
get_template_part( 'template-parts/content/content-page' );
|
||||||
|
|
||||||
// If comments are open or we have at least one comment, load up the comment template.
|
// If comments are open or there is at least one comment, load up the comment template.
|
||||||
if ( comments_open() || get_comments_number() ) {
|
if ( comments_open() || get_comments_number() ) {
|
||||||
comments_template();
|
comments_template();
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,7 @@ while ( have_posts() ) :
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If comments are open or we have at least one comment, load up the comment template.
|
// If comments are open or there is at least one comment, load up the comment template.
|
||||||
if ( comments_open() || get_comments_number() ) {
|
if ( comments_open() || get_comments_number() ) {
|
||||||
comments_template();
|
comments_template();
|
||||||
}
|
}
|
||||||
|
@ -256,7 +256,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
--footer--color-link: var(--global--color-primary);
|
--footer--color-link: var(--global--color-primary);
|
||||||
--footer--color-link-hover: var(--global--color-primary-hover);
|
--footer--color-link-hover: var(--global--color-primary-hover);
|
||||||
--footer--font-family: var(--global--font-primary);
|
--footer--font-family: var(--global--font-primary);
|
||||||
--footer--font-size: var(--global--font-size-xs);
|
--footer--font-size: var(--global--font-size-sm);
|
||||||
/* Block: Pull quote */
|
/* Block: Pull quote */
|
||||||
--pullquote--font-family: var(--global--font-primary);
|
--pullquote--font-family: var(--global--font-primary);
|
||||||
--pullquote--font-size: var(--heading--font-size-h3);
|
--pullquote--font-size: var(--heading--font-size-h3);
|
||||||
@ -302,7 +302,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
|
|
||||||
/* OS dark theme preference */
|
/* OS dark theme preference */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.has-default-light-palette-background {
|
html.respect-color-scheme-preference {
|
||||||
--global--color-background: var(--global--color-dark-gray);
|
--global--color-background: var(--global--color-dark-gray);
|
||||||
--global--color-primary: var(--global--color-light-gray);
|
--global--color-primary: var(--global--color-light-gray);
|
||||||
--global--color-secondary: var(--global--color-light-gray);
|
--global--color-secondary: var(--global--color-light-gray);
|
||||||
@ -312,7 +312,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
--button--color-background: var(--global--color-secondary);
|
--button--color-background: var(--global--color-secondary);
|
||||||
--button--color-background-active: var(--global--color-background);
|
--button--color-background-active: var(--global--color-background);
|
||||||
}
|
}
|
||||||
html.has-default-light-palette-background body {
|
html.respect-color-scheme-preference body {
|
||||||
background-color: var(--global--color-background);
|
background-color: var(--global--color-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1004,11 +1004,11 @@ template {
|
|||||||
|
|
||||||
.entry-content > *.alignleft, .entry-content > *.alignright,
|
.entry-content > *.alignleft, .entry-content > *.alignright,
|
||||||
.entry-content > *.alignleft:first-child + *,
|
.entry-content > *.alignleft:first-child + *,
|
||||||
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
|
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content > *:last-child, .entry-content > *.alignfull {
|
.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2973,13 +2973,15 @@ table.wp-calendar-table th {
|
|||||||
|
|
||||||
table.wp-calendar-table thead,
|
table.wp-calendar-table thead,
|
||||||
table.wp-calendar-table tbody {
|
table.wp-calendar-table tbody {
|
||||||
border: 1px solid var(--global--color-dark-gray);
|
color: currentColor;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table caption {
|
table.wp-calendar-table caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-bottom: var(--global--spacing-unit);
|
margin-bottom: var(--global--spacing-unit);
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-nav {
|
||||||
@ -4066,6 +4068,7 @@ h1.page-title {
|
|||||||
.primary-navigation > .primary-menu-container {
|
.primary-navigation > .primary-menu-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
z-index: 499;
|
z-index: 499;
|
||||||
|
border: 2px solid transparent;
|
||||||
}
|
}
|
||||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -4077,6 +4080,9 @@ h1.page-title {
|
|||||||
.admin-bar .primary-navigation > .primary-menu-container {
|
.admin-bar .primary-navigation > .primary-menu-container {
|
||||||
height: calc(100vh - 46px);
|
height: calc(100vh - 46px);
|
||||||
}
|
}
|
||||||
|
.primary-navigation > .primary-menu-container:focus {
|
||||||
|
border: 2px solid var(--global--color-primary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 481px) {
|
@media only screen and (max-width: 481px) {
|
||||||
@ -4966,4 +4972,4 @@ main,
|
|||||||
section,
|
section,
|
||||||
footer {
|
footer {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
@ -256,7 +256,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
--footer--color-link: var(--global--color-primary);
|
--footer--color-link: var(--global--color-primary);
|
||||||
--footer--color-link-hover: var(--global--color-primary-hover);
|
--footer--color-link-hover: var(--global--color-primary-hover);
|
||||||
--footer--font-family: var(--global--font-primary);
|
--footer--font-family: var(--global--font-primary);
|
||||||
--footer--font-size: var(--global--font-size-xs);
|
--footer--font-size: var(--global--font-size-sm);
|
||||||
/* Block: Pull quote */
|
/* Block: Pull quote */
|
||||||
--pullquote--font-family: var(--global--font-primary);
|
--pullquote--font-family: var(--global--font-primary);
|
||||||
--pullquote--font-size: var(--heading--font-size-h3);
|
--pullquote--font-size: var(--heading--font-size-h3);
|
||||||
@ -302,7 +302,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
|
|
||||||
/* OS dark theme preference */
|
/* OS dark theme preference */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
html.has-default-light-palette-background {
|
html.respect-color-scheme-preference {
|
||||||
--global--color-background: var(--global--color-dark-gray);
|
--global--color-background: var(--global--color-dark-gray);
|
||||||
--global--color-primary: var(--global--color-light-gray);
|
--global--color-primary: var(--global--color-light-gray);
|
||||||
--global--color-secondary: var(--global--color-light-gray);
|
--global--color-secondary: var(--global--color-light-gray);
|
||||||
@ -312,7 +312,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
|||||||
--button--color-background: var(--global--color-secondary);
|
--button--color-background: var(--global--color-secondary);
|
||||||
--button--color-background-active: var(--global--color-background);
|
--button--color-background-active: var(--global--color-background);
|
||||||
}
|
}
|
||||||
html.has-default-light-palette-background body {
|
html.respect-color-scheme-preference body {
|
||||||
background-color: var(--global--color-background);
|
background-color: var(--global--color-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1008,11 +1008,11 @@ template {
|
|||||||
|
|
||||||
.entry-content > *.alignleft, .entry-content > *.alignright,
|
.entry-content > *.alignleft, .entry-content > *.alignright,
|
||||||
.entry-content > *.alignleft:first-child + *,
|
.entry-content > *.alignleft:first-child + *,
|
||||||
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
|
.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content > *:last-child, .entry-content > *.alignfull {
|
.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2977,13 +2977,15 @@ table.wp-calendar-table th {
|
|||||||
|
|
||||||
table.wp-calendar-table thead,
|
table.wp-calendar-table thead,
|
||||||
table.wp-calendar-table tbody {
|
table.wp-calendar-table tbody {
|
||||||
border: 1px solid var(--global--color-dark-gray);
|
color: currentColor;
|
||||||
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.wp-calendar-table caption {
|
table.wp-calendar-table caption {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: var(--global--spacing-unit);
|
margin-bottom: var(--global--spacing-unit);
|
||||||
|
color: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-calendar-nav {
|
.wp-calendar-nav {
|
||||||
@ -4075,6 +4077,7 @@ h1.page-title {
|
|||||||
.primary-navigation > .primary-menu-container {
|
.primary-navigation > .primary-menu-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
z-index: 499;
|
z-index: 499;
|
||||||
|
border: 2px solid transparent;
|
||||||
}
|
}
|
||||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -4086,6 +4089,9 @@ h1.page-title {
|
|||||||
.admin-bar .primary-navigation > .primary-menu-container {
|
.admin-bar .primary-navigation > .primary-menu-container {
|
||||||
height: calc(100vh - 46px);
|
height: calc(100vh - 46px);
|
||||||
}
|
}
|
||||||
|
.primary-navigation > .primary-menu-container:focus {
|
||||||
|
border: 2px solid var(--global--color-primary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 481px) {
|
@media only screen and (max-width: 481px) {
|
||||||
@ -4977,4 +4983,4 @@ footer {
|
|||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
@ -32,8 +32,8 @@
|
|||||||
array(
|
array(
|
||||||
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
||||||
'after' => '</nav>',
|
'after' => '</nav>',
|
||||||
/* translators: There is a space after page. */
|
/* translators: %: page number. */
|
||||||
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
|
'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
|
@ -26,8 +26,8 @@
|
|||||||
array(
|
array(
|
||||||
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
||||||
'after' => '</nav>',
|
'after' => '</nav>',
|
||||||
/* translators: There is a space after page. */
|
/* translators: %: page number. */
|
||||||
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
|
'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
?>
|
?>
|
||||||
|
@ -25,18 +25,15 @@
|
|||||||
<div class="entry-content">
|
<div class="entry-content">
|
||||||
<?php
|
<?php
|
||||||
the_content(
|
the_content(
|
||||||
sprintf(
|
twenty_twenty_one_continue_reading_text()
|
||||||
twenty_twenty_one_continue_reading_text(),
|
|
||||||
get_the_title()
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
|
|
||||||
wp_link_pages(
|
wp_link_pages(
|
||||||
array(
|
array(
|
||||||
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
|
||||||
'after' => '</nav>',
|
'after' => '</nav>',
|
||||||
/* translators: There is a space after page. */
|
/* translators: %: page number. */
|
||||||
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
|
'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// If there are paragraph blocks, print up to two.
|
// If there are paragraph blocks, print up to two.
|
||||||
// Otherwise this is legacy content, and we can post the excerpt.
|
// Otherwise this is legacy content, so print the excerpt.
|
||||||
if ( has_block( 'core/paragraph', get_the_content() ) ) {
|
if ( has_block( 'core/paragraph', get_the_content() ) ) {
|
||||||
|
|
||||||
twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content(), 2 );
|
twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content(), 2 );
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Print the 1st gallery we can find.
|
// Print the 1st gallery found.
|
||||||
if ( has_block( 'core/gallery', get_the_content() ) ) {
|
if ( has_block( 'core/gallery', get_the_content() ) ) {
|
||||||
|
|
||||||
twenty_twenty_one_print_first_instance_of_block( 'core/gallery', get_the_content() );
|
twenty_twenty_one_print_first_instance_of_block( 'core/gallery', get_the_content() );
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// If there is no featured-image, print the first image block we can find.
|
// If there is no featured-image, print the first image block found.
|
||||||
if (
|
if (
|
||||||
! twenty_twenty_one_can_show_post_thumbnail() &&
|
! twenty_twenty_one_can_show_post_thumbnail() &&
|
||||||
has_block( 'core/image', get_the_content() )
|
has_block( 'core/image', get_the_content() )
|
||||||
|