Allow rel customizations in social link block

[circlecube]

Currently, the social link block has some hard-coded rel attributes that are applied only if the parent social links block is set to open in a new tab. When the open in new tab toggle is set to true, each link receives rel="noopener nofollow" if it is not selected there is no rel attribute. For example, it's not a guarantee that if a link will open in a new tab that it should be marked nofollow and that if it is not set to open in a new tab it shouldn't have a nofollow rel. The use case would be a theme block with template parts loading social links in a theme, the user may want to edit the rel values for SEO or other purposes. See the implementation here:

gutenberg/packages/block-library/src/social-link/index.php

Line 33 in 55ca64f

$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';

Ideally, the social link block can have a custom rel attribute. This is a pattern established in the button block already, and users will expect consistency in how link patterns are treated and managed. The social link should apply smart rel attributes automatically but also allow the user to customize the attribute. Placing the rel field within the advanced block settings is a great pattern to follow established by the button block.

Existing implementation of established pattern in button block:

gutenberg/packages/block-library/src/button/edit.js

Line 33 in 55ca64f

const NEW_TAB_REL = 'noreferrer noopener';

gutenberg/packages/block-library/src/button/edit.js

Lines 86 to 107 in 55ca64f

	const onSetLinkRel = useCallback(
	( value ) => {
	setAttributes( { rel: value } );
	},
	[ setAttributes ]
	);
	function onToggleOpenInNewTab( value ) {
	const newLinkTarget = value ? '_blank' : undefined;
	let updatedRel = rel;
	if ( newLinkTarget && ! rel ) {
	updatedRel = NEW_TAB_REL;
	} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
	updatedRel = undefined;
	}
	setAttributes( {
	linkTarget: newLinkTarget,
	rel: updatedRel,
	} );
	}

gutenberg/packages/block-library/src/button/edit.js

Lines 256 to 260 in 55ca64f

	<TextControl
	label={ __( 'Link rel' ) }
	value={ rel || '' }
	onChange={ onSetLinkRel }
	/>