Add support for cards style and popular categories

WordPress · Oct 25, 2023 · 648f338 · 648f338
1 parent a895fa0
commit 648f338
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 17 deletions.
diff --git a/mu-plugins/blocks/latest-news/latest-news.php b/mu-plugins/blocks/latest-news/latest-news.php
@@ -75,7 +75,7 @@ function render_block( $attributes ) {
 		if ( ! empty( $category ) ) {
 			if ( isset( $category[0] ) ) {
 				$category_element = sprintf(
-					'<a href="%1$s" class="wporg-latest-news__category">%2$s</a>',
+					'<a href="%1$s" class="wp-block-wporg-latest-news__category">%2$s</a>',
 					esc_html( get_category_link( $category[0]->term_id ) ),
 					esc_html( $category[0]->name )
 				);
@@ -90,19 +90,67 @@ function render_block( $attributes ) {
 		);
 
 		$list_items .= sprintf(
-			'<li>%1$s <div class="wporg-latest-news__details">%2$s %3$s %4$s</div></li>',
+			'<li>%1$s <div class="wp-block-wporg-latest-news__details">%2$s %3$s %4$s</div></li>',
 			$title_element,
 			$category_element,
 			! empty( $category_element ) ? '<span>·</span>' : '',
 			$date_element,
 		);
 	}
 
+	$popular_categories = '';
+
+	if ( $attributes['showCategories'] ) {
+		// Get the most popular categories.
+		$cache_key = 'wporg-latest-news-popular-categories';
+		$popular_categories_list = get_transient( $cache_key );
+
+		if ( ! $popular_categories_list ) {
+			$popular_categories_list = get_categories(
+				array(
+					'orderby'    => 'count',
+					'order'      => 'DESC',
+					'number'     => 3,
+					'hide_empty' => false,
+				)
+			);
+
+			if ( is_wp_error( $popular_categories_list ) ) {
+				return $popular_categories_list->get_error_message();
+			}
+
+			// Set Cache
+			set_transient( $cache_key, $popular_categories_list, HOUR_IN_SECONDS );
+		}
+
+		if ( ! empty( $popular_categories_list ) ) {
+			$popular_categories = '<div class="wp-block-wporg-latest-news__popular-categories">Popular categories: ';
+
+			foreach ( $popular_categories_list as $category ) {
+				$popular_categories .= sprintf(
+					'<a href="%1$s">%2$s</a>, ',
+					esc_attr( get_category_link( $category->term_id ) ),
+					esc_html( $category->name )
+				);
+			}
+
+			$popular_categories = rtrim( $popular_categories, ', ' );
+			$popular_categories .= '.</div>';
+		}
+	}
+
 	if ( $blog_switched ) {
 		restore_current_blog();
 	}
 
-	return sprintf( '<ul class="wporg-latest-news">%s</ul>', $list_items );
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<ul %1$s>%2$s</ul>%3$s',
+		$wrapper_attributes,
+		$list_items,
+		$popular_categories
+	);
 }
 
 /**
@@ -119,5 +167,13 @@ function block_init() {
 			'render_callback' => __NAMESPACE__ . '\render_block',
 		)
 	);
+
+	register_block_style(
+		'wporg/latest-news',
+		array(
+			'name'         => 'cards',
+			'label'        => __( 'Cards', 'wporg' ),
+		)
+	);
 }
 add_action( 'init', __NAMESPACE__ . '\block_init' );
diff --git a/mu-plugins/blocks/latest-news/postcss/style.pcss b/mu-plugins/blocks/latest-news/postcss/style.pcss
@@ -1,38 +1,96 @@
-.wporg-latest-news {
+.wp-block-wporg-latest-news {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
-.wporg-latest-news li:not(:last-child) {
+.wp-block-wporg-latest-news li:not(:last-child) {
 	padding-bottom: var(--wp--custom--latest-news--spacing, 16px);
 }
 
-.wporg-latest-news li a {
+.wp-block-wporg-latest-news li a {
 	text-decoration: none;
 }
 
-.wporg-latest-news li a:hover {
+.wp-block-wporg-latest-news li a:hover {
 	text-decoration: underline;
 }
 
-.wporg-latest-news li > a {
+.wp-block-wporg-latest-news:not(.is-style-cards) li > a {
 	display: block;
 	margin-bottom: var(--wp--custom--latest-news--link--spacing, 4px);
 	color: var(--wp--custom--latest-news--link--color);
 	font-family: var(--wp--custom--latest-news--title--font-family);
 	font-size: var(--wp--custom--latest-news--title--font-size, 24px);
 	line-height: var(--wp--custom--latest-news--title--line-height);
-}
 
-.wporg-latest-news__details {
-	font-size: var(--wp--custom--latest-news--link--details-font-size, 14px);
+	.wp-block-wporg-latest-news__details {
+		font-size: var(--wp--custom--latest-news--link--details-font-size, 14px);
+
+		> *:not(:last-child) {
+			margin-right: 4px;
+		}
+	}
 }
 
-.wporg-latest-news__details > *:not(:last-child) {
-	margin-right: 4px;
+.wp-block-wporg-latest-news.is-style-cards {
+	--local-details-column-width: 35%;
+
+	& li {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--wp--preset--spacing--20);
+		padding: var(--wp--preset--spacing--20);
+		border: 1px solid var(--wp--preset--color--light-grey-1);
+		color: var(--wp--preset--color--charcoal-1);
+
+		&:not(:last-child) {
+			border-bottom: unset;
+		}
+
+		&:first-child {
+			border-top-left-radius: 2px;
+			border-top-right-radius: 2px;
+		}
+
+		&:last-child {
+			border-bottom-left-radius: 2px;
+			border-bottom-right-radius: 2px;
+		}
+
+		@media screen and (max-width: 599px) {
+			flex-direction: column;
+			gap: var(--wp--preset--spacing--10);
+		}
+
+		&:hover {
+			background-color: var(--wp--preset--color--light-grey-2);
+			text-decoration: none !important;
+		}
+
+		&:focus-visible {
+			border-color: transparent;
+		}
+
+		& > a {
+			flex-basis: calc(100% - var(--local-details-column-width));
+		}
+
+		.wp-block-wporg-latest-news__details {
+			flex-basis: var(--local-details-column-width);
+			display: flex;
+			justify-content: space-between;
+			gap: var(--wp--preset--spacing--20);
+
+			& > span {
+				display: none;
+			}
+		}
+	}
 }
 
-.wporg-latest-news__category {
-	text-transform: uppercase;
+.wp-block-wporg-latest-news__popular-categories {
+	margin-top: var(--wp--preset--spacing--20) !important;
+	font-size: var(--wp--preset--font-size--small);
+	color: var(--wp--preset--color--charcoal-4);
 }
diff --git a/mu-plugins/blocks/latest-news/src/block.json b/mu-plugins/blocks/latest-news/src/block.json
@@ -18,6 +18,10 @@
 		"perPage": {
 			"type": "integer",
 			"default": 3
+		},
+		"showCategories": {
+			"type": "boolean",
+			"default": false
 		}
 	}
-}
+}
diff --git a/mu-plugins/blocks/latest-news/src/edit.js b/mu-plugins/blocks/latest-news/src/edit.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
+	CheckboxControl,
 	Disabled,
 	__experimentalNumberControl as NumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	PanelBody,
@@ -21,10 +22,11 @@ import ServerSideRender from '@wordpress/server-side-render';
  * @return {WPElement} Element to render.
  */
 export default function Edit( { attributes, setAttributes, name } ) {
-	const { blogId, perPage } = attributes;
+	const { blogId, perPage, showCategories } = attributes;
 
 	const onPerPageChange = ( value ) => setAttributes( { perPage: value * 1 } );
 	const onBlogIdChange = ( value ) => setAttributes( { blogId: Number( value ) } );
+	const onShowCategoriesChange = ( value ) => setAttributes( { showCategories: value } );
 
 	return (
 		<div { ...useBlockProps() }>
@@ -44,6 +46,11 @@ export default function Edit( { attributes, setAttributes, name } ) {
 						onChange={ onPerPageChange }
 						value={ perPage }
 					/>
+					<CheckboxControl
+						label={ __( 'Show Categories', 'wporg' ) }
+						onChange={ onShowCategoriesChange }
+						checked={ showCategories }
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<Disabled>