WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Twenty Twenty-One: Fix obsolete navigation block styles for better Global Styles support. 

This changeset removes CSS custom properties that targets navigation menu items to avoid preventing the block from inheriting padding values set by the Global Styles system.

Props Joen, desrosj, poena.
Fixes #53220.

Built from https://develop.svn.wordpress.org/trunk@55088


git-svn-id: http://core.svn.wordpress.org/trunk@54621 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
audrasjb 2023-01-18 13:33:12 +00:00
parent 69f0cb5e3f
commit b93aa43140
11 changed files with 11918 additions and 14711 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3660
wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View File

File diff suppressed because it is too large Load Diff

8241
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

File diff suppressed because it is too large Load Diff

281
wp-content/themes/twentytwentyone/assets/css/print.css
View File

@ -2,7 +2,6 @@
Adding print support. The print styles are based on the the great work of Adding print support. The print styles are based on the the great work of
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
*/ */
/*-------------------------------------------------------------- /*--------------------------------------------------------------
>>> TABLE OF CONTENTS: >>> TABLE OF CONTENTS:
---------------------------------------------------------------- ----------------------------------------------------------------
@ -13,166 +12,166 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
# Visibility # Visibility
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@media print { @media print {
/* Margins & paddings */
@page {
margin: 2cm;
}
.entry .entry-header,
.entry,
.single .site-main > article > .entry-footer {
margin-top: 0;
margin-bottom: 0;
}
/* Margins & paddings */ .site-footer .site-info {
@page { margin: 0;
margin: 2cm; }
}
.entry .entry-header, .site-header {
.entry, padding: 0;
.single .site-main > article > .entry-footer { }
margin-top: 0;
margin-bottom: 0;
}
.site-footer .site-info { /* Fonts */
margin: 0; body {
} font: 13pt Georgia, "Times New Roman", Times, serif;
font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif);
line-height: 1.3;
background: #fff !important;
color: #000;
}
.site-header { .has-background-dark * {
padding: 0; color: #000 !important;
} }
/* Fonts */ h1,
body { .entry-title,
font: 13pt Georgia, "Times New Roman", Times, serif; .singular .entry-title,
font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif); .page-title {
line-height: 1.3; font-size: 22pt;
background: #fff !important; font-weight: bold;
color: #000; }
}
.has-background-dark * { h2,
color: #000 !important; h3,
} h4,
.has-regular-font-size,
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title,
.archive-description {
font-size: 14pt;
margin-top: 25px;
}
h1, .comment-meta,
.entry-title, .comment-meta .comment-author .fn {
.singular .entry-title, font-size: 13pt;
.page-title { }
font-size: 22pt;
font-weight: bold;
}
h2, /* Page breaks */
h3, a {
h4, page-break-inside: avoid;
.has-regular-font-size, }
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title,
.archive-description {
font-size: 14pt;
margin-top: 25px;
}
.comment-meta, blockquote {
.comment-meta .comment-author .fn { page-break-inside: avoid;
font-size: 13pt; }
}
/* Page breaks */ h1,
a { h2,
page-break-inside: avoid; h3,
} h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
blockquote { img {
page-break-inside: avoid; page-break-inside: avoid;
} page-break-after: avoid;
}
h1, table,
h2, pre,
h3, figure {
h4, page-break-inside: avoid;
h5, }
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
img { ul,
page-break-inside: avoid; ol,
page-break-after: avoid; dl {
} page-break-before: avoid;
}
table, /* Links */
pre, a:link,
figure { a:visited,
page-break-inside: avoid; a {
} background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
ul, a[href^=http]:after {
ol, content: " < " attr(href) "> ";
dl { }
page-break-before: avoid;
}
/* Links */ a:after > img {
a:link, content: "";
a:visited, }
a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a[href^=http]:after { article a[href^="#"]:after {
content: " < " attr(href) "> "; content: "";
} }
a:after > img { a:not(:local-link):after {
content: ""; content: " < " attr(href) "> ";
} }
article a[href^="#"]:after { .entry-title a:after {
content: ""; content: "\a< " attr(href) "> ";
} white-space: pre;
font-size: 14pt;
}
a:not(:local-link):after { .cat-links a:after,
content: " < " attr(href) "> "; .tags-links a:after,
} .byline a:after,
.comment-metadata a:after,
.wp-block-calendar a:after,
.wp-block-tag-cloud a:after,
.page-links a:after {
content: "";
}
.entry-title a:after { /* Visibility */
content: "\a< " attr(href) "> "; .primary-navigation,
white-space: pre; .site-title + .primary-navigation,
font-size: 14pt; .footer-navigation,
} .entry-footer,
.post-navigation,
.navigation.pagination,
.widget-area,
.edit-link,
.more-link,
.comment-reply,
.reply,
.comment .comment-metadata .edit-link,
.comment-respond,
#dark-mode-toggler {
display: none !important;
}
.cat-links a:after, .entry .entry-content .wp-block-button .wp-block-button__link,
.tags-links a:after, .entry .entry-content .button,
.byline a:after, .entry .entry-content .wp-block-file__button {
.comment-metadata a:after, color: #000;
.wp-block-calendar a:after, background: none;
.wp-block-tag-cloud a:after, }
.page-links a:after {
content: "";
}
/* Visibility */
.primary-navigation,
.site-title + .primary-navigation,
.footer-navigation,
.entry-footer,
.post-navigation,
.navigation.pagination,
.widget-area,
.edit-link,
.more-link,
.comment-reply,
.reply,
.comment .comment-metadata .edit-link,
.comment-respond,
#dark-mode-toggler {
display: none !important;
}
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .button,
.entry .entry-content .wp-block-file__button {
color: #000;
background: none;
}
} }
/*# sourceMappingURL=print.css.map */

