+
+ { __( 'Upload an image' ) }
+
+
) }
-
- { rows.map( ( row, rowIndex ) => {
- return (
-
- );
- }
-}
-
-export default TiledGalleryGrid;
diff --git a/client/gutenberg/extensions/tiled-gallery/gallery-image.jsx b/client/gutenberg/extensions/tiled-gallery/gallery-image.jsx
deleted file mode 100644
index 4f18eb286d82d..0000000000000
--- a/client/gutenberg/extensions/tiled-gallery/gallery-image.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/** @format */
-
-/**
- * This component is originally from Gutenberg Gallery block:
- * @link https://github.com/WordPress/gutenberg/blob/1cd604df7e9017e0dbe3ab64897ac3af35ca35c5/packages/block-library/src/gallery/gallery-image.js
- */
-
-/**
- * External Dependencies
- */
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { Component } from '@wordpress/element';
-import { IconButton, Spinner } from '@wordpress/components';
-import { RichText } from '@wordpress/editor';
-import { withSelect } from '@wordpress/data';
-import classnames from 'classnames';
-
-/**
- * Internal Dependencies
- */
-import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
-
-class GalleryImage extends Component {
- constructor() {
- super( ...arguments );
-
- this.onImageClick = this.onImageClick.bind( this );
- this.onSelectCaption = this.onSelectCaption.bind( this );
- this.onKeyDown = this.onKeyDown.bind( this );
- this.bindContainer = this.bindContainer.bind( this );
-
- this.state = {
- captionSelected: false,
- };
- }
-
- bindContainer( ref ) {
- this.container = ref;
- }
-
- onSelectCaption() {
- if ( ! this.state.captionSelected ) {
- this.setState( {
- captionSelected: true,
- } );
- }
-
- if ( ! this.props.isSelected ) {
- this.props.onSelect();
- }
- }
-
- onImageClick() {
- if ( ! this.props.isSelected ) {
- this.props.onSelect();
- }
-
- if ( this.state.captionSelected ) {
- this.setState( {
- captionSelected: false,
- } );
- }
- }
-
- onKeyDown( event ) {
- if (
- this.container === document.activeElement &&
- this.props.isSelected &&
- [ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1
- ) {
- event.stopPropagation();
- event.preventDefault();
- this.props.onRemove();
- }
- }
-
- componentDidUpdate( prevProps ) {
- const { isSelected, image, url } = this.props;
- if ( image && ! url ) {
- this.props.setAttributes( {
- url: image.source_url,
- alt: image.alt_text,
- } );
- }
-
- // unselect the caption so when the user selects other image and comeback
- // the caption is not immediately selected
- if ( this.state.captionSelected && ! isSelected && prevProps.isSelected ) {
- //eslint-disable-next-line
- this.setState( {
- captionSelected: false,
- } );
- }
- }
-
- render() {
- const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes } = this.props;
-
- let href;
-
- switch ( linkTo ) {
- case 'media':
- href = url;
- break;
- case 'attachment':
- href = link;
- break;
- }
-
- const img = url ? (
- // Disable reason: Image itself is not meant to be
- // interactive, but should direct image selection and unfocus caption fields
- // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-
- { 'groups' in row
- ? row.groups.map( ( group, groupI ) => (
-
- );
- } ) }
- { children ? (
-
- { group.images.map( image => {
- const galleryItem = (
-
- ) )
- : row.tiles.map( tile => {
- const galleryItem = (
-
- { renderGalleryImage( imageIndex ) }
-
- );
-
- imageIndex++;
-
- return galleryItem;
- } ) }
-
- { renderGalleryImage( imageIndex ) }
-
- );
-
- imageIndex++;
-
- return galleryItem;
- } ) }
-
- { children }
-
- ) : null }
-
-
- ) }
- { href ? { img } : img }
- { ! RichText.isEmpty( caption ) || isSelected ? (
-
+
+ ) }
+ { href ? { img } : img }
+ { ! RichText.isEmpty( caption ) || isSelected ? (
+ { children }
;
+}
diff --git a/client/gutenberg/extensions/tiled-gallery/layout/gallery.js b/client/gutenberg/extensions/tiled-gallery/layout/gallery.js
new file mode 100644
index 0000000000000..94fc61e4be980
--- /dev/null
+++ b/client/gutenberg/extensions/tiled-gallery/layout/gallery.js
@@ -0,0 +1,7 @@
+export default function Gallery( { children, galleryRef } ) {
+ return (
+
+ { children }
+
+ );
+}
diff --git a/client/gutenberg/extensions/tiled-gallery/layout/index.js b/client/gutenberg/extensions/tiled-gallery/layout/index.js
new file mode 100644
index 0000000000000..bb9a4201cf3d0
--- /dev/null
+++ b/client/gutenberg/extensions/tiled-gallery/layout/index.js
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { isBlobURL } from '@wordpress/blob';
+import photon from 'photon';
+
+/**
+ * Internal dependencies
+ */
+import GalleryImageEdit from '../gallery-image/edit';
+import GalleryImageSave from '../gallery-image/save';
+import Mosaic from './mosaic';
+import Square from './square';
+
+// @TODO put in consts?
+const PHOTON_MAX_RESIZE = 2000;
+
+export default class Layout extends Component {
+ photonize( { height, width, url } ) {
+ // Do not Photonize images that are still uploading or from localhost
+ if ( isBlobURL( url ) || /^https?:\/\/localhost/.test( url ) ) {
+ return url;
+ }
+
+ const { layoutStyle } = this.props;
+ if ( isSquareishLayout( layoutStyle ) && width && height ) {
+ const size = Math.min( PHOTON_MAX_RESIZE, width, height );
+ return photon( url, { resize: `${ size },${ size }` } );
+ }
+ return photon( url );
+ }
+
+ // This is tricky:
+ // - We need to "photonize" to resize the images at appropriate dimensions
+ // - The resize will depend on the image size and the layout in some cases
+ // - Handlers need to be created by index so that the image changes can be applied correctly.
+ // This is because the images are stored in an array in the block attributes.
+ renderImage( img, i ) {
+ const {
+ columns,
+ imageCrop,
+ images,
+ isSave,
+ linkTo,
+ onRemoveImage,
+ onSelectImage,
+ selectedImage,
+ setImageAttributes,
+ } = this.props;
+
+ /* translators: %1$d is the order number of the image, %2$d is the total number of images. */
+ const ariaLabel = sprintf( __( 'image %1$d of %2$d in gallery' ), i + 1, images.length );
+ const Image = isSave ? GalleryImageSave : GalleryImageEdit;
+
+ return (
+
+
+ );
+ }
+}
+
+function isSquareishLayout( layout ) {
+ return [ 'circle', 'square' ].includes( layout );
+}
diff --git a/client/gutenberg/extensions/tiled-gallery/layout/mosaic/index.js b/client/gutenberg/extensions/tiled-gallery/layout/mosaic/index.js
new file mode 100644
index 0000000000000..01c676ab62b3b
--- /dev/null
+++ b/client/gutenberg/extensions/tiled-gallery/layout/mosaic/index.js
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { Component, createRef } from '@wordpress/element';
+import ResizeObserver from 'resize-observer-polyfill';
+
+/**
+ * Internal dependencies
+ */
+import Column from '../column';
+import Gallery from '../gallery';
+import Row from '../row';
+import { getGalleryRows, handleRowResize } from './resize';
+import { imagesToRatios, ratiosToRows } from './ratios';
+
+export default class Mosaic extends Component {
+ gallery = createRef();
+ pendingRaf = null;
+ ro = null; // resizeObserver instance
+
+ componentDidMount() {
+ this.observeResize();
+ }
+
+ componentWillUnmount() {
+ this.unobserveResize();
+ }
+
+ componentDidUpdate( prevProps ) {
+ if ( prevProps.images !== this.props.images || prevProps.align !== this.props.align ) {
+ this.triggerResize();
+ }
+ }
+
+ handleGalleryResize = entries => {
+ if ( this.pendingRaf ) {
+ cancelAnimationFrame( this.pendingRaf );
+ this.pendingRaf = null;
+ }
+ this.pendingRaf = requestAnimationFrame( () => {
+ for ( const { contentRect, target } of entries ) {
+ const { width } = contentRect;
+ getGalleryRows( target ).forEach( row => handleRowResize( row, width ) );
+ }
+ } );
+ };
+
+ triggerResize() {
+ if ( this.gallery.current ) {
+ this.handleGalleryResize( [
+ {
+ target: this.gallery.current,
+ contentRect: { width: this.gallery.current.clientWidth },
+ },
+ ] );
+ }
+ }
+
+ observeResize() {
+ this.triggerResize();
+ this.ro = new ResizeObserver( this.handleGalleryResize );
+ if ( this.gallery.current ) {
+ this.ro.observe( this.gallery.current );
+ }
+ }
+
+ unobserveResize() {
+ if ( this.ro ) {
+ this.ro.disconnect();
+ this.ro = null;
+ }
+ if ( this.pendingRaf ) {
+ cancelAnimationFrame( this.pendingRaf );
+ this.pendingRaf = null;
+ }
+ }
+
+ render() {
+ const { images, align, renderedImages } = this.props;
+ const ratios = imagesToRatios( images );
+ const rows = ratiosToRows( ratios, { isWide: [ 'full', 'wide' ].includes( align ) } );
+
+ let cursor = 0;
+ return (
+ { children }
;
+}
diff --git a/client/gutenberg/extensions/tiled-gallery/layout/square.js b/client/gutenberg/extensions/tiled-gallery/layout/square.js
new file mode 100644
index 0000000000000..2a1ab888b1916
--- /dev/null
+++ b/client/gutenberg/extensions/tiled-gallery/layout/square.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { chunk, drop, take } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import Row from './row';
+import Column from './column';
+import Gallery from './gallery';
+import { MAX_COLUMNS } from '../constants';
+
+export default function Square( { columns, renderedImages } ) {
+ const columnCount = Math.min( MAX_COLUMNS, columns );
+
+ const remainder = renderedImages.length % columnCount;
+
+ return (
+