diff --git a/src/blocks/_pro/outer/block.json b/src/blocks/_pro/outer/block.json index ff0b6f4f9..8753f9938 100644 --- a/src/blocks/_pro/outer/block.json +++ b/src/blocks/_pro/outer/block.json @@ -147,6 +147,14 @@ "type": "string", "default": "" }, + "relAttribute": { + "type": "string", + "default": "" + }, + "linkDescription": { + "type": "string", + "default": "" + }, "clientId": { "type": "string" }, diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index dc07e4c8e..ff9335339 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/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')} /> diff --git a/src/blocks/_pro/outer/save.js b/src/blocks/_pro/outer/save.js index 38efb7f16..a54b86ffb 100644 --- a/src/blocks/_pro/outer/save.js +++ b/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 = ( {__('Outer link', 'vk-blocks-pro')} diff --git a/src/components/link-toolbar/index.js b/src/components/link-toolbar/index.js index 53bf93f6d..1c9f44065 100644 --- a/src/components/link-toolbar/index.js +++ b/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} > { +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 ( <> { setLinkTarget(checked ? '_blank' : '') } /> + {relAttribute !== undefined && + typeof setRelAttribute === 'function' && ( + <> + + handleRelChange( + 'noreferrer', + checked + ) + } + /> + + handleRelChange( + 'nofollow', + checked + ) + } + /> + + )} + {typeof setLinkDescription === 'function' && ( + + setLinkDescription(value) + } + /> + )} )}