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

This changeset removes some 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, audrasjb, hellofromtonya, SergeyBiryukov.
Fixes #53220.

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


git-svn-id: http://core.svn.wordpress.org/trunk@54634 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
audrasjb 2023-01-19 17:41:16 +00:00
parent f48bb425ed
commit ee8958557a
8 changed files with 16 additions and 104 deletions

View File

@ -1461,13 +1461,13 @@ dt {
border: 3px solid #28303d; border: 3px solid #28303d;
} }
.wp-block-navigation .wp-block-navigation__container { .wp-block-navigation [data-block] {
background: #d1e4dd; margin-top: revert;
padding: 0; margin-bottom: revert;
} }
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { .wp-block-navigation .wp-block-navigation__container {
padding: 13px; background: #d1e4dd;
} }
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {

View File

@ -3538,14 +3538,6 @@ dd {
border: 3px solid #28303d; border: 3px solid #28303d;
} }
.wp-block-navigation .wp-block-navigation-link {
padding: 0;
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
padding: 13px;
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
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: 1.25rem; font-size: 1.25rem;
@ -3563,7 +3555,6 @@ dd {
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
border: none; border: none;
left: 0; left: 0;
margin-left: 13px;
min-width: max-content; min-width: max-content;
opacity: 0; opacity: 0;
padding: 0; padding: 0;
@ -3571,22 +3562,10 @@ dd {
top: inherit; top: inherit;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
display: inline-block;
padding: 7px 13px;
}
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
display: none; display: none;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
background: #d1e4dd; background: #d1e4dd;
margin: 0; margin: 0;

View File

@ -1376,13 +1376,13 @@ dt {
border: calc(3 * var(--separator--height)) solid var(--global--color-border); border: calc(3 * var(--separator--height)) solid var(--global--color-border);
} }
.wp-block-navigation .wp-block-navigation__container { .wp-block-navigation [data-block] {
background: var(--global--color-background); margin-top: revert;
padding: 0; margin-bottom: revert;
} }
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { .wp-block-navigation .wp-block-navigation__container {
padding: var(--primary-nav--padding); background: var(--global--color-background);
} }
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {

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);

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 {

View File

@ -2711,14 +2711,6 @@ dd {
border: calc(3 * var(--separator--height)) solid var(--global--color-border); border: calc(3 * var(--separator--height)) solid var(--global--color-border);
} }
.wp-block-navigation .wp-block-navigation-link {
padding: 0;
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { .wp-block-navigation .wp-block-navigation-link .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);
@ -2736,7 +2728,6 @@ dd {
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
border: none; border: none;
right: 0; right: 0;
margin-right: var(--primary-nav--padding);
min-width: max-content; min-width: max-content;
opacity: 0; opacity: 0;
padding: 0; padding: 0;
@ -2744,22 +2735,10 @@ dd {
top: inherit; top: inherit;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .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 > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
display: none; display: none;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
background: var(--global--color-background); background: var(--global--color-background);
margin: 0; margin: 0;

View File

@ -2721,14 +2721,6 @@ dd {
border: calc(3 * var(--separator--height)) solid var(--global--color-border); border: calc(3 * var(--separator--height)) solid var(--global--color-border);
} }
.wp-block-navigation .wp-block-navigation-link {
padding: 0;
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { .wp-block-navigation .wp-block-navigation-link .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);
@ -2746,7 +2738,6 @@ dd {
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container .has-child .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;
@ -2754,22 +2745,10 @@ dd {
top: inherit; top: inherit;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .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 > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
display: none; display: none;
} }
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
background: var(--global--color-background); background: var(--global--color-background);
margin: 0; margin: 0;

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.2-alpha-55100'; $wp_version = '6.2-alpha-55101';
/** /**
* 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.