@automattic/newspack-blocks 1.53.0 → 1.54.0

package/src/blocks/homepage-articles/templates/article.php

@@ -95,21 +95,18 @@ call_user_func(
 		<?php endif; ?>
 
 		<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 elseif ( $attributes['showCategory'] && $category ) : ?>
+			<?php if ( ! empty( $sponsors ) || ( $attributes['showCategory'] && $category ) ) : ?>
 				<?php $category_link = get_category_link( $category->term_id ); ?>
-				<div class="cat-links">
-					<?php if ( ! empty( $category_link ) ) : ?>
-						<a href="<?php echo esc_url( $category_link ); ?>">
+				<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; ?>
+					<?php if ( $attributes['showCategory'] && ! empty( $category_link ) && ( empty( $sponsors ) || Newspack_Blocks::newspack_display_sponsors_and_categories( $sponsors ) ) ) : ?>
+					<a href="<?php echo esc_url( $category_link ); ?>">
 						<?php echo esc_html( $category->name ); ?>
-					<?php if ( ! empty( $category_link ) ) : ?>
-						</a>
+					</a>
 					<?php endif; ?>
 				</div>
 				<?php
@@ -173,71 +170,79 @@ call_user_func(
 			if ( $show_author || $show_date || ! empty( $sponsors ) ) :
 				?>
 				<div class="entry-meta">
-					<?php if ( ! empty( $sponsors ) ) : ?>
-						<?php
-						$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 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'] );
+					<?php
+					if ( ! empty( $sponsors ) ) :
+						$sponsor_classes[] = 'entry-sponsors';
+						if ( Newspack_Blocks::newspack_display_sponsors_and_authors( $sponsors ) ) {
+							$sponsor_classes[] = 'plus-author';
 						}
 						?>
-					</span>
+						<span class="<?php echo esc_attr( implode( ' ', $sponsor_classes ) ); ?>">
+								<?php
+								$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 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'] );
+								}
+								?>
+							</span><!-- /.sponsor-byline -->
+						</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 ) :
 						$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

package/src/blocks/homepage-articles/utils.ts

