From dc71577cdbe60737d2912e2b59de242760224d24 Mon Sep 17 00:00:00 2001 From: Allan Cole Date: Wed, 21 Aug 2019 18:44:50 -0400 Subject: [PATCH] Varia: Add support for improved latest-posts block for Gutenberg 6.3 - Also improves utility classes for text colors on has-background and nested blocks --- varia/sass/blocks/latest-posts/_editor.scss | 41 +++++++++- varia/sass/blocks/latest-posts/_style.scss | 13 +++- varia/sass/blocks/utilities/_editor.scss | 47 ++---------- varia/sass/blocks/utilities/_style.scss | 30 ++------ varia/style-editor.css | 84 +++++++++++---------- varia/style-rtl.css | 49 ++++-------- varia/style.css | 49 ++++-------- 7 files changed, 139 insertions(+), 174 deletions(-) diff --git a/varia/sass/blocks/latest-posts/_editor.scss b/varia/sass/blocks/latest-posts/_editor.scss index 20b29fa4b..eec43a94c 100644 --- a/varia/sass/blocks/latest-posts/_editor.scss +++ b/varia/sass/blocks/latest-posts/_editor.scss @@ -1,3 +1,42 @@ .wp-block-latest-posts { padding-left: 0; -} \ No newline at end of file + + & > li > a { + font-family: #{map-deep-get($config-heading, "font", "family")}; + font-size: #{map-deep-get($config-heading, "font", "size", "h4")}; + font-weight: #{map-deep-get($config-heading, "font", "weight")}; + line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")}; + } + + &:not(.is-grid) > li { + /* Vertical margins logic */ + margin-top: #{map-deep-get($config-global, "spacing", "vertical")}; + margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")}; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + .wp-block-latest-posts__post-date { + color: #{map-deep-get($config-global, "color", "foreground", "light")}; + font-size: #{map-deep-get($config-global, "font", "size", "sm")}; + line-height: #{map-deep-get($config-global, "font", "line-height", "body")}; + + [class*="inner-container"] &, + .has-background & { + color: currentColor; + } + } + + .wp-block-latest-posts__post-excerpt, + .wp-block-latest-posts__post-full-content { + font-size: #{map-deep-get($config-global, "font", "size", "sm")}; + line-height: #{map-deep-get($config-global, "font", "line-height", "body")}; + margin: 0; + } +} diff --git a/varia/sass/blocks/latest-posts/_style.scss b/varia/sass/blocks/latest-posts/_style.scss index 4cce73575..d300fb9db 100644 --- a/varia/sass/blocks/latest-posts/_style.scss +++ b/varia/sass/blocks/latest-posts/_style.scss @@ -26,11 +26,22 @@ color: #{map-deep-get($config-global, "color", "foreground", "light")}; font-size: #{map-deep-get($config-global, "font", "size", "xs")}; line-height: #{map-deep-get($config-global, "font", "line-height", "body")}; + + .entry-content [class*="inner-container"] &, + .entry-content .has-background & { + color: currentColor; + } } - .wp-block-latest-posts__post-excerpt { + .wp-block-latest-posts__post-excerpt, + .wp-block-latest-posts__post-full-content { font-size: #{map-deep-get($config-global, "font", "size", "sm")}; line-height: #{map-deep-get($config-global, "font", "line-height", "body")}; margin: 0; } + + &.alignfull { + padding-left: #{map-deep-get($config-global, "spacing", "unit")}; + padding-right: #{map-deep-get($config-global, "spacing", "unit")}; + } } diff --git a/varia/sass/blocks/utilities/_editor.scss b/varia/sass/blocks/utilities/_editor.scss index 49d46f52b..320c22aa3 100644 --- a/varia/sass/blocks/utilities/_editor.scss +++ b/varia/sass/blocks/utilities/_editor.scss @@ -48,86 +48,51 @@ } // Gutenberg background-color options -.has-background {} +.has-background { + p, a, h1, h2, h3, h4, h5, h6, + .wp-block-quote__citation { + color: currentColor; + } +} .has-primary-background-color[class] { background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-secondary-background-color[class] { background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-foreground-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-foreground-light-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-foreground-dark-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-background-light-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "light")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-background-dark-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } .has-background-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "default")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - - p, h1, h2, h3, h4, h5, h6, - .wp-block-quote__citation { - color: currentColor; - } } // Gutenberg Font-size utility classes diff --git a/varia/sass/blocks/utilities/_style.scss b/varia/sass/blocks/utilities/_style.scss index aa999a759..593c8a864 100644 --- a/varia/sass/blocks/utilities/_style.scss +++ b/varia/sass/blocks/utilities/_style.scss @@ -120,70 +120,50 @@ } // Gutenberg background-color options -.has-background {} +.has-background { + p, a, h1, h2, h3, h4, h5, h6 { + color: currentColor; + } +} .has-primary-background-color[class] { background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-secondary-background-color[class] { background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-foreground-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-foreground-light-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-foreground-dark-background-color[class] { background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important; color: #{map-deep-get($config-global, "color", "background", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-background-light-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "light")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-background-dark-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } .has-background-background-color[class] { background-color: #{map-deep-get($config-global, "color", "background", "default")} !important; color: #{map-deep-get($config-global, "color", "foreground", "default")}; - p, h1, h2, h3, h4, h5, h6 { - color: currentColor; - } } // Gutenberg Font-size options diff --git a/varia/style-editor.css b/varia/style-editor.css index 90d89b580..00f121dfd 100644 --- a/varia/style-editor.css +++ b/varia/style-editor.css @@ -386,6 +386,45 @@ object { padding-left: 0; } +.wp-block-latest-posts > li > a { + font-family: sans-serif; + font-size: 1.728rem; + font-weight: bold; + line-height: 1.125; +} + +.wp-block-latest-posts:not(.is-grid) > li { + /* Vertical margins logic */ + margin-top: 32px; + margin-bottom: 32px; +} + +.wp-block-latest-posts:not(.is-grid) > li:first-child { + margin-top: 0; +} + +.wp-block-latest-posts:not(.is-grid) > li:last-child { + margin-bottom: 0; +} + +.wp-block-latest-posts .wp-block-latest-posts__post-date { + color: #767676; + font-size: 0.83333rem; + line-height: 1.78; +} + +[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date, +.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { + color: currentColor; +} + +.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, +.wp-block-latest-posts .wp-block-latest-posts__post-full-content { + font-size: 0.83333rem; + line-height: 1.78; + margin: 0; +} + .wp-block-media-text .block-editor-inner-blocks { padding-right: 16px; padding-left: 16px; @@ -594,86 +633,51 @@ table th, color: white !important; } +.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6, +.has-background .wp-block-quote__citation { + color: currentColor; +} + .has-primary-background-color[class] { background-color: blue !important; color: white; } -.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6, -.has-primary-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-secondary-background-color[class] { background-color: red !important; color: white; } -.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6, -.has-secondary-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-foreground-background-color[class] { background-color: #444444 !important; color: white; } -.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6, -.has-foreground-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-foreground-light-background-color[class] { background-color: #767676 !important; color: white; } -.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6, -.has-foreground-light-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-foreground-dark-background-color[class] { background-color: #111111 !important; color: white; } -.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6, -.has-foreground-dark-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-background-light-background-color[class] { background-color: #FAFAFA !important; color: #444444; } -.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6, -.has-background-light-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-background-dark-background-color[class] { background-color: #DDDDDD !important; color: #444444; } -.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6, -.has-background-dark-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .has-background-background-color[class] { background-color: white !important; color: #444444; } -.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6, -.has-background-background-color[class] .wp-block-quote__citation { - color: currentColor; -} - .is-small-text, .has-small-font-size { font-size: 0.83333em; diff --git a/varia/style-rtl.css b/varia/style-rtl.css index 503e4ea2f..cc0c36664 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -1490,12 +1490,23 @@ img { line-height: 1.78; } -.wp-block-latest-posts .wp-block-latest-posts__post-excerpt { +.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date, +.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { + color: currentColor; +} + +.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, +.wp-block-latest-posts .wp-block-latest-posts__post-full-content { font-size: 0.83333rem; line-height: 1.78; margin: 0; } +.wp-block-latest-posts.alignfull { + padding-right: 16px; + padding-left: 16px; +} + .gallery-item { display: inline-block; text-align: center; @@ -2008,78 +2019,50 @@ table th, color: white !important; } +.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 { + color: currentColor; +} + .has-primary-background-color[class] { background-color: blue !important; color: white; } -.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 { - color: currentColor; -} - .has-secondary-background-color[class] { background-color: red !important; color: white; } -.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 { - color: currentColor; -} - .has-foreground-background-color[class] { background-color: #444444 !important; color: white; } -.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 { - color: currentColor; -} - .has-foreground-light-background-color[class] { background-color: #767676 !important; color: white; } -.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 { - color: currentColor; -} - .has-foreground-dark-background-color[class] { background-color: #111111 !important; color: white; } -.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 { - color: currentColor; -} - .has-background-light-background-color[class] { background-color: #FAFAFA !important; color: #444444; } -.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 { - color: currentColor; -} - .has-background-dark-background-color[class] { background-color: #DDDDDD !important; color: #444444; } -.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 { - color: currentColor; -} - .has-background-background-color[class] { background-color: white !important; color: #444444; } -.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 { - color: currentColor; -} - .is-small-text, .has-small-font-size { font-size: 0.83333rem; diff --git a/varia/style.css b/varia/style.css index 36a0673cc..d5e6936e9 100644 --- a/varia/style.css +++ b/varia/style.css @@ -1490,12 +1490,23 @@ img { line-height: 1.78; } -.wp-block-latest-posts .wp-block-latest-posts__post-excerpt { +.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date, +.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { + color: currentColor; +} + +.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, +.wp-block-latest-posts .wp-block-latest-posts__post-full-content { font-size: 0.83333rem; line-height: 1.78; margin: 0; } +.wp-block-latest-posts.alignfull { + padding-left: 16px; + padding-right: 16px; +} + .gallery-item { display: inline-block; text-align: center; @@ -2014,78 +2025,50 @@ table th, color: white !important; } +.has-background p, .has-background a, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 { + color: currentColor; +} + .has-primary-background-color[class] { background-color: blue !important; color: white; } -.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 { - color: currentColor; -} - .has-secondary-background-color[class] { background-color: red !important; color: white; } -.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 { - color: currentColor; -} - .has-foreground-background-color[class] { background-color: #444444 !important; color: white; } -.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 { - color: currentColor; -} - .has-foreground-light-background-color[class] { background-color: #767676 !important; color: white; } -.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 { - color: currentColor; -} - .has-foreground-dark-background-color[class] { background-color: #111111 !important; color: white; } -.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 { - color: currentColor; -} - .has-background-light-background-color[class] { background-color: #FAFAFA !important; color: #444444; } -.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 { - color: currentColor; -} - .has-background-dark-background-color[class] { background-color: #DDDDDD !important; color: #444444; } -.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 { - color: currentColor; -} - .has-background-background-color[class] { background-color: white !important; color: #444444; } -.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 { - color: currentColor; -} - .is-small-text, .has-small-font-size { font-size: 0.83333rem;