From 9e8378e024649e50ff04c6dddfd41d860e6a267b Mon Sep 17 00:00:00 2001
From: benazeer1909 <benazircpra@gmail.com>
Date: Mon, 23 Dec 2024 22:42:45 +0530
Subject: [PATCH] Adding list styling to latest post block

---
 docs/reference-guides/core-blocks.md             |  2 +-
 .../block-library/src/latest-posts/block.json    | 16 ++++------------
 packages/block-library/src/latest-posts/edit.js  | 15 +++++++++++++++
 .../block-library/src/latest-posts/editor.scss   |  2 +-
 .../block-library/src/latest-posts/index.php     |  3 +++
 .../block-library/src/latest-posts/style.scss    |  6 ++++++
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 7e031fa525e1f..1194359d5c3c6 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -406,7 +406,7 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
 -	**Name:** core/latest-posts
 -	**Category:** widgets
 -	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor
+-	**Attributes:** addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, enableBulletList, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor
 
 ## List
 
diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json
index 58b1c6da81ca3..2f534392743b3 100644
--- a/packages/block-library/src/latest-posts/block.json
+++ b/packages/block-library/src/latest-posts/block.json
@@ -80,6 +80,10 @@
 		"addLinkToFeaturedImage": {
 			"type": "boolean",
 			"default": false
+		},
+		"enableBulletList": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
@@ -111,18 +115,6 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalBorder": {
-			"radius": true,
-			"color": true,
-			"width": true,
-			"style": true,
-			"__experimentalDefaultControls": {
-				"radius": true,
-				"color": true,
-				"width": true,
-				"style": true
-			}
-		},
 		"interactivity": {
 			"clientNavigation": true
 		}
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 82f0661d04e40..e91499925c810 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -96,6 +96,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		featuredImageSizeWidth,
 		featuredImageSizeHeight,
 		addLinkToFeaturedImage,
+		enableBulletList,
 	} = attributes;
 	const {
 		imageSizes,
@@ -227,6 +228,19 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
+			{ postLayout === 'list' && (
+				<PanelBody title={ __( 'List Settings' ) }>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Enable Bullet List' ) }
+						checked={ enableBulletList }
+						onChange={ ( value ) =>
+							setAttributes( { enableBulletList: value } )
+						}
+					/>
+				</PanelBody>
+			) }
+
 			<PanelBody title={ __( 'Post content' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom
@@ -428,6 +442,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			'has-dates': displayPostDate,
 			'has-author': displayAuthor,
 			[ `columns-${ columns }` ]: postLayout === 'grid',
+			'is-bulleted': enableBulletList,
 		} ),
 	} );
 
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index fe90148097446..d3349500d76be 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-latest-posts {
 	// Apply overflow for post items, so any floated featured images won't crop the focus style.
 	> li {
-		overflow: hidden;
+		// overflow: hidden; // Commented out to allow for list-style-type to be displayed in the list item.
 	}
 }
 
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
index f8fd8ea27bc45..bde0f5301496a 100644
--- a/packages/block-library/src/latest-posts/index.php
+++ b/packages/block-library/src/latest-posts/index.php
@@ -211,6 +211,9 @@ function render_block_core_latest_posts( $attributes ) {
 	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
 		$classes[] = 'has-link-color';
 	}
+	if ( isset( $attributes['enableBulletList'] ) && $attributes['enableBulletList'] ) {
+		$classes[] = 'is-bulleted';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index 69a4746b5e751..721842613cb3f 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -13,6 +13,12 @@
 	&.wp-block-latest-posts__list {
 		list-style: none;
 
+		&.is-bulleted {
+			li {
+				list-style-type: disc;
+			}
+		}
+
 		li {
 			clear: both;
 			overflow-wrap: break-word;