RSS Block: Add option to open links in new tab/window and control rel attributes by dhruvikpatel18 · Pull Request #69641 · WordPress/gutenberg

dhruvikpatel18 · 2025-03-20T11:06:51Z

Closes #49285

What?

This PR adds new options to the RSS block allowing users to:

Open RSS feed links in a new tab/window
Add custom rel attributes to links through a simple text input

Why?

When linking to external websites through an RSS feed, users often want the ability to:

Open links in a new tab to keep visitors on their site
Add rel attributes for SEO or linking purposes

Testing Instructions

Add an RSS block to a post or page
Enter a valid RSS feed URL
In the block sidebar, locate the "Settings" panel
Toggle "Open links in new tab" to ON and verify links open in a new tab
Add rel attributes like "nofollow sponsored" in the "Link Rel" field in Advanced panel
Verify that the HTML output includes all expected attributes

Screenshots or screencast

RSS.block.mov

github-actions · 2025-03-20T11:36:59Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: bhubbard <bhubbard@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Mamaduka · 2025-03-24T16:26:08Z

packages/block-library/src/rss/block.json

+		"addNofollow": {
+			"type": "boolean",
+			"default": false
+		},
+		"additionalRelAttributes": {
+			"type": "string",
+			"default": ""


I think there's no need to have two separate attributes for rel. Maybe we should just display single text control, using a single attribute (linkRel) and let people input nofollow or any additional field as needed.

Mamaduka · 2025-03-24T16:29:24Z

packages/block-library/src/rss/index.php

+
+	if ( ! empty( $attributes['openInNewTab'] ) ) {
+		$link_attributes .= ' target="_blank"';
+		$rel_attributes[] = 'noopener noreferrer';


As far as I know, these values are no longer required. See related discussion in #26914.

dhruvikpatel18 · 2025-03-25T09:58:12Z

@Mamaduka Thank you for the feedback!

I've updated the implementation to address your suggestions:

Consolidated the rel attributes into a single linkRel attribute
Removed the separate addNofollow boolean
Simplified the input to a single text control for rel attributes
Removed automatic noopener noreferrer attributes as suggested

Mamaduka

Thank you, @dhruvikpatel18!

I just remembered that the Social Icon block also has a custom "Rel" field, let's match UI and implementation (minus HTML API) to it.

P.S. Rebasing should resolve failing e2e tests.

Mamaduka · 2025-03-25T10:10:06Z

packages/block-library/src/rss/index.php

+	if ( ! empty( $rel_attributes ) ) {
+		$link_attributes .= ' rel="' . esc_attr( implode( ' ', array_unique( $rel_attributes ) ) ) . '"';
+	}


I think this is unnecessary; you're already assigning value above.

PS There're some WPCS violations in this file that also need to be fixed.

Mamaduka · 2025-03-25T10:13:54Z

packages/block-library/src/rss/block.json

+			"type": "boolean",
+			"default": false
+		},
+		"linkRel": {


Suggested change

"linkRel": {

"rel": {

I just remembered that the Social Icons block also has a custom rel handler; let's make it consistent.

gutenberg/packages/block-library/src/social-link/block.json

Lines 22 to 24 in bb9028d

"rel": {

"type": "string"

}

Mamaduka · 2025-03-25T10:15:58Z

packages/block-library/src/rss/index.php

+		$rel_attributes = explode( ' ', $attributes['linkRel'] );
+		$rel_attributes = array_filter( array_map( 'sanitize_html_class', $rel_attributes ) );
+
+		if ( ! empty( $rel_attributes ) ) {
+			$link_attributes .= ' rel="' . esc_attr( implode( ' ', $rel_attributes ) ) . '"';
+		}


Do we really need all this sanitization for escaped value? Could this be something like:

$link_attributes .= ' rel="' . esc_attr( trim( $attributes['rel'] ) ) . '"';

Mamaduka · 2025-03-26T10:35:31Z

packages/block-library/src/rss/index.php

+			$processor = new WP_HTML_Tag_Processor( "<a href='{$link}'>{$title}</a>" );
+			$processor->next_tag( 'a' );
+
+			if ( $open_in_new_tab ) {
+				$processor->set_attribute( 'target', '_blank' );
+				$processor->set_attribute( 'rel', trim( $rel . ' noopener nofollow' ) );
+			} elseif ( '' !== $rel ) {
+				$processor->set_attribute( 'rel', $rel );
+			}
+
+			$title = "<div class='wp-block-rss__item-title'>" . $processor->get_updated_html() . "</div>";


@dhruvikpatel18, I'm sorry if my previous comment was unclear, but as I mentioned, we don't need to use HTML API here.

@Mamaduka Sorry for misunderstanding your previous feedback, Removed HTML API usage.

Mamaduka · 2025-03-26T10:53:18Z

packages/block-library/src/rss/index.php

+			$link_attributes .= ' rel="' . esc_attr( trim( $rel . ' noopener nofollow' ) ) . '"';
+		} elseif ( '' !== $rel ) {
+			$link_attributes .= ' rel="' . esc_attr( trim( $rel ) ) . '"';


I think we can drop noopener. See: #26914 (comment).

Additionally, $rel is already trimmed above, and another trim call seems unnecessary.

I also realized that this leaves nofollow hardcoded, and users won't be able to remove it, if the link opens in a new tab. Not 100% sure what the desired flow is here.

You're right about the hardcoded nofollow, actually it was there from previous implementation which i referred from social-link block.

Mamaduka · 2025-03-26T10:57:15Z

@dhruvikpatel18, IIRC you can fix a failing JS unit test by running npm run fixtures:regenerate.

Mamaduka · 2025-03-26T11:11:36Z

packages/block-library/src/rss/index.php

+		if ( $open_in_new_tab ) {
+			$link_attributes .= ' target="_blank"';
+
+			if ( '' !== $rel ) {
+				$link_attributes .= ' rel="' . esc_attr( $rel ) . '"';
+			}
+		} elseif ( '' !== $rel ) {
+			$link_attributes .= ' rel="' . esc_attr( $rel ) . '"';
+		}


Suggestion: The conditions here can be simplified.

if ( $open_in_new_tab ) { $link_attributes .= ' target="_blank"'; } if ( '' !== $rel ) { $link_attributes .= ' rel="' . esc_attr( $rel ) . '"'; }

Mamaduka

Thank you, @dhruvikpatel18!

The implementation looks good. There's one last nitpick, but generally, I think this is good to merge.

Mamaduka · 2025-03-26T11:34:56Z

packages/block-library/src/rss/index.php

+		if ( $open_in_new_tab ) {
+			$link_attributes .= ' target="_blank"';
+		}
+
+		if ( '' !== $rel ) {
+			$link_attributes .= ' rel="' . esc_attr( $rel ) . '"';
+		}


One last item. I think we can move this outside of the loop. There's no need to recreate $link_attributes on each iteration. It doesn't require any values from $item.

Yes, there is no need to recreate $link_attributes, I've updated it.

… attributes (WordPress#69641) Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: bhubbard <bhubbard@git.wordpress.org>

dhruvikpatel18 added 2 commits March 20, 2025 11:47

Add options to open RSS links in new tab and add rel attributes

6e56b33

moved link settings in settings panel

82e10bc

dhruvikpatel18 marked this pull request as ready for review March 20, 2025 11:36

dhruvikpatel18 requested review from ajitbohra, fabiankaegy, juanmaguitar and ndiego as code owners March 20, 2025 11:36

Mamaduka added [Type] Enhancement A suggestion for improvement. [Block] RSS Affects the RSS Block - used to display entries from an RSS/Atom feed labels Mar 24, 2025

Mamaduka reviewed Mar 24, 2025

View reviewed changes

Simplify link attributes with single rel input

7920cd1

dhruvikpatel18 requested a review from Mamaduka March 25, 2025 09:58

Mamaduka requested changes Mar 25, 2025

View reviewed changes

Refactored new tab and rel attribute handling

4b6188e

Mamaduka reviewed Mar 26, 2025

View reviewed changes

Removed HTML Tag Processor usage

ec340ea

Mamaduka reviewed Mar 26, 2025

View reviewed changes

dhruvikpatel18 added 2 commits March 26, 2025 16:34

Allow users full control over the attribute

42aba25

Fixed JS Unit tests

21078f1

Mamaduka reviewed Mar 26, 2025

View reviewed changes

Simplified the conditions for link attributes

a93b7df

dhruvikpatel18 requested a review from Mamaduka March 26, 2025 11:19

Mamaduka approved these changes Mar 26, 2025

View reviewed changes

moved link atributes conditions outside the loop

1b8eaee

dhruvikpatel18 requested a review from Mamaduka March 26, 2025 11:42

Mamaduka merged commit 2014003 into WordPress:trunk Mar 26, 2025
61 checks passed

github-actions bot added this to the Gutenberg 20.6 milestone Mar 26, 2025

Conversation

dhruvikpatel18 commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dhruvikpatel18 commented Mar 25, 2025

Uh oh!

Mamaduka left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mamaduka commented Mar 26, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dhruvikpatel18 commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 20, 2025 •

edited

Loading

Mamaduka left a comment •

edited

Loading