171
wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css
View File

@ -1,113 +1,94 @@
/* OS dark theme preference */ /* OS dark theme preference */
@media only screen { @media only screen {
.is-dark-theme.is-dark-theme {
--global--color-background: var(--global--color-dark-gray);
--global--color-primary: var(--global--color-light-gray);
--global--color-secondary: var(--global--color-light-gray);
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--global--color-border: #9ea1a7;
/* Block: Table */
--table--stripes-border-color: rgba(240, 240, 240, 0.15);
--table--stripes-background-color: rgba(240, 240, 240, 0.15);
}
.is-dark-theme.is-dark-theme { .is-dark-theme img {
--global--color-background: var(--global--color-dark-gray); filter: brightness(0.85) contrast(1.1);
--global--color-primary: var(--global--color-light-gray); }
--global--color-secondary: var(--global--color-light-gray);
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--global--color-border: #9ea1a7;
/* Block: Table */ .respect-color-scheme-preference.is-dark-theme body {
--table--stripes-border-color: rgba(240, 240, 240, 0.15); background-color: var(--global--color-background);
--table--stripes-background-color: rgba(240, 240, 240, 0.15); }
}
.is-dark-theme img { #dark-mode-toggler {
filter: brightness(0.85) contrast(1.1); cursor: pointer;
} display: flex;
align-items: center;
.respect-color-scheme-preference.is-dark-theme body { justify-content: center;
background-color: var(--global--color-background); font-size: var(--global--font-size-xs);
} padding: 0.5em;
min-height: 44px;
#dark-mode-toggler { min-width: max-content;
cursor: pointer; border: 2px solid currentColor;
display: flex; box-shadow: none;
align-items: center; background: var(--button--color-text);
justify-content: center; color: var(--button--color-background);
font-size: var(--global--font-size-xs); z-index: 9998;
padding: 0.5em; }
min-height: 44px; .no-js #dark-mode-toggler {
min-width: max-content; display: none;
border: 2px solid currentColor; }
box-shadow: none; #dark-mode-toggler.fixed-bottom {
background: var(--button--color-text); position: fixed;
color: var(--button--color-background); bottom: 5px;
z-index: 9998; left: 5px;
} transition: bottom 0.5s;
}
.no-js #dark-mode-toggler { #dark-mode-toggler.fixed-bottom.hide:not(:focus) {
display: none; bottom: -80px;
} }
#dark-mode-toggler.relative {
#dark-mode-toggler.fixed-bottom { position: absolute;
position: fixed; height: 44px;
bottom: 5px; top: calc(2.4 * var(--global--spacing-vertical) - 44px);
left: 5px; left: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
} }
.admin-bar #dark-mode-toggler.relative {
#dark-mode-toggler.fixed-bottom.hide:not(:focus) { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
bottom: -80px; }
}
#dark-mode-toggler.relative {
position: absolute;
height: 44px;
top: calc(2.4 * var(--global--spacing-vertical) - 44px);
left: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
}
.admin-bar #dark-mode-toggler.relative {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
}
} }
@media only screen and (max-width: 782px) { @media only screen and (max-width: 782px) {
.admin-bar #dark-mode-toggler.relative {
.admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); }
}
} }
@media only screen and (max-width: 481px) { @media only screen and (max-width: 481px) {
.admin-bar #dark-mode-toggler.relative {
.admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); }
}
} }
@media only screen and (max-width: 481px) { @media only screen and (max-width: 481px) {
body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav {
body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { top: calc(44px + 44px);
top: 88px; }
}
} }
@media only screen { @media only screen {
.primary-navigation-open #dark-mode-toggler {
.primary-navigation-open #dark-mode-toggler { display: none;
display: none; }
}
} }
@media only screen { @media only screen {
#dark-mode-toggler:hover, #dark-mode-toggler:focus {
#dark-mode-toggler:hover, color: var(--button--color-background-active);
#dark-mode-toggler:focus { border: 2px solid var(--button--color-text-active);
color: var(--button--color-background-active); background-color: var(--button--color-text-active);
border: 2px solid var(--button--color-text-active); }
background-color: var(--button--color-text-active);
}
} }
@media only screen { @media only screen {
.is-IE #dark-mode-toggler {
.is-IE #dark-mode-toggler { display: none;
display: none; }
}
}
@media only screen and (prefers-reduced-motion: no-preference) {
#dark-mode-toggler.fixed-bottom {
transition: bottom 0.5s;
}
} }

