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 {