feat(collections): replace intro section with collections block

includes/class-blocks.php

@@ -97,7 +97,8 @@ public static function enqueue_frontend_assets() {
 	private static function should_load_block_assets() {
 		return Collections::is_module_active() && (
 			( is_singular() && has_block( \Newspack\Blocks\Collections\Collections_Block::BLOCK_NAME, get_the_ID() ) ) ||
-			is_post_type_archive( \Newspack\Collections\Post_Type::get_post_type() )
+			is_post_type_archive( \Newspack\Collections\Post_Type::get_post_type() ) ||
+			is_singular( \Newspack\Collections\Post_Type::get_post_type() )
 		);
 	}
 }

includes/collections/class-template-helper.php

@@ -315,9 +315,7 @@ public static function render_cta( $cta ) {
 		}
 
 		$html = sprintf(
-			'<div class="collection-cta %1$s">
-				<a class="wp-block-button__link has-dark-gray-color has-light-gray-background-color has-text-color has-background has-link-color wp-element-button" href="%2$s">%3$s</a>
-			</div>',
+			'<a class="wp-block-button__link %1$s has-dark-gray-color has-light-gray-background-color has-text-color has-background has-link-color wp-element-button" href="%2$s">%3$s</a>',
 			esc_attr( $cta['class'] ?? '' ),
 			esc_url( $cta['url'] ?? '' ),
 			esc_html( $cta['label'] ?? '' )
@@ -507,6 +505,67 @@ public static function render_collections_grid( $collections ) {
 		);
 	}
 
+	/**
+	 * Render collections intro using the Collections block.
+	 *
+	 * @param int|WP_Post $post Post ID or post object.
+	 * @param array       $args Optional arguments for the intro section.
+	 * @return string The rendered collections intro HTML.
+	 */
+	public static function render_collections_intro( $post, $args = [] ) {
+		$collection = $post instanceof \WP_Post ? $post : get_post( $post );
+		if ( ! $collection instanceof \WP_Post ) {
+			return '';
+		}
+
+		$attrs = wp_parse_args(
+			$args,
+			[
+				'selectedCollections' => [ $collection ],
+				'layout'              => 'list',
+				'imageSize'           => 'small',
+				'showExcerpt'         => true,
+				'showCategory'        => false,
+				'numberOfCTAs'        => -1,
+				'showSeeAllLink'      => false,
+				'headingText'         => '',
+				'noPermalinks'        => false,
+			]
+		);
+
+		/**
+		 * Filters the attributes before rendering the collections intro block.
+		 *
+		 * @param array   $attrs      The attributes for the collections block.
+		 * @param WP_Post $collection The collection being rendered.
+		 * @param array   $args       The original arguments passed to the function.
+		 */
+		$attrs = apply_filters( 'newspack_collections_render_intro_attrs', $attrs, $collection, $args );
+
+		/**
+		 * Fires before the collection intro section.
+		 *
+		 * @param WP_Post $collection The collection post.
+		 */
+		do_action( 'newspack_collections_intro_before', $collection );
+
+		$output = render_block(
+			[
+				'blockName' => 'newspack/collections',
+				'attrs'     => $attrs,
+			]
+		);
+
+		/**
+		 * Fires after the collection intro section.
+		 *
+		 * @param WP_Post $collection The collection post.
+		 */
+		do_action( 'newspack_collections_intro_after', $collection );
+
+		return $output;
+	}
+
 	/**
 	 * Normalize an array that may contain WP_Post objects, IDs, or mixed.
 	 *

includes/templates/collections/archive-newspack-collection.php

@@ -30,19 +30,17 @@
 
 		<?php
 		if ( have_posts() ) :
+			global $wp_query;
+
 			$selected_year    = isset( $_GET[ Settings::YEAR_QUERY_PARAM ] ) ? sanitize_text_field( $_GET[ Settings::YEAR_QUERY_PARAM ] ) : '';
 			$highlight_latest = empty( $selected_year ) && ! is_paged() && Settings::get_setting( 'highlight_latest' );
 
 			// Render the intro section only if no year filter is applied, it's the first page of results and "Highlight Most Recent Collection" setting is enabled.
 			if ( $highlight_latest ) :
-				get_template_part(
-					Template_Helper::TEMPLATE_PARTS_DIR . 'newspack-collection-intro',
-					null,
-					[
-						'is_latest' => true,
-						'permalink' => true,
-					]
-				);
+				$latest_collection = $wp_query->posts[0] ?? null;
+				if ( $latest_collection ) {
+					echo wp_kses_post( Template_Helper::render_collections_intro( $latest_collection, [ 'headingText' => __( 'Latest', 'newspack-plugin' ) ] ) );
+				}
 
 				echo wp_kses_post( Template_Helper::render_separator( 'is-latest-collection' ) );
 			endif;
@@ -98,7 +96,6 @@
 
 			<!-- Collections grid -->
 			<?php
-			global $wp_query;
 			$collections = $wp_query->posts;
 
 			// Determine if first collection should be excluded (already shown in intro).

includes/templates/collections/single-newspack-collection.php

@@ -29,7 +29,7 @@
 			 */
 			do_action( 'newspack_collections_single_start', $post );
 
