Skip to content

Commit

Permalink
Try new gallery markup
Browse files Browse the repository at this point in the history 
This is a new version of the PR by #3441 by @samikeijonen. It's just basically "rebased".

It seems to be working fine in practice, the chief purpose is to make the gallery be list based.

I'm getting "modified externally" warnings, though.
  • Loading branch information
Joen Asmussen committed Dec 14, 2017
1 parent e421572 commit 4cfe4f5
Show file tree
Hide file tree
Showing 15 changed files with 110 additions and 96 deletions.
4 changes: 2 additions & 2 deletions blocks/library/gallery/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ class GalleryBlock extends Component {
/>
</InspectorControls>
),
<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
<ul key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
{ dropZone }
{ images.map( ( img, index ) => (
<GalleryImage
Expand All @@ -257,7 +257,7 @@ class GalleryBlock extends Component {
setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
/>
) ) }
</div>,
</ul>,
];
}
}
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/gallery/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
overflow: hidden;
}

.blocks-gallery-image {
.blocks-gallery-item {
position: relative;

&.is-selected {
Expand Down
30 changes: 16 additions & 14 deletions blocks/library/gallery/gallery-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,28 @@ class GalleryImage extends Component {

const img = url ? <img src={ url } alt={ alt } data-id={ id } /> : <Spinner />;

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 (
<figure className={ className } onClick={ onClick }>
{ isSelected &&
<div className="blocks-gallery-image__inline-menu">
<IconButton
icon="no-alt"
onClick={ onRemove }
className="blocks-gallery-image__remove"
label={ __( 'Remove Image' ) }
/>
</div>
}
{ href ? <a href={ href }>{ img }</a> : img }
</figure>
<li className={ className } onClick={ onClick }>
<figure>
{ isSelected &&
<div className="blocks-gallery-image__inline-menu">
<IconButton
icon="no-alt"
onClick={ onRemove }
className="blocks-gallery-image__remove"
label={ __( 'Remove Image' ) }
/>
</div>
}
{ href ? <a href={ href }>{ img }</a> : img }
</figure>
</li>
);
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
Expand Down
14 changes: 8 additions & 6 deletions blocks/library/gallery/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,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',
Expand Down Expand Up @@ -133,7 +133,7 @@ registerBlockType( 'core/gallery', {
save( { attributes } ) {
const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
return (
<div className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
<ul className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
{ images.map( ( image ) => {
let href;

Expand All @@ -149,12 +149,14 @@ registerBlockType( 'core/gallery', {
const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } />;

return (
<figure key={ image.id || image.url } className="blocks-gallery-image">
{ href ? <a href={ href }>{ img }</a> : img }
</figure>
<li key={ image.id || image.url } className="blocks-gallery-image">
<figure>
{ href ? <a href={ href }>{ img }</a> : img }
</figure>
</li>
);
} ) }
</div>
</ul>
);
},

Expand Down
52 changes: 19 additions & 33 deletions blocks/library/gallery/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,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%;
Expand All @@ -33,47 +40,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 );
}
}
}
}
20 changes: 12 additions & 8 deletions blocks/test/fixtures/core__gallery.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<!-- wp:core/gallery -->
<div class="wp-block-gallery alignnone columns-2 is-cropped">
<figure class="blocks-gallery-image">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
<figure class="blocks-gallery-image">
<img src="http://google.com/hi.png" alt="title" />
</figure>
</div>
<ul class="wp-block-gallery alignnone columns-2 is-cropped">
<li class="blocks-gallery-image">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-image">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>
<!-- /wp:core/gallery -->
2 changes: 1 addition & 1 deletion blocks/test/fixtures/core__gallery.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@
"imageCrop": true,
"linkTo": "none"
},
"originalContent": "<div class=\"wp-block-gallery alignnone columns-2 is-cropped\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>"
"originalContent": "<ul class=\"wp-block-gallery\">\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n</ul>"
}
]
2 changes: 1 addition & 1 deletion blocks/test/fixtures/core__gallery.parsed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"blockName": "core/gallery",
"attrs": null,
"innerBlocks": [],
"innerHTML": "\n<div class=\"wp-block-gallery alignnone columns-2 is-cropped\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
"innerHTML": "\n<ul class=\"wp-block-gallery\">\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n</ul>\n"
},
{
"attrs": {},
Expand Down
16 changes: 12 additions & 4 deletions blocks/test/fixtures/core__gallery.serialized.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<!-- wp:gallery -->
<div class="wp-block-gallery alignnone columns-2 is-cropped">
<figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
<figure class="blocks-gallery-image"><img src="http://google.com/hi.png" alt="title" /></figure>
</div>
<ul class="wp-block-gallery alignnone columns-2 is-cropped">
<li class="blocks-gallery-image">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-image">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>
<!-- /wp:gallery -->
20 changes: 12 additions & 8 deletions blocks/test/fixtures/core__gallery__columns.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<!-- wp:core/gallery {"columns":"1"} -->
<div class="wp-block-gallery alignnone columns-1 is-cropped">
<figure class="blocks-gallery-image">
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
<figure class="blocks-gallery-image">
<img src="http://google.com/hi.png" alt="title" />
</figure>
</div>
<ul class="wp-block-gallery columns-1 ">
<li class="blocks-gallery-item">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>
<!-- /wp:core/gallery -->
4 changes: 2 additions & 2 deletions blocks/test/fixtures/core__gallery__columns.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{
"uid": "_uid_0",
"name": "core/gallery",
"isValid": true,
"isValid": false,
"attributes": {
"align": "none",
"images": [
Expand All @@ -19,6 +19,6 @@
"imageCrop": true,
"linkTo": "none"
},
"originalContent": "<div class=\"wp-block-gallery alignnone columns-1 is-cropped\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>"
"originalContent": "<ul class=\"wp-block-gallery columns-1 \">\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n</ul>"
}
]
2 changes: 1 addition & 1 deletion blocks/test/fixtures/core__gallery__columns.parsed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"columns": "1"
},
"innerBlocks": [],
"innerHTML": "\n<div class=\"wp-block-gallery alignnone columns-1 is-cropped\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
"innerHTML": "\n<ul class=\"wp-block-gallery columns-1 \">\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n\t<li class=\"blocks-gallery-item\">\n\t\t<figure>\n\t\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t\t</figure>\n\t</li>\n</ul>\n"
},
{
"attrs": {},
Expand Down
16 changes: 12 additions & 4 deletions blocks/test/fixtures/core__gallery__columns.serialized.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
<!-- wp:gallery {"columns":1} -->
<div class="wp-block-gallery alignnone columns-1 is-cropped">
<figure class="blocks-gallery-image"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" /></figure>
<figure class="blocks-gallery-image"><img src="http://google.com/hi.png" alt="title" /></figure>
</div>
<ul class="wp-block-gallery columns-1 ">
<li class="blocks-gallery-item">
<figure>
<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
</figure>
</li>
<li class="blocks-gallery-item">
<figure>
<img src="http://google.com/hi.png" alt="title" />
</figure>
</li>
</ul>
<!-- /wp:gallery -->
4 changes: 2 additions & 2 deletions editor/assets/stylesheets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,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;
}

