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

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,6 @@
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/.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
@ -13,166 +12,166 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
# Visibility
--------------------------------------------------------------*/
@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 */
@page {
margin: 2cm;
}
.site-footer .site-info {
margin: 0;
}
.entry .entry-header,
.entry,
.single .site-main > article > .entry-footer {
margin-top: 0;
margin-bottom: 0;
}
.site-header {
padding: 0;
}
.site-footer .site-info {
margin: 0;
}
/* Fonts */
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 {
padding: 0;
}
.has-background-dark * {
color: #000 !important;
}
/* Fonts */
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;
}
h1,
.entry-title,
.singular .entry-title,
.page-title {
font-size: 22pt;
font-weight: bold;
}
.has-background-dark * {
color: #000 !important;
}
h2,
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,
.entry-title,
.singular .entry-title,
.page-title {
font-size: 22pt;
font-weight: bold;
}
.comment-meta,
.comment-meta .comment-author .fn {
font-size: 13pt;
}
h2,
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;
}
/* Page breaks */
a {
page-break-inside: avoid;
}
.comment-meta,
.comment-meta .comment-author .fn {
font-size: 13pt;
}
blockquote {
page-break-inside: avoid;
}
/* Page breaks */
a {
page-break-inside: avoid;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
blockquote {
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
table,
pre,
figure {
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
ul,
ol,
dl {
page-break-before: avoid;
}
table,
pre,
figure {
page-break-inside: avoid;
}
/* Links */
a:link,
a:visited,
a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
ul,
ol,
dl {
page-break-before: avoid;
}
a[href^=http]:after {
content: " < " attr(href) "> ";
}
/* Links */
a:link,
a:visited,
a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a:after > img {
content: "";
}
a[href^=http]:after {
content: " < " attr(href) "> ";
}
article a[href^="#"]:after {
content: "";
}
a:after > img {
content: "";
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
article a[href^="#"]:after {
content: "";
}
.entry-title a:after {
content: "\a< " attr(href) "> ";
white-space: pre;
font-size: 14pt;
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
.cat-links a:after,
.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 {
content: "\a< " attr(href) "> ";
white-space: pre;
font-size: 14pt;
}
/* 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;
}
.cat-links a:after,
.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: "";
}
/* 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;
}
.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 */

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,12 +1,6 @@
.wp-block-navigation {
.wp-block-navigation-link {
padding: 0;
.wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation-link__label {
font-family: var(--primary-nav--font-family);
font-size: var(--primary-nav--font-size);
@ -30,35 +24,16 @@
.wp-block-navigation__container {
border: none;
left: 0;
margin-left: var(--primary-nav--padding);
min-width: max-content;
opacity: 0;
padding: 0;
position: 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 {
display: none;
}
}
&:hover,
&:focus-within {
.wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
}
}
> .has-child {

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -16,7 +16,7 @@
*
* @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.