@@ -198,9 +198,7 @@ const generatePreviewPost = ( id: PostId ) => {
 const getPreviewPosts = ( attributes: HomepageArticlesAttributes ) =>
 	times( attributes.postsToShow, generatePreviewPost );
 
-type Select = (
-	namespace: string
-) => {
+type Select = ( namespace: string ) => {
 	// core/blocks-editor
 	getBlocks: () => Block[];
 	// core/editor

package/src/blocks/homepage-articles/view.scss

@@ -1,6 +1,6 @@
-@import '../../shared/sass/variables';
-@import '../../shared/sass/mixins';
-@import '../../shared/sass/preview';
+@use '../../shared/sass/variables';
+@use '../../shared/sass/mixins';
+@use '../../shared/sass/preview';
 
 .wpnbha {
 	margin-bottom: 1em;
@@ -19,7 +19,7 @@
 
 	/* Section header */
 	.article-section-title {
-		font-size: $font__size-sm;
+		font-size: variables.$font__size-sm;
 		margin-bottom: 0.5em;
 		width: 100%; // make sure this isn't caught up in the flex styles.
 	}
@@ -39,13 +39,13 @@
 		article {
 			flex-basis: 100%;
 
-			@include media( tablet ) {
+			@include mixins.media( tablet ) {
 				margin-bottom: 1em;
 			}
 		}
 	}
 
-	@include media( mobile ) {
+	@include mixins.media( mobile ) {
 		&.columns-3 article,
 		&.columns-6 article {
 			flex-basis: calc( 33.333% - 16px );
@@ -62,7 +62,7 @@
 		}
 	}
 
-	@include media( tablet ) {
+	@include mixins.media( tablet ) {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } article,
 			&.columns-#{ $i } article:last-of-type {
@@ -87,7 +87,7 @@
 	}
 
 	figcaption {
-		font-size: $font__size-xxs;
+		font-size: variables.$font__size-xxs;
 	}
 
 	&.image-alignleft,
@@ -107,14 +107,14 @@
 			display: block;
 		}
 
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			&.mobile-stack .post-has-image {
 				display: flex;
 			}
 		}
 
 		// Image scale
-		@include media( mobile ) {
+		@include mixins.media( mobile ) {
 			&.is-4 {
 				.post-thumbnail {
 					flex-basis: 75%;
@@ -168,7 +168,7 @@
 		}
 	}
 
-	@include media( mobile ) {
+	@include mixins.media( mobile ) {
 		&.mobile-stack.image-alignleft .post-thumbnail {
 			margin-right: 1em;
 		}
@@ -277,7 +277,7 @@
 				width: 100%;
 				z-index: 2;
 
-				@include media( desktop ) {
+				@include mixins.media( desktop ) {
 					padding: 2rem 1.5rem;
 				}
 			}
@@ -310,7 +310,7 @@
 			text-overflow: ellipsis;
 			z-index: 2;
 
-			@include media( desktop ) {
+			@include mixins.media( desktop ) {
 				padding: 0 1.5rem;
 			}
 		}
@@ -365,14 +365,10 @@
 	&.has-text-align-center {
 		.cat-links,
 		.entry-meta,
-		.sponsor-logos {
+		.entry-sponsors {
 			justify-content: center;
 		}
 
-		.sponsor-logos > * {
-			margin: 0;
-		}
-
 		&.image-alignbehind figcaption,
 		figcaption {
 			text-align: inherit;
@@ -383,8 +379,10 @@
 	&.has-text-align-right {
 		.cat-links,
 		.entry-meta,
+		.entry-sponsors,
 		.sponsor-logos {
 			justify-content: flex-end;
+			text-align: right;
 		}
 
 		figcaption {
@@ -395,8 +393,7 @@
 			margin-left: 1.5em;
 		}
 
-		.entry-meta .byline:not( :last-child ),
-		.sponsor-logos > * {
+		.entry-meta .byline:not( :last-child ) {
 			margin: 0;
 		}
 	}
@@ -408,10 +405,17 @@ amp-script .wpnbha {
 	/* Article meta */
 	.cat-links {
 		display: flex;
-		font-size: $font__size-xxs;
+		flex-wrap: wrap;
+		font-size: variables.$font__size-xxs;
 		font-weight: bold;
 		margin: 0 0 0.5em;
 
+		&.sponsor-label {
+			align-items: center;
+			display: flex;
+			gap: 0.5em;
+		}
+
 		a {
 			text-decoration: none;
 
@@ -420,6 +424,30 @@ amp-script .wpnbha {
 			}
 		}
 	}
+
+	.entry-sponsors {
+		align-items: center;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.25em;
+		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 */
 
@@ -442,7 +470,7 @@ amp-script .wpnbha {
 			width: 25px;
 		}
 
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.6em;
 			}
@@ -460,7 +488,7 @@ amp-script .wpnbha {
 		.entry-title {
 			line-height: 1.1;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			article .avatar {
 				height: 2.4em;
 				width: 2.4em;
@@ -481,12 +509,12 @@ amp-script .wpnbha {
 		.entry-title {
 			font-size: 2.6em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3.6em;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 4.8em;
 			}
@@ -497,12 +525,12 @@ amp-script .wpnbha {
 		.entry-title {
 			font-size: 2.4em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3.4em;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 4.2em;
 			}
@@ -513,12 +541,12 @@ amp-script .wpnbha {
 		.entry-title {
 			font-size: 2.2em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 3em;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 3.6em;
 			}
@@ -529,7 +557,7 @@ amp-script .wpnbha {
 		.entry-title {
 			font-size: 2em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 2.4em;
 			}
@@ -538,7 +566,7 @@ amp-script .wpnbha {
 				width: 48px;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 3em;
 			}
@@ -552,7 +580,7 @@ amp-script .wpnbha {
 		.newspack-post-subtitle {
 			font-size: 1.4em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 2em;
 			}
@@ -561,7 +589,7 @@ amp-script .wpnbha {
 				width: 44px;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 2.4em;
 			}
@@ -575,7 +603,7 @@ amp-script .wpnbha {
 		.newspack-post-subtitle {
 			font-size: 1.2em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.8em;
 			}
@@ -584,7 +612,7 @@ amp-script .wpnbha {
 				width: 40px;
 			}
 		}
-		@include media( desktop ) {
+		@include mixins.media( desktop ) {
 			.entry-title {
 				font-size: 2em;
 			}
@@ -605,7 +633,7 @@ amp-script .wpnbha {
 		.entry-meta {
 			font-size: 0.7em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 1.2em;
 			}
@@ -630,7 +658,7 @@ amp-script .wpnbha {
 			font-size: 0.7em;
 		}
 
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.entry-title {
 				font-size: 0.9em;
 			}
@@ -654,7 +682,7 @@ amp-script .wpnbha {
 		.entry-meta {
 			font-size: 0.6em;
 		}
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			.avatar {
 				height: 24px;
 				width: 24px;
@@ -680,7 +708,7 @@ amp-script .wpnbha {
 		}
 	}
 
-	@include media( mobile ) {
+	@include mixins.media( mobile ) {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } article {
 				padding-right: calc( ( 16px * #{$i} ) / ( #{$i} - 1 ) );
@@ -715,7 +743,7 @@ amp-script .wpnbha {
 		}
 	}
 
-	@include media( tablet ) {
+	@include mixins.media( tablet ) {
 		&.is-grid {
 			article {
 				border-width: 0 1px 0 0;

package/src/blocks/iframe/edit.js

@@ -86,13 +86,15 @@ const IframeEdit = ( { attributes, setAttributes } ) => {
 			formData.append( 'archive_folder', archiveFolder );
 			formData.append( 'iframe_file', archiveFile );
 
-			const { src: iframeArchiveSrc, dir: iframeArchiveFolder, mode: iframeMode } = await apiFetch(
-				{
-					path: '/newspack-blocks/v1/newspack-blocks-iframe-archive',
-					method: 'POST',
-					body: formData,
-				}
-			);
+			const {
+				src: iframeArchiveSrc,
+				dir: iframeArchiveFolder,
+				mode: iframeMode,
+			} = await apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-iframe-archive',
+				method: 'POST',
+				body: formData,
+			} );
 
 			setAttributes( {
 				mode: iframeMode,
@@ -117,13 +119,15 @@ const IframeEdit = ( { attributes, setAttributes } ) => {
 			const formData = new FormData();
 			formData.append( 'media_id', mediaId );
 
-			const { src: iframeArchiveSrc, dir: iframeArchiveFolder, mode: iframeMode } = await apiFetch(
-				{
-					path: '/newspack-blocks/v1/newspack-blocks-iframe-archive-from-media',
-					method: 'POST',
-					body: formData,
-				}
-			);
+			const {
+				src: iframeArchiveSrc,
+				dir: iframeArchiveFolder,
+				mode: iframeMode,
+			} = await apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-iframe-archive-from-media',
+				method: 'POST',
+				body: formData,
+			} );
 
 			setAttributes( {
 				mode: iframeMode,

package/src/blocks/iframe/editor.scss

@@ -1,5 +1,5 @@
-@import '../../shared/sass/variables';
-@import '../../shared/sass/mixins';
+@use '../../shared/sass/variables';
+@use '../../shared/sass/mixins';
 
 .editor-styles-wrapper {
 	.components-form-file-upload {
@@ -44,7 +44,7 @@
 		width: 100%;
 		min-width: 200px;
 
-		@include media( tablet ) {
+		@include mixins.media( tablet ) {
 			width: 300px;
 		}
 

package/src/blocks/video-playlist/editor.scss

@@ -1,5 +1,5 @@
-@import '../../shared/sass/colors';
-@import '../../shared/sass/placeholder';
+@use '../../shared/sass/colors';
+@use '../../shared/sass/placeholder';
 
 /**
  * Prevents interaction with the player until the block is focused.

package/src/setup/editor.scss

@@ -1,6 +1,48 @@
-.block-editor-block-patterns-list__item {
-	.block-editor-block-preview__container {
-		max-height: 316px;
-		overflow: hidden;
+@import '~@wordpress/base-styles/colors';
+
+.editor-styles-wrapper {
+	.block-editor-block-patterns-list__item {
+		.block-editor-block-preview__container {
+			max-height: 316px;
+			overflow: hidden;
+		}
+	}
+
+	.newspack-blocks-placeholder-block {
+		background-color: white;
+		border-radius: 2px;
+		box-shadow: inset 0 0 0 1px $gray-900;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+			Cantarell, 'Helvetica Neue', sans-serif;
+		margin-top: 0;
+		padding: 1em;
+		p {
+			font-size: 13px;
+		}
+		&__label {
+			align-items: center;
+			display: flex;
+			flex-wrap: wrap;
+			font-size: 18pt;
+
+			svg {
+				display: block;
+				fill: currentcolor;
+				margin-right: 1ch;
+			}
+		}
+		&__buttons {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 16px;
+
+			.components-button {
+				margin: 0;
+
+				&.is-primary {
+					color: white;
+				}
+			}
+		}
 	}
 }