【WIP】Feature/link toolbar/empty atag2

src/blocks/_pro/outer/block.json

@@ -147,6 +147,14 @@
 			"type": "string",
 			"default": ""
 		},
+		"relAttribute": {
+			"type": "string",
+			"default": ""
+		},
+		"linkDescription": {
+			"type": "string",
+			"default": ""
+		},
 		"clientId": {
 			"type": "string"
 		},

src/blocks/_pro/outer/edit.js

@@ -76,6 +76,8 @@ export default function OuterEdit(props) {
 		minHeightUnit,
 		linkUrl,
 		linkTarget,
+		relAttribute,
+		linkDescription,
 		blockId,
 	} = attributes;
 
@@ -415,6 +417,14 @@ export default function OuterEdit(props) {
 						setLinkTarget={(target) =>
 							setAttributes({ linkTarget: target })
 						}
+						relAttribute={relAttribute}
+						setRelAttribute={(rel) =>
+							setAttributes({ relAttribute: rel })
+						}
+						linkDescription={linkDescription}
+						setLinkDescription={(description) =>
+							setAttributes({ linkDescription: description })
+						}
 						aria-label={__('Outer link', 'vk-blocks-pro')}
 					/>
 				</ToolbarGroup>

src/blocks/_pro/outer/save.js

@@ -52,6 +52,8 @@ export default function save(props) {
 		blockId,
 		linkUrl,
 		linkTarget,
+		relAttribute,
+		linkDescription,
 	} = attributes;
 
 	let classPaddingLR;
@@ -238,15 +240,13 @@ export default function save(props) {
 		},
 	});
 
-	const relAttribute =
-		linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
 	const GetLinkUrl = (
 		<a
 			href={linkUrl}
 			target={linkTarget}
 			className={`${prefix}-link`}
 			rel={relAttribute}
-			aria-label={__('Outer link', 'vk-blocks-pro')}
+			aria-label={linkDescription}
 		>
 			<span className="screen-reader-text">
 				{__('Outer link', 'vk-blocks-pro')}

src/components/link-toolbar/index.js

@@ -5,6 +5,7 @@ import {
 	CheckboxControl,
 	Button,
 	Tooltip,
+	TextControl,
 } from '@wordpress/components';
 import { URLInput } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
@@ -17,6 +18,8 @@ const LinkPreview = ({
 	linkTarget,
 	onRemove,
 	onCopy,
+	relAttribute,
+	linkDescription,
 }) => {
 	const displayURL =
 		linkUrl.startsWith('http://') ||
@@ -41,7 +44,8 @@ const LinkPreview = ({
 							className="components-external-link block-editor-link-control__search-item-title"
 							href={displayURL}
 							target={linkTarget}
-							rel="noopener noreferrer"
+							rel={relAttribute}
+							aria-label={linkDescription}
 						>
 							<span
 								data-wp-c16t="true"
@@ -96,7 +100,17 @@ const LinkPreview = ({
 	);
 };
 
-const LinkToolbar = ({ linkUrl, setLinkUrl, linkTarget, setLinkTarget }) => {
+const LinkToolbar = (props) => {
+	const {
+		linkUrl,
+		setLinkUrl,
+		linkTarget,
+		setLinkTarget,
+		linkDescription,
+		setLinkDescription,
+		relAttribute,
+		setRelAttribute,
+	} = props;
 	const [isOpen, setIsOpen] = useState(false);
 	const [linkTitle, setLinkTitle] = useState('');
 	const [icon, setIcon] = useState(null);
@@ -233,6 +247,19 @@ const LinkToolbar = ({ linkUrl, setLinkUrl, linkTarget, setLinkTarget }) => {
 		}
 	};
 
+	const handleRelChange = (type, checked) => {
+		const rel = relAttribute ? relAttribute.split(' ') : [];
+		if (checked) {
+			rel.push(type);
+		} else {
+			const index = rel.indexOf(type);
+			if (index !== -1) {
+				rel.splice(index, 1);
+			}
+		}
+		setRelAttribute(rel.join(' '));
+	};
+
 	return (
 		<>
 			<Dropdown
@@ -299,6 +326,57 @@ const LinkToolbar = ({ linkUrl, setLinkUrl, linkTarget, setLinkTarget }) => {
 									setLinkTarget(checked ? '_blank' : '')
 								}
 							/>
+							{relAttribute !== undefined &&
+								typeof setRelAttribute === 'function' && (
+									<>
+										<CheckboxControl
+											label={__(
+												'Add noreferrer',
+												'vk-blocks-pro'
+											)}
+											checked={
+												relAttribute.includes(
+													'noreferrer'
+												) || false
+											}
+											onChange={(checked) =>
+												handleRelChange(
+													'noreferrer',
+													checked
+												)
+											}
+										/>
+										<CheckboxControl
+											label={__(
+												'Add nofollow',
+												'vk-blocks-pro'
+											)}
+											checked={
+												relAttribute.includes(
+													'nofollow'
+												) || false
+											}
+											onChange={(checked) =>
+												handleRelChange(
+													'nofollow',
+													checked
+												)
+											}
+										/>
+									</>
+								)}
+							{typeof setLinkDescription === 'function' && (
+								<TextControl
+									label={__(
+										'Accessibility link description',
+										'vk-blocks-pro'
+									)}
+									value={linkDescription}
+									onChange={(value) =>
+										setLinkDescription(value)
+									}
+								/>
+							)}
 						</form>
 					</div>
 				)}