diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js index e2c58f488375bc..caac3d72af7b89 100644 --- a/blocks/library/gallery/block.js +++ b/blocks/library/gallery/block.js @@ -235,7 +235,7 @@ class GalleryBlock extends Component { /> ), -
+
, + , ]; } } diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index b4ba07b8d04c45..7a65a586f81a81 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -2,7 +2,7 @@ margin: -8px; } -.blocks-gallery-image { +.blocks-gallery-item { position: relative; &.is-selected { diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js index 6ce5315ded44ef..0d243bc6ca55a1 100644 --- a/blocks/library/gallery/gallery-image.js +++ b/blocks/library/gallery/gallery-image.js @@ -36,26 +36,28 @@ class GalleryImage extends Component { const img = url ? { : ; - const className = classnames( 'blocks-gallery-image', { + const className = classnames( 'blocks-gallery-item', { '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 5d208791144231..bbd1240d9fd60a 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: 'div.wp-block-gallery figure.blocks-gallery-image img', + selector: 'ul.wp-block-gallery .blocks-gallery-item img', query: { url: { source: 'attribute', @@ -151,7 +151,7 @@ registerBlockType( 'core/gallery', { 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 7f4e436eaa2d5f..48646855bfb986 100644 --- a/blocks/library/gallery/style.scss +++ b/blocks/library/gallery/style.scss @@ -4,22 +4,29 @@ .wp-block-gallery.aligncenter { display: flex; flex-wrap: wrap; + list-style-type: none; - .blocks-gallery-image { + .blocks-gallery-item { margin: 8px; display: flex; flex-grow: 1; flex-direction: column; justify-content: center; + figure { + height: 100%; + margin: 0; + } + img { + display: block; max-width: 100%; height: auto; } } // Cropped - &.is-cropped .blocks-gallery-image { + &.is-cropped .blocks-gallery-item { img { flex: 1; width: 100%; @@ -29,47 +36,26 @@ } // Alas, IE11+ doesn't support object-fit - _:-ms-lang(x), img { + _:-ms-lang(x), figure { height: auto; width: auto; } } - &.columns-1 figure { - width: calc(100% / 1 - 16px); - } - &.columns-2 figure { - width: calc(100% / 2 - 16px); + // Responsive fallback value, 2 columns + & .blocks-gallery-item { + width: calc( 100% / 2 - 16px ); } - // Responsive fallback value, 2 columns - &.columns-3 figure, - &.columns-4 figure, - &.columns-5 figure, - &.columns-6 figure, - &.columns-7 figure, - &.columns-8 figure { - width: calc(100% / 2 - 16px); + &.columns-1 .blocks-gallery-item { + width: calc(100% / 1 - 16px); } @include break-small { - &.columns-3 figure { - width: calc(100% / 3 - 16px); - } - &.columns-4 figure { - width: calc(100% / 4 - 16px); - } - &.columns-5 figure { - width: calc(100% / 5 - 16px); - } - &.columns-6 figure { - width: calc(100% / 6 - 16px); - } - &.columns-7 figure { - width: calc(100% / 7 - 16px); - } - &.columns-8 figure { - width: calc(100% / 8 - 16px); + @for $i from 3 through 8 { + &.columns-#{ $i } .blocks-gallery-item { + width: calc(100% / #{ $i } - 16px ); + } } } } diff --git a/blocks/test/fixtures/core__gallery.html b/blocks/test/fixtures/core__gallery.html index b74b304f41e3f3..04de21e2d9e31a 100644 --- a/blocks/test/fixtures/core__gallery.html +++ b/blocks/test/fixtures/core__gallery.html @@ -1,10 +1,14 @@ - + diff --git a/blocks/test/fixtures/core__gallery.json b/blocks/test/fixtures/core__gallery.json index 4d1777693f7532..fb6297c656a90c 100644 --- a/blocks/test/fixtures/core__gallery.json +++ b/blocks/test/fixtures/core__gallery.json @@ -18,6 +18,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "" + "originalContent": "" } ] diff --git a/blocks/test/fixtures/core__gallery.parsed.json b/blocks/test/fixtures/core__gallery.parsed.json index f4c318b6e5213b..a7b0f1e5c12b61 100644 --- a/blocks/test/fixtures/core__gallery.parsed.json +++ b/blocks/test/fixtures/core__gallery.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/gallery", "attrs": null, "innerBlocks": [], - "innerHTML": "\n\n" + "innerHTML": "\n\n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery.serialized.html b/blocks/test/fixtures/core__gallery.serialized.html index f00d97942ebef8..1e5052940c3784 100644 --- a/blocks/test/fixtures/core__gallery.serialized.html +++ b/blocks/test/fixtures/core__gallery.serialized.html @@ -1,6 +1,14 @@ - + diff --git a/blocks/test/fixtures/core__gallery__columns.html b/blocks/test/fixtures/core__gallery__columns.html index 3fe69778320f66..78fd5f750274fb 100644 --- a/blocks/test/fixtures/core__gallery__columns.html +++ b/blocks/test/fixtures/core__gallery__columns.html @@ -1,10 +1,14 @@ - + diff --git a/blocks/test/fixtures/core__gallery__columns.json b/blocks/test/fixtures/core__gallery__columns.json index 2b3e2e7fca6e6f..523c94b687e550 100644 --- a/blocks/test/fixtures/core__gallery__columns.json +++ b/blocks/test/fixtures/core__gallery__columns.json @@ -2,7 +2,7 @@ { "uid": "_uid_0", "name": "core/gallery", - "isValid": true, + "isValid": false, "attributes": { "align": "none", "images": [ @@ -19,6 +19,6 @@ "imageCrop": true, "linkTo": "none" }, - "originalContent": "" + "originalContent": "" } ] diff --git a/blocks/test/fixtures/core__gallery__columns.parsed.json b/blocks/test/fixtures/core__gallery__columns.parsed.json index 291420ff0b4c3e..18c8b174b62d34 100644 --- a/blocks/test/fixtures/core__gallery__columns.parsed.json +++ b/blocks/test/fixtures/core__gallery__columns.parsed.json @@ -5,7 +5,7 @@ "columns": "1" }, "innerBlocks": [], - "innerHTML": "\n\n" + "innerHTML": "\n\n" }, { "attrs": {}, diff --git a/blocks/test/fixtures/core__gallery__columns.serialized.html b/blocks/test/fixtures/core__gallery__columns.serialized.html index 39501c3ae1a1e3..9e7bf00dbe8533 100644 --- a/blocks/test/fixtures/core__gallery__columns.serialized.html +++ b/blocks/test/fixtures/core__gallery__columns.serialized.html @@ -1,6 +1,14 @@ - + diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index b01d63b1bb69b8..6c9256ad6f0456 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -43,11 +43,11 @@ body.gutenberg-editor-page { box-sizing: border-box; } - ul { + ul:not(.wp-block-gallery) { list-style-type: disc; } - ol { + ol:not(.wp-block-gallery) { list-style-type: decimal; } diff --git a/post-content.js b/post-content.js index aec808790da651..9d7ae5a55d6f18 100644 --- a/post-content.js +++ b/post-content.js @@ -84,11 +84,11 @@ window._wpGutenbergPost.content = { '', '', - '', + '', '', '', @@ -112,10 +112,10 @@ window._wpGutenbergPost.content = { '', '', - '', + '', '', '',