Skip to content

Commit

Permalink
Merge pull request #3996 from WordPress/try/gallery-markup-tweaks
Browse files Browse the repository at this point in the history 
Try new gallery markup
  • Loading branch information
@jasmussen
jasmussen authored Jan 18, 2018
2 parents 57280d0 + d04b78d commit b866d21
Show file tree
Hide file tree
Showing 17 changed files with 195 additions and 144 deletions.
25 changes: 13 additions & 12 deletions blocks/library/gallery/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,21 +235,22 @@ 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
key={ img.id || img.url }
url={ img.url }
alt={ img.alt }
id={ img.id }
isSelected={ this.state.selectedImage === index }
onRemove={ this.onRemoveImage( index ) }
onClick={ this.onSelectImage( index ) }
setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
/>
<li className="blocks-gallery-item" key={ img.id || img.url }>
<GalleryImage
url={ img.url }
alt={ img.alt }
id={ img.id }
isSelected={ this.state.selectedImage === index }
onRemove={ this.onRemoveImage( index ) }
onClick={ this.onSelectImage( index ) }
setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
/>
</li>
) ) }
</div>,
</ul>,
];
}
}
Expand Down
10 changes: 5 additions & 5 deletions blocks/library/gallery/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
margin: -8px;
}

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

&.is-selected {
.is-selected {
outline: 4px solid $blue-medium-500;
outline-offset: -4px;
}
}

.blocks-gallery-image__inline-menu {
.blocks-gallery-item__inline-menu {
padding: 2px;
position: absolute;
top: 0;
right: 0;
background-color: $blue-medium-500;
display: inline-flex;
z-index: z-index( '.blocks-gallery-image__inline-menu' );
z-index: z-index( '.blocks-gallery-item__inline-menu' );

.components-button {
color: $white;
Expand All @@ -29,6 +29,6 @@
}
}

.blocks-gallery-image__remove {
.blocks-gallery-item__remove {
padding: 0;
}
6 changes: 3 additions & 3 deletions blocks/library/gallery/gallery-image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ 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( {
'is-selected': isSelected,
} );

Expand All @@ -45,11 +45,11 @@ class GalleryImage extends Component {
return (
<figure className={ className } onClick={ onClick }>
{ isSelected &&
<div className="blocks-gallery-image__inline-menu">
<div className="blocks-gallery-item__inline-menu">
<IconButton
icon="no-alt"
onClick={ onRemove }
className="blocks-gallery-image__remove"
className="blocks-gallery-item__remove"
label={ __( 'Remove Image' ) }
/>
</div>
Expand Down
135 changes: 89 additions & 46 deletions blocks/library/gallery/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,60 +17,61 @@ import './style.scss';
import { registerBlockType, createBlock } from '../../api';
import { default as GalleryBlock, defaultColumnsNumber } from './block';

const blockAttributes = {
align: {
type: 'string',
default: 'none',
},
images: {
type: 'array',
default: [],
source: 'query',
selector: 'ul.wp-block-gallery .blocks-gallery-item 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',
},
};

registerBlockType( 'core/gallery', {
title: __( 'Gallery' ),
description: __( 'Image galleries are a great way to share groups of pictures on your site.' ),
icon: 'format-gallery',
category: 'common',
keywords: [ __( 'images' ), __( 'photos' ) ],

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',
},
},
attributes: blockAttributes,

transforms: {
from: [
{
type: 'block',
isMultiBlock: true,
blocks: [ 'core/image' ],
transform: ( blockAttributes ) => {
const validImages = filter( blockAttributes, ( { id, url } ) => id && url );
transform: ( attributes ) => {
const validImages = filter( attributes, ( { id, url } ) => id && url );
if ( validImages.length > 0 ) {
return createBlock( 'core/gallery', {
images: validImages.map( ( { id, url, alt } ) => ( { id, url, alt } ) ),
Expand Down Expand Up @@ -151,7 +152,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 @@ -167,13 +168,55 @@ 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-item">
<figure>
{ href ? <a href={ href }>{ img }</a> : img }
</figure>
</li>
);
} ) }
</div>
</ul>
);
},

deprecated: [
{
attributes: {
...blockAttributes,
images: {
...blockAttributes.images,
selector: 'div.wp-block-gallery figure.blocks-gallery-image img',
},
},

save( { attributes } ) {
const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
return (
<div className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
{ images.map( ( image ) => {
let href;

switch ( linkTo ) {
case 'media':
href = image.url;
break;
case 'attachment':
href = image.link;
break;
}

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>
);
} ) }
</div>
);
},
},
],

} );
57 changes: 24 additions & 33 deletions blocks/library/gallery/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,31 @@
.wp-block-gallery.aligncenter {
display: flex;
flex-wrap: wrap;
list-style-type: none;

.blocks-gallery-image {
.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-image,
&.is-cropped .blocks-gallery-item {
img {
flex: 1;
width: 100%;
Expand All @@ -29,47 +38,29 @@
}

// 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-image,
& .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-image,
&.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-image,
&.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-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 -->
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 alignnone columns-2 is-cropped\">\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>"
}
]
Loading

0 comments on commit b866d21

Please sign in to comment.