Adding list styling to latest post block

WordPress · Dec 23, 2024 · 9e8378e · 9e8378e
1 parent dad1fab
commit 9e8378e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;