Skip to content

Commit a9bd771

Browse files
audrasjbaudrasjb
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@55101 602fd350-edb4-49c9-b593-d223f7449a82
1 parent e229ac4 commit a9bd771

File tree

11 files changed

+19
-107
lines changed

11 files changed

+19
-107
lines changed

‎src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1461,13 +1461,13 @@ dt {
14611461
border: 3px solid #28303d;
14621462
}
14631463

1464-
.wp-block-navigation .wp-block-navigation__container {
1465-
background: #d1e4dd;
1466-
padding: 0;
1464+
.wp-block-navigation [data-block] {
1465+
margin-top: revert;
1466+
margin-bottom: revert;
14671467
}
14681468

1469-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
1470-
padding: 13px;
1469+
.wp-block-navigation .wp-block-navigation__container {
1470+
background: #d1e4dd;
14711471
}
14721472

14731473
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {

‎src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wp-content/themes/twentytwentyone/assets/css/ie.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3538,14 +3538,6 @@ dd {
35383538
border: 3px solid #28303d;
35393539
}
35403540

3541-
.wp-block-navigation .wp-block-navigation-link {
3542-
padding: 0;
3543-
}
3544-
3545-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
3546-
padding: 13px;
3547-
}
3548-
35493541
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
35503542
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
35513543
font-size: 1.25rem;
@@ -3563,30 +3555,17 @@ dd {
35633555
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
35643556
border: none;
35653557
left: 0;
3566-
margin-left: 13px;
35673558
min-width: max-content;
35683559
opacity: 0;
35693560
padding: 0;
35703561
position: inherit;
35713562
top: inherit;
35723563
}
35733564

3574-
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
3575-
display: inline-block;
3576-
padding: 7px 13px;
3577-
}
3578-
35793565
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
35803566
display: none;
35813567
}
35823568

3583-
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
3584-
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
3585-
display: block;
3586-
opacity: 1;
3587-
visibility: visible;
3588-
}
3589-
35903569
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
35913570
background: #d1e4dd;
35923571
margin: 0;

‎src/wp-content/themes/twentytwentyone/assets/css/ie.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wp-content/themes/twentytwentyone/assets/css/style-editor.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,13 +1376,13 @@ dt {
13761376
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
13771377
}
13781378

1379-
.wp-block-navigation .wp-block-navigation__container {
1380-
background: var(--global--color-background);
1381-
padding: 0;
1379+
.wp-block-navigation [data-block] {
1380+
margin-top: revert;
1381+
margin-bottom: revert;
13821382
}
13831383

1384-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
1385-
padding: var(--primary-nav--padding);
1384+
.wp-block-navigation .wp-block-navigation__container {
1385+
background: var(--global--color-background);
13861386
}
13871387

13881388
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {

‎src/wp-content/themes/twentytwentyone/assets/css/style-editor.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
.wp-block-navigation {
22

3+
[data-block] {
4+
margin-top: revert;
5+
margin-bottom: revert;
6+
}
7+
38
.wp-block-navigation__container {
49
background: var(--global--color-background);
5-
padding: 0;
610
}
711

812
.wp-block-navigation-link {
913

10-
.wp-block-navigation-link__content {
11-
padding: var(--primary-nav--padding);
12-
}
13-
1414
.wp-block-navigation-link__label {
1515
font-family: var(--primary-nav--font-family);
1616
font-size: var(--primary-nav--font-size);

‎src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
.wp-block-navigation {
22

33
.wp-block-navigation-link {
4-
padding: 0;
5-
6-
.wp-block-navigation-link__content {
7-
padding: var(--primary-nav--padding);
8-
}
9-
104
.wp-block-navigation-link__label {
115
font-family: var(--primary-nav--font-family);
126
font-size: var(--primary-nav--font-size);
@@ -30,35 +24,16 @@
3024
.wp-block-navigation__container {
3125
border: none;
3226
left: 0;
33-
margin-left: var(--primary-nav--padding);
3427
min-width: max-content;
3528
opacity: 0;
3629
padding: 0;
3730
position: inherit;
3831
top: inherit;
3932

40-
.wp-block-navigation-link {
41-
42-
.wp-block-navigation-link__content {
43-
display: inline-block;
44-
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
45-
}
46-
}
47-
4833
.wp-block-navigation-link__submenu-icon {
4934
display: none;
5035
}
5136
}
52-
53-
&:hover,
54-
&:focus-within {
55-
56-
.wp-block-navigation__container {
57-
display: block;
58-
opacity: 1;
59-
visibility: visible;
60-
}
61-
}
6237
}
6338

6439
> .has-child {

‎src/wp-content/themes/twentytwentyone/style-rtl.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2711,14 +2711,6 @@ dd {
27112711
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
27122712
}
27132713

2714-
.wp-block-navigation .wp-block-navigation-link {
2715-
padding: 0;
2716-
}
2717-
2718-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
2719-
padding: var(--primary-nav--padding);
2720-
}
2721-
27222714
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
27232715
font-family: var(--primary-nav--font-family);
27242716
font-size: var(--primary-nav--font-size);
@@ -2736,30 +2728,17 @@ dd {
27362728
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
27372729
border: none;
27382730
right: 0;
2739-
margin-right: var(--primary-nav--padding);
27402731
min-width: max-content;
27412732
opacity: 0;
27422733
padding: 0;
27432734
position: inherit;
27442735
top: inherit;
27452736
}
27462737

2747-
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
2748-
display: inline-block;
2749-
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
2750-
}
2751-
27522738
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
27532739
display: none;
27542740
}
27552741

2756-
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
2757-
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
2758-
display: block;
2759-
opacity: 1;
2760-
visibility: visible;
2761-
}
2762-
27632742
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
27642743
background: var(--global--color-background);
27652744
margin: 0;

‎src/wp-content/themes/twentytwentyone/style.css‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2721,14 +2721,6 @@ dd {
27212721
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
27222722
}
27232723

2724-
.wp-block-navigation .wp-block-navigation-link {
2725-
padding: 0;
2726-
}
2727-
2728-
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
2729-
padding: var(--primary-nav--padding);
2730-
}
2731-
27322724
.wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
27332725
font-family: var(--primary-nav--font-family);
27342726
font-size: var(--primary-nav--font-size);
@@ -2746,30 +2738,17 @@ dd {
27462738
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
27472739
border: none;
27482740
left: 0;
2749-
margin-left: var(--primary-nav--padding);
27502741
min-width: max-content;
27512742
opacity: 0;
27522743
padding: 0;
27532744
position: inherit;
27542745
top: inherit;
27552746
}
27562747

2757-
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
2758-
display: inline-block;
2759-
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
2760-
}
2761-
27622748
.wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
27632749
display: none;
27642750
}
27652751

2766-
.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container,
2767-
.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container {
2768-
display: block;
2769-
opacity: 1;
2770-
visibility: visible;
2771-
}
2772-
27732752
.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container {
27742753
background: var(--global--color-background);
27752754
margin: 0;

0 commit comments

Comments
 (0)