Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set default link for images using image_default_link_type option #25578

Merged
merged 9 commits into from
Sep 24, 2020
Merged

Set default link for images using image_default_link_type option #25578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bb23956
Add option for default link type
mkaz Sep 23, 2020
5ff5e8c
Switch variable to wp.media.defaultLinktType
mkaz Sep 23, 2020
0903844
Nevermind, exists in wp.media.view.settings.defaultProps.link
mkaz Sep 23, 2020
1640a42
Use wp option for a default linkDestination if set
mkaz Sep 23, 2020
45ccae9
Set to none for back compat
mkaz Sep 23, 2020
44c3e7b
Simplify logic, clean up
mkaz Sep 23, 2020
19c8fe2
Defensive programming no wp.media settings
mkaz Sep 23, 2020
d56b084
Fix tests 👍
mkaz Sep 23, 2020
459b07f
Fix e2e test regex
mkaz Sep 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/block-library/src/image/block.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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