Skip to content

Commit 73c668d

Browse files
audrasjbaudrasjb
committed
Twenty Twenty: Ensure headings styles are consistent between editor and front-end.
This changeset removes `.wp-block` container from headings CSS selectors to restore consistency between editor and front-end styles. It also removes `.wp-block` from headings selectors in the `'block-editor'` array of `twentytwenty_get_localized_font_family_elements()`. Props kajalgohel, kmadhak, poena, multidots1896, tahmidulkarim, audrasjb. Fixes #56194. git-svn-id: https://develop.svn.wordpress.org/trunk@54154 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 9603308 commit 73c668d

5 files changed

Lines changed: 113 additions & 75 deletions

File tree

‎src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,12 @@ Inter variable font. Usage:
121121

122122
.editor-post-title__block .editor-post-title__input,
123123
.editor-styles-wrapper .wp-block-post-title,
124-
.editor-styles-wrapper .wp-block h1,
125-
.editor-styles-wrapper .wp-block h2,
126-
.editor-styles-wrapper .wp-block h3,
127-
.editor-styles-wrapper .wp-block h4,
128-
.editor-styles-wrapper .wp-block h5,
129-
.editor-styles-wrapper .wp-block h6,
124+
.editor-styles-wrapper h1,
125+
.editor-styles-wrapper h2,
126+
.editor-styles-wrapper h3,
127+
.editor-styles-wrapper h4,
128+
.editor-styles-wrapper h5,
129+
.editor-styles-wrapper h6,
130130
.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
131131
.editor-styles-wrapper cite,
132132
.editor-styles-wrapper figcaption,
@@ -138,12 +138,12 @@ Inter variable font. Usage:
138138

139139
.editor-post-title__block .editor-post-title__input,
140140
.editor-styles-wrapper .wp-block-post-title,
141-
.editor-styles-wrapper .wp-block h1,
142-
.editor-styles-wrapper .wp-block h2,
143-
.editor-styles-wrapper .wp-block h3,
144-
.editor-styles-wrapper .wp-block h4,
145-
.editor-styles-wrapper .wp-block h5,
146-
.editor-styles-wrapper .wp-block h6,
141+
.editor-styles-wrapper h1,
142+
.editor-styles-wrapper h2,
143+
.editor-styles-wrapper h3,
144+
.editor-styles-wrapper h4,
145+
.editor-styles-wrapper h5,
146+
.editor-styles-wrapper h6,
147147
.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
148148
.editor-styles-wrapper cite,
149149
.editor-styles-wrapper figcaption,
@@ -242,12 +242,12 @@ Inter variable font. Usage:
242242

