From 648f338aa01260b7dc76e90efcb30fce0fd9d5a1 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Wed, 25 Oct 2023 12:55:25 +1300 Subject: [PATCH] Add support for cards style and popular categories --- mu-plugins/blocks/latest-news/latest-news.php | 62 +++++++++++++- .../blocks/latest-news/postcss/style.pcss | 82 ++++++++++++++++--- mu-plugins/blocks/latest-news/src/block.json | 6 +- mu-plugins/blocks/latest-news/src/edit.js | 9 +- 4 files changed, 142 insertions(+), 17 deletions(-) diff --git a/mu-plugins/blocks/latest-news/latest-news.php b/mu-plugins/blocks/latest-news/latest-news.php index 2216d8c9f..5a0eee5cd 100644 --- 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( - '%2$s', + '%2$s', esc_html( get_category_link( $category[0]->term_id ) ), esc_html( $category[0]->name ) ); @@ -90,7 +90,7 @@ function render_block( $attributes ) { ); $list_items .= sprintf( - '
  • %1$s
    %2$s %3$s %4$s
    • ', + '
  • %1$s
    %2$s %3$s %4$s
    • ', $title_element, $category_element, ! empty( $category_element ) ? 'ยท' : '', @@ -98,11 +98,59 @@ function render_block( $attributes ) { ); } + $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 = '
    Popular categories: '; + + foreach ( $popular_categories_list as $category ) { + $popular_categories .= sprintf( + '%2$s, ', + esc_attr( get_category_link( $category->term_id ) ), + esc_html( $category->name ) + ); + } + + $popular_categories = rtrim( $popular_categories, ', ' ); + $popular_categories .= '.
    '; + } + } + if ( $blog_switched ) { restore_current_blog(); } - return sprintf( '', $list_items ); + $wrapper_attributes = get_block_wrapper_attributes(); + + return sprintf( + '%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 index 824f8c1d4..ecc62c52f 100644 --- 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 index 457e00ec8..16ec96123 100644 --- 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 } } -} \ No newline at end of file +} diff --git a/mu-plugins/blocks/latest-news/src/edit.js b/mu-plugins/blocks/latest-news/src/edit.js index 88100b423..61b3bc5e9 100644 --- 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 (
    @@ -44,6 +46,11 @@ export default function Edit( { attributes, setAttributes, name } ) { onChange={ onPerPageChange } value={ perPage } /> +