Skip to content

Commit

Permalink
Twenty Twenty: Ensure headings styles are consistent between editor a…
Browse files Browse the repository at this point in the history
…nd 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
  • Loading branch information
audrasjb authored and = committed Nov 4, 2022
1 parent 3fb85eb commit cbde1ce
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 75 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,12 @@ Inter variable font. Usage:

.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 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,
Expand All @@ -138,12 +138,12 @@ Inter variable font. Usage:

.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 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,
Expand Down Expand Up @@ -242,12 +242,12 @@ Inter variable font. Usage:

.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 h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
font-feature-settings: "lnum";
font-variant-numeric: lining-nums;
font-weight: 700;
Expand All @@ -259,29 +259,35 @@ Inter variable font. Usage:

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 36px;
font-weight: 800;
line-height: 1.138888889;
}

.editor-styles-wrapper .wp-block h2 {
.editor-styles-wrapper h2,
.editor-styles-wrapper .heading-size-2 {
font-size: 32px;
}

.editor-styles-wrapper .wp-block h3 {
.editor-styles-wrapper h3,
.editor-styles-wrapper .heading-size-3 {
font-size: 28px;
}

.editor-styles-wrapper .wp-block h4 {
.editor-styles-wrapper h4,
.editor-styles-wrapper .heading-size-4 {
font-size: 24px;
}

.editor-styles-wrapper .wp-block h5 {
.editor-styles-wrapper h5,
.editor-styles-wrapper .heading-size-5 {
font-size: 21px;
}

.editor-styles-wrapper .wp-block h6 {
.editor-styles-wrapper h6,
.editor-styles-wrapper .heading-size-6 {
font-size: 16px;
letter-spacing: 0.03125em;
text-transform: uppercase;
Expand Down Expand Up @@ -1248,23 +1254,28 @@ hr.wp-block-separator.is-style-dots::before {

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 64px;
}

.editor-styles-wrapper .wp-block h2 {
.editor-styles-wrapper h2,
.editor-styles-wrapper .heading-size-2 {
font-size: 48px;
}

.editor-styles-wrapper .wp-block h3 {
.editor-styles-wrapper h3,
.editor-styles-wrapper .heading-size-3 {
font-size: 40px;
}

.editor-styles-wrapper .wp-block h4 {
.editor-styles-wrapper h4,
.editor-styles-wrapper .heading-size-4 {
font-size: 32px;
}

.editor-styles-wrapper .wp-block h5 {
.editor-styles-wrapper h5,
.editor-styles-wrapper .heading-size-5 {
font-size: 24px;
}

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

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 84px;
}

.editor-styles-wrapper .wp-block h6 {
.editor-styles-wrapper h6,
.editor-styles-wrapper .heading-size-6 {
font-size: 18px;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,12 @@ Inter variable font. Usage:

.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 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,
Expand All @@ -138,12 +138,12 @@ Inter variable font. Usage:

.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 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,
Expand Down Expand Up @@ -242,12 +242,12 @@ Inter variable font. Usage:

.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 h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
font-feature-settings: "lnum";
font-variant-numeric: lining-nums;
font-weight: 700;
Expand All @@ -259,29 +259,35 @@ Inter variable font. Usage:

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 36px;
font-weight: 800;
line-height: 1.138888889;
}

.editor-styles-wrapper .wp-block h2 {
.editor-styles-wrapper h2,
.editor-styles-wrapper .heading-size-2 {
font-size: 32px;
}

.editor-styles-wrapper .wp-block h3 {
.editor-styles-wrapper h3,
.editor-styles-wrapper .heading-size-3 {
font-size: 28px;
}

.editor-styles-wrapper .wp-block h4 {
.editor-styles-wrapper h4,
.editor-styles-wrapper .heading-size-4 {
font-size: 24px;
}

.editor-styles-wrapper .wp-block h5 {
.editor-styles-wrapper h5,
.editor-styles-wrapper .heading-size-5 {
font-size: 21px;
}

.editor-styles-wrapper .wp-block h6 {
.editor-styles-wrapper h6,
.editor-styles-wrapper .heading-size-6 {
font-size: 16px;
letter-spacing: 0.03125em;
text-transform: uppercase;
Expand Down Expand Up @@ -1252,23 +1258,28 @@ hr.wp-block-separator.is-style-dots::before {

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 64px;
}

.editor-styles-wrapper .wp-block h2 {
.editor-styles-wrapper h2,
.editor-styles-wrapper .heading-size-2 {
font-size: 48px;
}

.editor-styles-wrapper .wp-block h3 {
.editor-styles-wrapper h3,
.editor-styles-wrapper .heading-size-3 {
font-size: 40px;
}

.editor-styles-wrapper .wp-block h4 {
.editor-styles-wrapper h4,
.editor-styles-wrapper .heading-size-4 {
font-size: 32px;
}

.editor-styles-wrapper .wp-block h5 {
.editor-styles-wrapper h5,
.editor-styles-wrapper .heading-size-5 {
font-size: 24px;
}

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

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title,
.editor-styles-wrapper .wp-block h1 {
.editor-styles-wrapper h1,
.editor-styles-wrapper .heading-size-1 {
font-size: 84px;
}

.editor-styles-wrapper .wp-block h6 {
.editor-styles-wrapper h6,
.editor-styles-wrapper .heading-size-6 {
font-size: 18px;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
margin: 40px 0 25px;
}

body#tinymce.wp-editor.content h1 {
body#tinymce.wp-editor.content h1,
body#tinymce.wp-editor.content .heading-size-1 {
font-size: 84px;
font-weight: 800;
line-height: 1.138888889;
}

body#tinymce.wp-editor.content h2 {
body#tinymce.wp-editor.content h2,
body#tinymce.wp-editor.content .heading-size-2 {
font-size: 48px;
}

body#tinymce.wp-editor.content h3 {
body#tinymce.wp-editor.content h3,
body#tinymce.wp-editor.content .heading-size-3 {
font-size: 40px;
}

body#tinymce.wp-editor.content h4 {
body#tinymce.wp-editor.content h4,
body#tinymce.wp-editor.content .heading-size-4 {
font-size: 32px;
}

body#tinymce.wp-editor.content h5 {
body#tinymce.wp-editor.content h5,
body#tinymce.wp-editor.content .heading-size-5 {
font-size: 24px;
}

body#tinymce.wp-editor.content h6 {
body#tinymce.wp-editor.content h6,
body#tinymce.wp-editor.content .heading-size-6 {
font-size: 18px;
letter-spacing: 0.03125em;
text-transform: uppercase;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -215,29 +215,35 @@ body#tinymce.wp-editor.content h6 {
margin: 40px 0 25px;
}

body#tinymce.wp-editor.content h1 {
body#tinymce.wp-editor.content h1,
body#tinymce.wp-editor.content .heading-size-1 {
font-size: 84px;
font-weight: 800;
line-height: 1.138888889;
}

body#tinymce.wp-editor.content h2 {
body#tinymce.wp-editor.content h2,
body#tinymce.wp-editor.content .heading-size-2 {
font-size: 48px;
}

body#tinymce.wp-editor.content h3 {
body#tinymce.wp-editor.content h3,
body#tinymce.wp-editor.content .heading-size-3 {
font-size: 40px;
}

body#tinymce.wp-editor.content h4 {
body#tinymce.wp-editor.content h4,
body#tinymce.wp-editor.content .heading-size-4 {
font-size: 32px;
}

body#tinymce.wp-editor.content h5 {
body#tinymce.wp-editor.content h5,
body#tinymce.wp-editor.content .heading-size-5 {
font-size: 24px;
}

body#tinymce.wp-editor.content h6 {
body#tinymce.wp-editor.content h6,
body#tinymce.wp-editor.content .heading-size-6 {
font-size: 18px;
letter-spacing: 0.03125em;
text-transform: uppercase;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ public static function get_non_latin_css( $type = 'front-end' ) {
'twentytwenty_get_localized_font_family_elements',
array(
'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' ),
'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' ),
'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' ),
'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' ),
)
);
Expand Down

0 comments on commit cbde1ce

Please sign in to comment.