171
wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css
View File

@ -1,113 +1,96 @@
/* OS dark theme preference */ /* OS dark theme preference */
@media only screen { @media only screen {
.is-dark-theme.is-dark-theme {
--global--color-background: var(--global--color-dark-gray);
--global--color-primary: var(--global--color-light-gray);
--global--color-secondary: var(--global--color-light-gray);
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--global--color-border: #9ea1a7;
/* Block: Table */
--table--stripes-border-color: rgba(240, 240, 240, 0.15);
--table--stripes-background-color: rgba(240, 240, 240, 0.15);
}
.is-dark-theme.is-dark-theme { .is-dark-theme img {
--global--color-background: var(--global--color-dark-gray); filter: brightness(0.85) contrast(1.1);
--global--color-primary: var(--global--color-light-gray); }
--global--color-secondary: var(--global--color-light-gray);
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--global--color-border: #9ea1a7;
/* Block: Table */ .respect-color-scheme-preference.is-dark-theme body {
--table--stripes-border-color: rgba(240, 240, 240, 0.15); background-color: var(--global--color-background);
--table--stripes-background-color: rgba(240, 240, 240, 0.15); }
}
.is-dark-theme img { #dark-mode-toggler {
filter: brightness(0.85) contrast(1.1); cursor: pointer;
} display: flex;
align-items: center;
.respect-color-scheme-preference.is-dark-theme body { justify-content: center;
background-color: var(--global--color-background); font-size: var(--global--font-size-xs);
} padding: 0.5em;
min-height: 44px;
#dark-mode-toggler { min-width: max-content;
cursor: pointer; border: 2px solid currentColor;
display: flex; box-shadow: none;
align-items: center; background: var(--button--color-text);
justify-content: center; color: var(--button--color-background);
font-size: var(--global--font-size-xs); z-index: 9998;
padding: 0.5em; }
min-height: 44px; .no-js #dark-mode-toggler {
min-width: max-content; display: none;
border: 2px solid currentColor; }
box-shadow: none; #dark-mode-toggler.fixed-bottom {
background: var(--button--color-text); position: fixed;
color: var(--button--color-background); bottom: 5px;
z-index: 9998; right: 5px;
} transition: bottom 0.5s;
}
.no-js #dark-mode-toggler { #dark-mode-toggler.fixed-bottom.hide:not(:focus) {
display: none; bottom: -80px;
} }
#dark-mode-toggler.relative {
#dark-mode-toggler.fixed-bottom { position: absolute;
position: fixed; height: 44px;
bottom: 5px; top: calc(2.4 * var(--global--spacing-vertical) - 44px);
right: 5px; right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
} }
.admin-bar #dark-mode-toggler.relative {
#dark-mode-toggler.fixed-bottom.hide:not(:focus) { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
bottom: -80px; }
}
#dark-mode-toggler.relative {
position: absolute;
height: 44px;
top: calc(2.4 * var(--global--spacing-vertical) - 44px);
right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
}
.admin-bar #dark-mode-toggler.relative {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
}
} }
@media only screen and (max-width: 782px) { @media only screen and (max-width: 782px) {
.admin-bar #dark-mode-toggler.relative {
.admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); }
}
} }
@media only screen and (max-width: 481px) { @media only screen and (max-width: 481px) {
.admin-bar #dark-mode-toggler.relative {
.admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); }
}
} }
@media only screen and (max-width: 481px) { @media only screen and (max-width: 481px) {
body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav {
body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { top: calc(44px + 44px);
top: 88px; }
}
} }
@media only screen { @media only screen {
.primary-navigation-open #dark-mode-toggler {
.primary-navigation-open #dark-mode-toggler { display: none;
display: none; }
}
} }
@media only screen { @media only screen {
#dark-mode-toggler:hover, #dark-mode-toggler:focus {
#dark-mode-toggler:hover, color: var(--button--color-background-active);
#dark-mode-toggler:focus { border: 2px solid var(--button--color-text-active);
color: var(--button--color-background-active); background-color: var(--button--color-text-active);
border: 2px solid var(--button--color-text-active); }
background-color: var(--button--color-text-active);
}
} }
@media only screen { @media only screen {
.is-IE #dark-mode-toggler {
.is-IE #dark-mode-toggler { display: none;
display: none; }
}
} }
@media only screen and (prefers-reduced-motion: no-preference) {
#dark-mode-toggler.fixed-bottom { /*# sourceMappingURL=style-dark-mode.css.map */
transition: bottom 0.5s;
}
}

