From 3c367f7807eadbb9add138d25d574d46a6e0fd9b Mon Sep 17 00:00:00 2001 From: Taichi Maruyama Date: Mon, 2 Dec 2024 19:57:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feature:=20=E3=82=A2=E3=82=AF=E3=82=BB?= =?UTF-8?q?=E3=82=B7=E3=83=93=E3=83=AA=E3=83=86=E3=82=A3=E9=96=A2=E9=80=A3?= =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/blocks/_pro/outer/block.json | 8 ++++ src/blocks/_pro/outer/edit.js | 6 +++ src/blocks/_pro/outer/save.js | 7 +-- src/components/link-toolbar/index.js | 70 +++++++++++++++++++++++++++- 4 files changed, 86 insertions(+), 5 deletions(-) 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..7f8356420 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,10 @@ 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..f09a18a51 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,14 @@ 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..67956193a 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,21 @@ 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)} + /> + )} )} From 532ab48a6e4803763c47838029a11f33bb312683 Mon Sep 17 00:00:00 2001 From: Taichi Maruyama Date: Mon, 2 Dec 2024 19:58:36 +0900 Subject: [PATCH 2/2] lint --- src/blocks/_pro/outer/edit.js | 8 ++- src/blocks/_pro/outer/save.js | 3 +- src/components/link-toolbar/index.js | 82 ++++++++++++++++------------ 3 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/blocks/_pro/outer/edit.js b/src/blocks/_pro/outer/edit.js index 7f8356420..ff9335339 100644 --- a/src/blocks/_pro/outer/edit.js +++ b/src/blocks/_pro/outer/edit.js @@ -418,9 +418,13 @@ export default function OuterEdit(props) { setAttributes({ linkTarget: target }) } relAttribute={relAttribute} - setRelAttribute={(rel) => setAttributes({ relAttribute: rel })} + setRelAttribute={(rel) => + setAttributes({ relAttribute: rel }) + } linkDescription={linkDescription} - setLinkDescription={(description) => setAttributes({ linkDescription: description })} + 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 f09a18a51..a54b86ffb 100644 --- a/src/blocks/_pro/outer/save.js +++ b/src/blocks/_pro/outer/save.js @@ -53,7 +53,7 @@ export default function save(props) { linkUrl, linkTarget, relAttribute, - linkDescription + linkDescription, } = attributes; let classPaddingLR; @@ -240,7 +240,6 @@ export default function save(props) { }, }); - const GetLinkUrl = ( { const displayURL = linkUrl.startsWith('http://') || @@ -100,7 +100,7 @@ const LinkPreview = ({ ); }; -const LinkToolbar = ( props ) => { +const LinkToolbar = (props) => { const { linkUrl, setLinkUrl, @@ -258,9 +258,7 @@ const LinkToolbar = ( props ) => { } } setRelAttribute(rel.join(' ')); - } - - + }; return ( <> @@ -328,42 +326,56 @@ const LinkToolbar = ( props ) => { setLinkTarget(checked ? '_blank' : '') } /> - {(relAttribute !== undefined && typeof setRelAttribute === 'function') && - <> - - handleRelChange('noreferrer', checked) - } - /> - - handleRelChange('nofollow', checked) - } - /> - - } - { typeof setLinkDescription === 'function' && ( + {relAttribute !== undefined && + typeof setRelAttribute === 'function' && ( + <> + + handleRelChange( + 'noreferrer', + checked + ) + } + /> + + handleRelChange( + 'nofollow', + checked + ) + } + /> + + )} + {typeof setLinkDescription === 'function' && ( setLinkDescription(value)} - /> + onChange={(value) => + setLinkDescription(value) + } + /> )}