Skip to content

Commit 98e8753

Browse files
SergeyBiryukovSergeyBiryukov
committed
Twenty Twenty-One: Correct RTL margins for left/right aligned blocks.
Follow-up to [49216], [49574]. Props sabernhardt, sagarladani, poena, karmatosed, SergeyBiryukov. Fixes #56748. git-svn-id: https://develop.svn.wordpress.org/trunk@61490 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 1fdc11a commit 98e8753

12 files changed

Lines changed: 160 additions & 11 deletions

File tree

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,6 +1000,18 @@ h6,
10001000
padding: 20px;
10011001
}
10021002

1003+
.wp-block[data-align=left] > .wp-block-image {
1004+
1005+
/*rtl:ignore*/
1006+
margin-left: 0;
1007+
}
1008+
1009+
.wp-block[data-align=right] > .wp-block-image {
1010+
1011+
/*rtl:ignore*/
1012+
margin-right: 0;
1013+
}
1014+
10031015
.wp-block-latest-comments {
10041016
padding-left: 0;
10051017
}
@@ -2422,11 +2434,15 @@ pre.wp-block-verse {
24222434

24232435
.wp-block[data-align=left] > * {
24242436
max-width: 290px;
2437+
2438+
/*rtl:ignore*/
24252439
margin-right: 25px;
24262440
}
24272441

24282442
.wp-block[data-align=right] > * {
24292443
max-width: 290px;
2444+
2445+
/*rtl:ignore*/
24302446
margin-left: 25px;
24312447
}
24322448
}

‎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: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2439,11 +2439,21 @@ h6,
24392439
}
24402440

24412441
.wp-block-image .alignright {
2442+
2443+
/*rtl:ignore*/
24422444
margin-left: 25px;
2445+
2446+
/*rtl:ignore*/
2447+
margin-right: 0;
24432448
}
24442449

24452450
.wp-block-image .alignleft {
2451+
2452+
/*rtl:ignore*/
24462453
margin-right: 25px;
2454+
2455+
/*rtl:ignore*/
2456+
margin-left: 0;
24472457
}
24482458

24492459
.wp-block-image a:focus img {
@@ -2484,6 +2494,23 @@ h6,
24842494
margin-left: 0;
24852495
margin-right: 0;
24862496
}
2497+
2498+
.entry-content > .wp-block-image > .alignleft:after,
2499+
.entry-content > .wp-block-image > .alignright:after {
2500+
content: "";
2501+
display: block;
2502+
height: 1px;
2503+
width: 1em;
2504+
2505+
/*rtl:ignore*/
2506+
float: right;
2507+
}
2508+
2509+
.entry-content > .wp-block-image > .alignright:after {
2510+
2511+
/*rtl:ignore*/
2512+
float: left;
2513+
}
24872514
}
24882515

24892516
.wp-block-latest-comments {

‎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: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1111,6 +1111,18 @@ h6,
11111111
padding: var(--global--spacing-unit);
11121112
}
11131113

1114+
.wp-block[data-align=left] > .wp-block-image {
1115+
1116+
/*rtl:ignore*/
1117+
margin-left: 0;
1118+
}
1119+
1120+
.wp-block[data-align=right] > .wp-block-image {
1121+
1122+
/*rtl:ignore*/
1123+
margin-right: 0;
1124+
}
1125+
11141126
.wp-block-latest-comments {
11151127
padding-left: 0;
11161128
}
@@ -2311,11 +2323,15 @@ pre.wp-block-verse {
23112323

23122324
.wp-block[data-align=left] > * {
23132325
max-width: 290px;
2326+
2327+
/*rtl:ignore*/
23142328
margin-right: var(--global--spacing-horizontal);
23152329
}
23162330

23172331
.wp-block[data-align=right] > * {
23182332
max-width: 290px;
2333+
2334+
/*rtl:ignore*/
23192335
margin-left: var(--global--spacing-horizontal);
23202336
}
23212337
}

‎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/image/_editor.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,15 @@
1919
.wp-block-image.is-style-twentytwentyone-image-frame img {
2020
padding: var(--global--spacing-unit);
2121
}
22+
23+
.wp-block[data-align="left"] > .wp-block-image {
24+
25+
/*rtl:ignore*/
26+
margin-left: 0;
27+
}
28+
29+
.wp-block[data-align="right"] > .wp-block-image {
30+
31+
/*rtl:ignore*/
32+
margin-right: 0;
33+
}

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

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,21 @@
1111
}
1212

1313
.alignright {
14+
15+
/*rtl:ignore*/
1416
margin-left: var(--global--spacing-horizontal);
17+
18+
/*rtl:ignore*/
19+
margin-right: 0;
1520
}
1621

1722
.alignleft {
23+
24+
/*rtl:ignore*/
1825
margin-right: var(--global--spacing-horizontal);
26+
27+
/*rtl:ignore*/
28+
margin-left: 0;
1929
}
2030

2131
a:focus img {
@@ -49,14 +59,36 @@
4959

5060
> .wp-block-image {
5161

52-
> .alignleft,
53-
> .alignright {
54-
@include media(mobile) {
62+
@include media(mobile) {
63+
64+
> .alignleft,
65+
> .alignright {
5566
max-width: 50%;
5667
}
57-
@include media(mobile-only) {
68+
}
69+
70+
@include media(mobile-only) {
71+
72+
> .alignleft,
73+
> .alignright {
5874
margin-left: 0;
5975
margin-right: 0;
76+
77+
&:after {
78+
content: "";
79+
display: block;
80+
height: 1px;
81+
width: 1em;
82+
83+
/*rtl:ignore*/
84+
float: right;
85+
}
86+
}
87+
88+
> .alignright:after {
89+
90+
/*rtl:ignore*/
91+
float: left;
6092
}
6193
}
6294
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,15 +115,19 @@
115115
font-size: calc(1.2 * var(--heading--font-size-h1));
116116
}
117117

118-
@media only screen and (min-width: 482px) {
118+
@include media(mobile) {
119119

120120
.wp-block[data-align="left"] > * {
121121
max-width: 290px;
122+
123+
/*rtl:ignore*/
122124
margin-right: var(--global--spacing-horizontal);
123125
}
124126

125127
.wp-block[data-align="right"] > * {
126128
max-width: 290px;
129+
130+
/*rtl:ignore*/
127131
margin-left: var(--global--spacing-horizontal);
128132
}
129133
}

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2274,11 +2274,13 @@ h6,
22742274
}
22752275

22762276
.wp-block-image .alignright {
2277-
margin-right: var(--global--spacing-horizontal);
2277+
margin-left: var(--global--spacing-horizontal);
2278+
margin-right: 0;
22782279
}
22792280

22802281
.wp-block-image .alignleft {
2281-
margin-left: var(--global--spacing-horizontal);
2282+
margin-right: var(--global--spacing-horizontal);
2283+
margin-left: 0;
22822284
}
22832285

22842286
.wp-block-image a:focus img {
@@ -2319,6 +2321,19 @@ h6,
23192321
margin-right: 0;
23202322
margin-left: 0;
23212323
}
2324+
2325+
.entry-content > .wp-block-image > .alignleft:after,
2326+
.entry-content > .wp-block-image > .alignright:after {
2327+
content: "";
2328+
display: block;
2329+
height: 1px;
2330+
width: 1em;
2331+
float: right;
2332+
}
2333+
2334+
.entry-content > .wp-block-image > .alignright:after {
2335+
float: left;
2336+
}
23222337
}
23232338

23242339
.wp-block-latest-comments {

0 commit comments

Comments
 (0)