Add option to show latest posts with 2 or 3 columns

verdigado · Sep 2, 2024 · 1418261 · 1418261
1 parent 29c0ddb
commit 1418261
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/latest-posts/block.json b/src/latest-posts/block.json
@@ -31,6 +31,10 @@
 			"type": "string",
 			"default": "grid"
 		},
+		"columns": {
+			"type": "number",
+			"default": 2
+		},
 		"excerptLength": {
 			"type": "number",
 			"default": 55

diff --git a/src/latest-posts/edit.js b/src/latest-posts/edit.js
@@ -63,6 +63,7 @@ export default function Edit( { attributes, setAttributes } ) {
 		count,
 		archiveText,
 		blockLayout,
+		columns,
 	} = attributes;
 
 	const [ categoriesFormSuggestions, setCategoriesFormSuggestions ] =
@@ -250,6 +251,20 @@ export default function Edit( { attributes, setAttributes } ) {
 							value={ archiveText }
 							onChange={ onChangeArchiveText }
 						/>
+						{ blockLayout === 'grid' && (
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Columns' ) }
+								value={ columns }
+								onChange={ ( value ) =>
+									setAttributes( { columns: value } )
+								}
+								min={ 2 }
+								max={ 3 }
+								required
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			}

diff --git a/src/latest-posts/render.php b/src/latest-posts/render.php
@@ -9,9 +9,11 @@
 $sunflower_classnames[] = 'has-background';
 $sunflower_classnames[] = 'latest-posts';
 
-$sunflower_is_grid = false;
+$sunflower_columns = 1;
 if ( isset( $attributes['blockLayout'] ) && 'grid' === $attributes['blockLayout'] ) {
-	$sunflower_is_grid = true;
+	if ( isset( $attributes['columns'] ) ) {
+		$sunflower_columns = $attributes['columns'];
+	}
 }
 
 $sunflower_count = isset( $attributes['count'] ) ? (int) $attributes['count'] : 6;
@@ -60,7 +62,17 @@
 	$sunflower_title
 );
 
-$sunflower_css_col = true === $sunflower_is_grid ? 'col-md-6' : 'col-12';
+switch ( $sunflower_columns ) {
+	case 1:
+		$sunflower_css_col = 'col-12';
+		break;
+	case 2:
+		$sunflower_css_col = 'col-md-6';
+		break;
+	case 3:
+		$sunflower_css_col = 'col-md-4';
+		break;
+}
 
 while ( $sunflower_posts->have_posts() ) {
 	$sunflower_posts->the_post();