From 07e7ac5c0e173fea723b2f2bd4ff7e4524dfeb28 Mon Sep 17 00:00:00 2001 From: Osong Agberndifor <38656549+Osong-Michael@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:18:23 +0100 Subject: [PATCH] PLANET-7214 Build a Posts List block using Query Loop (#2137) * PLANET-7214 Build a Posts List block using Query Loop - Added Posts List block using the QLB - Restyled block for both editor and frontend * Changed script Enqueue for blocks - We can just enqueue from the Loader file and remove from MastersBlock * Changed script Enqueue for blocks - We can just enqueue from the Loader file and remove from MastersBlock --- assets/src/blocks/ActionsList/index.js | 5 +- assets/src/blocks/PostsList/index.js | 71 ++++++++++++ assets/src/blocks/editorIndex.js | 3 +- assets/src/scss/blocks/PostsList.scss | 145 +++++++++++++++++++++++++ assets/src/scss/editorOverrides.scss | 47 ++++++++ assets/src/scss/editorStyle.scss | 1 + assets/src/scss/style.scss | 1 + 7 files changed, 269 insertions(+), 4 deletions(-) create mode 100644 assets/src/blocks/PostsList/index.js create mode 100644 assets/src/scss/blocks/PostsList.scss diff --git a/assets/src/blocks/ActionsList/index.js b/assets/src/blocks/ActionsList/index.js index 4fba1735f0..09c03f2d28 100644 --- a/assets/src/blocks/ActionsList/index.js +++ b/assets/src/blocks/ActionsList/index.js @@ -63,17 +63,16 @@ export const registerActionsList = () => { }, }], ['core/post-template', {}, [ - ['core/post-featured-image', {isLink: true, linkTarget: '_blank'}], + ['core/post-featured-image', {isLink: true}], ['core/group', {}, [ ['core/post-terms', {term: 'post_tag', separator: ' '}], - ['core/post-title', {isLink: true, linkTarget: '_blank'}], + ['core/post-title', {isLink: true}], ['core/post-excerpt'], ]], ['core/group', {layout: {type: 'flex', justifyContent: 'right'}}, [ ['core/read-more', { className: 'btn btn-small btn-primary', content: __('Take Action', 'planet4-blocks-backend'), - linkTarget: '_blank', }], ]], ]], diff --git a/assets/src/blocks/PostsList/index.js b/assets/src/blocks/PostsList/index.js new file mode 100644 index 0000000000..ff49bb2692 --- /dev/null +++ b/assets/src/blocks/PostsList/index.js @@ -0,0 +1,71 @@ +const POSTS_LIST_BLOCK = 'planet4-blocks/posts-list-block'; + +export const registerPostsListBlock = () => { + const {registerBlockVariation} = wp.blocks; + const {__} = wp.i18n; + + return registerBlockVariation('core/query', { + name: POSTS_LIST_BLOCK, + title: 'Posts List', + icon: 'list-view', + description: __('Posts List is the place in Planet 4 that the latest articles, press releases and publications can be found.', 'planet4-blocks-backend'), + category: 'planet4-blocks-beta', + isActive: ({namespace, query}) => { + return ( + namespace === POSTS_LIST_BLOCK && + query.postType === 'post' + ); + }, + attributes: { + namespace: POSTS_LIST_BLOCK, + className: 'posts-list-query', + query: { + perPage: 3, + pages: 0, + offset: 0, + postType: 'post', + order: 'desc', + orderBy: 'date', + author: '', + search: '', + exclude: [], + sticky: '', + inherit: false, + }, + }, + scope: ['inserter'], + allowedControls: ['taxQuery'], + innerBlocks: [ + ['core/heading', {content: __('Related Posts', 'planet4-blocks-backend')}], + ['core/paragraph', { + placeholder: __('Enter description', 'planet4-blocks-backend'), + style: { + spacing: { + margin: { + top: '24px', + bottom: '36px', + }, + }, + }, + }], + ['core/post-template', {}, [ + ['core/columns', {}, [ + ['core/post-featured-image', {isLink: true}], + ['core/group', {}, [ + ['core/post-terms', { + term: 'category', + separator: ' | ', + }], + ['core/post-title', {isLink: true}], + ['core/post-excerpt'], + ['core/group', {className: 'posts-list-meta'}, [ + ['core/post-author-name', {isLink: true}], + ['core/post-date'], + ]], + ]], + ]], + ]], + ], + } + ); +}; diff --git a/assets/src/blocks/editorIndex.js b/assets/src/blocks/editorIndex.js index d91d8060f9..9395e6eb02 100644 --- a/assets/src/blocks/editorIndex.js +++ b/assets/src/blocks/editorIndex.js @@ -1,5 +1,6 @@ - +import {registerPostsListBlock} from './PostsList'; import {registerActionsList} from './ActionsList'; // Beta blocks registerActionsList(); +registerPostsListBlock(); diff --git a/assets/src/scss/blocks/PostsList.scss b/assets/src/scss/blocks/PostsList.scss new file mode 100644 index 0000000000..158b310277 --- /dev/null +++ b/assets/src/scss/blocks/PostsList.scss @@ -0,0 +1,145 @@ +.posts-list-query { + .wp-block-post-template.is-layout-flow li { + width: 100% !important; + } + + .wp-block-columns.is-layout-flex { + gap: $sp-2x; + } + + .wp-block-post-featured-image { + flex-basis: 30%; + + img { + width: 100% !important; + object-fit: cover; + + @include medium-and-up { + height: 180px; + } + + @include large-and-up { + height: 210px; + } + } + } + + .wp-block-group.is-layout-flow { + flex-basis: 70%; + } + + .wp-block-post-title { + font-weight: var(--font-weight-bold); + color: var(--grey-900); + font-family: var(--font-family-tertiary); + font-size: var(--font-size-l--font-family-primary); + margin-top: 5px; + + a { + -webkit-line-clamp: 2; + } + } + + .wp-block-post-title a, + .wp-block-post-excerpt__excerpt { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .wp-block-post-excerpt { + margin-top: -15px; + + &__excerpt { + width: 100%; + margin-bottom: $sp-1; + font-size: var(--font-size-m--font-family-secondary); + + @include medium-and-up { + -webkit-line-clamp: 2; + width: 100%; + } + + @include large-and-up { + -webkit-line-clamp: 3; + } + } + } + + .is-layout-flow > .is-layout-flow { + display: flex; + gap: $sp-x; + font-size: calc(var(--font-size-xxs--font-family-primary) - 2px); + color: var(--grey-600); + font-family: var(--font-family-paragraph-secondary); + } + + .wp-block-post-author-name { + font-size: calc(var(--font-size-xxs--font-family-primary) - 2px); + font-weight: var(--font-weight-semibold); + display: flex; + + a { + color: var(--grey-600); + } + + &::after { + content: "."; + font-size: calc(var(--font-size-m--font-family-primary) + 5px); + margin-top: -6px; + margin-left: $sp-x; + } + } + + .wp-block-post-terms { + margin-top: -5px; + + &__separator, + a, + a:visited { + color: var(--gp-green-800); + font-weight: var(--font-weight-semibold); + font-family: var(--font-family-tertiary); + font-size: var(--font-size-m--font-family-tertiary); + } + } +} + +@media (max-width: 1200px) { + .posts-list-query { + .wp-block-post-excerpt, + .wp-block-post-terms { + margin-top: 0; + } + } +} + +@media (max-width: 781px) { + .posts-list-query { + .wp-block-post-featured-image { + flex-basis: 100%; + + img { + height: 100%; + } + } + + .wp-block-group.is-layout-flow { + flex-basis: 100%; + } + + .wp-block-post-excerpt { + &__excerpt { + width: 100%; + } + } + } +} + +@media (max-width: 767px) { + .posts-list-query { + .wp-block-heading { + font-size: var(--font-size-2xl--font-family-primary); + } + } +} diff --git a/assets/src/scss/editorOverrides.scss b/assets/src/scss/editorOverrides.scss index a09276180c..ce66240c99 100644 --- a/assets/src/scss/editorOverrides.scss +++ b/assets/src/scss/editorOverrides.scss @@ -1,3 +1,5 @@ +@import "./base/tokens"; + // Moved from another repo, for history please see https://github.com/greenpeace/planet4-plugin-gutenberg-blocks/blame/f5c532ed5704738136224cde305e9a0ffe614ceb/assets/src/styles/editorOverrides.scss .editor-post-title__block textarea.editor-post-title__input { --headings-- { @@ -415,3 +417,48 @@ input.describe[type=text][data-setting=caption] { } } } + +// Posts List Block Override +.posts-list-query { + .wp-block-post-template.is-layout-flow li { + height: 240px; + margin-bottom: 12px; + } + + .wp-block-post-featured-image { + flex-basis: 30%; + } + + .wp-block-group.is-layout-flow { + flex-basis: 65%; + } + + .wp-block-post-title { + margin-top: -25px !important; + } + + .wp-block-post-excerpt { + margin-top: -24px; + + &__more-text { + display: none; + } + } + + .is-layout-flow > .is-layout-flow { + margin-top: -36px; + } +} + +@media (max-width: 991px) { + .posts-list-query { + .wp-block-post-title, + .wp-block-post-excerpt { + margin-top: -12px; + } + + .is-layout-flow > .is-layout-flow { + margin-top: -16px; + } + } +} diff --git a/assets/src/scss/editorStyle.scss b/assets/src/scss/editorStyle.scss index 3d321d77b1..9d0ed922da 100644 --- a/assets/src/scss/editorStyle.scss +++ b/assets/src/scss/editorStyle.scss @@ -29,3 +29,4 @@ // Blocks @import "blocks/ActionsList"; +@import "blocks/PostsList"; diff --git a/assets/src/scss/style.scss b/assets/src/scss/style.scss index 97905e47bf..c832d63ec1 100644 --- a/assets/src/scss/style.scss +++ b/assets/src/scss/style.scss @@ -81,6 +81,7 @@ Text Domain: planet4-master-theme // Blocks @import "blocks/ActionsList"; +@import "blocks/PostsList"; // Hide WPML footer language switcher. .wpml-ls-statics-footer {