diff --git a/packages/block-library/src/image/constants.js b/packages/block-library/src/image/constants.js index cd5e82b323bed..ec8c41b8b09c3 100644 --- a/packages/block-library/src/image/constants.js +++ b/packages/block-library/src/image/constants.js @@ -3,6 +3,6 @@ export const LINK_DESTINATION_NONE = 'none'; export const LINK_DESTINATION_MEDIA = 'media'; export const LINK_DESTINATION_ATTACHMENT = 'attachment'; export const LINK_DESTINATION_CUSTOM = 'custom'; -export const NEW_TAB_REL = 'noreferrer noopener'; +export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ]; export const ALLOWED_MEDIA_TYPES = [ 'image' ]; export const DEFAULT_SIZE_SLUG = 'large'; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index b5779e71180e7..fe51a775c4d27 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -72,7 +72,7 @@ import { speak } from '@wordpress/a11y'; import { createUpgradedEmbedBlock } from '../embed/util'; import icon from './icon'; import ImageSize from './image-size'; -import { getUpdatedLinkTargetSettings } from './utils'; +import { getUpdatedLinkTargetSettings, removeNewTabRel } from './utils'; /** * Module constants @@ -585,6 +585,7 @@ export class ImageEdit extends Component { sizeSlug, } = attributes; + const cleanRel = removeNewTabRel( rel ); const isExternal = isExternalImage( id, url ); const editImageIcon = ( ); const controls = ( @@ -617,18 +618,18 @@ export class ImageEdit extends Component { onChange={ this.onSetNewTab } checked={ linkTarget === '_blank' } /> } diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index 01aff39769152..b3976c76a8de8 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies @@ -24,6 +25,8 @@ export default function save( { attributes } ) { sizeSlug, } = attributes; + const newRel = isEmpty( rel ) ? undefined : rel; + const classes = classnames( { [ `align${ align }` ]: align, [ `size-${ sizeSlug }` ]: sizeSlug, @@ -47,7 +50,7 @@ export default function save( { attributes } ) { className={ linkClass } href={ href } target={ linkTarget } - rel={ rel } + rel={ newRel } > { image } diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js index 2cb9b8f5ca5c7..1e3e8a07fc374 100644 --- a/packages/block-library/src/image/utils.js +++ b/packages/block-library/src/image/utils.js @@ -1,3 +1,11 @@ +/** + * External dependencies + */ +import { + isEmpty, + each, +} from 'lodash'; + /** * Internal dependencies */ @@ -12,6 +20,30 @@ export function calculatePreferedImageSize( image, container ) { return { width, height }; } +export function removeNewTabRel( currentRel ) { + let newRel = currentRel; + + if ( currentRel !== undefined && ! isEmpty( newRel ) ) { + if ( ! isEmpty( newRel ) ) { + each( NEW_TAB_REL, function( relVal ) { + const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' ); + newRel = newRel.replace( regExp, '' ); + } ); + + // Only trim if NEW_TAB_REL values was replaced. + if ( newRel !== currentRel ) { + newRel = newRel.trim(); + } + + if ( isEmpty( newRel ) ) { + newRel = undefined; + } + } + } + + return newRel; +} + /** * Helper to get the link target settings to be stored. * @@ -24,11 +56,11 @@ export function calculatePreferedImageSize( image, container ) { export function getUpdatedLinkTargetSettings( value, { rel } ) { const linkTarget = value ? '_blank' : undefined; - let updatedRel = rel; - if ( linkTarget && ! rel ) { - updatedRel = NEW_TAB_REL; - } else if ( ! linkTarget && rel === NEW_TAB_REL ) { + let updatedRel; + if ( ! linkTarget && ! rel ) { updatedRel = undefined; + } else { + updatedRel = removeNewTabRel( rel ); } return {