PLANET-7670 Show author override in Related Posts (#2448)

This wasn't working before. This commit also includes some small CSS changes for the mobile version of the Related Posts.
greenpeace · Nov 26, 2024 · 0b5d2f3 · 0b5d2f3
1 parent e151d49
commit 0b5d2f3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 39 deletions.
diff --git a/assets/src/scss/blocks/PostsList/PostsListStyle.scss b/assets/src/scss/blocks/PostsList/PostsListStyle.scss
@@ -184,7 +184,8 @@
     font-family: var(--font-family-paragraph-secondary);
   }
 
-  .wp-block-post-author-name {
+  .wp-block-post-author-name,
+  .article-list-item-author {
     font-size: calc(var(--font-size-xxs--font-family-primary) - 2px);
     font-weight: var(--font-weight-semibold);
     display: flex;

diff --git a/assets/src/scss/pages/post/_post.scss b/assets/src/scss/pages/post/_post.scss
@@ -79,27 +79,23 @@
   }
 }
 
-.articles-block,
 .post-articles-block {
-  border-top: 1px solid rgba($grey-500, 0.5);
-  padding-top: 16px;
+  margin-top: $sp-4;
 
-  @include medium-and-up {
-    padding-top: 24px;
-  }
-}
+  .posts-list {
+    padding-top: $sp-2;
+    border-top: 1px solid rgba($grey-500, 0.5);
 
-.post-articles-block {
-  margin-top: 30px;
-  padding-left: 0;
-  padding-right: 0;
-  padding-bottom: 0;
+    .wp-block-post-template {
+      margin-top: $sp-3;
+    }
+
+    @include medium-and-up {
+      padding-top: $sp-3;
+    }
+  }
 }
 
 .post-tags {
   margin-bottom: $sp-2;
 }
-
-.related-posts-block {
-  margin-bottom: 20px;
-}
diff --git a/functions.php b/functions.php
@@ -316,33 +316,43 @@ function render_related_posts_block(array $attributes): string
 
     // Define the HTML output for the block
     $output = '<!-- wp:query ' . $query_json . ' -->
-            <div class="wp-block-query posts-list p4-query-loop is-custom-layout-list"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
-            <div class="wp-block-group related-posts-block"><!-- wp:heading {"lock":{"move":true}} -->
-            <h2 class="wp-block-heading">' . __('Related Posts', 'planet4-blocks') . '</h2>
-            <!-- /wp:heading -->
-            ' . $see_all_link_group . '
-            </div>
+        <div class="wp-block-query posts-list p4-query-loop is-custom-layout-list">
+            <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
+                <div class="wp-block-group">
+                    <!-- wp:heading -->
+                        <h2 class="wp-block-heading">' . __('Related Posts', 'planet4-blocks') . '</h2>
+                    <!-- /wp:heading -->
+                    ' . $see_all_link_group . '
+                </div>
             <!-- /wp:group -->
-            <!-- wp:post-template {"lock":{"move":true,"remove":true}} -->
+            <!-- wp:post-template -->
                 <!-- wp:columns -->
-                <div class="wp-block-columns"><!-- wp:post-featured-image {"isLink":true} /-->
-                <!-- wp:group -->
-                <div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex"}} -->
-                <div class="wp-block-group"><!-- wp:post-terms {"term":"category","separator":" | "} /-->
-                <!-- wp:post-terms {"term":"post_tag","separator":" "} /--></div>
-                <!-- /wp:group -->
-                <!-- wp:post-title {"isLink":true} /-->
-                <!-- wp:post-excerpt /-->
-                <!-- wp:group {"className":"posts-list-meta"} -->
-                <div class="wp-block-group posts-list-meta"><!-- wp:post-author-name {"isLink":true} /-->
-                <!-- wp:post-date /--></div>
-                <!-- /wp:group --></div>
-                <!-- /wp:group --></div>
+                    <div class="wp-block-columns">
+                        <!-- wp:post-featured-image {"isLink":true} /-->
+                        <!-- wp:group -->
+                            <div class="wp-block-group">
+                                <!-- wp:group {"layout":{"type":"flex"}} -->
+                                    <div class="wp-block-group">
+                                        <!-- wp:post-terms {"term":"category","separator":" | "} /-->
+                                        <!-- wp:post-terms {"term":"post_tag","separator":" "} /-->
+                                    </div>
+                                <!-- /wp:group -->
+                                <!-- wp:post-title {"isLink":true} /-->
+                                <!-- wp:post-excerpt /-->
+                                <!-- wp:group {"className":"posts-list-meta"} -->
+                                    <div class="wp-block-group posts-list-meta">
+                                        <!-- wp:p4/post-author-name /-->
+                                        <!-- wp:post-date /-->
+                                    </div>
+                                <!-- /wp:group -->
+                            </div>
+                        <!-- /wp:group -->
+                    </div>
                 <!-- /wp:columns -->
             <!-- /wp:post-template -->
             ' . $see_all_link_group . '
-            </div>
-        <!-- /wp:query -->';
+        </div>
+    <!-- /wp:query -->';
 
     return do_blocks($output);
 }