Add Alternating Grid block style for the Latest Posts block.

seedlet/assets/css/ie.css

@@ -2826,6 +2826,34 @@ img {
 	padding-right: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - 13px);
+		max-width: calc(50% - 13px);
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: 30px;
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/assets/css/style-editor.css

@@ -914,6 +914,34 @@ div[data-type="core/button"] {
 	line-height: var(--global--line-height-body);
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/assets/sass/blocks/latest-posts/_editor.scss

@@ -64,3 +64,40 @@
 		line-height: var(--global--line-height-body);
 	}
 }
+
+@include media(tablet) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+
+		// Necessary so that the block boundaries are respected.
+		overflow: hidden;
+		
+		> li {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			text-align: right;
+
+			&:nth-child(2n + 1) {
+				float: right;
+				text-align: left;
+			}
+		}
+
+
+		&.is-grid {
+			display: inherit;
+
+			> li {
+				margin-top: var(--global--spacing-vertical);
+				margin-right: 0;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+}

seedlet/assets/sass/blocks/latest-posts/_style.scss

@@ -93,3 +93,40 @@
 		}
 	}
 }
+
+@include media(tablet) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+
+		// Necessary so that the block boundaries are respected.
+		overflow: hidden;
+		
+		> li {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			text-align: right;
+
+			&:nth-child(2n + 1) {
+				float: right;
+				text-align: left;
+			}
+		}
+
+
+		&.is-grid {
+			display: inherit;
+
+			> li {
+				margin-top: var(--global--spacing-vertical);
+				margin-right: 0;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+}

seedlet/functions.php

@@ -445,6 +445,11 @@ require get_template_directory() . '/inc/customizer.php';
  */
 require get_template_directory() . '/inc/block-patterns.php';
 
+/**
+ * Block Styles.
+ */
+require get_template_directory() . '/inc/block-styles.php';
+
 /**
  * Load WooCommerce compatibility file.
  */

seedlet/inc/block-styles.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Seedlet Theme: Block Styles
+ *
+ * @package Seedlet
+ * @since 1.0.0
+ */
+
+if ( function_exists( 'register_block_style' ) ) {
+	function seedlet_register_block_styles() {
+
+		/**
+		 * Register block style
+		 */
+		register_block_style(
+			'core/latest-posts',
+			array(
+				'name'         => 'seedlet-alternating-grid',
+				'label'        => 'Alternating Grid',
+				'style_handle' => 'seedlet-alternating-grid',
+			)
+		);
+	}
+
+	add_action( 'init', 'seedlet_register_block_styles' );
+}

seedlet/style-rtl.css

@@ -1787,6 +1787,34 @@ img {
 	padding-left: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: left;
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-left: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;

seedlet/style.css

@@ -1795,6 +1795,34 @@ img {
 	padding-right: 0;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		text-align: right;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid > li:nth-child(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid {
+		display: inherit;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li {
+		margin-top: var(--global--spacing-vertical);
+		margin-right: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:first-child {
+		margin-top: 0;
+	}
+	.wp-block-latest-posts.is-style-seedlet-alternating-grid.is-grid > li:last-child {
+		margin-bottom: 0;
+	}
+}
+
 .gallery-item {
 	display: inline-block;
 	text-align: center;