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
greenpeace · Dec 1, 2023 · 07e7ac5 · 07e7ac5
1 parent 046d2ad
commit 07e7ac5
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,3 +29,4 @@

		// Blocks
		@import "blocks/ActionsList";
		@import "blocks/PostsList";