Expand Down
18 changes: 9 additions & 9 deletions post-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,11 @@ window._wpGutenbergPost.content = {
'<!-- /wp:paragraph -->',

'<!-- wp:gallery {"columns":2} -->',
'<div class="wp-block-gallery alignnone columns-2 is-cropped">',
'<figure class="blocks-gallery-image"><img src="https://cldup.com/n0g6ME5VKC.jpg" alt="" /></figure>',
'<figure class="blocks-gallery-image"><img src="https://cldup.com/ZjESfxPI3R.jpg" alt="" /></figure>',
'<figure class="blocks-gallery-image"><img src="https://cldup.com/EKNF8xD2UM.jpg" alt="" /></figure>',
'</div>',
'<ul class="wp-block-gallery alignnone columns-2 is-cropped">',
'<li class="blocks-gallery-image"><figure><img src="https://cldup.com/n0g6ME5VKC.jpg" alt="" /></figure></li>',
'<li class="blocks-gallery-image"><figure><img src="https://cldup.com/ZjESfxPI3R.jpg" alt="" /></figure></li>',
'<li class="blocks-gallery-image"><figure><img src="https://cldup.com/EKNF8xD2UM.jpg" alt="" /></figure></li>',
'</ul>',
'<!-- /wp:gallery -->',

'<!-- wp:paragraph -->',
Expand All @@ -112,10 +112,10 @@ window._wpGutenbergPost.content = {
'<!-- /wp:paragraph -->',

'<!-- wp:gallery {"align":"wide","images":[{"url":"https://cldup.com/_rSwtEeDGD.jpg","alt":""},{"url":"https://cldup.com/L-cC3qX2DN.jpg","alt":""}]} -->',
'<div class="wp-block-gallery alignwide columns-2 is-cropped">',
'<figure class="blocks-gallery-image"><img src="https://cldup.com/_rSwtEeDGD.jpg" alt="" /></figure>',
'<figure class="blocks-gallery-image"><img src="https://cldup.com/L-cC3qX2DN.jpg" alt="" /></figure>',
'</div>',
'<ul class="wp-block-gallery alignwide columns-2 is-cropped">',
'<li class="blocks-gallery-image"><figure><img src="https://cldup.com/_rSwtEeDGD.jpg" alt="" /></figure></li>',
'<li class="blocks-gallery-image"><figure><img src="https://cldup.com/L-cC3qX2DN.jpg" alt="" /></figure></li>',
'</ul>',
'<!-- /wp:gallery -->',

'<!-- wp:paragraph -->',
Expand Down

0 comments on commit 4cfe4f5

Please sign in to comment.