diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index decd621688cea1..798210cbd5c2f8 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -60,8 +60,7 @@ "type": "string" }, "linkDestination": { - "type": "string", - "default": "none" + "type": "string" }, "linkTarget": { "type": "string", diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index 08f43101618e2a..0a3c2142636c65 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -59,7 +59,6 @@ const blockAttributes = { }, linkDestination: { type: 'string', - default: 'none', }, linkTarget: { type: 'string', diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 50181e67ee83f3..5d5478b4db3394 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -21,6 +21,8 @@ import { useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { image as icon } from '@wordpress/icons'; +/* global wp */ + /** * Internal dependencies */ @@ -30,8 +32,10 @@ import Image from './image'; * Module constants */ import { - LINK_DESTINATION_MEDIA, LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_CUSTOM, + LINK_DESTINATION_MEDIA, + LINK_DESTINATION_NONE, ALLOWED_MEDIA_TYPES, DEFAULT_SIZE_SLUG, } from './constants'; @@ -83,7 +87,6 @@ export function ImageEdit( { caption, align, id, - linkDestination, width, height, sizeSlug, @@ -152,21 +155,49 @@ export function ImageEdit( { additionalAttributes = { url }; } - // Check if the image is linked to it's media. - if ( linkDestination === LINK_DESTINATION_MEDIA ) { - // Update the media link. - mediaAttributes.href = media.url; + // Check if default link setting should be used. + let linkDestination = attributes.linkDestination; + if ( ! linkDestination ) { + // Use the WordPress option to determine the proper default. + // The constants used in Gutenberg do not match WP options so a little more complicated than ideal. + // TODO: fix this in a follow up PR, requires updating media-text and ui component. + switch ( + wp?.media?.view?.settings?.defaultProps?.link || + LINK_DESTINATION_NONE + ) { + case 'file': + case LINK_DESTINATION_MEDIA: + linkDestination = LINK_DESTINATION_MEDIA; + break; + case 'post': + case LINK_DESTINATION_ATTACHMENT: + linkDestination = LINK_DESTINATION_ATTACHMENT; + break; + case LINK_DESTINATION_CUSTOM: + linkDestination = LINK_DESTINATION_CUSTOM; + break; + case LINK_DESTINATION_NONE: + linkDestination = LINK_DESTINATION_NONE; + break; + } } - // Check if the image is linked to the attachment page. - if ( linkDestination === LINK_DESTINATION_ATTACHMENT ) { - // Update the media link. - mediaAttributes.href = media.link; + // Check if the image is linked to it's media. + let href; + switch ( linkDestination ) { + case LINK_DESTINATION_MEDIA: + href = media.url; + break; + case LINK_DESTINATION_ATTACHMENT: + href = media.link; + break; } + mediaAttributes.href = href; setAttributes( { ...mediaAttributes, ...additionalAttributes, + linkDestination, } ); } diff --git a/packages/e2e-tests/fixtures/blocks/core__image.json b/packages/e2e-tests/fixtures/blocks/core__image.json index 22c56bcf681315..1650156649dadf 100644 --- a/packages/e2e-tests/fixtures/blocks/core__image.json +++ b/packages/e2e-tests/fixtures/blocks/core__image.json @@ -6,8 +6,7 @@ "attributes": { "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", - "caption": "", - "linkDestination": "none" + "caption": "" }, "innerBlocks": [], "originalContent": "
\"\"
" diff --git a/packages/e2e-tests/fixtures/blocks/core__image__center-caption.json b/packages/e2e-tests/fixtures/blocks/core__image__center-caption.json index 80aa7f460f2463..174eba0a63e366 100644 --- a/packages/e2e-tests/fixtures/blocks/core__image__center-caption.json +++ b/packages/e2e-tests/fixtures/blocks/core__image__center-caption.json @@ -7,8 +7,7 @@ "align": "center", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", - "caption": "Give it a try. Press the \"really wide\" button on the image toolbar.", - "linkDestination": "none" + "caption": "Give it a try. Press the \"really wide\" button on the image toolbar." }, "innerBlocks": [], "originalContent": "
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
" diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-1.json b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-1.json index f02d8ba36cc66c..904153083e94b5 100644 --- a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-1.json +++ b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-1.json @@ -7,8 +7,7 @@ "align": "left", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", - "caption": "", - "linkDestination": "none" + "caption": "" }, "innerBlocks": [], "originalContent": "
\n\t\"\"\n
" diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-2.json index a9d3fe689b461a..65106d9000e176 100644 --- a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-2.json +++ b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-2.json @@ -9,8 +9,7 @@ "alt": "", "caption": "", "width": 100, - "height": 100, - "linkDestination": "none" + "height": 100 }, "innerBlocks": [], "originalContent": "
\n\t\"\"\n
" diff --git a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-3.json b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-3.json index 68d63a7a1ee0f0..eaf76455e82e9d 100644 --- a/packages/e2e-tests/fixtures/blocks/core__image__deprecated-3.json +++ b/packages/e2e-tests/fixtures/blocks/core__image__deprecated-3.json @@ -9,8 +9,7 @@ "alt": "", "caption": "", "width": 100, - "height": 100, - "linkDestination": "none" + "height": 100 }, "innerBlocks": [], "originalContent": "
\n\t\"\"\n
" diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js index ad0adcd998825f..5e6cd85099385a 100644 --- a/packages/e2e-tests/specs/editor/blocks/image.test.js +++ b/packages/e2e-tests/specs/editor/blocks/image.test.js @@ -48,7 +48,7 @@ describe( 'Image', () => { const filename = await upload( '.wp-block-image input[type="file"]' ); const regex = new RegExp( - `\\s*
\\s*` + `\\s*
\\s*` ); expect( await getEditedPostContent() ).toMatch( regex ); } ); @@ -58,7 +58,7 @@ describe( 'Image', () => { const filename1 = await upload( '.wp-block-image input[type="file"]' ); const regex1 = new RegExp( - `\\s*
\\s*` + `\\s*
\\s*` ); expect( await getEditedPostContent() ).toMatch( regex1 ); @@ -66,7 +66,7 @@ describe( 'Image', () => { await page.click( '[aria-label="Image size presets"] button' ); const regex2 = new RegExp( - `\\s*
<\\/figure>\\s*` + `\\s*
<\\/figure>\\s*` ); expect( await getEditedPostContent() ).toMatch( regex2 ); @@ -77,7 +77,7 @@ describe( 'Image', () => { ); const regex3 = new RegExp( - `\\s*
\\s*` + `\\s*
\\s*` ); expect( await getEditedPostContent() ).toMatch( regex3 );