Skip to content

Commit

Permalink
Gallery: Add a deprecation for captions in the gallery block (#45173)
Browse files Browse the repository at this point in the history 
Co-authored-by: Glen Davies <[email protected]>
  • Loading branch information
@scruffian @glendaviesnz
scruffian and glendaviesnz authored Oct 21, 2022
1 parent 5f02c27 commit 9d48cb0
Show file tree
Hide file tree
Showing 5 changed files with 428 additions and 2 deletions.
129 changes: 127 additions & 2 deletions packages/block-library/src/gallery/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import { map, some } from 'lodash';
/**
* WordPress dependencies
*/
import { RichText, useBlockProps } from '@wordpress/block-editor';
import {
RichText,
useBlockProps,
useInnerBlocksProps,
} from '@wordpress/block-editor';

import { createBlock } from '@wordpress/blocks';

Expand Down Expand Up @@ -127,6 +131,127 @@ export function getImageBlock( image, sizeSlug, linkTo ) {
} );
}

// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
// to the gallery figcaption element.
const v7 = {
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: [],
},
shortCodeTransforms: {
type: 'array',
default: [],
items: {
type: 'object',
},
},
columns: {
type: 'number',
minimum: 1,
maximum: 8,
},
caption: {
type: 'string',
source: 'html',
selector: '.blocks-gallery-caption',
},
imageCrop: {
type: 'boolean',
default: true,
},
fixedHeight: {
type: 'boolean',
default: true,
},
linkTarget: {
type: 'string',
},
linkTo: {
type: 'string',
},
sizeSlug: {
type: 'string',
default: 'large',
},
allowResize: {
type: 'boolean',
default: false,
},
},
save( { attributes } ) {
const { caption, columns, imageCrop } = attributes;

const className = classnames( 'has-nested-images', {
[ `columns-${ columns }` ]: columns !== undefined,
[ `columns-default` ]: columns === undefined,
'is-cropped': imageCrop,
} );
const blockProps = useBlockProps.save( { className } );
const innerBlocksProps = useInnerBlocksProps.save( blockProps );

return (
<figure { ...innerBlocksProps }>
{ innerBlocksProps.children }
{ ! RichText.isEmpty( caption ) && (
<RichText.Content
tagName="figcaption"
className="blocks-gallery-caption"
value={ caption }
/>
) }
</figure>
);
},
};

const v6 = {
attributes: {
images: {
Expand Down Expand Up @@ -984,4 +1109,4 @@ const v1 = {
},
};

export default [ v6, v5, v4, v3, v2, v1 ];
export default [ v7, v6, v5, v4, v3, v2, v1 ];
31 changes: 31 additions & 0 deletions test/integration/fixtures/blocks/core__gallery__deprecated-7.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!-- wp:gallery {"linkTo":"media"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
<!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
<!-- /wp:image -->
</figure>
<!-- /wp:gallery -->
<!-- wp:gallery {"linkTo":"media"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
<!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
<!-- /wp:image -->
<figcaption class="blocks-gallery-caption">This gallery has a caption</figcaption>
</figure>
<!-- /wp:gallery -->
120 changes: 120 additions & 0 deletions test/integration/fixtures/blocks/core__gallery__deprecated-7.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
[
{
"name": "core/gallery",
"isValid": true,
"attributes": {
"images": [],
"ids": [],
"shortCodeTransforms": [],
"caption": "",
"imageCrop": true,
"fixedHeight": true,
"linkTo": "media",
"sizeSlug": "large",
"allowResize": false
},
"innerBlocks": [
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
},
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
},
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
}
]
},
{
"name": "core/gallery",
"isValid": true,
"attributes": {
"images": [],
"ids": [],
"shortCodeTransforms": [],
"caption": "This gallery has a caption",
"imageCrop": true,
"fixedHeight": true,
"linkTo": "media",
"sizeSlug": "large",
"allowResize": false
},
"innerBlocks": [
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
"id": 705,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
},
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
"id": 704,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
},
{
"name": "core/image",
"isValid": true,
"attributes": {
"url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"alt": "",
"caption": "",
"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
"id": 703,
"sizeSlug": "large",
"linkDestination": "media"
},
"innerBlocks": []
}
]
}
]
Loading

0 comments on commit 9d48cb0

Please sign in to comment.