-			get_template_part( Template_Helper::TEMPLATE_PARTS_DIR . 'newspack-collection-intro' );
+			echo wp_kses_post( Template_Helper::render_collections_intro( get_the_ID(), [ 'noPermalinks' => true ] ) );
 
 			/**
 			 * Fires after the collection intro section.

src/blocks/collections/class-collections-block.php

@@ -56,6 +56,8 @@ final class Collections_Block {
 		'specificCTAs'        => '',
 		'showSeeAllLink'      => true,
 		'seeAllLinkText'      => '',
+		'headingText'         => '',
+		'noPermalinks'        => false,
 	];
 
 	/**
@@ -96,7 +98,7 @@ public static function render_block( array $attributes ) {
 		$attributes['numberOfItems'] = max( 1, absint( $attributes['numberOfItems'] ) );
 		$attributes['offset']        = max( 0, absint( $attributes['offset'] ) );
 		$attributes['columns']       = max( 1, absint( $attributes['columns'] ) );
-		$attributes['numberOfCTAs']  = max( 1, absint( $attributes['numberOfCTAs'] ) );
+		$attributes['numberOfCTAs']  = ( -1 === (int) $attributes['numberOfCTAs'] ) ? -1 : max( 1, absint( $attributes['numberOfCTAs'] ) );
 
 		// Normalize selectedCollections to determine if we have post objects or IDs.
 		$normalized_posts = Template_Helper::normalize_post_list( (array) $attributes['selectedCollections'] );
@@ -203,24 +205,37 @@ protected static function render_collection( $collection, $attributes ) {
 			<?php if ( $attributes['showFeaturedImage'] ) : ?>
 				<div class="wp-block-newspack-collections__image">
 					<?php if ( has_post_thumbnail( $collection ) ) : ?>
-						<?php echo wp_kses_post( Template_Helper::render_image( $collection->ID, $collection_url, $image_size ) ); ?>
+						<?php
+						$image_permalink = $attributes['noPermalinks'] ? false : $collection_url;
+						echo wp_kses_post( Template_Helper::render_image( $collection->ID, $image_permalink, $image_size ) );
+						?>
 					<?php else : ?>
 						<div class="wp-block-newspack-collections__placeholder" aria-hidden="true"></div>
 					<?php endif; ?>
 				</div>
 			<?php endif; ?>
 
 			<div class="wp-block-newspack-collections__content">
+				<?php if ( ! empty( $attributes['headingText'] ) ) : ?>
+					<h6 class="wp-block-newspack-collections__heading has-primary-color has-text-color has-link-color has-normal-font-size">
+						<?php echo esc_html( $attributes['headingText'] ); ?>
+					</h6>
+				<?php endif; ?>
+
 				<?php if ( $attributes['showCategory'] ) : ?>
 					<?php self::render_collection_categories( $collection ); ?>
 				<?php endif; ?>
 
 				<?php if ( $attributes['showTitle'] ) : ?>
-					<h3 class="wp-block-newspack-collections__title has-normal-font-size">
-						<a href="<?php echo esc_url( $collection_url ); ?>">
+					<h2 class="wp-block-newspack-collections__title">
+						<?php if ( ! $attributes['noPermalinks'] ) : ?>
+							<a href="<?php echo esc_url( $collection_url ); ?>">
+								<?php echo esc_html( get_the_title( $collection ) ); ?>
+							</a>
+						<?php else : ?>
 							<?php echo esc_html( get_the_title( $collection ) ); ?>
-						</a>
-					</h3>
+						<?php endif; ?>
+					</h2>
 				<?php endif; ?>
 
 				<?php
@@ -384,9 +399,11 @@ function ( $cta ) use ( $specific_labels ) {
 			);
 		}
 
-		// Limit to numberOfCTAs.
-		$max_ctas      = $attributes['numberOfCTAs'] ?? 1;
-		$filtered_ctas = array_slice( $filtered_ctas, 0, $max_ctas );
+		// Limit to numberOfCTAs (-1 means show all).
+		$max_ctas = $attributes['numberOfCTAs'] ?? 1;
+		if ( -1 !== $max_ctas ) {
+			$filtered_ctas = array_slice( $filtered_ctas, 0, $max_ctas );
+		}
 
 		/**
 		 * Filter the CTAs rendered by the collections block for a given collection.

src/blocks/collections/components/CollectionItem.jsx

@@ -158,15 +158,14 @@ const CollectionItem = ( { collection, attributes } ) => {
 				{ showCTAs && filteredCtas.length > 0 && (
 					<div className="wp-block-newspack-collections__ctas">
 						{ filteredCtas.map( ( cta, index ) => (
-							<div key={ `${ cta.label }-${ index }` } className="collection-cta">
-								<a
-									href="#"
-									onClick={ preventNav }
-									className="wp-block-button__link has-dark-gray-color has-light-gray-background-color has-text-color has-background has-link-color wp-element-button"
-								>
-									{ cta.label }
-								</a>
-							</div>
+							<a
+								key={ `${ cta.label }-${ index }` }
+								href="#"
+								onClick={ preventNav }
+								className="wp-block-button__link has-dark-gray-color has-light-gray-background-color has-text-color has-background has-link-color wp-element-button"
+							>
+								{ cta.label }
+							</a>
 						) ) }
 					</div>
 				) }

src/blocks/collections/styles/_ctas.scss

@@ -4,6 +4,10 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: 8px;
+
+		a {
+			width: 100%;
+		}
 	}
 
 	// See all collections link.

src/blocks/collections/styles/_layout-grid.scss

@@ -56,6 +56,7 @@
 
 		.wp-block-newspack-collections__title {
 			margin: 24px 0 0;
+			font-size: var(--newspack-theme-font-size-base);
 		}
 	}
 }