Skip to content

feat: add tag labels to the Carousel block #429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jason10lee wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: add tag labels to the Carousel block #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de75280
feat: add tag labels support to Carousel block
jason10lee Jun 25, 2026
c00f62b
fix: render tag labels after category on the same line
jason10lee Jun 25, 2026
fb59a93
fix: order tag labels after category in archive, search, and editor
jason10lee Jun 25, 2026
e098961
Merge branch 'main' into feat/tag-labels-carousel
jason10lee Jun 30, 2026
5705474
fix(carousel): include tag labels in editor wrapper gate
jason10lee Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions plugins/newspack-blocks/src/blocks/carousel/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@
"type": "boolean",
"default": false
},
"showTagLabels": {

@dkoo dkoo Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: showTagLabels defaults to true, so any existing Carousel block with no saved value will begin rendering flagged tag labels on the next load, with no editor action. This matches the already-merged Content Loop default, so it's consistent — just worth a release-notes line so the rollout isn't a surprise for publishers.

"type": "boolean",
"default": true
},
"showTitle": {
"type": "boolean",
"default": true
Expand Down
22 changes: 22 additions & 0 deletions plugins/newspack-blocks/src/blocks/carousel/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ class Edit extends Component {
postsToShow,
postType,
showCategory,
showTagLabels,
showDate,
showAuthor,
showAvatar,
Expand Down Expand Up @@ -334,6 +335,11 @@ class Edit extends Component {
checked={ showCategory }
onChange={ () => setAttributes( { showCategory: ! showCategory } ) }
/>
<ToggleControl
label={ __( 'Show tag labels', 'newspack-blocks' ) }
checked={ showTagLabels }
onChange={ () => setAttributes( { showTagLabels: ! showTagLabels } ) }
/>
<ToggleControl
label={ __( 'Show author', 'newspack-blocks' ) }
checked={ showAuthor }
Expand Down Expand Up @@ -388,6 +394,7 @@ class Edit extends Component {
</figure>
{ ( post.newspack_post_sponsors ||
showCategory ||
( showTagLabels && post.newspack_tag_labels ) ||
showTitle ||
showAuthor ||
showDate ||
Expand All @@ -405,6 +412,21 @@ class Edit extends Component {
) }
</div>
) }
{ showTagLabels && post.newspack_tag_labels && (
<div className="cat-links tag-labels">
{ post.newspack_tag_labels.map( ( newspack_tag_label, index ) => {
return newspack_tag_label.link ? (
<a key={ index } href="#" className="tag-label flag">
{ newspack_tag_label.flag }
</a>
) : (
<span key={ index } className="tag-label flag">
{ newspack_tag_label.flag }
</span>
);
} ) }
</div>
) }
{ showTitle && (
<h3 className="entry-title">
<a href="#">{ decodeEntities( post.title.rendered.trim() ) }</a>
Expand Down
14 changes: 13 additions & 1 deletion plugins/newspack-blocks/src/blocks/carousel/view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@ function newspack_blocks_render_block_carousel( $attributes ) {
// Get sponsors for this post.
$sponsors = Newspack_Blocks::get_all_sponsors( $post_id );

// Get tag labels for this post, but only when the block is set to show them
// (avoids a per-post taxonomy lookup when tag labels are disabled).
$tag_labels = ( $attributes['showTagLabels'] ?? true ) ? Newspack_Blocks::get_tag_labels( $post_id ) : null;

$counter++;
$has_featured_image = has_post_thumbnail();
$post_type = get_post_type();
Expand Down Expand Up @@ -110,7 +114,7 @@ function newspack_blocks_render_block_carousel( $attributes ) {
<?php endif; ?>
</figure>

<?php if ( ! empty( $sponsors ) || $attributes['showCategory'] || $attributes['showTitle'] || $show_author || $show_date || $show_caption || $show_credit ) : ?>
<?php if ( ! empty( $sponsors ) || $attributes['showCategory'] || ! empty( $tag_labels ) || $attributes['showTitle'] || $show_author || $show_date || $show_caption || $show_credit ) : ?>
<div class="entry-wrapper">
<?php if ( ! empty( $sponsors ) || $attributes['showCategory'] ) : ?>
<div class="cat-links <?php if ( ! empty( $sponsors ) ) : ?>sponsor-label<?php endif; // phpcs:ignore Squiz.ControlStructures.ControlSignature.NewlineAfterOpenBrace ?>">
Expand All @@ -129,6 +133,10 @@ function newspack_blocks_render_block_carousel( $attributes ) {
<?php
endif;

if ( ! empty( $tag_labels ) ) {
Newspack_Blocks::display_tag_labels( $tag_labels );
}

if ( $attributes['showTitle'] ) {
the_title( '<h3 class="entry-title"><a href="' . esc_url( $post_link ) . '" rel="bookmark">', '</a></h3>' );
}
Expand Down Expand Up @@ -382,6 +390,10 @@ function newspack_blocks_register_carousel() {
'type' => 'boolean',
'default' => false,
),
'showTagLabels' => array(
'type' => 'boolean',
'default' => true,
),
'showDate' => array(
'type' => 'boolean',
'default' => true,
Expand Down
1 change: 1 addition & 0 deletions themes/newspack-theme/newspack-theme/inc/newspack-tag-labels.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ function newspack_tag_labels_styles() {
.tag-labels .tag-label.flag,
amp-script .tag-labels .tag-label.flag,
.wpnbha .tag-labels a.flag,
.wpnbpc .tag-labels a.flag,
.featured-image-behind .tag-labels a.flag {
background: <?php echo esc_attr( $flag_color ); ?>;
color: <?php echo esc_attr( $flag_color_contrast ); ?>;
Expand Down
9 changes: 7 additions & 2 deletions themes/newspack-theme/newspack-theme/sass/plugins/newspack-tag-labels-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,15 @@

.block-editor {
article {
.tag-labels,
.tag-labels + .cat-links {
// Tag labels follow the category on the same line (category → tag), matching the
// front-end order.
.cat-links:not( .sponsor-label ):has( + .tag-labels ),
.tag-labels {
display: inline-flex;
}
.cat-links + .tag-labels {
margin-left: 0.5em;
}
.tag-label + .tag-label {
margin-left: 0.3em; // Don't collapse multiple labels.
}
Expand Down
47 changes: 31 additions & 16 deletions themes/newspack-theme/newspack-theme/sass/plugins/newspack-tag-labels.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,42 @@ amp-script .tag-labels {
}
/* stylelint-enable */

// Tag labels render after the category (and sponsor) label and sit on the same line,
// mirroring the sponsor → category convention. The category `.cat-links` is immediately
// followed by the tag-labels `.cat-links.tag-labels` in every context (single posts,
// home, archive, search, and the Content Loop / Carousel blocks), so keep it inline-block
// and space the tag labels that follow it. The sponsor `.cat-links.sponsor-label` keeps
// its own layout (from newspack-sponsors), so it is excluded here.
.cat-links:not( .sponsor-label ):has( + .tag-labels ) {

@dkoo dkoo Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: The category's inline adjustment depends on the CSS :has() selector. On a browser without :has() support the category stays block-level and the tag labels drop to the next line — graceful degradation, and :has() is broadly supported now, so this is acceptable; noting only because it's the one hard dependency the layout introduces.

display: inline-block;
}
.cat-links + .tag-labels {

@dkoo dkoo Jul 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: The global .cat-links + .tag-labels inline rule doesn't fire when the preceding label is a sponsor .cat-links.sponsor-label (deliberately excluded from the :has() inline rule so sponsors keep their own flex/gap layout). In the native-sponsors, sponsor-only-display branch that means the tag labels can wrap onto a new line below the sponsor rather than sitting inline. The inline comment suggests this is intentional, but it's the one branch where the same-line goal doesn't hold — worth a quick visual check on a sponsored post that also has flagged tags before merge.

display: inline-flex;
margin-left: 0.5em;
}

// In the Content Loop (`.wpnbha`) and Carousel (`.wpnbpc`) blocks the category
// `.cat-links` is block-level (`display: flex` in `.wpnbha`, default block in `.wpnbpc`),
// which would stack the category and the tag labels that follow it. Re-assert
// `inline-flex` with higher specificity so the category and tag labels share one line.
// Sponsor rows (`.cat-links.sponsor-label`) are excluded so their own `flex`/`gap`
// layout wins deterministically.
.wpnbha,
.wpnbpc {
.cat-links:not( .sponsor-label ):has( + .tag-labels ),
.cat-links + .tag-labels {
display: inline-flex;
}
.cat-links + .tag-labels {
margin-left: 0.5em;
}
}

/* Single Posts */
.single {
// When categories are visible
.tag-labels {
display: inline-flex;
}
// Labels render before categories (matching the sponsor-label convention),
// so space the category that follows a label — mirrors `.sponsor-label + .cat-links`.
.tag-labels + .cat-links {
display: inline-block;
margin-left: 0.5em;
}

// Workaround margin/padding override for featured images.
.featured-image-behind {
Expand Down Expand Up @@ -76,18 +100,9 @@ amp-script .tag-labels {
}
}

// Re-show the category that follows a tag label on search results.
.search article .tag-labels + .cat-links {
display: inline-flex;
}

// Home page.
.home {
article {
.tag-labels,
.tag-labels + .cat-links {
display: inline-flex;
}
.tag-labels a,
.tag-labels a:hover {
padding: 0.3em 0.5em;
Expand Down
8 changes: 4 additions & 4 deletions themes/newspack-theme/newspack-theme/template-parts/content/content-archive.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@
if ( ! empty( $native_sponsors ) ) {
// Get label for native post sponsors.
newspack_sponsor_label( $native_sponsors );
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
if ( $display_sponsors_and_categories ) {
newspack_categories();
}
} else {
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
} else {
newspack_categories();
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
}
}
?>
Expand Down
8 changes: 4 additions & 4 deletions themes/newspack-theme/newspack-theme/template-parts/content/content-excerpt.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@
if ( ! empty( $native_sponsors ) ) {
// Get label for native post sponsors.
newspack_sponsor_label( $native_sponsors );
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
if ( $display_sponsors_and_categories ) {
newspack_categories();
}
} else {
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
} else {
newspack_categories();
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
}
}
?>
Expand Down
8 changes: 4 additions & 4 deletions themes/newspack-theme/newspack-theme/template-parts/header/entry-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@
if ( ! is_page() ) :
if ( ! empty( $native_sponsors ) ) {
newspack_sponsor_label( $native_sponsors, null, true );
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
if ( $display_sponsors_and_categories ) {
newspack_categories();
}
} else {
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
} else {
newspack_categories();
if ( $tag_labels ) {
newspack_display_tag_labels( $tag_labels );
}
}
endif;
?>
Expand Down
Loading