Skip to content

Commit

Permalink
Set default link for images using image_default_link_type option (#25578
Browse files Browse the repository at this point in the history 
)

* Add option for default link type

* Switch variable to wp.media.defaultLinktType

* Nevermind, exists in wp.media.view.settings.defaultProps.link

* Use wp option for a default linkDestination if set

* Set to none for back compat

* Simplify logic, clean up

* Defensive programming no wp.media settings

* Fix tests 👍

* Fix e2e test regex
  • Loading branch information
@mkaz
mkaz authored Sep 24, 2020
1 parent 2149b4e commit b18a2ff
Show file tree
Hide file tree
Showing 9 changed files with 51 additions and 27 deletions.
3 changes: 1 addition & 2 deletions packages/block-library/src/image/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@
"type": "string"
},
"linkDestination": {
"type": "string",
"default": "none"
"type": "string"
},
"linkTarget": {
"type": "string",
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/image/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ const blockAttributes = {
},
linkDestination: {
type: 'string',
default: 'none',
},
linkTarget: {
type: 'string',
Expand Down
51 changes: 41 additions & 10 deletions packages/block-library/src/image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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';
Expand Down Expand Up @@ -83,7 +87,6 @@ export function ImageEdit( {
caption,
align,
id,
linkDestination,
width,
height,
sizeSlug,
Expand Down Expand Up @@ -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,
} );
}

Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/fixtures/blocks/core__image.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
"attributes": {
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
"caption": "",
"linkDestination": "none"
"caption": ""
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /></figure>"
Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/fixtures/blocks/core__image__center-caption.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": "<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /><figcaption>Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure></div>"
Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/fixtures/blocks/core__image__deprecated-1.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
"align": "left",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
"alt": "",
"caption": "",
"linkDestination": "none"
"caption": ""
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image alignleft\" style=\"max-width:50%\">\n\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" />\n</figure>"
Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/fixtures/blocks/core__image__deprecated-2.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
"alt": "",
"caption": "",
"width": 100,
"height": 100,
"linkDestination": "none"
"height": 100
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image alignleft\">\n\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" width=\"100\" height=\"100\" />\n</figure>"
Expand Down
3 changes: 1 addition & 2 deletions packages/e2e-tests/fixtures/blocks/core__image__deprecated-3.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
"alt": "",
"caption": "",
"width": 100,
"height": 100,
"linkDestination": "none"
"height": 100
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image alignleft is-resized\">\n\t<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" width=\"100\" height=\"100\" />\n</figure>"
Expand Down
8 changes: 4 additions & 4 deletions packages/e2e-tests/specs/editor/blocks/image.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe( 'Image', () => {
const filename = await upload( '.wp-block-image input[type="file"]' );

const regex = new RegExp(
`<!-- wp:image {"id":\\d+,"sizeSlug":"large"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
`<!-- wp:image {"id":\\d+,"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
);
expect( await getEditedPostContent() ).toMatch( regex );
} );
Expand All @@ -58,15 +58,15 @@ describe( 'Image', () => {
const filename1 = await upload( '.wp-block-image input[type="file"]' );

const regex1 = new RegExp(
`<!-- wp:image {"id":\\d+,"sizeSlug":"large"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
`<!-- wp:image {"id":\\d+,"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
);
expect( await getEditedPostContent() ).toMatch( regex1 );

await openDocumentSettingsSidebar();
await page.click( '[aria-label="Image size presets"] button' );

const regex2 = new RegExp(
`<!-- wp:image {"id":\\d+,"width":3,"height":3,"sizeSlug":"large"} -->\\s*<figure class="wp-block-image size-large is-resized"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+" width="3" height="3"\\/><\\/figure>\\s*<!-- /wp:image -->`
`<!-- wp:image {"id":\\d+,"width":3,"height":3,"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large is-resized"><img src="[^"]+\\/${ filename1 }\\.png" alt="" class="wp-image-\\d+" width="3" height="3"\\/><\\/figure>\\s*<!-- /wp:image -->`
);

expect( await getEditedPostContent() ).toMatch( regex2 );
Expand All @@ -77,7 +77,7 @@ describe( 'Image', () => {
);

const regex3 = new RegExp(
`<!-- wp:image {"id":\\d+,"sizeSlug":"large"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
`<!-- wp:image {"id":\\d+,"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
);
expect( await getEditedPostContent() ).toMatch( regex3 );

Expand Down

0 comments on commit b18a2ff

Please sign in to comment.