2622
wp-content/themes/twentytwentyone/assets/css/style-editor.css
View File

File diff suppressed because it is too large Load Diff

10
wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss
View File

@ -1,16 +1,16 @@
.wp-block-navigation { .wp-block-navigation {
[data-block] {
margin-top: revert;
margin-bottom: revert;
}
.wp-block-navigation__container { .wp-block-navigation__container {
background: var(--global--color-background); background: var(--global--color-background);
padding: 0;
} }
.wp-block-navigation-link { .wp-block-navigation-link {
.wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation-link__label { .wp-block-navigation-link__label {
font-family: var(--primary-nav--font-family); font-family: var(--primary-nav--font-family);
font-size: var(--primary-nav--font-size); font-size: var(--primary-nav--font-size);

25
wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss
View File

@ -1,12 +1,6 @@
.wp-block-navigation { .wp-block-navigation {
.wp-block-navigation-link { .wp-block-navigation-link {
padding: 0;
.wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation-link__label { .wp-block-navigation-link__label {
font-family: var(--primary-nav--font-family); font-family: var(--primary-nav--font-family);
font-size: var(--primary-nav--font-size); font-size: var(--primary-nav--font-size);
@ -30,35 +24,16 @@
.wp-block-navigation__container { .wp-block-navigation__container {
border: none; border: none;
left: 0; left: 0;
margin-left: var(--primary-nav--padding);
min-width: max-content; min-width: max-content;
opacity: 0; opacity: 0;
padding: 0; padding: 0;
position: inherit; position: inherit;
top: inherit; top: inherit;
.wp-block-navigation-link {
.wp-block-navigation-link__content {
display: inline-block;
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
}
}
.wp-block-navigation-link__submenu-icon { .wp-block-navigation-link__submenu-icon {
display: none; display: none;
} }
} }
&:hover,
&:focus-within {
.wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
}
} }
> .has-child { > .has-child {

5694
wp-content/themes/twentytwentyone/style-rtl.css
View File

File diff suppressed because it is too large Load Diff

5752
wp-content/themes/twentytwentyone/style.css
View File

File diff suppressed because it is too large Load Diff

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.2-alpha-55087'; $wp_version = '6.2-alpha-55088';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.