diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js index caac3d72af7b89..6d19bc812f361d 100644 --- a/blocks/library/gallery/block.js +++ b/blocks/library/gallery/block.js @@ -238,16 +238,17 @@ class GalleryBlock extends Component { , ]; diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 7a65a586f81a81..4a69cd818927c3 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -5,7 +5,7 @@ .blocks-gallery-item { position: relative; - &.is-selected { + .is-selected { outline: 4px solid $blue-medium-500; outline-offset: -4px; } diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js index 0d243bc6ca55a1..a4316cfe1ec6c8 100644 --- a/blocks/library/gallery/gallery-image.js +++ b/blocks/library/gallery/gallery-image.js @@ -36,28 +36,26 @@ class GalleryImage extends Component { const img = url ? { : ; - const className = classnames( 'blocks-gallery-item', { + const className = classnames( { 'is-selected': isSelected, } ); // Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( -
  • -
    - { isSelected && -
    - -
    - } - { href ? { img } : img } -
    -
  • +
    + { isSelected && +
    + +
    + } + { href ? { img } : img } +
    ); /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index bbd1240d9fd60a..2235bb97cbe17d 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -33,7 +33,7 @@ registerBlockType( 'core/gallery', { type: 'array', default: [], source: 'query', - selector: 'ul.wp-block-gallery .blocks-gallery-item img', + selector: 'ul.wp-block-gallery .blocks-gallery-image img', query: { url: { source: 'attribute', @@ -178,4 +178,38 @@ registerBlockType( 'core/gallery', { ); }, + deprecated: [ + { + save( { attributes } ) { + const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; + return ( +
    + { images.map( ( image ) => { + let href; + + switch ( linkTo ) { + case 'media': + href = image.url; + break; + case 'attachment': + href = image.link; + break; + } + + const img = {; + + return ( +
  • +
    + { href ? { img } : img } +
    +
  • + ); + } ) } +
    + ); + }, + }, + ], + } );