243243
.editor-post-title__block .editor-post-title__input,
244244
.editor-styles-wrapper .wp-block-post-title,
245-
.editor-styles-wrapper .wp-block h1,
246-
.editor-styles-wrapper .wp-block h2,
247-
.editor-styles-wrapper .wp-block h3,
248-
.editor-styles-wrapper .wp-block h4,
249-
.editor-styles-wrapper .wp-block h5,
250-
.editor-styles-wrapper .wp-block h6 {
245+
.editor-styles-wrapper h1,
246+
.editor-styles-wrapper h2,
247+
.editor-styles-wrapper h3,
248+
.editor-styles-wrapper h4,
249+
.editor-styles-wrapper h5,
250+
.editor-styles-wrapper h6 {
251251
font-feature-settings: "lnum";
252252
font-variant-numeric: lining-nums;
253253
font-weight: 700;
@@ -259,29 +259,35 @@ Inter variable font. Usage:
259259

260260
.editor-post-title__block .editor-post-title__input,
261261
.editor-styles-wrapper .wp-block-post-title,
262-
.editor-styles-wrapper .wp-block h1 {
262+
.editor-styles-wrapper h1,
263+
.editor-styles-wrapper .heading-size-1 {
263264
font-size: 36px;
264265
font-weight: 800;
265266
line-height: 1.138888889;
266267
}
267268

268-
.editor-styles-wrapper .wp-block h2 {
269+
.editor-styles-wrapper h2,
270+
.editor-styles-wrapper .heading-size-2 {
269271
font-size: 32px;
270272
}
271273

272-
.editor-styles-wrapper .wp-block h3 {
274+
.editor-styles-wrapper h3,
275+
.editor-styles-wrapper .heading-size-3 {
273276
font-size: 28px;
274277
}
275278

276-
.editor-styles-wrapper .wp-block h4 {
279+
.editor-styles-wrapper h4,
280+
.editor-styles-wrapper .heading-size-4 {
277281
font-size: 24px;
278282
}
279283

280-
.editor-styles-wrapper .wp-block h5 {
284+
.editor-styles-wrapper h5,
285+
.editor-styles-wrapper .heading-size-5 {
281286
font-size: 21px;
282287
}
283288

284-
.editor-styles-wrapper .wp-block h6 {
289+
.editor-styles-wrapper h6,
290+
.editor-styles-wrapper .heading-size-6 {
285291
font-size: 16px;
286292
letter-spacing: 0.03125em;
287293
text-transform: uppercase;
@@ -1248,23 +1254,28 @@ hr.wp-block-separator.is-style-dots::before {
12481254

12491255
.editor-post-title__block .editor-post-title__input,
12501256
.editor-styles-wrapper .wp-block-post-title,
1251-
.editor-styles-wrapper .wp-block h1 {
1257+
.editor-styles-wrapper h1,
1258+
.editor-styles-wrapper .heading-size-1 {
12521259
font-size: 64px;
12531260
}
12541261

1255-
.editor-styles-wrapper .wp-block h2 {
1262+
.editor-styles-wrapper h2,
1263+
.editor-styles-wrapper .heading-size-2 {
12561264
font-size: 48px;
12571265
}
12581266

1259-
.editor-styles-wrapper .wp-block h3 {
1267+
.editor-styles-wrapper h3,
1268+
.editor-styles-wrapper .heading-size-3 {
12601269
font-size: 40px;
12611270
}
12621271

1263-
.editor-styles-wrapper .wp-block h4 {
1272+
.editor-styles-wrapper h4,
1273+
.editor-styles-wrapper .heading-size-4 {
12641274
font-size: 32px;
12651275
}
12661276

1267-
.editor-styles-wrapper .wp-block h5 {
1277+
.editor-styles-wrapper h5,
1278+
.editor-styles-wrapper .heading-size-5 {
12681279
font-size: 24px;
12691280
}
12701281

@@ -1427,11 +1438,13 @@ hr.wp-block-separator.is-style-dots::before {
14271438

14281439
.editor-post-title__block .editor-post-title__input,
14291440
.editor-styles-wrapper .wp-block-post-title,
1430-
.editor-styles-wrapper .wp-block h1 {
1441+
.editor-styles-wrapper h1,
1442+
.editor-styles-wrapper .heading-size-1 {
14311443
font-size: 84px;
14321444
}
14331445

1434-
.editor-styles-wrapper .wp-block h6 {
1446+
.editor-styles-wrapper h6,
1447+
.editor-styles-wrapper .heading-size-6 {
14351448
font-size: 18px;
14361449
}
14371450

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

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,12 @@ Inter variable font. Usage:
121121

122122
.editor-post-title__block .editor-post-title__input,
123123
.editor-styles-wrapper .wp-block-post-title,
124-
.editor-styles-wrapper .wp-block h1,
125-
.editor-styles-wrapper .wp-block h2,
126-
.editor-styles-wrapper .wp-block h3,
127-
.editor-styles-wrapper .wp-block h4,
128-
.editor-styles-wrapper .wp-block h5,
129-
.editor-styles-wrapper .wp-block h6,
124+
.editor-styles-wrapper h1,
125+
.editor-styles-wrapper h2,
126+
.editor-styles-wrapper h3,
127+
.editor-styles-wrapper h4,
128+
.editor-styles-wrapper h5,
129+
.editor-styles-wrapper h6,
130130
.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
131131
.editor-styles-wrapper cite,
132132
.editor-styles-wrapper figcaption,
@@ -138,12 +138,12 @@ Inter variable font. Usage:
138138

139139
.editor-post-title__block .editor-post-title__input,
140140
.editor-styles-wrapper .wp-block-post-title,
141-
.editor-styles-wrapper .wp-block h1,
142-
.editor-styles-wrapper .wp-block h2,
143-
.editor-styles-wrapper .wp-block h3,
144-
.editor-styles-wrapper .wp-block h4,
145-
.editor-styles-wrapper .wp-block h5,
146-
.editor-styles-wrapper .wp-block h6,
141+
.editor-styles-wrapper h1,
142+
.editor-styles-wrapper h2,
143+
.editor-styles-wrapper h3,
144+
.editor-styles-wrapper h4,
145+
.editor-styles-wrapper h5,
146+
.editor-styles-wrapper h6,
147147
.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
148148
.editor-styles-wrapper cite,
149149
.editor-styles-wrapper figcaption,
@@ -242,12 +242,12 @@ Inter variable font. Usage:
242242

243243
.editor-post-title__block .editor-post-title__input,
244244
.editor-styles-wrapper .wp-block-post-title,
245-
.editor-styles-wrapper .wp-block h1,
246-
.editor-styles-wrapper .wp-block h2,
247-
.editor-styles-wrapper .wp-block h3,
248-
.editor-styles-wrapper .wp-block h4,
249-
.editor-styles-wrapper .wp-block h5,
250-
.editor-styles-wrapper .wp-block h6 {
245+
.editor-styles-wrapper h1,
246+
.editor-styles-wrapper h2,
247+
.editor-styles-wrapper h3,
248+
.editor-styles-wrapper h4,
249+
.editor-styles-wrapper h5,
250+
.editor-styles-wrapper h6 {
251251
font-feature-settings: "lnum";
252252
font-variant-numeric: lining-nums;
253253
font-weight: 700;
@@ -259,29 +259,35 @@ Inter variable font. Usage:
259259

260260
.editor-post-title__block .editor-post-title__input,
261261
.editor-styles-wrapper .wp-block-post-title,
262-
.editor-styles-wrapper .wp-block h1 {
262+
.editor-styles-wrapper h1,
263+
.editor-styles-wrapper .heading-size-1 {
263264
font-size: 36px;
264265
font-weight: 800;
265266
line-height: 1.138888889;
266267
}
267268

268-
.editor-styles-wrapper .wp-block h2 {
269+
.editor-styles-wrapper h2,
270+
.editor-styles-wrapper .heading-size-2 {
269271
font-size: 32px;
270272
}
271273

272-
.editor-styles-wrapper .wp-block h3 {
274+
.editor-styles-wrapper h3,
275+
.editor-styles-wrapper .heading-size-3 {
273276
font-size: 28px;
274277
}
275278

276-
.editor-styles-wrapper .wp-block h4 {
279+
.editor-styles-wrapper h4,
280+
.editor-styles-wrapper .heading-size-4 {
277281
font-size: 24px;
278282
}
279283

280-
.editor-styles-wrapper .wp-block h5 {
284+
.editor-styles-wrapper h5,
285+
.editor-styles-wrapper .heading-size-5 {
281286
font-size: 21px;
282287
}
283288

284-
.editor-styles-wrapper .wp-block h6 {
289+
.editor-styles-wrapper h6,
290+
.editor-styles-wrapper .heading-size-6 {
285291
font-size: 16px;
286292
letter-spacing: 0.03125em;
287293
text-transform: uppercase;
@@ -1252,23 +1258,28 @@ hr.wp-block-separator.is-style-dots::before {
12521258

12531259
.editor-post-title__block .editor-post-title__input,
12541260
.editor-styles-wrapper .wp-block-post-title,
1255-
.editor-styles-wrapper .wp-block h1 {
1261+
.editor-styles-wrapper h1,
1262+
.editor-styles-wrapper .heading-size-1 {
12561263
font-size: 64px;
12571264
}
12581265

1259-
.editor-styles-wrapper .wp-block h2 {
1266+
.editor-styles-wrapper h2,
1267+
.editor-styles-wrapper .heading-size-2 {
12601268
font-size: 48px;
12611269
}
12621270

1263-
.editor-styles-wrapper .wp-block h3 {
1271+
.editor-styles-wrapper h3,
1272+
.editor-styles-wrapper .heading-size-3 {
12641273
font-size: 40px;
12651274
}
12661275

1267-
.editor-styles-wrapper .wp-block h4 {
1276+
.editor-styles-wrapper h4,
1277+
.editor-styles-wrapper .heading-size-4 {
12681278
font-size: 32px;
12691279
}
12701280

1271-
.editor-styles-wrapper .wp-block h5 {
1281+
.editor-styles-wrapper h5,
1282+
.editor-styles-wrapper .heading-size-5 {
12721283
font-size: 24px;
12731284
}
12741285

@@ -1431,11 +1442,13 @@ hr.wp-block-separator.is-style-dots::before {
14311442

14321443
.editor-post-title__block .editor-post-title__input,
14331444
.editor-styles-wrapper .wp-block-post-title,
1434-
.editor-styles-wrapper .wp-block h1 {
1445+
.editor-styles-wrapper h1,
1446+
.editor-styles-wrapper .heading-size-1 {
14351447
font-size: 84px;
14361448
}
14371449

1438-
.editor-styles-wrapper .wp-block h6 {
1450+
.editor-styles-wrapper h6,
1451+
.editor-styles-wrapper .heading-size-6 {
14391452
font-size: 18px;
14401453
}
14411454

‎src/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
215215
margin: 40px 0 25px;
216216
}
217217

218-
body#tinymce.wp-editor.content h1 {
218+
body#tinymce.wp-editor.content h1,
219+
body#tinymce.wp-editor.content .heading-size-1 {
219220
font-size: 84px;
220221
font-weight: 800;
221222
line-height: 1.138888889;
222223
}
223224

224-
body#tinymce.wp-editor.content h2 {
225+
body#tinymce.wp-editor.content h2,
226+
body#tinymce.wp-editor.content .heading-size-2 {
225227
font-size: 48px;
226228
}
227229

228-
body#tinymce.wp-editor.content h3 {
230+
body#tinymce.wp-editor.content h3,
231+
body#tinymce.wp-editor.content .heading-size-3 {
229232
font-size: 40px;
230233
}
231234

232-
body#tinymce.wp-editor.content h4 {
235+
body#tinymce.wp-editor.content h4,
236+
body#tinymce.wp-editor.content .heading-size-4 {
233237
font-size: 32px;
234238
}
235239

236-
body#tinymce.wp-editor.content h5 {
240+
body#tinymce.wp-editor.content h5,
241+
body#tinymce.wp-editor.content .heading-size-5 {
237242
font-size: 24px;
238243
}
239244

240-
body#tinymce.wp-editor.content h6 {
245+
body#tinymce.wp-editor.content h6,
246+
body#tinymce.wp-editor.content .heading-size-6 {
241247
font-size: 18px;
242248
letter-spacing: 0.03125em;
243249
text-transform: uppercase;

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
215215
margin: 40px 0 25px;
216216
}
217217

218-
body#tinymce.wp-editor.content h1 {
218+
body#tinymce.wp-editor.content h1,
219+
body#tinymce.wp-editor.content .heading-size-1 {
219220
font-size: 84px;
220221
font-weight: 800;
221222
line-height: 1.138888889;
222223
}
223224

224-
body#tinymce.wp-editor.content h2 {
225+
body#tinymce.wp-editor.content h2,
226+
body#tinymce.wp-editor.content .heading-size-2 {
225227
font-size: 48px;
226228
}
227229

228-
body#tinymce.wp-editor.content h3 {
230+
body#tinymce.wp-editor.content h3,
231+
body#tinymce.wp-editor.content .heading-size-3 {
229232
font-size: 40px;
230233
}
231234

232-
body#tinymce.wp-editor.content h4 {
235+
body#tinymce.wp-editor.content h4,
236+
body#tinymce.wp-editor.content .heading-size-4 {
233237
font-size: 32px;
234238
}
235239

236-
body#tinymce.wp-editor.content h5 {
240+
body#tinymce.wp-editor.content h5,
241+
body#tinymce.wp-editor.content .heading-size-5 {
237242
font-size: 24px;
238243
}
239244

240-
body#tinymce.wp-editor.content h6 {
245+
body#tinymce.wp-editor.content h6,
246+
body#tinymce.wp-editor.content .heading-size-6 {
241247
font-size: 18px;
242248
letter-spacing: 0.03125em;
243249
text-transform: uppercase;

‎src/wp-content/themes/twentytwenty/classes/class-twentytwenty-non-latin-languages.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ public static function get_non_latin_css( $type = 'front-end' ) {
119119
'twentytwenty_get_localized_font_family_elements',
120120
array(
121121
'front-end' => array( 'body', 'input', 'textarea', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', '.has-drop-cap:not(:focus)::first-letter', '.entry-content .wp-block-archives', '.entry-content .wp-block-categories', '.entry-content .wp-block-cover-image', '.entry-content .wp-block-latest-comments', '.entry-content .wp-block-latest-posts', '.entry-content .wp-block-pullquote', '.entry-content .wp-block-quote.is-large', '.entry-content .wp-block-quote.is-style-large', '.entry-content .wp-block-archives *', '.entry-content .wp-block-categories *', '.entry-content .wp-block-latest-posts *', '.entry-content .wp-block-latest-comments *', '.entry-content p', '.entry-content ol', '.entry-content ul', '.entry-content dl', '.entry-content dt', '.entry-content cite', '.entry-content figcaption', '.entry-content .wp-caption-text', '.comment-content p', '.comment-content ol', '.comment-content ul', '.comment-content dl', '.comment-content dt', '.comment-content cite', '.comment-content figcaption', '.comment-content .wp-caption-text', '.widget_text p', '.widget_text ol', '.widget_text ul', '.widget_text dl', '.widget_text dt', '.widget-content .rssSummary', '.widget-content cite', '.widget-content figcaption', '.widget-content .wp-caption-text' ),
122-
'block-editor' => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block-post-title', '.editor-styles-wrapper .wp-block h1', '.editor-styles-wrapper .wp-block h2', '.editor-styles-wrapper .wp-block h3', '.editor-styles-wrapper .wp-block h4', '.editor-styles-wrapper .wp-block h5', '.editor-styles-wrapper .wp-block h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
122+
'block-editor' => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block-post-title', '.editor-styles-wrapper h1', '.editor-styles-wrapper h2', '.editor-styles-wrapper h3', '.editor-styles-wrapper h4', '.editor-styles-wrapper h5', '.editor-styles-wrapper h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
123123
'classic-editor' => array( 'body#tinymce.wp-editor', 'body#tinymce.wp-editor p', 'body#tinymce.wp-editor ol', 'body#tinymce.wp-editor ul', 'body#tinymce.wp-editor dl', 'body#tinymce.wp-editor dt', 'body#tinymce.wp-editor figcaption', 'body#tinymce.wp-editor .wp-caption-text', 'body#tinymce.wp-editor .wp-caption-dd', 'body#tinymce.wp-editor cite', 'body#tinymce.wp-editor table' ),
124124
)
125125
);

0 commit comments

Comments
 (0)