Tiled galleries: Consistent layouts #29559

sirreal · 2018-12-18T18:16:28Z

Changes proposed in this Pull Request

Pulls in changes from Gutenberg gallery components.
Rethink how layouts should be approached.

Resolves #28962

Closes #29614 (supersedes)
Closes #29598 (supersedes)
Fixes #29544 "don't show full size image, use large image instead"
Resolves #29495 "photonize image URLs"
Resolves #28943 "clarify disabled columns control"
Fixes #28904 "captions visible right after adding images"

Currently:

Implements a html+css only responsive square + circle layout. It's imperfect (~~images are not same w/h~~)

To do:

Save is currently empty
Rework mosaic layout using introduced components
Get square-ish layouts using same w/h dimensions
Get square-ish layouts working on upload
Verify @wordpress deps are present Jetpack-side
clean up dead code/files

Testing instructions

tbd…

cc: @simison

matticbot · 2018-12-18T18:16:29Z

Test live: https://calypso.live/?branch=update/g7g-tg-consistent-layout

simison · 2018-12-19T06:51:59Z

client/gutenberg/extensions/tiled-gallery/layout/index.js

+		} = 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 ) );


__ and sprintf need to be another way around here so that we don't attempt to translate already sprintf'ied result.

This is straight from Gutenberg, so they would have this issue as well:

https://github.com/WordPress/gutenberg/blob/5dba988cf740653b9ab41672c462c785f1ff1a38/packages/block-library/src/gallery/edit.js#L267-L268

client/gutenberg/extensions/tiled-gallery/save.jsx

client/gutenberg/extensions/utils/get-active-style-name.js

simison · 2018-12-19T07:08:11Z

client/gutenberg/extensions/tiled-gallery/save.jsx

-			align={ align }
-			className={ `wp-block-jetpack-tiled-gallery ${ className }` }
+		<Layout
+			className={ className }


To be safe, we probably should set default rectangular layout class is-style-rectangular here somehow on first render when className is undefined. (https://github.com/Automattic/wp-calypso/pull/29559/files#r242806286)

This won't affect functionality anyhow at editor side because is-style-rectangular doesn't have any affect on styling, but on view side we pick the layout from that classname.

simison · 2018-12-19T07:20:38Z

client/gutenberg/extensions/tiled-gallery/layout/index.js

+			const size = Math.min( width, height );
+			return photon( url, { resize: `${ size },${ size }` } );
+		}
+		return photon( url );


Should we check for window.location.hostname === 'localhost' and return the original URL in that case?

simison · 2018-12-19T07:47:26Z

client/gutenberg/extensions/tiled-gallery/layout/index.js

