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/experimental-theme.json b/twentytwenty-blocks/experimental-theme.json new file mode 100644 index 00000000..d988e4b9 --- /dev/null +++ b/twentytwenty-blocks/experimental-theme.json @@ -0,0 +1,13 @@ +{ + "color": { + "primary": "#cd2653", + "background": "#f5efe0", + "text": "#000" + }, + "typography": { + "font-scale": 1.3, + "font-size": "18px", + "font-weight": 400, + "line-height": 1.5 + } +} 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' ); diff --git a/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css b/twentytwenty-blocks/twentytwenty-styles/editor-style-block.css index 55d1446f..b53cc2f1 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; @@ -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); } @@ -163,21 +164,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 +196,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 +232,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ .editor-styles-wrapper .editor-block-list__layout a { - color: #cd2653; + color: var(--wp--color--primary); text-decoration: underline; } @@ -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 { @@ -304,9 +306,9 @@ 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; + 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%; } @@ -621,7 +623,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; @@ -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; @@ -769,7 +771,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,13 +893,13 @@ 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; 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; } @@ -911,7 +913,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); } @@ -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; } @@ -1038,7 +1040,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; } @@ -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 */ @@ -1389,11 +1395,11 @@ 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 { - 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 008bc0ca..c6d63d50 100644 --- a/twentytwenty-blocks/twentytwenty-styles/style.css +++ b/twentytwenty-blocks/twentytwenty-styles/style.css @@ -125,11 +125,12 @@ 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; + 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; } @@ -456,7 +456,7 @@ hr.styled-separator::after { } a { - color: #cd2653; + color: var(--wp--color--primary); text-decoration: underline; } @@ -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 { @@ -539,7 +539,7 @@ dd + dt { /* Quotes ------------------------------------ */ blockquote { - border-color: #cd2653; + border-color: var(--wp--color--primary); border-style: solid; /*rtl:ignore*/ @@ -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; @@ -754,7 +754,7 @@ button, input, textarea { border-color: #dcd7ca; - color: #000; + color: var(--wp--color--text); } code, @@ -803,7 +803,7 @@ select { textarea { height: 12rem; - line-height: 1.5; + line-height: var(--wp--typography--line-height); width: 100%; } @@ -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; @@ -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; @@ -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; @@ -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; } @@ -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; @@ -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; } @@ -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,10 +2798,10 @@ 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; + 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, @@ -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; @@ -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 > * { @@ -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; @@ -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; } @@ -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; } @@ -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,