From 05d54fac1f57b96465a20e248ab9bb94c839df08 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 27 Feb 2020 14:41:30 -0500 Subject: [PATCH 01/17] 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 02/17] 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 03/17] 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 04/17] 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 05/17] 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 06/17] 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 07/17] 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 { From a261eec189e7ead7fccec7014adea7f727fa0cfa Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 23 Jun 2020 09:54:02 -0400 Subject: [PATCH 08/17] Update experimental-theme.json. --- twentytwenty-blocks/block-styles.css | 4 +- twentytwenty-blocks/experimental-theme.json | 49 ++++++++++++---- twentytwenty-blocks/functions.php | 28 +++------- twentytwenty-blocks/style.css | 7 +++ .../editor-style-block.css | 46 ++++++++------- .../twentytwenty-styles/style.css | 56 +++++++++---------- 6 files changed, 108 insertions(+), 82 deletions(-) diff --git a/twentytwenty-blocks/block-styles.css b/twentytwenty-blocks/block-styles.css index fc4a0c1a..e3ee2501 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: var(--wp--color--text); - border-color: var(--wp--color--text); + background: var(--wp--preset--color--text); + border-color: var(--wp--preset--color--text); border-radius: 0.4rem; font-size: 1.7rem; opacity: 0; diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index d988e4b9..f9887d45 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -1,13 +1,38 @@ { - "color": { - "primary": "#cd2653", - "background": "#f5efe0", - "text": "#000" - }, - "typography": { - "font-scale": 1.3, - "font-size": "18px", - "font-weight": 400, - "line-height": 1.5 - } -} + "global": { + "presets": { + "color": [ + { + "slug": "background", + "value": "#f5efe0" + }, + { + "slug": "text", + "value": "#000" + }, + { + "slug": "primary", + "value": "#cd2653" + } + ], + "font-size": [ + { + "slug": "small", + "value": "20px" + }, + { + "slug": "normal", + "value": "22px" + }, + { + "slug": "large", + "value": "37px" + }, + { + "slug": "huge", + "value": "50px" + } + ] + } + } +} \ No newline at end of file diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php index 505a3a35..e41f798e 100644 --- a/twentytwenty-blocks/functions.php +++ b/twentytwenty-blocks/functions.php @@ -52,29 +52,19 @@ function twentytwentyblocks_theme_support() { 'editor-color-palette', array( array( - 'name' => __( 'Primary', 'twentytwenty-blocks' ), - 'slug' => 'primary', - 'color' => '#0073AA', - ), - array( - 'name' => __( 'Secondary', 'twentytwenty-blocks' ), - 'slug' => 'secondary', - 'color' => '#005177', + 'name' => __( 'Background', 'twentytwenty-blocks' ), + 'slug' => 'background', + 'color' => '#f5efe0', ), array( - 'name' => __( 'Dark Gray', 'twentytwenty-blocks' ), - 'slug' => 'dark-gray', - 'color' => '#111', + 'name' => __( 'Text', 'twentytwenty-blocks' ), + 'slug' => 'text', + 'color' => '#000', ), array( - 'name' => __( 'Light Gray', 'twentytwenty-blocks' ), - 'slug' => 'light-gray', - 'color' => '#767676', - ), - array( - 'name' => __( 'White', 'twentytwenty-blocks' ), - 'slug' => 'white', - 'color' => '#FFF', + 'name' => __( 'Primary', 'twentytwenty-blocks' ), + 'slug' => 'primary', + 'color' => '#cd2653', ), ) ); diff --git a/twentytwenty-blocks/style.css b/twentytwenty-blocks/style.css index 271a42d8..48228df1 100644 --- a/twentytwenty-blocks/style.css +++ b/twentytwenty-blocks/style.css @@ -16,6 +16,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me */ @import url('twentytwenty-styles/style.css'); +/* + * Set the default link color. +*/ +:root { + --wp--style--color--link: var(--wp--preset--color--primary); +} + /* ** Header */ diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index b53cc2f1..4b625a13 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -3,9 +3,13 @@ /* Twenty Twenty Editor Styles — Block Editor /* ------------------------------------------- */ +body { + --wp--style--color--link: var(--wp--preset--color--primary); +} + .editor-styles-wrapper { - background: var(--wp--color--background); - color: var(--wp--color--text); + background: var(--wp--preset--color--background); + color: var(--wp--preset--color--text); letter-spacing: -0.015em; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; @@ -164,21 +168,21 @@ Inter variable font. Usage: /* CUSTOM COLORS */ :root .has-accent-color { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); } :root .has-accent-background-color { - background-color: var(--wp--color--primary); + background-color: var(--wp--preset--color--primary); color: #fff; } :root .has-primary-color { - color: var(--wp--color--text); + color: var(--wp--preset--color--primary); } :root .has-primary-background-color { - background-color: var(--wp--color--text); - color: var(--wp--color--background); + background-color: var(--wp--preset--color--text); + color: var(--wp--preset--color--primary); } :root .has-secondary-color { @@ -196,32 +200,32 @@ Inter variable font. Usage: :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: var(--wp--color--text); + color: var(--wp--preset--color--text); } :root .has-background-color { - color: var(--wp--color--background); + color: var(--wp--preset--color--background); } :root .has-background-background-color { - background-color: var(--wp--color--background); - color: var(--wp--color--text); + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--text); } /* GENERAL COLORS */ .has-black-background-color { - background-color: var(--wp--color--text); + background-color: var(--wp--preset--color--text); color: #fff; } .has-white-background-color { background-color: #fff; - color: var(--wp--color--text); + color: var(--wp--preset--color--text); } .has-black-color { - color: var(--wp--color--text); + color: var(--wp--preset--color--text); } .has-white-color { @@ -232,7 +236,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ .editor-styles-wrapper .editor-block-list__layout a { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); text-decoration: underline; } @@ -306,7 +310,7 @@ Inter variable font. Usage: /* DROP CAP */ .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); font-size: 5.1em; font-weight: var(--wp--typography--font-size-heading-1); margin: 0.05em 0.1em 0 0; @@ -623,7 +627,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-quote { - border-color: var(--wp--color--primary); + border-color: var(--wp--preset--color--primary); border-style: solid; border-width: 0 0 0 2px; margin: 20px 0; @@ -771,7 +775,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-pullquote::before { background: #fff; border-radius: 50%; - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); content: "”"; display: block; font-size: 62px; @@ -893,7 +897,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button { - background: var(--wp--color--primary); + background: var(--wp--preset--color--primary); border-radius: 0; color: #fff; font-size: 15px; @@ -913,7 +917,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: var(--wp--color--primary); + color: var(--wp--preset--color--primary); padding: calc(1.1em - 2px) calc(1.44em - 2px); } @@ -1040,7 +1044,7 @@ hr.wp-block-separator.is-style-dots::before { } .editor-styles-wrapper .wp-block-file .wp-block-file__textlink { - color: var(--wp--color--primary); + color: var(--wp--preset--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 c6d63d50..38ece270 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -125,9 +125,9 @@ html { } body { - background: var(--wp--color--background); + background: var(--wp--preset--color--background); box-sizing: border-box; - color: var(--wp--color--text); + color: var(--wp--preset--color--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: var(--wp--typography--font-size); font-weight: var(--wp--typography--font-weight); @@ -456,7 +456,7 @@ hr.styled-separator::after { } a { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); text-decoration: underline; } @@ -539,7 +539,7 @@ dd + dt { /* Quotes ------------------------------------ */ blockquote { - border-color: var(--wp--color--primary); + border-color: var(--wp--preset--color--primary); border-style: solid; /*rtl:ignore*/ @@ -754,7 +754,7 @@ button, input, textarea { border-color: #dcd7ca; - color: var(--wp--color--text); + color: var(--wp--preset--color--text); } code, @@ -836,7 +836,7 @@ input[type="reset"], input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; - background: var(--wp--color--primary); + background: var(--wp--preset--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: var(--wp--color--primary); + color: var(--wp--preset--color--primary); } /* BACKGROUND COLOR */ @@ -1100,7 +1100,7 @@ button.toggle { .bg-accent, .bg-accent-hover:focus, .bg-accent-hover:hover { - background-color: var(--wp--color--primary); + background-color: var(--wp--preset--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: var(--wp--color--primary); + border-color: var(--wp--preset--color--primary); } /* FILL COLOR */ .fill-children-accent, .fill-children-accent * { - fill: var(--wp--color--primary); + fill: var(--wp--preset--color--primary); } .fill-children-current-color, @@ -1305,7 +1305,7 @@ ul.social-icons li { .social-icons a { align-items: center; - background: var(--wp--color--primary); + background: var(--wp--preset--color--primary); border-radius: 50%; color: #fff; display: flex; @@ -1657,7 +1657,7 @@ ul.primary-menu { /* SUB MENU */ .primary-menu ul { - background: var(--wp--color--text); + background: var(--wp--preset--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: var(--wp--color--text); + border-bottom-color: var(--wp--preset--color--text); right: 1.8rem; } @@ -1746,7 +1746,7 @@ ul.primary-menu { border-bottom-color: transparent; /*rtl:ignore*/ - border-left-color: var(--wp--color--text); + border-left-color: var(--wp--preset--color--text); bottom: auto; right: -1.6rem; top: 2rem; @@ -2736,21 +2736,21 @@ h2.entry-title { /* CUSTOM COLORS */ :root .has-accent-color { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); } :root .has-accent-background-color { - background-color: var(--wp--color--primary); + background-color: var(--wp--preset--color--primary); color: #fff; } :root .has-primary-color { - color: var(--wp--color--text); + color: var(--wp--preset--color--primary); } :root .has-primary-background-color { - background-color: var(--wp--color--text); - color: var(--wp--color--background); + background-color: var(--wp--preset--color--primary); + color: var(--wp--preset--color--background); } :root .has-secondary-color { @@ -2768,16 +2768,16 @@ h2.entry-title { :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: var(--wp--color--text); + color: var(--wp--preset--color--text); } :root .has-background-color { - color: var(--wp--color--background); + color: var(--wp--preset--color--background); } :root .has-background-background-color { - background-color: var(--wp--color--background); - color: var(--wp--color--text); + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--text); } @@ -2798,7 +2798,7 @@ h2.entry-title { } .has-drop-cap:not(:focus)::first-letter { - color: var(--wp--color--primary); + color: var(--wp--preset--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; font-weight: var(--wp--typography--font-weight-heading); @@ -3017,7 +3017,7 @@ h2.entry-title { } .wp-block-button.is-style-outline { - color: var(--wp--color--primary); + color: var(--wp--preset--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: var(--wp--color--primary); + color: var(--wp--preset--color--primary); content: "”"; display: block; font-size: 6.2rem; @@ -3804,7 +3804,7 @@ div.comment:first-of-type { } .comment-reply-link { - background-color: var(--wp--color--primary); + background-color: var(--wp--preset--color--primary); color: #fff; display: block; padding: 0.7rem; @@ -4423,7 +4423,7 @@ ul.footer-social li { } .footer-social a { - background-color: var(--wp--color--primary); + background-color: var(--wp--preset--color--primary); height: 3.6rem; width: 3.6rem; } From a15c1b37a67dd3564c20751530021b1d52cbcf10 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 23 Jun 2020 10:00:37 -0400 Subject: [PATCH 09/17] Make sure styles are loaded into the full-site editor. --- twentytwenty-blocks/functions.php | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php index 7c32c877..b22cee0d 100644 --- a/twentytwenty-blocks/functions.php +++ b/twentytwenty-blocks/functions.php @@ -298,6 +298,17 @@ function twentytwentyblocks_register_styles() { } add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' ); +/** + * Load styles into Edit Site + * (This shouldn't be necessary but it seems to be for now.) + */ +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' ); + /** * Register Block Patterns. */ From ab5cdc4a73a7463dee19f8b185c3b24f9d710f6b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 09:06:01 -0400 Subject: [PATCH 10/17] Switch to using the Query Loop block in index.html --- twentytwenty-blocks/block-templates/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/twentytwenty-blocks/block-templates/index.html b/twentytwenty-blocks/block-templates/index.html index 1e45b0cf..469d5eae 100644 --- a/twentytwenty-blocks/block-templates/index.html +++ b/twentytwenty-blocks/block-templates/index.html @@ -3,7 +3,11 @@ -
+
+ + + +
From fe1e88e4a8bbc1093d0e3353145c65b1e8ff12bf Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 09:17:02 -0400 Subject: [PATCH 11/17] Fix typography variables. --- twentytwenty-blocks/experimental-theme.json | 20 +++++++ .../twentytwenty-styles/style.css | 52 +++++++++---------- 2 files changed, 46 insertions(+), 26 deletions(-) diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index f9887d45..522cebe1 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -32,6 +32,26 @@ "slug": "huge", "value": "50px" } + ], + "line-height": [ + { + "slug": "normal", + "value": "1.8" + }, + { + "slug": "heading", + "value": "1.4" + } + ], + "font-weight": [ + { + "slug": "normal", + "value": "normal" + }, + { + "slug": "heading", + "value": "700" + } ] } } diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 38ece270..9553202a 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -129,8 +129,8 @@ body { box-sizing: border-box; color: var(--wp--preset--color--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: var(--wp--typography--font-size); - font-weight: var(--wp--typography--font-weight); + font-size: var(--wp--preset--font-size--normal); + font-weight: var(--wp--preset--font-weight--normal); letter-spacing: -0.015em; text-align: left; } @@ -306,47 +306,47 @@ h6, .faux-heading { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: var(--wp--typography--font-weight-heading); + font-weight: var(--wp--preset--font-weight--heading); letter-spacing: -0.0415625em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 3.5rem 0 2rem; } h1, .heading-size-1 { - font-size: var(--wp--typography--font-size-heading-1); + font-size: var(--wp--preset--font-size--normal-heading-1); font-weight: bolder; } h2, .heading-size-2 { - font-size: var(--wp--typography--font-size-heading-2); + font-size: var(--wp--preset--font-size--normal-heading-2); } h3, .heading-size-3 { - font-size: var(--wp--typography--font-size-heading-3); + font-size: var(--wp--preset--font-size--normal-heading-3); } h4, .heading-size-4 { - font-size: var(--wp--typography--font-size-heading-4); + font-size: var(--wp--preset--font-size--normal-heading-4); } h5, .heading-size-5 { - font-size: var(--wp--typography--font-size-heading-5); + font-size: var(--wp--preset--font-size--normal-heading-5); } h6, .heading-size-6 { - font-size: var(--wp--typography--font-size-heading-6); + font-size: var(--wp--preset--font-size--normal-heading-6); letter-spacing: 0.03125em; text-transform: uppercase; } p { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0 0 1em 0; } @@ -405,7 +405,7 @@ acronym { } address { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0 0 2rem 0; } @@ -498,7 +498,7 @@ ol ol ol { } li { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 0.5rem 0 0 2rem; } @@ -520,7 +520,7 @@ li > ol { dt, dd { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); } dt { @@ -557,7 +557,7 @@ cite { font-size: 1.4rem; font-style: normal; font-weight: 600; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } blockquote cite { @@ -590,7 +590,7 @@ samp { pre { border: 0.1rem solid #dcd7ca; - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); margin: 4rem 0; overflow: auto; padding: 3rem 2rem; @@ -803,7 +803,7 @@ select { textarea { height: 12rem; - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); width: 100%; } @@ -845,7 +845,7 @@ input[type="submit"] { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.0333em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--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: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); position: relative; } @@ -2406,7 +2406,7 @@ body:not(.singular) main > article:first-of-type { } .entry-categories { - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin-bottom: 2rem; } @@ -2801,7 +2801,7 @@ h2.entry-title { color: var(--wp--preset--color--primary); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 5.1em; - font-weight: var(--wp--typography--font-weight-heading); + font-weight: var(--wp--preset--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: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } .wp-block-latest-comments__comment-date, @@ -3467,7 +3467,7 @@ figure.wp-block-table.is-style-stripes { .entry-content { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); } .entry-content > * { @@ -3927,7 +3927,7 @@ div.comment:first-of-type { .comment-respond input[type="checkbox"] + label { font-size: 1.5rem; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } .comment-respond input[type="text"], @@ -4379,7 +4379,7 @@ div.comment:first-of-type { } .footer-menu li { - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--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: var(--wp--typography--line-height);; + line-height: var(--wp--preset--line-height--normal);; } .entry-content h1, From 5cd00a675da40bb137d91f8074dd323f1d00f24f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 09:17:11 -0400 Subject: [PATCH 12/17] Remove unnecessary styles. --- twentytwenty-blocks/style.css | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/twentytwenty-blocks/style.css b/twentytwenty-blocks/style.css index 48228df1..5b66040b 100644 --- a/twentytwenty-blocks/style.css +++ b/twentytwenty-blocks/style.css @@ -55,24 +55,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me background-color: #fff; } -/* -** Entry Header -*/ - -.site-content > h1:first-child { - width: 100%; - padding: 4rem 2rem; - margin: 0 0 4rem; - text-align: center; - background: #FFF; -} - -@media screen and (min-width: 700px) { - .site-content > h1:first-child { - padding: 8rem 2rem; - } -} - /* ** Footer */ From 69b03a191aab259f2496b230c4da517e2870aace Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 09:22:35 -0400 Subject: [PATCH 13/17] Fix alignment of entry content. --- twentytwenty-blocks/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/twentytwenty-blocks/style.css b/twentytwenty-blocks/style.css index 5b66040b..1ebc3c93 100644 --- a/twentytwenty-blocks/style.css +++ b/twentytwenty-blocks/style.css @@ -55,6 +55,15 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me background-color: #fff; } + +/* +** Site Content +** (Extra specificity here is necessary to override default theme styles for content within Group block inner containers.) +*/ +.site-content > .wp-block-group__inner-container > .entry-content:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: inherit; +} + /* ** Footer */ From a442c52e37e6003eb66631383813fe2dcef1fffd Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 09:53:27 -0400 Subject: [PATCH 14/17] Tidy up editor styles. --- .../editor-style-block.css | 110 +++++------------- 1 file changed, 32 insertions(+), 78 deletions(-) diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 4b625a13..1b977b3d 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -17,8 +17,8 @@ body { .editor-styles-wrapper > * { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - font-size: var(--wp--typography--font-size); - font-weight: var(--wp--typography--font-weight); + font-size: var(--wp--preset--font-size--normal); + font-weight: var(--wp--preset--font-weight--normal); } @supports ( font-variation-settings: normal ) { @@ -115,7 +115,7 @@ Inter variable font. Usage: .editor-styles-wrapper .editor-rich-text__tinymce, .editor-styles-wrapper .editor-rich-text__tinymce.mce-content-body { - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); } @@ -254,38 +254,37 @@ Inter variable font. Usage: .editor-styles-wrapper .wp-block h6 { font-feature-settings: "lnum"; font-variant-numeric: lining-nums; - font-weight: var(--wp--typography--font-weight-heading); + font-weight: var(--wp--preset--font-weight--heading); letter-spacing: -0.0415625em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 40px 0 25px; } .editor-post-title__block .editor-post-title__input, -.editor-styles-wrapper .wp-block h1 { - font-size: 36px; +.editor-styles-wrapper h1.wp-block { + font-size: 84px; font-weight: bolder; line-height: 1.138888889; } -.editor-styles-wrapper .wp-block h2 { - font-size: var(--wp--typography--font-size-heading-2); +.editor-styles-wrapper h2.wp-block { + font-size: 48px; } -.editor-styles-wrapper .wp-block h3 { - font-size: 28px; +.editor-styles-wrapper h3.wp-block { + font-size: 40px; } -.editor-styles-wrapper .wp-block h4 { - font-size: font-size: var(--wp--typography--font-size-heading-5); -; +.editor-styles-wrapper h4.wp-block { + font-size: 32px; } -.editor-styles-wrapper .wp-block h5 { - font-size: 21px; +.editor-styles-wrapper h5.wp-block { + font-size: 24px; } -.editor-styles-wrapper .wp-block h6 { - font-size: 16px; +.editor-styles-wrapper h6.wp-block { + font-size: 18px; letter-spacing: 0.03125em; text-transform: uppercase; } @@ -312,7 +311,7 @@ Inter variable font. Usage: .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter { color: var(--wp--preset--color--primary); font-size: 5.1em; - font-weight: var(--wp--typography--font-size-heading-1); + font-weight: var(--wp--preset--font-size--huge); margin: 0.05em 0.1em 0 0; } @@ -337,7 +336,7 @@ Inter variable font. Usage: .editor-styles-wrapper pre { border-color: #dcd7ca; border-radius: 0; - line-height: var(--wp--typography--line-height); + line-height: var(--wp--preset--line-height--normal); padding: 1em; } @@ -450,7 +449,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: var(--wp--typography--line-height);; + line-height: var(--wp--preset--line-height--normal);; margin: 5px 0 0 0; } @@ -489,7 +488,7 @@ Inter variable font. Usage: font-size: 0.7em; font-weight: 600; letter-spacing: normal; - line-height: var(--wp--typography--line-height);; + line-height: var(--wp--preset--line-height--normal);; margin-top: 0.15em; } @@ -500,7 +499,7 @@ Inter variable font. Usage: border-collapse: collapse; border-spacing: 0; empty-cells: show; - font-size: var(--wp--typography--font-size); + font-size: var(--wp--preset--font-size--normal); margin-bottom: 1.1em; width: 100%; } @@ -655,7 +654,7 @@ hr.wp-block-separator.is-style-dots::before { color: #6d6d6d; font-size: 14px; font-weight: 600; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); } .editor-styles-wrapper .wp-block-quote p { @@ -671,7 +670,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-quote.is-style-large p { font-family: inherit; - font-size: font-size: var(--wp--typography--font-size-heading-5); + font-size: 24px; font-style: normal; font-weight: 700; letter-spacing: -0.035714286em; @@ -903,7 +902,7 @@ hr.wp-block-separator.is-style-dots::before { font-size: 15px; font-weight: 600; letter-spacing: 0.0333em; - line-height: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); padding: 1.1em 1.44em; text-transform: uppercase; } @@ -1001,7 +1000,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: var(--wp--typography--line-height-heading); + line-height: var(--wp--preset--line-height--heading); margin: 20px 16px 16px 0; padding-top: 12px; } @@ -1213,39 +1212,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - /* TYPOGRAPHY */ - - .editor-post-title__block .editor-post-title__input, - .editor-styles-wrapper .wp-block h1 { - font-size: var(--wp--typography--font-size-heading-1); - } - - .editor-styles-wrapper .wp-block h2 { - font-size: var(--wp--typography--font-size-heading-2); - } - - .editor-styles-wrapper .wp-block h3 { - font-size: var(--wp--typography--font-size-heading-3); - } - - .editor-styles-wrapper .wp-block h4 { - font-size: var(--wp--typography--font-size-heading-4); - } - - .editor-styles-wrapper .wp-block h5 { - 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: var(--wp--typography--line-height);; - } - /* FORMS */ .editor-styles-wrapper fieldset { @@ -1307,7 +1273,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: var(--wp--typography--font-size-heading-2); + font-size: 48px; } .editor-styles-wrapper .wp-block-pullquote__citation, @@ -1336,13 +1302,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: var(--wp--typography--font-size-heading-2); + font-size: 48px; 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: var(--wp--typography--font-size-heading-2); + font-size: 48px; line-height: 1.1875; } @@ -1354,7 +1320,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: TABLE */ .editor-styles-wrapper table.wp-block-table { - font-size: var(--wp--typography--font-size); + font-size: var(--wp--preset--font-size--normal); } /* BLOCK: SEPARATOR */ @@ -1373,7 +1339,7 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: COLUMNS */ .wp-block-column { - font-size: var(--wp--typography--font-size); + font-size: var(--wp--preset--font-size--normal); } /* BLOCK: SEPARATOR */ @@ -1394,18 +1360,6 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1220px ) { - - /* TYPOGRAPHY */ - - .editor-post-title__block .editor-post-title__input, - .editor-styles-wrapper .wp-block h1 { - font-size: var(--wp--typography--font-size-heading-1); - } - - .editor-styles-wrapper .wp-block h6 { - font-size: var(--wp--typography--font-size); - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, @@ -1415,7 +1369,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: var(--wp--typography--font-size-heading-1); + font-size: var(--wp--preset--font-size--huge); } /* BLOCK: SEPARATOR */ From cfeb4dc52c5fea1ab0c7d0e6bad47f45171f421c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 14 Jul 2020 11:46:53 -0400 Subject: [PATCH 15/17] Remove unused variables. --- twentytwenty-blocks/twentytwenty-styles/style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index 9553202a..e1381acb 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -314,33 +314,33 @@ h6, h1, .heading-size-1 { - font-size: var(--wp--preset--font-size--normal-heading-1); + font-size: 6.4rem; font-weight: bolder; } h2, .heading-size-2 { - font-size: var(--wp--preset--font-size--normal-heading-2); + font-size: 4.8rem; } h3, .heading-size-3 { - font-size: var(--wp--preset--font-size--normal-heading-3); + font-size: 4rem; } h4, .heading-size-4 { - font-size: var(--wp--preset--font-size--normal-heading-4); + font-size: 3.2rem; } h5, .heading-size-5 { - font-size: var(--wp--preset--font-size--normal-heading-5); + font-size: 2.4rem; } h6, .heading-size-6 { - font-size: var(--wp--preset--font-size--normal-heading-6); + font-size: 1.8rem; letter-spacing: 0.03125em; text-transform: uppercase; } From 79ae3235bbd691f7437d8021753e01de74c373c6 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 21 Jul 2020 13:17:37 -0400 Subject: [PATCH 16/17] Rename text color to foreground color. --- twentytwenty-blocks/block-styles.css | 4 ++-- twentytwenty-blocks/experimental-theme.json | 2 +- twentytwenty-blocks/functions.php | 2 +- .../twentytwenty-styles/editor-style-block.css | 15 +++++++-------- twentytwenty-blocks/twentytwenty-styles/style.css | 14 +++++++------- 5 files changed, 18 insertions(+), 19 deletions(-) diff --git a/twentytwenty-blocks/block-styles.css b/twentytwenty-blocks/block-styles.css index e3ee2501..325458f9 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: var(--wp--preset--color--text); - border-color: var(--wp--preset--color--text); + background: var(--wp--preset--color--foreground); + border-color: var(--wp--preset--color--foreground); border-radius: 0.4rem; font-size: 1.7rem; opacity: 0; diff --git a/twentytwenty-blocks/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json index 522cebe1..f8f2c5e0 100644 --- a/twentytwenty-blocks/experimental-theme.json +++ b/twentytwenty-blocks/experimental-theme.json @@ -7,7 +7,7 @@ "value": "#f5efe0" }, { - "slug": "text", + "slug": "foreground", "value": "#000" }, { diff --git a/twentytwenty-blocks/functions.php b/twentytwenty-blocks/functions.php index b22cee0d..b2a98652 100644 --- a/twentytwenty-blocks/functions.php +++ b/twentytwenty-blocks/functions.php @@ -58,7 +58,7 @@ function twentytwentyblocks_theme_support() { ), array( 'name' => __( 'Text', 'twentytwenty-blocks' ), - 'slug' => 'text', + 'slug' => 'foreground', 'color' => '#000', ), array( diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 1b977b3d..efc24a61 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -9,7 +9,7 @@ body { .editor-styles-wrapper { background: var(--wp--preset--color--background); - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); letter-spacing: -0.015em; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; @@ -181,8 +181,7 @@ Inter variable font. Usage: } :root .has-primary-background-color { - background-color: var(--wp--preset--color--text); - color: var(--wp--preset--color--primary); + background-color: var(--wp--preset--color--foreground); } :root .has-secondary-color { @@ -200,7 +199,7 @@ Inter variable font. Usage: :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } :root .has-background-color { @@ -209,23 +208,23 @@ Inter variable font. Usage: :root .has-background-background-color { background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } /* GENERAL COLORS */ .has-black-background-color { - background-color: var(--wp--preset--color--text); + background-color: var(--wp--preset--color--foreground); color: #fff; } .has-white-background-color { background-color: #fff; - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } .has-black-color { - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } .has-white-color { diff --git a/twentytwenty-blocks/twentytwenty-styles/style.css b/twentytwenty-blocks/twentytwenty-styles/style.css index e1381acb..ea3fcfa1 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -127,7 +127,7 @@ html { body { background: var(--wp--preset--color--background); box-sizing: border-box; - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: var(--wp--preset--font-size--normal); font-weight: var(--wp--preset--font-weight--normal); @@ -754,7 +754,7 @@ button, input, textarea { border-color: #dcd7ca; - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } code, @@ -1657,7 +1657,7 @@ ul.primary-menu { /* SUB MENU */ .primary-menu ul { - background: var(--wp--preset--color--text); + background: var(--wp--preset--color--foreground); 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: var(--wp--preset--color--text); + border-bottom-color: var(--wp--preset--color--foreground); right: 1.8rem; } @@ -1746,7 +1746,7 @@ ul.primary-menu { border-bottom-color: transparent; /*rtl:ignore*/ - border-left-color: var(--wp--preset--color--text); + border-left-color: var(--wp--preset--color--foreground); bottom: auto; right: -1.6rem; top: 2rem; @@ -2768,7 +2768,7 @@ h2.entry-title { :root .has-subtle-background-background-color { background-color: #dcd7ca; - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } :root .has-background-color { @@ -2777,7 +2777,7 @@ h2.entry-title { :root .has-background-background-color { background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--text); + color: var(--wp--preset--color--foreground); } From 5fce20af33fff12223b6a16f7566d4f127029e83 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 21 Jul 2020 13:40:28 -0400 Subject: [PATCH 17/17] Rewrite custom color styles so they work for buttons. --- .../editor-style-block.css | 40 ++++++------------- 1 file changed, 13 insertions(+), 27 deletions(-) diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index efc24a61..caeaa80f 100644 --- a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css +++ b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css @@ -167,48 +167,34 @@ Inter variable font. Usage: /* CUSTOM COLORS */ -:root .has-accent-color { +.editor-styles-wrapper .has-primary-color, +.editor-styles-wrapper .wp-block-button__link.has-primary-color { color: var(--wp--preset--color--primary); } -:root .has-accent-background-color { +.editor-styles-wrapper .has-primary-background-color, +.editor-styles-wrapper .wp-block-button__link.has-primary-background-color { background-color: var(--wp--preset--color--primary); - color: #fff; } -:root .has-primary-color { - color: var(--wp--preset--color--primary); +.editor-styles-wrapper .has-foreground-color, +.editor-styles-wrapper .wp-block-button__link.has-foreground-color { + color: var(--wp--preset--color--foreground); } -:root .has-primary-background-color { +.editor-styles-wrapper .has-foreground-background-color, +.editor-styles-wrapper .wp-block-button__link.has-foreground-background-color { background-color: var(--wp--preset--color--foreground); } -:root .has-secondary-color { - color: #6d6d6d; -} - -:root .has-secondary-background-color { - background-color: #6d6d6d; - color: #fff; -} - -:root .has-subtle-background-color { - color: #dcd7ca; -} - -:root .has-subtle-background-background-color { - background-color: #dcd7ca; - color: var(--wp--preset--color--foreground); -} - -:root .has-background-color { +.editor-styles-wrapper .has-background-color, +.editor-styles-wrapper .wp-block-button__link.has-background-color { color: var(--wp--preset--color--background); } -:root .has-background-background-color { +.editor-styles-wrapper .has-background-background-color, +.editor-styles-wrapper .wp-block-button__link.has-background-background-color { background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--foreground); } /* GENERAL COLORS */