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 {
/>
),
-
+
{ dropZone }
{ images.map( ( img, index ) => (
this.setImageAttributes( index, attrs ) }
/>
) ) }
-
,
+ ,
];
}
}
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 (
-
+
+
+
);
/* 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 (
-
+
{ images.map( ( image ) => {
let href;
@@ -167,12 +167,14 @@ registerBlockType( 'core/gallery', {
const img = ;
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": "\n\t
\n\t
\n
"
+ "originalContent": "\n\t- \n\t\t\n\t
\n\t- \n\t\t\n\t
\n
"
}
]
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\t
\n\t
\n
\n"
+ "innerHTML": "\n\n\t- \n\t\t\n\t
\n\t- \n\t\t\n\t
\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": "\n\t
\n\t
\n
"
+ "originalContent": "\n\t- \n\t\t\n\t
\n\t- \n\t\t\n\t
\n
"
}
]
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\t
\n\t
\n
\n"
+ "innerHTML": "\n\n\t- \n\t\t\n\t
\n\t- \n\t\t\n\t
\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 = {
'',
'',
- '',
- '
',
- '
',
- '
',
+ '',
+ '',
+ '',
+ '
',
'',
'',