@automattic/newspack-blocks 1.53.0 → 1.54.0

package/src/blocks/author-list/editor.scss

@@ -1 +1 @@
-@import './view.scss';
+@use 'view.scss';

package/src/blocks/author-profile/edit.js

@@ -133,6 +133,7 @@ export const avatarSizeOptions = [
 
 const AuthorProfile = ( { attributes, setAttributes } ) => {
 	const [ author, setAuthor ] = useState( null );
+	const [ suggestions, setSuggestions ] = useState( null );
 	const [ error, setError ] = useState( null );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ maxItemsToSuggest, setMaxItemsToSuggest ] = useState( 0 );
@@ -155,7 +156,7 @@ const AuthorProfile = ( { attributes, setAttributes } ) => {
 		if ( 0 !== authorId ) {
 			getAuthorById();
 		}
-	}, [ authorId, avatarHideDefault ] );
+	}, [ authorId, avatarHideDefault, isGuestAuthor ] );
 
 	const getAuthorById = async () => {
 		setError( null );
@@ -367,6 +368,7 @@ const AuthorProfile = ( { attributes, setAttributes } ) => {
 				<SingleAuthor author={ author } attributes={ attributes } />
 			) : (
 				<Placeholder
+					className="newspack-blocks-author-profile"
 					icon={ <Icon icon={ postAuthor } /> }
 					label={ __( 'Author Profile', 'newspack-blocks' ) }
 				>
@@ -389,8 +391,11 @@ const AuthorProfile = ( { attributes, setAttributes } ) => {
 								'newspack-blocks'
 							) }
 							fetchSuggestions={ async ( search = null, offset = 0 ) => {
+								// Reset suggestions in state.
+								setSuggestions( null );
+
 								// If we already have a selected author, no need to fetch suggestions.
-								if ( authorId ) {
+								if ( authorId && ! error ) {
 									return [];
 								}
 
@@ -399,7 +404,6 @@ const AuthorProfile = ( { attributes, setAttributes } ) => {
 									path: addQueryArgs( '/newspack-blocks/v1/authors', {
 										search,
 										offset,
-										isGuestAuthor: true,
 										fields: 'id,name',
 									} ),
 								} );
@@ -412,17 +416,36 @@ const AuthorProfile = ( { attributes, setAttributes } ) => {
 									setMaxItemsToSuggest( total );
 								}
 
-								return authors.map( _author => ( {
+								const _suggestions = authors.map( _author => ( {
 									value: _author.id,
 									label: decodeEntities( _author.name ) || __( '(no name)', 'newspack' ),
 									isGuestAuthor: _author.is_guest,
 								} ) );
+
+								setSuggestions( _suggestions );
+
+								return _suggestions;
 							} }
 							maxItemsToSuggest={ maxItemsToSuggest }
 							onChange={ items => {
+								let selectionIsGuest = false;
+								const selection = items[ 0 ];
+
+								// We need to check whether the selected author is a guest author or not.
+								if ( suggestions ) {
+									suggestions.forEach( suggestion => {
+										if (
+											parseInt( selection?.value ) === parseInt( suggestion?.value ) &&
+											suggestion?.isGuestAuthor
+										) {
+											selectionIsGuest = true;
+										}
+									} );
+								}
+
 								setAttributes( {
-									authorId: parseInt( items[ 0 ]?.value || 0 ),
-									isGuestAuthor: items[ 0 ]?.isGuestAuthor || false,
+									authorId: parseInt( selection?.value || 0 ),
+									isGuestAuthor: selectionIsGuest,
 								} );
 							} }
 							postTypeLabel={ __( 'author', 'newspack-blocks' ) }

package/src/blocks/author-profile/editor.scss

@@ -1,7 +1,8 @@
-@import './view';
+@use 'view';
+@use '../../shared/sass/mixins';
 
 .editor-styles-wrapper {
-	.wp-block-newspack-blocks-author-profile {
+	.newspack-blocks-author-profile {
 		.components-notice {
 			margin: 0 0 2rem 0;
 			width: 100%;
@@ -22,7 +23,7 @@
 		}
 
 		&__bio {
-			@include media( mobile ) {
+			@include mixins.media( mobile ) {
 				flex: 4;
 
 				h3 {

package/src/blocks/author-profile/view.scss

@@ -1,8 +1,8 @@
-@import '../../shared/sass/variables';
-@import '../../shared/sass/mixins';
+@use '../../shared/sass/variables';
+@use '../../shared/sass/mixins';
 
 .wp-block-newspack-blocks-author-profile {
-	@include media( mobile ) {
+	@include mixins.media( mobile ) {
 		display: flex;
 	}
 
@@ -31,7 +31,7 @@
 	}
 
 	&__avatar {
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			flex: 0 1 auto;
 			margin-right: 1.5em;
 		}
@@ -52,7 +52,7 @@
 	}
 
 	&__bio {
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			flex: 4;
 
 			h3 {
@@ -78,7 +78,7 @@
 		}
 
 		svg {
-			fill: currentColor;
+			fill: currentcolor;
 		}
 	}
 
@@ -86,9 +86,9 @@
 		display: none;
 	}
 
-	// Avatar: Right
+	/* Avatar – Right */
 	&.avatar-right {
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			.wp-block-newspack-blocks-author-profile__avatar {
 				margin-left: 1.5em;
 				margin-right: 0;
@@ -97,7 +97,7 @@
 		}
 	}
 
-	// Style: Center
+	/* Style – Center */
 	&.is-style-center {
 		display: block;
 

package/src/blocks/carousel/edit.js

@@ -285,16 +285,24 @@ class Edit extends Component {
 											showAuthor ||
 											showDate ) && (
 											<div className="entry-wrapper">
-												{ post.newspack_post_sponsors && (
-													<span className="cat-links sponsor-label">
-														<span className="flag">{ post.newspack_post_sponsors[ 0 ].flag }</span>
-													</span>
-												) }
-												{ showCategory &&
+												{ ( post.newspack_post_sponsors || showCategory ) &&
 													0 < post.newspack_category_info.length &&
-													! post.newspack_post_sponsors && (
-														<div className="cat-links">
-															<a href="#">{ decodeEntities( post.newspack_category_info ) }</a>
+													( ! post.newspack_post_sponsors ||
+														post.newspack_sponsors_show_categories ) && (
+														<div
+															className={
+																'cat-links' +
+																( post.newspack_post_sponsors ? ' sponsor-label' : '' )
+															}
+														>
+															{ post.newspack_post_sponsors && (
+																<span className="flag">
+																	{ post.newspack_post_sponsors[ 0 ].flag }
+																</span>
+															) }
+															{ showCategory && (
+																<a href="#">{ decodeEntities( post.newspack_category_info ) }</a>
+															) }
 														</div>
 													) }
 												{ showTitle && (
@@ -303,16 +311,24 @@ class Edit extends Component {
 													</h3>
 												) }
 												<div className="entry-meta">
-													{ post.newspack_post_sponsors &&
-														formatSponsorLogos( post.newspack_post_sponsors ) }
-													{ post.newspack_post_sponsors &&
-														formatSponsorByline( post.newspack_post_sponsors ) }
+													{ post.newspack_post_sponsors && (
+														<span
+															className={ `entry-sponsors ${
+																post.newspack_sponsors_show_author ? 'plus-author' : ''
+															}` }
+														>
+															{ formatSponsorLogos( post.newspack_post_sponsors ) }
+															{ formatSponsorByline( post.newspack_post_sponsors ) }
+														</span>
+													) }
 													{ showAuthor &&
 														showAvatar &&
-														! post.newspack_post_sponsors &&
+														( ! post.newspack_post_sponsors ||
+															post.newspack_sponsors_show_author ) &&
 														formatAvatars( post.newspack_author_info ) }
 													{ showAuthor &&
-														! post.newspack_post_sponsors &&
+														( ! post.newspack_post_sponsors ||
+															post.newspack_sponsors_show_author ) &&
 														formatByline( post.newspack_author_info ) }
 													{ showDate && (
 														<time className="entry-date published" key="pub-date">

package/src/blocks/carousel/editor.scss

@@ -1,4 +1,4 @@
-@import '../../shared/sass/placeholder';
+@use '../../shared/sass/placeholder';
 
 .wpnbpc {
 	.swiper-wrapper {

package/src/blocks/carousel/view.php

@@ -103,35 +103,34 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 
 				<?php if ( ! empty( $sponsors ) || $attributes['showCategory'] || $attributes['showTitle'] || $show_author || $show_date ) : ?>
 					<div class="entry-wrapper">
-						<?php if ( ! empty( $sponsors ) ) : ?>
-						<span class="cat-links sponsor-label">
-							<span class="flag">
-								<?php echo esc_html( Newspack_Blocks::get_sponsor_label( $sponsors ) ); ?>
-							</span>
-						</span>
-							<?php
-						else :
-							$category = false;
+						<?php if ( ! empty( $sponsors ) || $attributes['showCategory'] ) : ?>
+							<div class="cat-links <?php if ( ! empty( $sponsors ) ) : ?>sponsor-label<?php endif; // phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace ?>">
+								<?php if ( ! empty( $sponsors ) ) : ?>
+									<span class="flag">
+										<?php echo esc_html( Newspack_Blocks::get_sponsor_label( $sponsors ) ); ?>
+									</span>
+									<?php
+								endif;
+								$category = false;
 
-							// Use Yoast primary category if set.
-							if ( class_exists( 'WPSEO_Primary_Term' ) ) {
-								$primary_term = new WPSEO_Primary_Term( 'category', $post_id );
-								$category_id  = $primary_term->get_primary_term();
-								if ( $category_id ) {
-									$category = get_term( $category_id );
+								// Use Yoast primary category if set.
+								if ( class_exists( 'WPSEO_Primary_Term' ) ) {
+									$primary_term = new WPSEO_Primary_Term( 'category', $post_id );
+									$category_id  = $primary_term->get_primary_term();
+									if ( $category_id ) {
+										$category = get_term( $category_id );
+									}
 								}
-							}
 
-							if ( ! $category ) {
-								$categories_list = get_the_category();
-								if ( ! empty( $categories_list ) ) {
-									$category = $categories_list[0];
+								if ( ! $category ) {
+									$categories_list = get_the_category();
+									if ( ! empty( $categories_list ) ) {
+										$category = $categories_list[0];
+									}
 								}
-							}
 
-							if ( $attributes['showCategory'] && $category ) :
-								?>
-								<div class="cat-links">
+								if ( $attributes['showCategory'] && $category && ( empty( $sponsors ) || Newspack_Blocks::newspack_display_sponsors_and_categories( $sponsors ) ) ) :
+									?>
 									<?php $category_link = get_category_link( $category->term_id ); ?>
 									<?php if ( ! empty( $category_link ) ) : ?>
 										<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
@@ -139,14 +138,14 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 										<?php echo esc_html( $category->name ); ?>
 									<?php if ( ! empty( $category_link ) ) : ?>
 									</a>
-									<?php endif; ?>
+										<?php
+										endif;
+									endif;
+								?>
 								</div>
-								<?php
-							endif;
+							<?php
 						endif;
-						?>
 
-						<?php
 						if ( $attributes['showTitle'] ) {
 							the_title( '<h3 class="entry-title"><a href="' . esc_url( $post_link ) . '" rel="bookmark">', '</a></h3>' );
 						}
@@ -155,70 +154,78 @@ function newspack_blocks_render_block_carousel( $attributes ) {
 						<div class="entry-meta">
 							<?php
 							if ( ! empty( $sponsors ) ) :
-								$logos = Newspack_Blocks::get_sponsor_logos( $sponsors );
-								if ( ! empty( $logos ) ) :
-									?>
-								<span class="sponsor-logos">
+								$sponsor_classes[] = 'entry-sponsors';
+								if ( Newspack_Blocks::newspack_display_sponsors_and_authors( $sponsors ) ) {
+									$sponsor_classes[] = 'plus-author';
+								}
+								?>
+								<span class="<?php echo esc_attr( implode( ' ', $sponsor_classes ) ); ?>">
 									<?php
-									foreach ( $logos as $logo ) {
-										if ( '' !== $logo['url'] ) {
-											echo '<a href="' . esc_url( $logo['url'] ) . '" target="_blank">';
-										}
-										echo '<img src="' . esc_url( $logo['src'] ) . '" alt="' . esc_attr( $logo['alt'] ) . '" width="' . esc_attr( $logo['width'] ) . '" height="' . esc_attr( $logo['height'] ) . '">';
-										if ( '' !== $logo['url'] ) {
-											echo '</a>';
+									$logos = Newspack_Blocks::get_sponsor_logos( $sponsors );
+									if ( ! empty( $logos ) ) :
+										?>
+									<span class="sponsor-logos">
+										<?php
+										foreach ( $logos as $logo ) {
+											if ( '' !== $logo['url'] ) {
+												echo '<a href="' . esc_url( $logo['url'] ) . '" target="_blank">';
+											}
+											echo '<img src="' . esc_url( $logo['src'] ) . '" alt="' . esc_attr( $logo['alt'] ) . '" width="' . esc_attr( $logo['width'] ) . '" height="' . esc_attr( $logo['height'] ) . '">';
+											if ( '' !== $logo['url'] ) {
+												echo '</a>';
+											}
 										}
-									}
-									?>
-								</span>
-								<?php endif; ?>
+										?>
+									</span>
+									<?php endif; ?>
 
-								<span class="byline sponsor-byline">
-									<?php
-									$bylines = Newspack_Blocks::get_sponsor_byline( $sponsors );
-									echo esc_html( $bylines[0]['byline'] ) . ' ';
-									foreach ( $bylines as $byline ) {
-										echo '<span class="author">';
-										if ( '' !== $byline['url'] ) {
-											echo '<a target="_blank" href="' . esc_url( $byline['url'] ) . '">';
+									<span class="byline sponsor-byline">
+										<?php
+										$bylines = Newspack_Blocks::get_sponsor_byline( $sponsors );
+										echo esc_html( $bylines[0]['byline'] ) . ' ';
+										foreach ( $bylines as $byline ) {
+											echo '<span class="author">';
+											if ( '' !== $byline['url'] ) {
+												echo '<a target="_blank" href="' . esc_url( $byline['url'] ) . '">';
+											}
+											echo esc_html( $byline['name'] );
+											if ( '' !== $byline['url'] ) {
+												echo '</a>';
+											}
+											echo '</span>' . esc_html( $byline['sep'] );
 										}
-										echo esc_html( $byline['name'] );
-										if ( '' !== $byline['url'] ) {
-											echo '</a>';
-										}
-										echo '</span>' . esc_html( $byline['sep'] );
-									}
-									?>
-								</span>
+										?>
+									</span>
+								</span><!-- .entry-sponsors -->
 								<?php
-							else :
-								if ( $show_author ) :
-									if ( $attributes['showAvatar'] ) :
-										echo wp_kses(
-											newspack_blocks_format_avatars( $authors ),
-											array(
-												'img'      => array(
-													'class' => true,
-													'src' => true,
-													'alt' => true,
-													'width' => true,
-													'height' => true,
-													'data-*' => true,
-													'srcset' => true,
-												),
-												'noscript' => array(),
-												'a'        => array(
-													'href' => true,
-												),
-											)
-										);
-									endif;
-									?>
-									<span class="byline">
-										<?php echo wp_kses_post( newspack_blocks_format_byline( $authors ) ); ?>
-									</span><!-- .author-name -->
-									<?php
+							endif;
+
+							if ( $show_author && ( empty( $sponsors ) || Newspack_Blocks::newspack_display_sponsors_and_authors( $sponsors ) ) ) :
+								if ( $attributes['showAvatar'] ) :
+									echo wp_kses(
+										newspack_blocks_format_avatars( $authors ),
+										array(
+											'img'      => array(
+												'class'  => true,
+												'src'    => true,
+												'alt'    => true,
+												'width'  => true,
+												'height' => true,
+												'data-*' => true,
+												'srcset' => true,
+											),
+											'noscript' => array(),
+											'a'        => array(
+												'href' => true,
+											),
+										)
+									);
 								endif;
+								?>
+								<span class="byline">
+									<?php echo wp_kses_post( newspack_blocks_format_byline( $authors ) ); ?>
+								</span><!-- .author-name -->
+								<?php
 							endif;
 							if ( $show_date ) :
 								printf(

package/src/blocks/carousel/view.scss

@@ -1,7 +1,7 @@
-@import '../../shared/sass/variables';
-@import '../../shared/sass/mixins';
-@import '../../shared/sass/colors';
-@import '../../shared/sass/preview';
+@use '../../shared/sass/variables';
+@use '../../shared/sass/mixins';
+@use '../../shared/sass/colors';
+@use '../../shared/sass/preview';
 
 .wpnbpc {
 	position: relative;
@@ -42,7 +42,7 @@
 			width: 1.8em;
 		}
 
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.6em;
 			}
@@ -98,7 +98,7 @@
 	}
 	&__placeholder {
 		height: 420px;
-		background: $color__background-screen;
+		background: colors.$color__background-screen;
 	}
 	p {
 		white-space: normal;
@@ -135,7 +135,7 @@
 		}
 
 		span {
-			@include visuallyHidden;
+			@include mixins.visuallyHidden;
 		}
 	}
 	.swiper-button,
@@ -170,7 +170,7 @@
 		display: none;
 		right: auto;
 
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			display: block;
 		}
 	}
@@ -238,7 +238,7 @@
 
 	/* Image styles */
 	figcaption {
-		font-size: $font__size-xxs;
+		font-size: variables.$font__size-xxs;
 	}
 
 	/* Headings */
@@ -265,6 +265,15 @@
 		font-size: 0.6em;
 		font-weight: bold;
 		margin: 0 0 0.5em;
+
+		&.sponsor-label {
+			align-items: center;
+
+			.flag + a {
+				margin-left: 0.5em;
+			}
+		}
+
 		a {
 			text-decoration: none;
 		}
@@ -274,6 +283,7 @@
 		display: block;
 		margin-right: 0.5em;
 	}
+
 	&.wp-block-newspack-blocks-carousel__autoplay-playing .amp-carousel-button-pause,
 	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-pause,
 	.amp-carousel-button-play,
@@ -310,7 +320,7 @@
 
 	&[data-slides-per-view='2'] article {
 		.entry-title {
-			@include media( tablet ) {
+			@include mixins.media( tablet ) {
 				font-size: 1.4em;
 			}
 		}
@@ -319,17 +329,46 @@
 	&.slides-per-view-3 article,
 	&.slides-per-view-4 article {
 		.entry-title {
-			@include media( tablet ) {
+			@include mixins.media( tablet ) {
 				font-size: 1.2em;
 			}
-			@include media( desktop ) {
+			@include mixins.media( desktop ) {
 				font-size: 1em;
 			}
 		}
 		.entry-meta {
-			@include media( tablet ) {
+			@include mixins.media( tablet ) {
 				font-size: 0.7em;
 			}
 		}
 	}
 }
+
+/* stylelint-disable selector-type-no-unknown  */
+.wpnbpc,
+amp-script .wpnbpc {
+	.entry-sponsors {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		width: 100%;
+
+		&.plus-author {
+			font-size: 0.9em;
+
+			&:not( :last-child ) {
+				margin-bottom: 0.5rem;
+			}
+		}
+	}
+
+	.sponsor-logos {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		line-height: 1;
+	}
+}
+/* stylelint-enable */

package/src/blocks/donate/block.json

@@ -0,0 +1,49 @@
+{
+	"name": "donate",
+	"category": "newspack",
+	"attributes": {
+		"className": {
+			"type": "string"
+		},
+		"manual": {
+			"type": "boolean"
+		},
+		"tiered": {
+			"type": "boolean",
+			"default": true
+		},
+		"amounts": {
+			"type": "object",
+			"default": {}
+		},
+		"disabledFrequencies": {
+			"type": "object",
+			"default": {}
+		},
+		"thanksText": {
+			"type": "string",
+			"default": "Your contribution is appreciated."
+		},
+		"buttonText": {
+			"type": "string",
+			"default": "Donate Now"
+		},
+		"defaultFrequency": {
+			"type": "string",
+			"default": "month"
+		},
+		"campaign": {
+			"type": "string"
+		},
+		"suggestedAmounts": {
+			"type": "array"
+		},
+		"suggestedAmountUntiered": {
+			"type": "number"
+		}
+	},
+	"supports": {
+		"html": false,
+		"align": false
+	}
+}