+import GalleryImage from '../gallery-image';
+
+export default class Layout extends Component {
+	photonize( { height, width, url } ) {


We never get width and height here: adding them to pickRelevantMediaFiles fixes it:

imageProps.width = get( image, [ 'sizes', 'large', 'width' ] ); imageProps.height = get( image, [ 'sizes', 'large', 'height' ] );

in

https://github.com/Automattic/wp-calypso/blob/0850165273bd7ee74a19f676a0333a70a9b48415/client/gutenberg/extensions/tiled-gallery/edit.jsx#L43-L50

You do get them on already uploaded images. I suspect your suggestion will fix this todo, nice spot!

Get square-ish layouts working on upload

There are more tricky things going on here, I'm going to hold off on any changes for now.

simison · 2018-12-19T07:48:13Z

client/gutenberg/extensions/tiled-gallery/layout/index.js

+				onSelect={ onSelectImage( i ) }
+				setAttributes={ setImageAttributes( i ) }
+				url={ this.photonize( img ) }
+				width={ img.width }


This width (and height above) ends up always being undefined, see https://github.com/Automattic/wp-calypso/pull/29559/files#r242816530

sirreal · 2018-12-19T09:03:45Z

client/gutenberg/extensions/tiled-gallery/index.js

+	columns: {
+		type: 'number',
+	},
+	ids: {


👋 @jeherve You'll be interested in the image ID array in attributes for Automattic/jetpack#11000

simison · 2018-12-27T08:23:47Z

client/gutenberg/extensions/tiled-gallery/gallery-image/edit.js

 import { IconButton, Spinner } from '@wordpress/components';
+import { isBlobURL } from '@wordpress/blob'; // @TODO Add dep Jetpack-side


Adding in Automattic/jetpack#11043

simison

This is mighty good! 💪

...stop stop it causing empty margins inside outline when image is selected.

It's so pretty

This reverts commit 616460979d517b114ee144eb91580ac308487a29.

Adds `@wordpress/blob` dependency for Tiled gallery since the block depends to it as of Automattic/wp-calypso#29559 ## Testing - Switch to `update/g7g-tg-consistent-layout` branch in Calypso - Build blocks: `npm run sdk -- gutenberg ./client/gutenberg/extensions/presets/jetpack/ /PATH_TO_JETPACK/_inc/blocks/` - Insert tiled gallery block - **Upload** images to gallery. Blob URLs are URLs for images that are still uploading. - The block can feel little broken due other issues but it shouldn't complain about missing dependency. ✨ (both editor and when publishing and looking at the page/post)

sirreal added [Status] In Progress [Block] Tiled Gallery labels Dec 18, 2018

sirreal self-assigned this Dec 18, 2018

simison added the [Goal] Gutenberg Working towards full integration with Gutenberg label Dec 19, 2018

simison reviewed Dec 19, 2018

View reviewed changes

client/gutenberg/extensions/tiled-gallery/save.jsx Outdated Show resolved Hide resolved

simison reviewed Dec 19, 2018

View reviewed changes

client/gutenberg/extensions/utils/get-active-style-name.js Outdated Show resolved Hide resolved

simison reviewed Dec 19, 2018

View reviewed changes

sirreal commented Dec 19, 2018

View reviewed changes

jeherve mentioned this pull request Dec 19, 2018

Post Images: add new method to detect images from Gutenberg blocks Automattic/jetpack#11000

Merged

sirreal force-pushed the update/g7g-tg-consistent-layout branch from e279cd2 to 8c557b1 Compare December 19, 2018 12:39

simison mentioned this pull request Dec 19, 2018

Tiled gallery block: rename groups to columns in tiled-grid classes #29598

Closed

sirreal force-pushed the update/g7g-tg-consistent-layout branch from 0b05e84 to cbc4012 Compare December 20, 2018 10:01

This was referenced Dec 20, 2018

Move overrides to main babel config #29660

Merged

Jetpack Blocks: Fix dynamic extension imports #29665

Merged

Packages: Import photon package #29129

Merged

sirreal force-pushed the update/g7g-tg-consistent-layout branch 2 times, most recently from a03c5ea to 10f123a Compare December 21, 2018 11:11

simison force-pushed the update/g7g-tg-consistent-layout branch from e1f03f5 to 7bc3982 Compare December 22, 2018 00:01

sirreal force-pushed the update/g7g-tg-consistent-layout branch from 52ecb64 to f60e1ae Compare December 26, 2018 13:35

This was referenced Dec 27, 2018

Tiled gallery block: fix rectangular layout margins #29530

Closed

Tiled gallery block: add wp-blob dependency Automattic/jetpack#11043

Merged

simison reviewed Dec 27, 2018

View reviewed changes

simison mentioned this pull request Dec 27, 2018

Tiled gallery block: remove cropping #29600

Closed

simison approved these changes Dec 27, 2018

View reviewed changes

Overhaul layout

9deb375

sirreal and others added 20 commits December 27, 2018 16:18

fixup! Resize on isWide change

52b57ac

Resize on align change

f044ca7

Use the observer to observe 🙄

8773e1b

Clean and simplify styling

5ce19db

Remove negative top/right from remove-button

930a22e

...stop stop it causing empty margins inside outline when image is selected.

Fix hidden inline caption toolbar

1205a54

Restore space between rows

38783a8

Use DEFAULT_LAYOUT in LAYOUT_STYLES

1530807

Remove class recalculation

017d518

Disable columns layout

b4be374

Add custom align support

d15cf07

fixup! Add custom align support

406d309

Add className attribute default

dae31a0

Resize images 💅😁

ae19224

It's so pretty

Try: fix column gutter miscalc

4028ee5

Revert "Try: fix column gutter miscalc"

59c76a7

This reverts commit 616460979d517b114ee144eb91580ac308487a29.

Improve fit

92a0591

update snapshots

229d9e1

Remove tiled-grid

14a47ce

Update deps

d17b7b2

sirreal force-pushed the update/g7g-tg-consistent-layout branch from 4a07e8c to d17b7b2 Compare December 27, 2018 15:25

sirreal added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Ready to Merge and removed [Status] In Progress labels Dec 27, 2018

sirreal merged commit 38897e7 into master Dec 27, 2018

sirreal deleted the update/g7g-tg-consistent-layout branch December 27, 2018 15:51

matticbot removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] Ready to Merge labels Dec 27, 2018

sirreal mentioned this pull request Dec 27, 2018

Tiled gallery: Remove left/right align styles #29762

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tiled galleries: Consistent layouts #29559

Tiled galleries: Consistent layouts #29559

sirreal commented Dec 18, 2018 •

edited

Loading

matticbot commented Dec 18, 2018

simison Dec 19, 2018

sirreal Dec 19, 2018

simison Dec 19, 2018 •

edited

Loading

simison Dec 19, 2018

simison Dec 19, 2018

sirreal Dec 19, 2018

sirreal Dec 19, 2018

simison Dec 19, 2018 •

edited

Loading

sirreal Dec 19, 2018

simison Dec 27, 2018

simison left a comment

		import { IconButton, Spinner } from '@wordpress/components';
		import { isBlobURL } from '@wordpress/blob'; // @TODO Add dep Jetpack-side

Tiled galleries: Consistent layouts #29559

Tiled galleries: Consistent layouts #29559

Conversation

sirreal commented Dec 18, 2018 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Dec 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simison Dec 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simison Dec 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simison left a comment

Choose a reason for hiding this comment

sirreal commented Dec 18, 2018 •

edited

Loading

simison Dec 19, 2018 •

edited

Loading

simison Dec 19, 2018 •

edited

Loading