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

Default link to image_default_link_type for gallery #25582

Merged
merged 5 commits into from
Sep 24, 2020
Merged

Default link to image_default_link_type for gallery #25582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0ecc026
Default link to image_default_link_type for gallery
ajlende Sep 23, 2020
4a04b7e
Update gallery fixtures
ajlende Sep 23, 2020
ec11b04
Default shortcode to 'post' link
ajlende Sep 23, 2020
6bf99b7
Update shortcode snapshots
ajlende Sep 23, 2020
dc1e522
Update gallery regex
ajlende 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/gallery/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,7 @@
"default": true
},
"linkTo": {
"type": "string",
"default": "none"
"type": "string"
},
"sizeSlug": {
"type": "string",
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/gallery/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const LINK_DESTINATION_NONE = 'none';
export const LINK_DESTINATION_MEDIA = 'file';
export const LINK_DESTINATION_ATTACHMENT = 'post';
175 changes: 175 additions & 0 deletions packages/block-library/src/gallery/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,181 @@ import { RichText } from '@wordpress/block-editor';
import { defaultColumnsNumber } from './shared';

const deprecated = [
{
attributes: {
images: {
type: 'array',
default: [],
source: 'query',
selector: '.blocks-gallery-item',
query: {
url: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
},
fullUrl: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'data-full-url',
},
link: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'data-link',
},
alt: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'alt',
default: '',
},
id: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'data-id',
},
caption: {
type: 'string',
source: 'html',
selector: '.blocks-gallery-item__caption',
},
},
},
ids: {
type: 'array',
items: {
type: 'number',
},
default: [],
},
columns: {
type: 'number',
minimum: 1,
maximum: 8,
},
caption: {
type: 'string',
source: 'html',
selector: '.blocks-gallery-caption',
},
imageCrop: {
type: 'boolean',
default: true,
},
linkTo: {
type: 'string',
default: 'none',
},
sizeSlug: {
type: 'string',
default: 'large',
},
},
supports: {
align: true,
},
isEligible( { linkTo } ) {
return ! linkTo || linkTo === 'attachment' || linkTo === 'media';
},
migrate( attributes ) {
let linkTo = attributes.linkTo;
if ( ! attributes.linkTo ) {
linkTo = 'none';
} else if ( attributes.linkTo === 'attachment' ) {
linkTo = 'post';
} else if ( attributes.linkTo === 'media' ) {
linkTo = 'file';
}
return {
...attributes,
linkTo,
};
},
save( { attributes } ) {
const {
images,
columns = defaultColumnsNumber( attributes ),
imageCrop,
caption,
linkTo,
} = attributes;

return (
<figure
className={ `columns-${ columns } ${
imageCrop ? 'is-cropped' : ''
}` }
>
<ul className="blocks-gallery-grid">
{ images.map( ( image ) => {
let href;

switch ( linkTo ) {
case 'media':
href = image.fullUrl || image.url;
break;
case 'attachment':
href = image.link;
break;
}

const img = (
<img
src={ image.url }
alt={ image.alt }
data-id={ image.id }
data-full-url={ image.fullUrl }
data-link={ image.link }
className={
image.id
? `wp-image-${ image.id }`
: null
}
/>
);

return (
<li
key={ image.id || image.url }
className="blocks-gallery-item"
>
<figure>
{ href ? (
<a href={ href }>{ img }</a>
) : (
img
) }
{ ! RichText.isEmpty(
image.caption
) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-item__caption"
value={ image.caption }
/>
) }
</figure>
</li>
);
} ) }
</ul>
{ ! RichText.isEmpty( caption ) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-caption"
value={ caption }
/>
) }
</figure>
);
},
},
{
attributes: {
images: {
Expand Down
19 changes: 16 additions & 3 deletions packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,17 @@ import { withViewportMatch } from '@wordpress/viewport';
import { sharedIcon } from './shared-icon';
import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
import Gallery from './gallery';
import {
LINK_DESTINATION_ATTACHMENT,
LINK_DESTINATION_MEDIA,
LINK_DESTINATION_NONE,
} from './constants';

const MAX_COLUMNS = 8;
const linkOptions = [
{ value: 'attachment', label: __( 'Attachment Page' ) },
{ value: 'media', label: __( 'Media File' ) },
{ value: 'none', label: __( 'None' ) },
{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
];
const ALLOWED_MEDIA_TYPES = [ 'image' ];

Expand Down Expand Up @@ -331,6 +336,14 @@ class GalleryEdit extends Component {
captionSelected: false,
} );
}
// linkTo attribute must be saved so blocks don't break when changing image_default_link_type in options.php
if ( ! this.props.attributes.linkTo ) {
this.setAttributes( {
linkTo:
window?.wp?.media?.view?.settings?.defaultProps?.link ||
LINK_DESTINATION_NONE,
} );
}
}

render() {
Expand Down
8 changes: 6 additions & 2 deletions packages/block-library/src/gallery/gallery-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ import {
* Internal dependencies
*/
import { pickRelevantMediaFiles } from './shared';
import {
LINK_DESTINATION_ATTACHMENT,
LINK_DESTINATION_MEDIA,
} from './constants';

const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );

Expand Down Expand Up @@ -190,10 +194,10 @@ class GalleryImage extends Component {
let href;

switch ( linkTo ) {
case 'media':
case LINK_DESTINATION_MEDIA:
href = url;
break;
case 'attachment':
case LINK_DESTINATION_ATTACHMENT:
href = link;
break;
}
Expand Down
8 changes: 6 additions & 2 deletions packages/block-library/src/gallery/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { RichText } from '@wordpress/block-editor';
* Internal dependencies
*/
import { defaultColumnsNumber } from './shared';
import {
LINK_DESTINATION_ATTACHMENT,
LINK_DESTINATION_MEDIA,
} from './constants';

export default function save( { attributes } ) {
const {
Expand All @@ -28,10 +32,10 @@ export default function save( { attributes } ) {
let href;

switch ( linkTo ) {
case 'media':
case LINK_DESTINATION_MEDIA:
href = image.fullUrl || image.url;
break;
case 'attachment':
case LINK_DESTINATION_ATTACHMENT:
href = image.link;
break;
}
Expand Down
7 changes: 5 additions & 2 deletions packages/block-library/src/gallery/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { createBlobURL } from '@wordpress/blob';
* Internal dependencies
*/
import { pickRelevantMediaFiles } from './shared';
import { LINK_DESTINATION_ATTACHMENT } from './constants';

const parseShortcodeIds = ( ids ) => {
if ( ! ids ) {
Expand Down Expand Up @@ -82,8 +83,10 @@ const transforms = {
},
linkTo: {
type: 'string',
shortcode: ( { named: { link = 'attachment' } } ) => {
return link === 'file' ? 'media' : link;
shortcode: ( {
named: { link = LINK_DESTINATION_ATTACHMENT },
} ) => {
return link;
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery-with-caption.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[null,null]} -->
<!-- wp:gallery {"ids":[null,null],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul><figcaption class="blocks-gallery-caption">Gallery caption.</figcaption></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[null,null]} -->
<!-- wp:gallery {"ids":[null,null],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery__columns.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[null,null],"columns":1} -->
<!-- wp:gallery {"ids":[null,null],"columns":1,"linkTo":"none"} -->
<figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-1.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"columns":2,"align":"wide"} -->
<!-- wp:gallery {"columns":2,"linkTo":"none","align":"wide"} -->
<figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-2.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[],"columns":2,"align":"wide"} -->
<!-- wp:gallery {"ids":[],"columns":2,"linkTo":"none","align":"wide"} -->
<figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title" data-id="1" class="wp-image-1"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title" data-id="2" class="wp-image-2"/></figure></li></ul></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-3.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[null,null],"align":"wide"} -->
<!-- wp:gallery {"ids":[null,null],"linkTo":"none","align":"wide"} -->
<figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="title"/></figure></li><li class="blocks-gallery-item"><figure><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="title"/></figure></li></ul></figure>
<!-- /wp:gallery -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-4.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:gallery {"ids":[1421,1440,1362],"align":"wide"} -->
<!-- wp:gallery {"ids":[1421,1440,1362],"linkTo":"none","align":"wide"} -->
<figure class="wp-block-gallery alignwide columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2016/09/cropped-img_9054-1.jpg?w=190" alt="" data-id="1421" class="wp-image-1421"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2017/09/cropped-l1001498-1.jpg?w=580" alt="" data-id="1440" class="wp-image-1440"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://sergioestevaofolio.files.wordpress.com/2017/05/cropped-l1005945-2-2.jpg?w=580" alt="" data-id="1362" class="wp-image-1362"/></figure></li></ul></figure>
<!-- /wp:gallery -->
48 changes: 48 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__gallery__deprecated-5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!-- wp:gallery {"ids":[705,704,703],"linkTo":"media"} -->
<figure class="wp-block-gallery columns-3 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg" >
<img
src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"
alt=""
data-id="705"
data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-scaled.jpg"
data-link="http://wptest.local/classic/test-image-3/"
class="wp-image-705"
/>
</a>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg" >
<img
src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"
alt=""
data-id="704"
data-full-url="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-scaled.jpg"
data-link="http://wptest.local/test-image-2/"
class="wp-image-704"
/>
</a>
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<a href="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg" >
<img
src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"
alt=""
data-id="703"
data-full-url="http://wptest.local/wp-content/uploads/2020/04/test-image-scaled.jpg"
data-link="http://wptest.local/test-image/"
class="wp-image-703"
/>
</a>
</figure>
</li>
</ul>
</figure>
<!-- /wp:gallery -->
Loading