Skip to content

Commit

Permalink
Refactored the way styles are applied to tiles
Browse files Browse the repository at this point in the history 
Re-adjusts using ResizeObserver.
  • Loading branch information
@simison
simison committed Oct 23, 2018
1 parent 7f6818a commit e21e264
Show file tree
Hide file tree
Showing 11 changed files with 441 additions and 233 deletions.
10 changes: 7 additions & 3 deletions client/gutenberg/extensions/tiled-gallery/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { _x } from '@wordpress/i18n';

export const ALLOWED_MEDIA_TYPES = [ 'image' ];
export const DEFAULT_COLUMNS = 3;
export const MAX_COLUMNS = 20;
export const TILE_MARGIN = 2;
export const LAYOUTS = [
export const DEFAULT_GALLERY_WIDTH = 580;
export const DEFAULT_LAYOUT = 'rectangular';
export const LAYOUT_STYLES = [
{
label: _x( 'Tiled mosaic', 'Tiled gallery layout', 'jetpack' ),
name: 'rectangular',
Expand All @@ -28,3 +28,7 @@ export const LAYOUTS = [
name: 'circle',
},
];
export const LAYOUTS = [ 'rectangular', 'columns', 'square', 'circle' ];
export const MAX_COLUMNS = 20;
export const RESIZE_RATE_IN_MS = 200;
export const TILE_MARGIN = 2;
99 changes: 27 additions & 72 deletions client/gutenberg/extensions/tiled-gallery/edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
/**
* External Dependencies
*/
import classnames from 'classnames';
import filter from 'lodash/filter';
import pick from 'lodash/pick';
import find from 'lodash/find';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Expand All @@ -28,54 +26,19 @@ import {
MediaUpload,
} from '@wordpress/editor';
import { create } from '@wordpress/rich-text';
// @TODO:
// Adding `@wordpress/token-list` to dependencies conflicts with current 3.0.0 version of `@wordpress/editor`
// This will still work for Jetpack, but will fail when importing the block in Calypso
// eslint-disable-next-line import/no-extraneous-dependencies
import TokenList from '@wordpress/token-list';

/**
* Internal dependencies
*/
import { ALLOWED_MEDIA_TYPES, LAYOUTS, MAX_COLUMNS, DEFAULT_COLUMNS } from './constants';
import { ALLOWED_MEDIA_TYPES, MAX_COLUMNS, DEFAULT_COLUMNS } from './constants';
import GalleryGrid from './gallery-grid';
import GalleryImage from './gallery-image';
import { getActiveStyleName } from './layouts';

export function defaultColumnsNumber( attributes ) {
return Math.min( DEFAULT_COLUMNS, attributes.images.length );
}

/**
* Returns the active style from the given className.
*
* @param {Array} styles Block style variations.
* @param {string} className Class name
*
* @return {Object?} The active style.
*
* From https://github.com/WordPress/gutenberg/blob/077f6c4eb9ba061bc00d5f3ae956d4789a291fb5/packages/editor/src/components/block-styles/index.js#L21-L43
*/
function getActiveStyle( styles, className ) {
for ( const style of new TokenList( className ).values() ) {
if ( style.indexOf( 'is-style-' ) === -1 ) {
continue;
}

const potentialStyleName = style.substring( 9 );
const activeStyle = find( styles, { name: potentialStyleName } );
if ( activeStyle ) {
return activeStyle;
}
}

return find( styles, 'isDefault' );
}

const getActiveStyleName = className => {
const activeStyle = getActiveStyle( LAYOUTS, className );
return activeStyle.name;
};

const pickRelevantMediaFiles = image => {
let { caption } = image;

Expand Down Expand Up @@ -138,18 +101,16 @@ class TiledGalleryEdit extends Component {
} );
}

setLayout( value ) {
this.setState( {
layout: value,
} );
setLayout( layout ) {
this.setState( { layout } );
}

setLinkTo( value ) {
this.props.setAttributes( { linkTo: value } );
setLinkTo( linkTo ) {
this.props.setAttributes( { linkTo } );
}

setColumnsNumber( value ) {
this.props.setAttributes( { columns: value } );
setColumnsNumber( columns ) {
this.props.setAttributes( { columns } );
}

toggleImageCrop() {
Expand Down Expand Up @@ -340,34 +301,28 @@ class TiledGalleryEdit extends Component {
</InspectorControls>
{ noticeUI }
{ dropZone }
<div
className={ classnames( className, {
'is-cropped': imageCrop,
[ `align${ align }` ]: align,
[ `columns-${ columns }` ]: columns,
} ) }
<GalleryGrid
align={ align }
className={ className }
columns={ columns }
imageCrop={ imageCrop }
images={ images }
layout={ this.state.layout }
renderGalleryImage={ renderGalleryImage }
>
<GalleryGrid
columns={ columns }
images={ images }
layout={ this.state.layout }
renderGalleryImage={ renderGalleryImage }
/>
{ isSelected && (
<div className="tiled-gallery__row tiled-gallery__upload">
<FormFileUpload
multiple
isLarge
className="block-library-gallery-add-item-button"
onChange={ this.uploadFromFiles }
accept="image/*"
icon="insert"
>
{ __( 'Upload an image', 'jetpack' ) }
</FormFileUpload>
</div>
<FormFileUpload
multiple
isLarge
className="block-library-gallery-add-item-button"
onChange={ this.uploadFromFiles }
accept="image/*"
icon="insert"
>
{ __( 'Upload an image', 'jetpack' ) }
</FormFileUpload>
) }
</div>
</GalleryGrid>
</Fragment>
);
}
Expand Down
19 changes: 12 additions & 7 deletions client/gutenberg/extensions/tiled-gallery/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { createBlock, registerBlockStyle, registerBlockType } from '@wordpress/b
* Internal dependencies
*/
import './editor.scss';
import { DEFAULT_COLUMNS, LAYOUTS } from './constants';
import { DEFAULT_COLUMNS, DEFAULT_LAYOUT, LAYOUT_STYLES, LAYOUTS } from './constants';
import { default as edit } from './edit';
import { default as save } from './save';

Expand Down Expand Up @@ -63,7 +63,7 @@ const blockAttributes = {
},
};

const blockName = 'a8c/tiled-gallery';
export const blockName = 'a8c/tiled-gallery';

const blockSettings = {
title: __( 'Tiled gallery', 'jetpack' ),
Expand All @@ -83,7 +83,6 @@ const blockSettings = {
supports: {
align: true,
},

transforms: {
from: [
{
Expand All @@ -108,7 +107,7 @@ const blockSettings = {
type: 'shortcode',
tag: 'gallery',
attributes: {
// @TODO: other params (https://en.support.wordpress.com/gallery/#gallery-shortcode)
// @TODO: other params: https://en.support.wordpress.com/gallery/#gallery-shortcode
images: {
type: 'array',
shortcode: ( { named: { ids } } ) => {
Expand All @@ -133,6 +132,13 @@ const blockSettings = {
return link === 'file' ? 'media' : link;
},
},
layout: {
type: 'string',
shortcode: ( { named: { type = DEFAULT_LAYOUT } } ) => {
// @TODO: if `type=slideshow`, return a slideshow block
return LAYOUTS.indexOf( type ) > -1 ? type : DEFAULT_LAYOUT;
},
},
},
},
],
Expand All @@ -157,13 +163,12 @@ const blockSettings = {
},
],
},

edit,
save,
};

LAYOUTS.forEach( layout => {
registerBlockStyle( blockName, layout );
LAYOUT_STYLES.forEach( style => {
registerBlockStyle( blockName, style );
} );

registerBlockType( blockName, blockSettings );
7 changes: 6 additions & 1 deletion client/gutenberg/extensions/tiled-gallery/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,12 @@
}
}

.tiled-gallery__upload {
// Circle layout doesn't support captions
&.is-style-circle .tiled-gallery__item .editor-rich-text {
display: none;
}

.tiled-gallery__row-extras {
&,
.components-form-file-upload,
.components-button.block-library-gallery-add-item-button {
Expand Down
Loading

0 comments on commit e21e264

Please sign in to comment.