diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js index 63e4875d3fa94..ef0961997d6c8 100644 --- a/blocks/library/gallery/index.js +++ b/blocks/library/gallery/index.js @@ -180,6 +180,45 @@ registerBlockType( 'core/gallery', { deprecated: [ { + attributes: { + align: { + type: 'string', + default: 'none', + }, + images: { + type: 'array', + default: [], + source: 'query', + selector: 'div.wp-block-gallery figure.blocks-gallery-image img', + query: { + url: { + source: 'attribute', + attribute: 'src', + }, + alt: { + source: 'attribute', + attribute: 'alt', + default: '', + }, + id: { + source: 'attribute', + attribute: 'data-id', + }, + }, + }, + columns: { + type: 'number', + }, + imageCrop: { + type: 'boolean', + default: true, + }, + linkTo: { + type: 'string', + default: 'none', + }, + }, + save( { attributes } ) { const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes; return ( diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss index 48646855bfb98..96b4f3d508119 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -6,6 +6,7 @@ flex-wrap: wrap; list-style-type: none; + .blocks-gallery-image, .blocks-gallery-item { margin: 8px; display: flex; @@ -26,6 +27,7 @@ } // Cropped + &.is-cropped .blocks-gallery-image, &.is-cropped .blocks-gallery-item { img { flex: 1; @@ -43,16 +45,19 @@ } // Responsive fallback value, 2 columns + & .blocks-gallery-image, & .blocks-gallery-item { width: calc( 100% / 2 - 16px ); } + &.columns-1 .blocks-gallery-image, &.columns-1 .blocks-gallery-item { width: calc(100% / 1 - 16px); } @include break-small { @for $i from 3 through 8 { + &.columns-#{ $i } .blocks-gallery-image, &.columns-#{ $i } .blocks-gallery-item { width: calc(100% / #{ $i } - 16px ); }