From 05d54fac1f57b96465a20e248ab9bb94c839df08 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 27 Feb 2020 14:41:30 -0500 Subject: [PATCH 1/7] Add experimental-theme.json --- twentytwenty-blocks/experimental-theme.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 twentytwenty-blocks/experimental-theme.json diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json new file mode 100644 index 00000000..f188f955 --- /dev/null +++ b/twentytwenty-blocks/experimental-theme.json @@ -0,0 +1,7 @@ +{ + "color": { + "primary": "#cd2653", + "background": "#f5efe0", + "text": "#000" + } +} \ No newline at end of file From ab2163ecce1c66131b57516847d1d87de915da5b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 27 Feb 2020 14:41:41 -0500 Subject: [PATCH 2/7] Update color values to match experimental-theme.json --- twentytwenty-blocks/block-styles.css | 4 +- .../editor-style-block.css | 42 +++++++------- .../twentytwenty-styles/style.css | 56 +++++++++---------- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/twentytwenty-blocks/block-styles.css b/twentytwenty-blocks/block-styles.css index 8b38d0b9..fc4a0c1a 100644 --- a/twentytwenty-blocks/block-styles.css +++ b/twentytwenty-blocks/block-styles.css @@ -29,8 +29,8 @@ } .is-style-header-nav .wp-block-navigation-link > ul { - background: #000; - border-color: #000; + background: var(--wp--color--text); + border-color: var(--wp--color--text); border-radius: 0.4rem; font-size: 1.7rem; opacity: 0; diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 55d1446f..7e211589 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -4,8 +4,8 @@ /* ------------------------------------------- */ .editor-styles-wrapper { - background: #f5efe0; - color: #000; + background: var(--wp--color--background); + color: var(--wp--color--text); letter-spacing: -0.015em; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; @@ -163,21 +163,21 @@ Inter variable font. Usage: /* CUSTOM COLORS */ :root .has-accent-color { - color: #cd2653; + color: var(--wp--color--primary); } :root .has-accent-background-color { - background-color: #cd2653; + background-color: var(--wp--color--primary); color: #fff; } :root .has-primary-color { - color: #000; + color: var(--wp--color--text); } :root .has-primary-background-color { - background-color: #000; - color: #f5efe0; + background-color: var(--wp--color--text); + color: var(--wp--color--background); } :root .has-secondary-color { @@ -195,32 +195,32 @@ Inter variable font. Usage: :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: #000; + color: var(--wp--color--text); } :root .has-background-color { - color: #f5efe0; + color: var(--wp--color--background); } :root .has-background-background-color { - background-color: #f5efe0; - color: #000; + background-color: var(--wp--color--background); + color: var(--wp--color--text); } /* GENERAL COLORS */ .has-black-background-color { - background-color: #000; + background-color: var(--wp--color--text); color: #fff; } .has-white-background-color { background-color: #fff; - color: #000; + color: var(--wp--color--text); } .has-black-color { - color: #000; + color: var(--wp--color--text); } .has-white-color { @@ -231,7 +231,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ .editor-styles-wrapper .editor-block-list__layout a { - color: #cd2653; + color: var(--wp--color--primary); text-decoration: underline; } @@ -304,7 +304,7 @@ Inter variable font. Usage: /* DROP CAP */ .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter { - color: #cd2653; + color: var(--wp--color--primary); font-size: 5.1em; font-weight: 800; margin: 0.05em 0.1em 0 0; @@ -621,7 +621,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-quote { - border-color: #cd2653; + border-color: var(--wp--color--primary); border-style: solid; border-width: 0 0 0 2px; margin: 20px 0; @@ -769,7 +769,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-pullquote::before { background: #fff; border-radius: 50%; - color: #cd2653; + color: var(--wp--color--primary); content: "”"; display: block; font-size: 62px; @@ -891,7 +891,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button { - background: #cd2653; + background: var(--wp--color--primary); border-radius: 0; color: #fff; font-size: 15px; @@ -911,7 +911,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .is-style-outline .wp-block-button__link { background: none; border-color: currentColor; - color: #cd2653; + color: var(--wp--color--primary); padding: calc(1.1em - 2px) calc(1.44em - 2px); } @@ -1038,7 +1038,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-file .wp-block-file__textlink { - color: #cd2653; + color: var(--wp--color--primary); font-weight: 700; text-decoration: none; } diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 008bc0ca..9801d0aa 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -125,9 +125,9 @@ html { } body { - background: #f5efe0; + background: var(--wp--color--background); box-sizing: border-box; - color: #000; + color: var(--wp--color--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.8rem; letter-spacing: -0.015em; @@ -456,7 +456,7 @@ hr.styled-separator::after { } a { - color: #cd2653; + color: var(--wp--color--primary); text-decoration: underline; } @@ -539,7 +539,7 @@ dd + dt { /* Quotes ------------------------------------ */ blockquote { - border-color: #cd2653; + border-color: var(--wp--color--primary); border-style: solid; /*rtl:ignore*/ @@ -754,7 +754,7 @@ button, input, textarea { border-color: #dcd7ca; - color: #000; + color: var(--wp--color--text); } code, @@ -836,7 +836,7 @@ input[type="reset"], input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; - background: #cd2653; + background: var(--wp--color--primary); border: none; border-radius: 0; color: #fff; @@ -1092,7 +1092,7 @@ button.toggle { .color-accent, .color-accent-hover:focus, .color-accent-hover:hover { - color: #cd2653; + color: var(--wp--color--primary); } /* BACKGROUND COLOR */ @@ -1100,7 +1100,7 @@ button.toggle { .bg-accent, .bg-accent-hover:focus, .bg-accent-hover:hover { - background-color: #cd2653; + background-color: var(--wp--color--primary); } /* BORDER COLOR */ @@ -1108,14 +1108,14 @@ button.toggle { .border-color-accent, .border-color-accent-hover:focus, .border-color-accent-hover:hover { - border-color: #cd2653; + border-color: var(--wp--color--primary); } /* FILL COLOR */ .fill-children-accent, .fill-children-accent * { - fill: #cd2653; + fill: var(--wp--color--primary); } .fill-children-current-color, @@ -1305,7 +1305,7 @@ ul.social-icons li { .social-icons a { align-items: center; - background: #cd2653; + background: var(--wp--color--primary); border-radius: 50%; color: #fff; display: flex; @@ -1657,7 +1657,7 @@ ul.primary-menu { /* SUB MENU */ .primary-menu ul { - background: #000; + background: var(--wp--color--text); border-radius: 0.4rem; color: #fff; font-size: 1.7rem; @@ -1697,7 +1697,7 @@ ul.primary-menu { .primary-menu ul::after { border: 0.8rem solid transparent; - border-bottom-color: #000; + border-bottom-color: var(--wp--color--text); right: 1.8rem; } @@ -1746,7 +1746,7 @@ ul.primary-menu { border-bottom-color: transparent; /*rtl:ignore*/ - border-left-color: #000; + border-left-color: var(--wp--color--text); bottom: auto; right: -1.6rem; top: 2rem; @@ -2736,21 +2736,21 @@ h2.entry-title { /* CUSTOM COLORS */ :root .has-accent-color { - color: #cd2653; + color: var(--wp--color--primary); } :root .has-accent-background-color { - background-color: #cd2653; + background-color: var(--wp--color--primary); color: #fff; } :root .has-primary-color { - color: #000; + color: var(--wp--color--text); } :root .has-primary-background-color { - background-color: #000; - color: #f5efe0; + background-color: var(--wp--color--text); + color: var(--wp--color--background); } :root .has-secondary-color { @@ -2768,16 +2768,16 @@ h2.entry-title { :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: #000; + color: var(--wp--color--text); } :root .has-background-color { - color: #f5efe0; + color: var(--wp--color--background); } :root .has-background-background-color { - background-color: #f5efe0; - color: #000; + background-color: var(--wp--color--background); + color: var(--wp--color--text); } @@ -2798,7 +2798,7 @@ h2.entry-title { } .has-drop-cap:not(:focus)::first-letter { - color: #cd2653; + color: var(--wp--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; font-weight: 800; @@ -3017,7 +3017,7 @@ h2.entry-title { } .wp-block-button.is-style-outline { - color: #cd2653; + color: var(--wp--color--primary); } .is-style-outline .wp-block-button__link:not(.has-text-color) { @@ -3203,7 +3203,7 @@ figure.wp-block-gallery.alignfull { .wp-block-pullquote::before { background: #fff; border-radius: 50%; - color: #cd2653; + color: var(--wp--color--primary); content: "”"; display: block; font-size: 6.2rem; @@ -3804,7 +3804,7 @@ div.comment:first-of-type { } .comment-reply-link { - background-color: #cd2653; + background-color: var(--wp--color--primary); color: #fff; display: block; padding: 0.7rem; @@ -4423,7 +4423,7 @@ ul.footer-social li { } .footer-social a { - background-color: #cd2653; + background-color: var(--wp--color--primary); height: 3.6rem; width: 3.6rem; } From 257ffbd688a89d774a83598f01485d06d3583ef5 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 28 Feb 2020 12:42:11 -0500 Subject: [PATCH 3/7] Add additional styles --- twentytwenty-blocks/experimental-theme.json | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index f188f955..21f77058 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -3,5 +3,19 @@ "primary": "#cd2653", "background": "#f5efe0", "text": "#000" - } + }, + "typography": { + "font-scale": 1.3, + "font-size": "18px", + "font-size-heading-1": "64px", + "font-size-heading-2": "48px", + "font-size-heading-3": "40px", + "font-size-heading-4": "32px", + "font-size-heading-5": "24px", + "font-size-heading-6": "18px", + "font-weight": 400, + "font-weight-heading": 700, + "line-height": 1.5, + "line-height-heading": 1.25 + } } \ No newline at end of file From 9e957e5d5745e1baac40147ed1e404f24cb678ea Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 28 Feb 2020 12:42:28 -0500 Subject: [PATCH 4/7] Load block styles into FSE --- twentytwenty-blocks/functions.php | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php index 3725f588..505a3a35 100644 --- a/twentytwenty-blocks/functions.php +++ b/twentytwenty-blocks/functions.php @@ -307,3 +307,13 @@ function twentytwentyblocks_register_styles() { wp_enqueue_style( 'twentytwentyblocks-style', get_stylesheet_uri(), array(), $theme_version ); } add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' ); + +// Load styles in edit-site, +// which doesn't use the add_editor_styles registration mechanism +// so styles aren't wrapped by .editor-styles-wrapper. +function twentytwentyblocks_register_FSE_styles() { + $theme_version = wp_get_theme()->get( 'Version' ); + wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/twentytwenty-styles/editor-style-block.css', false, $theme_version ); + wp_enqueue_style( 'custom_wp_admin_css' ); +} +add_action( 'admin_enqueue_scripts', 'twentytwentyblocks_register_FSE_styles' ); From 9f0b94291c3453a7b82048429cfcbc88d7a87099 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 28 Feb 2020 12:42:54 -0500 Subject: [PATCH 5/7] Replace values with new CSS variables. --- .../editor-style-block.css | 64 ++++++++++--------- .../twentytwenty-styles/style.css | 54 ++++++++-------- 2 files changed, 62 insertions(+), 56 deletions(-) diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 7e211589..b9a3b9fa 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -13,7 +13,8 @@ .editor-styles-wrapper > * { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: 18px; + font-size: var(--wp--typography--font-size); + font-weight: var(--wp--typography--font-weight); } @supports ( font-variation-settings: normal ) { @@ -110,7 +111,7 @@ Inter variable font. Usage: .editor-styles-wrapper .editor-rich-text__tinymce, .editor-styles-wrapper .editor-rich-text__tinymce.mce-content-body { - line-height: 1.5; + line-height: var(--wp--typography--line-height); } @@ -249,21 +250,21 @@ Inter variable font. Usage: .editor-styles-wrapper .wp-block h6 { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: 700; + font-weight: var(--wp--typography--font-weight-heading); letter-spacing: -0.0415625em; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin: 40px 0 25px; } .editor-post-title__block .editor-post-title__input, .editor-styles-wrapper .wp-block h1 { font-size: 36px; - font-weight: 800; + font-weight: bolder; line-height: 1.138888889; } .editor-styles-wrapper .wp-block h2 { - font-size: 32px; + font-size: var(--wp--typography--font-size-heading-2); } .editor-styles-wrapper .wp-block h3 { @@ -271,7 +272,8 @@ Inter variable font. Usage: } .editor-styles-wrapper .wp-block h4 { - font-size: 24px; + font-size: font-size: var(--wp--typography--font-size-heading-5); +; } .editor-styles-wrapper .wp-block h5 { @@ -306,7 +308,7 @@ Inter variable font. Usage: .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter { color: var(--wp--color--primary); font-size: 5.1em; - font-weight: 800; + font-weight: var(--wp--typography--font-size-heading-1); margin: 0.05em 0.1em 0 0; } @@ -331,7 +333,7 @@ Inter variable font. Usage: .editor-styles-wrapper pre { border-color: #dcd7ca; border-radius: 0; - line-height: 1.5; + line-height: var(--wp--typography--line-height); padding: 1em; } @@ -444,7 +446,7 @@ Inter variable font. Usage: .editor-styles-wrapper ul.wp-block-latest-posts li, .editor-styles-wrapper ul.wp-block-categories__list li { color: #6d6d6d; - line-height: 1.476; + line-height: var(--wp--typography--line-height);; margin: 5px 0 0 0; } @@ -483,7 +485,7 @@ Inter variable font. Usage: font-size: 0.7em; font-weight: 600; letter-spacing: normal; - line-height: 1.476; + line-height: var(--wp--typography--line-height);; margin-top: 0.15em; } @@ -494,7 +496,7 @@ Inter variable font. Usage: border-collapse: collapse; border-spacing: 0; empty-cells: show; - font-size: 18px; + font-size: var(--wp--typography--font-size); margin-bottom: 1.1em; width: 100%; } @@ -649,7 +651,7 @@ hr.wp-block-separator.is-style-dots::before { color: #6d6d6d; font-size: 14px; font-weight: 600; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); } .editor-styles-wrapper .wp-block-quote p { @@ -665,7 +667,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-quote.is-style-large p { font-family: inherit; - font-size: 24px; + font-size: font-size: var(--wp--typography--font-size-heading-5); font-style: normal; font-weight: 700; letter-spacing: -0.035714286em; @@ -897,7 +899,7 @@ hr.wp-block-separator.is-style-dots::before { font-size: 15px; font-weight: 600; letter-spacing: 0.0333em; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); padding: 1.1em 1.44em; text-transform: uppercase; } @@ -995,7 +997,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper ul.wp-block-latest-posts.is-grid li { border-style: solid; border-width: 2px 0 0; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin: 20px 16px 16px 0; padding-top: 12px; } @@ -1211,29 +1213,33 @@ hr.wp-block-separator.is-style-dots::before { .editor-post-title__block .editor-post-title__input, .editor-styles-wrapper .wp-block h1 { - font-size: 64px; + font-size: var(--wp--typography--font-size-heading-1); } .editor-styles-wrapper .wp-block h2 { - font-size: 48px; + font-size: var(--wp--typography--font-size-heading-2); } .editor-styles-wrapper .wp-block h3 { - font-size: 40px; + font-size: var(--wp--typography--font-size-heading-3); } .editor-styles-wrapper .wp-block h4 { - font-size: 32px; + font-size: var(--wp--typography--font-size-heading-4); } .editor-styles-wrapper .wp-block h5 { - font-size: 24px; + font-size: var(--wp--typography--font-size-heading-5); + } + + .editor-styles-wrapper .wp-block h6 { + font-size: var(--wp--typography--font-size-heading-6); } .editor-styles-wrapper li, .editor-styles-wrapper p, .editor-styles-wrapper p.wp-block-paragraph { - line-height: 1.476; + line-height: var(--wp--typography--line-height);; } /* FORMS */ @@ -1297,7 +1303,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p { - font-size: 32px; + font-size: var(--wp--typography--font-size-heading-2); } .editor-styles-wrapper .wp-block-pullquote__citation, @@ -1326,13 +1332,13 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p { - font-size: 48px; + font-size: var(--wp--typography--font-size-heading-2); line-height: 1.203125; } .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] p { - font-size: 32px; + font-size: var(--wp--typography--font-size-heading-2); line-height: 1.1875; } @@ -1344,7 +1350,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: TABLE */ .editor-styles-wrapper table.wp-block-table { - font-size: 18px; + font-size: var(--wp--typography--font-size); } /* BLOCK: SEPARATOR */ @@ -1363,7 +1369,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: COLUMNS */ .wp-block-column { - font-size: 18px; + font-size: var(--wp--typography--font-size); } /* BLOCK: SEPARATOR */ @@ -1393,7 +1399,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block h6 { - font-size: 18px; + font-size: var(--wp--typography--font-size); } /* BLOCK: PULLQUOTE */ @@ -1405,7 +1411,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p, .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p { - font-size: 64px; + font-size: var(--wp--typography--font-size-heading-1); } /* BLOCK: SEPARATOR */ diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 9801d0aa..c6d63d50 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -129,7 +129,8 @@ body { box-sizing: border-box; color: var(--wp--color--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: 1.8rem; + font-size: var(--wp--typography--font-size); + font-weight: var(--wp--typography--font-weight); letter-spacing: -0.015em; text-align: left; } @@ -305,48 +306,47 @@ h6, .faux-heading { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: 700; + font-weight: var(--wp--typography--font-weight-heading); letter-spacing: -0.0415625em; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin: 3.5rem 0 2rem; } h1, .heading-size-1 { - font-size: 3.6rem; - font-weight: 800; - line-height: 1.138888889; + font-size: var(--wp--typography--font-size-heading-1); + font-weight: bolder; } h2, .heading-size-2 { - font-size: 3.2rem; + font-size: var(--wp--typography--font-size-heading-2); } h3, .heading-size-3 { - font-size: 2.8rem; + font-size: var(--wp--typography--font-size-heading-3); } h4, .heading-size-4 { - font-size: 2.4rem; + font-size: var(--wp--typography--font-size-heading-4); } h5, .heading-size-5 { - font-size: 2.1rem; + font-size: var(--wp--typography--font-size-heading-5); } h6, .heading-size-6 { - font-size: 1.6rem; + font-size: var(--wp--typography--font-size-heading-6); letter-spacing: 0.03125em; text-transform: uppercase; } p { - line-height: 1.5; + line-height: var(--wp--typography--line-height); margin: 0 0 1em 0; } @@ -405,7 +405,7 @@ acronym { } address { - line-height: 1.5; + line-height: var(--wp--typography--line-height); margin: 0 0 2rem 0; } @@ -498,7 +498,7 @@ ol ol ol { } li { - line-height: 1.5; + line-height: var(--wp--typography--line-height); margin: 0.5rem 0 0 2rem; } @@ -520,7 +520,7 @@ li > ol { dt, dd { - line-height: 1.5; + line-height: var(--wp--typography--line-height); } dt { @@ -557,7 +557,7 @@ cite { font-size: 1.4rem; font-style: normal; font-weight: 600; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); } blockquote cite { @@ -590,7 +590,7 @@ samp { pre { border: 0.1rem solid #dcd7ca; - line-height: 1.5; + line-height: var(--wp--typography--line-height); margin: 4rem 0; overflow: auto; padding: 3rem 2rem; @@ -803,7 +803,7 @@ select { textarea { height: 12rem; - line-height: 1.5; + line-height: var(--wp--typography--line-height); width: 100%; } @@ -845,7 +845,7 @@ input[type="submit"] { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.0333em; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin: 0; opacity: 1; padding: 1.1em 1.44em; @@ -1612,7 +1612,7 @@ ul.primary-menu { .primary-menu li { font-size: inherit; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); position: relative; } @@ -2406,7 +2406,7 @@ body:not(.singular) main > article:first-of-type { } .entry-categories { - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin-bottom: 2rem; } @@ -2801,7 +2801,7 @@ h2.entry-title { color: var(--wp--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; - font-weight: 800; + font-weight: var(--wp--typography--font-weight-heading); margin: 0.05em 0.1em 0 0; } @@ -2981,7 +2981,7 @@ h2.entry-title { .wp-block-latest-comments__comment-meta { font-weight: 700; letter-spacing: -0.025em; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); } .wp-block-latest-comments__comment-date, @@ -3467,7 +3467,7 @@ figure.wp-block-table.is-style-stripes { .entry-content { - line-height: 1.5; + line-height: var(--wp--typography--line-height); } .entry-content > * { @@ -3927,7 +3927,7 @@ div.comment:first-of-type { .comment-respond input[type="checkbox"] + label { font-size: 1.5rem; - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); } .comment-respond input[type="text"], @@ -4379,7 +4379,7 @@ div.comment:first-of-type { } .footer-menu li { - line-height: 1.25; + line-height: var(--wp--typography--line-height-heading); margin: 0.25em 0 0 0; } @@ -5281,7 +5281,7 @@ a.to-the-top > * { .entry-content p, .entry-content li { - line-height: 1.476; + line-height: var(--wp--typography--line-height);; } .entry-content h1, From c02ee20acdd04b9ab7e68e3fd47cf20fa43c0e06 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 3 Mar 2020 17:54:14 -0500 Subject: [PATCH 6/7] Remove computed variables --- twentytwenty-blocks/experimental-theme.json | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index 21f77058..d988e4b9 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -7,15 +7,7 @@ "typography": { "font-scale": 1.3, "font-size": "18px", - "font-size-heading-1": "64px", - "font-size-heading-2": "48px", - "font-size-heading-3": "40px", - "font-size-heading-4": "32px", - "font-size-heading-5": "24px", - "font-size-heading-6": "18px", "font-weight": 400, - "font-weight-heading": 700, - "line-height": 1.5, - "line-height-heading": 1.25 + "line-height": 1.5 } -} \ No newline at end of file +} From e375cc6afbc2109dda5c81cbc2cb26c27b1b73c5 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Tue, 3 Mar 2020 17:54:42 -0500 Subject: [PATCH 7/7] Override h1 editor font size --- twentytwenty-blocks/twentytwenty-styles/editor-style-block.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index b9a3b9fa..b53cc2f1 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -1395,7 +1395,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-post-title__block .editor-post-title__input, .editor-styles-wrapper .wp-block h1 { - font-size: 84px; + font-size: var(--wp--typography--font-size-heading-1); } .editor-styles-wrapper .wp-block h6 {