From 3b2b857456cc04b49b288b3877e716e805eb35fa Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 6 Jul 2021 18:37:16 +0200 Subject: [PATCH 1/7] block styles for query block --- quadrat/assets/theme.css | 124 ++++++++++++------ quadrat/inc/block-styles.php | 9 ++ .../sass/{blocks => block-styles}/_cover.scss | 0 quadrat/sass/block-styles/_query.scss | 40 ++++++ quadrat/sass/theme.scss | 3 +- 5 files changed, 135 insertions(+), 41 deletions(-) rename quadrat/sass/{blocks => block-styles}/_cover.scss (100%) create mode 100644 quadrat/sass/block-styles/_query.scss diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index 7eac255b4f..e28819902d 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -41,6 +41,90 @@ text-align: right; } +.wp-block-cover.is-style-quadrat-cover-diamond::after { + background-image: url(rotated.svg); + background-position: center; + background-repeat: no-repeat; + background-size: auto 70%; + content: ""; + mix-blend-mode: soft-light; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 0 !important; +} + +.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before { + opacity: 0; +} + +.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after { + mix-blend-mode: normal; + -webkit-mask-image: url(rotated.svg); + mask-image: url(rotated.svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: auto 70%; + mask-size: auto 70%; + -webkit-mask-position: center; + mask-position: center; + opacity: 0.25; +} + +.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after { + background: #000; +} + +.wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after { + background: #fff; +} + +.is-style-quadrat-diamond-posts .wp-block-column { + flex-basis: auto; +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li { + display: flex; + align-items: center; + min-height: 400px; + position: relative; +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:before { + content: ""; + background: var(--wp--preset--color--secondary); + width: 375px; + height: 375px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + opacity: 0; + transition: all 0.4s ease-in; +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:hover:before { + opacity: 1; +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):before { + transform: rotate(16deg) translate(-130px, -20px); +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+1):hover:before { + transform: rotate(-8deg) translate(-110px, 0); +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):before { + transform: rotate(24deg) translate(-130px, 20px); +} + +.is-style-quadrat-diamond-posts .wp-block-post-template li:nth-child(2n+2):hover:before { + transform: rotate(16deg) translate(-110px, 40px); +} + .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, @@ -109,46 +193,6 @@ border-color: var(--wp--custom--color--secondary); } -.wp-block-cover.is-style-quadrat-cover-diamond::after { - background-image: url(rotated.svg); - background-position: center; - background-repeat: no-repeat; - background-size: auto 70%; - content: ""; - mix-blend-mode: soft-light; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 0 !important; -} - -.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color.wp-block-cover.has-background-dim:not(.has-background-gradient)::before { - opacity: 0; -} - -.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after, .wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after { - mix-blend-mode: normal; - -webkit-mask-image: url(rotated.svg); - mask-image: url(rotated.svg); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: auto 70%; - mask-size: auto 70%; - -webkit-mask-position: center; - mask-position: center; - opacity: 0.25; -} - -.wp-block-cover.is-style-quadrat-cover-diamond.has-white-background-color::after { - background: #000; -} - -.wp-block-cover.is-style-quadrat-cover-diamond.has-black-background-color::after { - background: #fff; -} - ul ul { list-style-type: disc; } diff --git a/quadrat/inc/block-styles.php b/quadrat/inc/block-styles.php index 0ec0fb5a43..65d3b7a9d6 100644 --- a/quadrat/inc/block-styles.php +++ b/quadrat/inc/block-styles.php @@ -23,6 +23,15 @@ function quadrat_register_block_styles() { 'style_handle' => 'quadrat-cover-diamond', ) ); + + register_block_style( + 'core/query', + array( + 'name' => 'quadrat-diamond-posts', + 'label' => __( 'Diamond Posts', 'quadrat' ), + 'style_handle' => 'quadrat-diamond-posts', + ) + ); } } endif; diff --git a/quadrat/sass/blocks/_cover.scss b/quadrat/sass/block-styles/_cover.scss similarity index 100% rename from quadrat/sass/blocks/_cover.scss rename to quadrat/sass/block-styles/_cover.scss diff --git a/quadrat/sass/block-styles/_query.scss b/quadrat/sass/block-styles/_query.scss new file mode 100644 index 0000000000..68f2be499d --- /dev/null +++ b/quadrat/sass/block-styles/_query.scss @@ -0,0 +1,40 @@ +.is-style-quadrat-diamond-posts { + .wp-block-column { + flex-basis: auto; + } + .wp-block-post-template { + li { + display: flex; + align-items: center; + min-height: 400px; + position: relative; + &:before { + content: ""; + background: var(--wp--preset--color--secondary); + width: 375px; + height: 375px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + opacity:0; + transition: all 0.4s ease-in; + } + &:hover:before { + opacity:1; + } + &:nth-child(2n+1):before { + transform: rotate(16deg) translate(-130px, -20px); + } + &:nth-child(2n+1):hover:before { + transform: rotate(-8deg) translate(-110px, 0); + } + &:nth-child(2n+2):before { + transform: rotate(24deg) translate(-130px, 20px); + } + &:nth-child(2n+2):hover:before { + transform: rotate(16deg) translate(-110px, 40px); + } + } + } +} diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss index 9acbfafcd2..5da3ea531b 100644 --- a/quadrat/sass/theme.scss +++ b/quadrat/sass/theme.scss @@ -2,9 +2,10 @@ @import "../../blockbase/sass/base/mixins"; @import "block-patterns/headlines"; @import "block-patterns/join"; +@import "block-styles/cover"; +@import "block-styles/query"; @import "blocks/buttons"; @import "blocks/calendar"; -@import "blocks/cover"; @import "blocks/list"; @import "blocks/media-text"; @import "blocks/navigation"; From 7810ba3e23ebc8a2736a3b2bcd31c488b7c3e9c2 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 6 Jul 2021 18:43:11 +0200 Subject: [PATCH 2/7] created block pattern for query block --- quadrat/inc/block-patterns.php | 9 +++--- quadrat/inc/patterns/query-diamond.php | 40 ++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 quadrat/inc/patterns/query-diamond.php diff --git a/quadrat/inc/block-patterns.php b/quadrat/inc/block-patterns.php index 9adfe637f9..d7b75c0228 100644 --- a/quadrat/inc/block-patterns.php +++ b/quadrat/inc/block-patterns.php @@ -18,13 +18,14 @@ function quadrat_register_block_patterns() { if ( function_exists( 'register_block_pattern' ) ) { $block_patterns = array( - 'headline-button', - 'media-text-button', - 'latest-episodes', - 'episode', 'cover-with-heading', + 'episode', + 'headline-button', 'headlines-and-buttons', + 'query-diamond', + 'latest-episodes', 'listen-to-the-podcast', + 'media-text-button', ); if ( class_exists( 'WP_Block_Type_Registry' ) && \WP_Block_Type_Registry::get_instance()->is_registered( 'jetpack/subscriptions' ) ) { diff --git a/quadrat/inc/patterns/query-diamond.php b/quadrat/inc/patterns/query-diamond.php new file mode 100644 index 0000000000..a298e59e55 --- /dev/null +++ b/quadrat/inc/patterns/query-diamond.php @@ -0,0 +1,40 @@ + __( 'Blog posts with hover effect', 'quadrat' ), + 'categories' => array( 'quadrat' ), + 'content' => ' +
+ +
+
+
+ +
+ + + + +
+ + + +
+
+ + + + +
+ + + +
+
+ ', +); From 5fa22e69d2928fd5a9dbf626aa5dceb8fdf9e349 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 6 Jul 2021 19:07:10 +0200 Subject: [PATCH 3/7] defaults for featured image --- quadrat/assets/theme.css | 26 ++++++++++++++++++++++++++ quadrat/sass/block-styles/_query.scss | 18 ++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index e28819902d..7ec07c469b 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -85,6 +85,28 @@ flex-basis: auto; } +.is-style-quadrat-diamond-posts .wp-block-column:last-child { + max-width: 400px; + flex-shrink: 0; +} + +.is-style-quadrat-diamond-posts .wp-block-post-featured-image { + width: 400px; +} + +@media (max-width: 599px) { + .is-style-quadrat-diamond-posts .wp-block-post-featured-image { + width: 100%; + } +} + +.is-style-quadrat-diamond-posts .wp-block-post-featured-image img { + -o-object-fit: cover; + object-fit: cover; + width: 100%; + height: 400px; +} + .is-style-quadrat-diamond-posts .wp-block-post-template li { display: flex; align-items: center; @@ -92,6 +114,10 @@ position: relative; } +.is-style-quadrat-diamond-posts .wp-block-post-template li > * { + flex-basis: 100%; +} + .is-style-quadrat-diamond-posts .wp-block-post-template li:before { content: ""; background: var(--wp--preset--color--secondary); diff --git a/quadrat/sass/block-styles/_query.scss b/quadrat/sass/block-styles/_query.scss index 68f2be499d..e519a721b2 100644 --- a/quadrat/sass/block-styles/_query.scss +++ b/quadrat/sass/block-styles/_query.scss @@ -1,6 +1,21 @@ .is-style-quadrat-diamond-posts { .wp-block-column { flex-basis: auto; + &:last-child { + max-width: 400px; + flex-shrink: 0; + } + } + .wp-block-post-featured-image { + width: 400px; + @media (max-width: #{ ($break-small - 1) }) { + width: 100%; + } + img { + object-fit: cover; + width: 100%; + height: 400px; + } } .wp-block-post-template { li { @@ -8,6 +23,9 @@ align-items: center; min-height: 400px; position: relative; + & > * { + flex-basis: 100%; + } &:before { content: ""; background: var(--wp--preset--color--secondary); From 77d28f184719602b3410965f7e10db89cf729fd5 Mon Sep 17 00:00:00 2001 From: Maggie Date: Tue, 6 Jul 2021 19:36:39 +0200 Subject: [PATCH 4/7] tweaked the post meta and updated the pattern markup --- quadrat/assets/theme.css | 23 ++++++++++++++++++++ quadrat/inc/patterns/query-diamond.php | 30 +++++++++++++------------- quadrat/sass/block-styles/_query.scss | 12 +++++++++++ quadrat/sass/templates/_meta.scss | 7 ++++++ 4 files changed, 57 insertions(+), 15 deletions(-) diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index 7ec07c469b..e031f84318 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -81,6 +81,20 @@ background: #fff; } +.is-style-quadrat-diamond-posts .post-meta { + justify-content: flex-start; +} + +.is-style-quadrat-diamond-posts .wp-block-query-pagination a, +.is-style-quadrat-diamond-posts .post-meta a { + text-decoration: none; +} + +.is-style-quadrat-diamond-posts .wp-block-query-pagination a:hover, +.is-style-quadrat-diamond-posts .post-meta a:hover { + text-decoration: underline; +} + .is-style-quadrat-diamond-posts .wp-block-column { flex-basis: auto; } @@ -700,6 +714,11 @@ textarea:focus { margin: 0 8px; } +.post-meta > *::before, +.post-meta .wp-block-post-date::before { + content: ""; +} + .post-meta .wp-block-post-terms { margin-left: 0; color: transparent; @@ -715,6 +734,10 @@ textarea:focus { color: var(--wp--custom--color--foreground); } +.post-meta .wp-block-post-terms a:not(:last-child):after { + content: ","; +} + .wp-block-query .wp-block-post-featured-image { margin-top: calc( var(--wp--custom--margin--vertical) / 2); } diff --git a/quadrat/inc/patterns/query-diamond.php b/quadrat/inc/patterns/query-diamond.php index a298e59e55..7b99dd9770 100644 --- a/quadrat/inc/patterns/query-diamond.php +++ b/quadrat/inc/patterns/query-diamond.php @@ -10,31 +10,31 @@ 'categories' => array( 'quadrat' ), 'content' => '
- +
-
-
- -
+
+
+ +
- + - -
+ +
- - + +
- + -
- +
+ - -
+ +
', ); diff --git a/quadrat/sass/block-styles/_query.scss b/quadrat/sass/block-styles/_query.scss index e519a721b2..5890dbfd2f 100644 --- a/quadrat/sass/block-styles/_query.scss +++ b/quadrat/sass/block-styles/_query.scss @@ -1,4 +1,16 @@ .is-style-quadrat-diamond-posts { + .post-meta { + justify-content: flex-start; + } + .wp-block-query-pagination, + .post-meta { + a { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } .wp-block-column { flex-basis: auto; &:last-child { diff --git a/quadrat/sass/templates/_meta.scss b/quadrat/sass/templates/_meta.scss index 1662ca7102..78024ee1a0 100644 --- a/quadrat/sass/templates/_meta.scss +++ b/quadrat/sass/templates/_meta.scss @@ -13,6 +13,9 @@ > *, .wp-block-post-date { margin: 0 8px; + &::before { + content: ""; + } } .wp-block-post-terms { @@ -27,6 +30,10 @@ color: transparent; a { color: var(--wp--custom--color--foreground); + &:not(:last-child):after { + // to be removed after https://github.com/WordPress/gutenberg/pull/32812 lands + content: ","; + } } } } From a84f354724c8e4e95dea1e6e8a86d61f801804b1 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Jul 2021 09:27:45 -0400 Subject: [PATCH 5/7] Tidy up image and text treatment on various screen sizes. . --- quadrat/assets/theme.css | 23 +++++++++++++++++------ quadrat/sass/block-styles/_query.scss | 15 ++++++++++----- quadrat/sass/blocks/_query.scss | 8 +++++++- 3 files changed, 34 insertions(+), 12 deletions(-) diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index e031f84318..f070f27cfe 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -99,13 +99,18 @@ flex-basis: auto; } -.is-style-quadrat-diamond-posts .wp-block-column:last-child { - max-width: 400px; - flex-shrink: 0; +@media (min-width: 600px) { + .is-style-quadrat-diamond-posts .wp-block-column:last-child { + max-width: 300px; + flex-shrink: 0; + } + .is-style-quadrat-diamond-posts .wp-block-column:first-child { + padding-right: 2em; + } } .is-style-quadrat-diamond-posts .wp-block-post-featured-image { - width: 400px; + width: 300px; } @media (max-width: 599px) { @@ -118,7 +123,7 @@ -o-object-fit: cover; object-fit: cover; width: 100%; - height: 400px; + height: 300px; } .is-style-quadrat-diamond-posts .wp-block-post-template li { @@ -483,10 +488,16 @@ ul ul { margin-left: 20%; } -.wp-block-query-loop .wp-block-post-title { +.wp-block-query-loop .wp-block-post-title, +.wp-block-query .wp-block-post-title { font-size: var(--wp--custom--heading--h3--font-size); } +.wp-block-query-loop .wp-block-post-excerpt__more-text, +.wp-block-query .wp-block-post-excerpt__more-text { + font-size: var(--wp--preset--font-size--tiny) !important; +} + .wp-block-query-pagination { border-top: 1px solid var(--wp--custom--color--primary); } diff --git a/quadrat/sass/block-styles/_query.scss b/quadrat/sass/block-styles/_query.scss index 5890dbfd2f..953f1b4112 100644 --- a/quadrat/sass/block-styles/_query.scss +++ b/quadrat/sass/block-styles/_query.scss @@ -13,20 +13,25 @@ } .wp-block-column { flex-basis: auto; - &:last-child { - max-width: 400px; - flex-shrink: 0; + @media (min-width: #{ $break-small }) { + &:last-child { + max-width: 300px; + flex-shrink: 0; + } + &:first-child { + padding-right: 2em; + } } } .wp-block-post-featured-image { - width: 400px; + width: 300px; @media (max-width: #{ ($break-small - 1) }) { width: 100%; } img { object-fit: cover; width: 100%; - height: 400px; + height: 300px; } } .wp-block-post-template { diff --git a/quadrat/sass/blocks/_query.scss b/quadrat/sass/blocks/_query.scss index a510f895d8..afcd33ae70 100644 --- a/quadrat/sass/blocks/_query.scss +++ b/quadrat/sass/blocks/_query.scss @@ -1,5 +1,11 @@ -.wp-block-query-loop { +.wp-block-query-loop, +.wp-block-query { .wp-block-post-title { font-size: var(--wp--custom--heading--h3--font-size); } + + // Important is necessary to override any other font size rules applied to the exerpt. + .wp-block-post-excerpt__more-text { + font-size: var(--wp--preset--font-size--tiny) !important; + } } \ No newline at end of file From e4b8b3ef964452de7a36c616a1f0ed04e6874195 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Jul 2021 09:27:59 -0400 Subject: [PATCH 6/7] Rename to avoid mention of "hover" --- quadrat/inc/patterns/query-diamond.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quadrat/inc/patterns/query-diamond.php b/quadrat/inc/patterns/query-diamond.php index 7b99dd9770..129b846f0f 100644 --- a/quadrat/inc/patterns/query-diamond.php +++ b/quadrat/inc/patterns/query-diamond.php @@ -6,7 +6,7 @@ */ return array( - 'title' => __( 'Blog posts with hover effect', 'quadrat' ), + 'title' => __( 'List of blog posts', 'quadrat' ), 'categories' => array( 'quadrat' ), 'content' => '
From e52b6098a3886d8f2552a9d481d1da2fd21e2902 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Jul 2021 09:34:26 -0400 Subject: [PATCH 7/7] Add blockTypes prop --- quadrat/inc/patterns/query-diamond.php | 1 + 1 file changed, 1 insertion(+) diff --git a/quadrat/inc/patterns/query-diamond.php b/quadrat/inc/patterns/query-diamond.php index 129b846f0f..cbb6955f24 100644 --- a/quadrat/inc/patterns/query-diamond.php +++ b/quadrat/inc/patterns/query-diamond.php @@ -8,6 +8,7 @@ return array( 'title' => __( 'List of blog posts', 'quadrat' ), 'categories' => array( 'quadrat' ), + 'blockTypes' => array( 'core/query' ), 'content' => '