Pendant: Adjusted post navigation blocks and added theme-specific css to achieve design target (#5887)

pendant/patterns/post-navigation.php

@@ -6,9 +6,9 @@
  */
 ?>
 
-<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:post-navigation-link {"textAlign":"right","type":"previous","showTitle":true,"label":"<?php echo esc_html__( 'Previous Post', 'pendant' ); ?><br>"} /--></div>
+<!-- wp:columns {"isStackedOnMobile":false,"className":"pendant-post-navigation"} -->
+<div class="wp-block-columns is-not-stacked-on-mobile pendant-post-navigation"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:post-navigation-link {"textAlign":"right","type":"previous","showTitle":true,"label":"<?php echo esc_html__( 'Previous Post', 'pendant' ); ?><br>","linkLabel":true} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"33.33%"} -->
@@ -16,6 +16,6 @@
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class="wp-block-column"><!-- wp:post-navigation-link {"showTitle":true,"label":"<?php echo esc_html__( 'Next Post', 'pendant' ); ?><br>"} /--></div>
+<div class="wp-block-column"><!-- wp:post-navigation-link {"showTitle":true,"label":"<?php echo esc_html__( 'Next Post', 'pendant' ); ?><br>","linkLabel":true} /--></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->

pendant/style.css

@@ -229,11 +229,27 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	list-style-type: none;
 }
 
-.wp-block-post-navigation-link .post-navigation-link__label {
+
+ .pendant-post-navigation .wp-block-post-navigation-link .post-navigation-link__label {
 	font-family: var(--wp--preset--font-family--body-font);
 	font-size: var(--wp--preset--font-size--x-small);
-	font-weight: 500;
+	font-weight: 600;
 	letter-spacing: 0.1em;
 	text-transform: uppercase;
 	line-height: 3;
+}
+
+@media (max-width: 599px) {
+	.pendant-post-navigation .post-navigation-link__title {
+		display: none;
+	}
+	.pendant-post-navigation .wp-block-column:nth-of-type(2) {
+		display: none;
+	}	
+	.pendant-post-navigation .post-navigation-link-previous {
+		text-align: left;
+	}
+	.pendant-post-navigation .post-navigation-link-next {
+		text-align: right;
+	}
 }