From bf13b7ef9f8870e60655932daddf3ee908a50953 Mon Sep 17 00:00:00 2001 From: Anders Date: Sat, 5 Oct 2019 11:52:33 +0200 Subject: [PATCH 1/8] =?UTF-8?q?Block=20editor=20font=20sizes:=20Updated=20?= =?UTF-8?q?=E2=80=9DRegular=E2=80=9D=20to=20match=20the=20front-end,=20and?= =?UTF-8?q?=20bumped=20=E2=80=9DSmall=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- functions.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/functions.php b/functions.php index e22cbef03..687139a56 100644 --- a/functions.php +++ b/functions.php @@ -438,13 +438,13 @@ function twentytwenty_block_editor_settings() { array( 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ), 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ), - 'size' => 16, + 'size' => 18, 'slug' => 'small', ), array( 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ), 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ), - 'size' => 18, + 'size' => 21, 'slug' => 'regular', ), array( From 546c180a9b2e00f0dcf137ac16631525b9289b3c Mon Sep 17 00:00:00 2001 From: Anders Date: Sat, 5 Oct 2019 11:55:46 +0200 Subject: [PATCH 2/8] Block Editor Styles: Update Block: Columns with heading margins to match front-end --- assets/css/editor-style-block.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/assets/css/editor-style-block.css b/assets/css/editor-style-block.css index 29e014145..4436cc632 100644 --- a/assets/css/editor-style-block.css +++ b/assets/css/editor-style-block.css @@ -1056,6 +1056,17 @@ hr.wp-block-separator.is-style-dots::before { padding: 0 45px; } + /* BLOCK: COLUMNS */ + + .editor-styles-wrapper .wp-block[data-type="core/column"] h1, + .editor-styles-wrapper .wp-block[data-type="core/column"] h2, + .editor-styles-wrapper .wp-block[data-type="core/column"] h3, + .editor-styles-wrapper .wp-block[data-type="core/column"] h4, + .editor-styles-wrapper .wp-block[data-type="core/column"] h5, + .editor-styles-wrapper .wp-block[data-type="core/column"] h6 { + margin: 35px 0 20px 0; + } + /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit { From 27d5985118c43fb3543c7e67a0ebe2f8dd71831a Mon Sep 17 00:00:00 2001 From: Anders Date: Sat, 19 Oct 2019 19:35:39 +0200 Subject: [PATCH 3/8] Fix text color setting on buttons not having any effect --- functions.php | 10 +++++----- style.css | 22 +++++++++++++++++++++- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/functions.php b/functions.php index 23288c25f..d58a7d85f 100644 --- a/functions.php +++ b/functions.php @@ -602,21 +602,21 @@ function twentytwenty_get_elements_array() { $elements = array( 'content' => array( 'accent' => array( - 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', '.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), + 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', '.has-accent-color', '.wp-block-button__link.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ), 'background' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.has-accent-background-color', '.comment-reply-link' ), 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ), ), 'background' => array( - 'color' => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-button__link:active', '.wp-block-button__link:focus', '.wp-block-button__link:visited', '.wp-block-button__link:hover', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link' ), + 'color' => array( '.has-background-color', '.wp-block-button__link.has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link:not(.has-text-color)', '.wp-block-button__link:not(.has-text-color):active', '.wp-block-button__link:not(.has-text-color):focus', '.wp-block-button__link:not(.has-text-color):visited', '.wp-block-button__link:not(.has-text-color):hover', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link' ), 'background' => array( '.has-background-background-color' ), ), 'text' => array( - 'color' => array( 'body', '.entry-title a', '.has-primary-color' ), + 'color' => array( 'body', '.entry-title a', '.has-primary-color', '.wp-block-button__link.has-primary-color' ), 'background' => array( '.has-primary-background-color' ), ), 'secondary' => array( - 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', '.has-secondary-color' ), + 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', '.has-secondary-color', '.wp-block-button__link.has-secondary-color' ), 'background' => array( '.has-secondary-background-color' ), ), 'borders' => array( @@ -624,7 +624,7 @@ function twentytwenty_get_elements_array() { 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', '.has-subtle-background-background-color' ), 'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ), 'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ), - 'color' => array( '.has-subtle-background-color' ), + 'color' => array( '.has-subtle-background-color', '.wp-block-button__link.has-subtle-background-color' ), ), ), 'header-footer' => array( diff --git a/style.css b/style.css index 008367a65..cef5d30ff 100644 --- a/style.css +++ b/style.css @@ -2845,10 +2845,30 @@ h2.entry-title { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link { +.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.wp-block-button__link.has-accent-color { + color: #cd2653; +} + +.wp-block-button__link.has-primary-color { + color: #000; +} + +.wp-block-button__link.has-secondary-color { + color: #6d6d6d; +} + +.wp-block-button__link.has-subtle-background-color { + color: #dcd7ca; +} + +.wp-block-button__link.has-background-color { + color: #f5efe0; +} + /* Block: Columns ---------------------------- */ .wp-block-column { From e0f8acc20ab136ab6a192d3fa601af10ed8914b2 Mon Sep 17 00:00:00 2001 From: Anders Date: Sat, 19 Oct 2019 21:27:57 +0200 Subject: [PATCH 4/8] Build CSS --- assets/css/editor-style-block-rtl.css | 1 - style-rtl.css | 22 +++++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/assets/css/editor-style-block-rtl.css b/assets/css/editor-style-block-rtl.css index 82f17acc9..b7e89bea9 100644 --- a/assets/css/editor-style-block-rtl.css +++ b/assets/css/editor-style-block-rtl.css @@ -12,7 +12,6 @@ } .editor-styles-wrapper > * { - color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 18px; } diff --git a/style-rtl.css b/style-rtl.css index 285dd09da..ede32c8b0 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2835,10 +2835,30 @@ h2.entry-title { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link { +.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.wp-block-button__link.has-accent-color { + color: #cd2653; +} + +.wp-block-button__link.has-primary-color { + color: #000; +} + +.wp-block-button__link.has-secondary-color { + color: #6d6d6d; +} + +.wp-block-button__link.has-subtle-background-color { + color: #dcd7ca; +} + +.wp-block-button__link.has-background-color { + color: #f5efe0; +} + /* Block: Columns ---------------------------- */ .wp-block-column { From d78902c805445c35326a8bcd85ef8d5a4ed02abf Mon Sep 17 00:00:00 2001 From: Anders Date: Sun, 20 Oct 2019 11:26:10 +0200 Subject: [PATCH 5/8] Increase base specificity of color classes, removed .wp-block-button__link.has-x-color styles --- functions.php | 20 ++++++++++---------- style-rtl.css | 40 ++++++++++------------------------------ style.css | 40 ++++++++++------------------------------ 3 files changed, 30 insertions(+), 70 deletions(-) diff --git a/functions.php b/functions.php index d58a7d85f..d255b918b 100644 --- a/functions.php +++ b/functions.php @@ -602,29 +602,29 @@ function twentytwenty_get_elements_array() { $elements = array( 'content' => array( 'accent' => array( - 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', '.has-accent-color', '.wp-block-button__link.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), + 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ), - 'background' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.has-accent-background-color', '.comment-reply-link' ), + 'background' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ), 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ), ), 'background' => array( - 'color' => array( '.has-background-color', '.wp-block-button__link.has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link:not(.has-text-color)', '.wp-block-button__link:not(.has-text-color):active', '.wp-block-button__link:not(.has-text-color):focus', '.wp-block-button__link:not(.has-text-color):visited', '.wp-block-button__link:not(.has-text-color):hover', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link' ), - 'background' => array( '.has-background-background-color' ), + 'color' => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link' ), + 'background' => array( ':root .has-background-background-color' ), ), 'text' => array( - 'color' => array( 'body', '.entry-title a', '.has-primary-color', '.wp-block-button__link.has-primary-color' ), - 'background' => array( '.has-primary-background-color' ), + 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ), + 'background' => array( ':root .has-primary-background-color' ), ), 'secondary' => array( - 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', '.has-secondary-color', '.wp-block-button__link.has-secondary-color' ), - 'background' => array( '.has-secondary-background-color' ), + 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ), + 'background' => array( ':root .has-secondary-background-color' ), ), 'borders' => array( 'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ), - 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', '.has-subtle-background-background-color' ), + 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ), 'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ), 'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ), - 'color' => array( '.has-subtle-background-color', '.wp-block-button__link.has-subtle-background-color' ), + 'color' => array( ':root .has-subtle-background-color' ), ), ), 'header-footer' => array( diff --git a/style-rtl.css b/style-rtl.css index ede32c8b0..aaa90b359 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2563,43 +2563,43 @@ h2.entry-title { /* CUSTOM COLORS */ -.has-accent-color { +:root .has-accent-color { color: #cd2653; } -.has-accent-background-color { +:root .has-accent-background-color { background-color: #cd2653; } -.has-primary-color { +:root .has-primary-color { color: #000; } -.has-primary-background-color { +:root .has-primary-background-color { background-color: #000; } -.has-secondary-color { +:root .has-secondary-color { color: #6d6d6d; } -.has-secondary-background-color { +:root .has-secondary-background-color { background-color: #6d6d6d; } -.has-subtle-background-color { +:root .has-subtle-background-color { color: #dcd7ca; } -.has-subtle-background-background-color { +:root .has-subtle-background-background-color { background-color: #dcd7ca; } -.has-background-color { +:root .has-background-color { color: #f5efe0; } -.has-background-background-color { +:root .has-background-background-color { background-color: #f5efe0; } @@ -2839,26 +2839,6 @@ h2.entry-title { color: inherit; } -.wp-block-button__link.has-accent-color { - color: #cd2653; -} - -.wp-block-button__link.has-primary-color { - color: #000; -} - -.wp-block-button__link.has-secondary-color { - color: #6d6d6d; -} - -.wp-block-button__link.has-subtle-background-color { - color: #dcd7ca; -} - -.wp-block-button__link.has-background-color { - color: #f5efe0; -} - /* Block: Columns ---------------------------- */ .wp-block-column { diff --git a/style.css b/style.css index cef5d30ff..992ffb298 100644 --- a/style.css +++ b/style.css @@ -2571,43 +2571,43 @@ h2.entry-title { /* CUSTOM COLORS */ -.has-accent-color { +:root .has-accent-color { color: #cd2653; } -.has-accent-background-color { +:root .has-accent-background-color { background-color: #cd2653; } -.has-primary-color { +:root .has-primary-color { color: #000; } -.has-primary-background-color { +:root .has-primary-background-color { background-color: #000; } -.has-secondary-color { +:root .has-secondary-color { color: #6d6d6d; } -.has-secondary-background-color { +:root .has-secondary-background-color { background-color: #6d6d6d; } -.has-subtle-background-color { +:root .has-subtle-background-color { color: #dcd7ca; } -.has-subtle-background-background-color { +:root .has-subtle-background-background-color { background-color: #dcd7ca; } -.has-background-color { +:root .has-background-color { color: #f5efe0; } -.has-background-background-color { +:root .has-background-background-color { background-color: #f5efe0; } @@ -2849,26 +2849,6 @@ h2.entry-title { color: inherit; } -.wp-block-button__link.has-accent-color { - color: #cd2653; -} - -.wp-block-button__link.has-primary-color { - color: #000; -} - -.wp-block-button__link.has-secondary-color { - color: #6d6d6d; -} - -.wp-block-button__link.has-subtle-background-color { - color: #dcd7ca; -} - -.wp-block-button__link.has-background-color { - color: #f5efe0; -} - /* Block: Columns ---------------------------- */ .wp-block-column { From afbdea6a874453a500cba75ef16eae4b37e7f961 Mon Sep 17 00:00:00 2001 From: Anders Date: Sun, 20 Oct 2019 11:34:04 +0200 Subject: [PATCH 6/8] Updated is-style-outline button size to match filled style --- style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 992ffb298..5fb5faa66 100644 --- a/style.css +++ b/style.css @@ -2845,10 +2845,14 @@ h2.entry-title { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { +.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.is-style-outline .wp-block-button__link { + padding: calc( 1.1em - .2rem ) calc( 1.44em - .2rem ); +} + /* Block: Columns ---------------------------- */ .wp-block-column { From 2c1cbb3659331497bedfeae920dc3690947e42c7 Mon Sep 17 00:00:00 2001 From: Anders Date: Sun, 20 Oct 2019 11:38:22 +0200 Subject: [PATCH 7/8] Travis CSS --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 5fb5faa66..5446fa1d5 100644 --- a/style.css +++ b/style.css @@ -2850,7 +2850,7 @@ h2.entry-title { } .is-style-outline .wp-block-button__link { - padding: calc( 1.1em - .2rem ) calc( 1.44em - .2rem ); + padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem); } /* Block: Columns ---------------------------- */ From e69114ef62fe88eecdb26545c64f2e9b0988b365 Mon Sep 17 00:00:00 2001 From: Anders Date: Sun, 20 Oct 2019 11:40:01 +0200 Subject: [PATCH 8/8] Build CSS --- style-rtl.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style-rtl.css b/style-rtl.css index aaa90b359..dc724d835 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2835,10 +2835,14 @@ h2.entry-title { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { +.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.is-style-outline .wp-block-button__link { + padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem); +} + /* Block: Columns ---------------------------- */ .wp-block-column {