Jetpack Tiled Gallery Block: save functionality (#21481)

* [not verified] WIP implementation of save. * [not verified] WIP: Got block attributes to show up in serialization * [not verified] Make columnWidths nested array * [not verified] WIP: Now converts serialized HTML images to inner blocks on load if they weren't already in store. * [not verified] WIP load from save. Hacked in stuff to make it work. Need to find root cause. * Adding Platform checks to ensure that mobile changes don't affect web. Fixing some lint warnings. Co-authored-by: Wendy Chen <wendy.chen@automattic.com> Co-authored-by: Paul Von Schrottky <paul.von.schrottky@automattic.com>
Automattic · Oct 21, 2021 · 6f9ba31 · 6f9ba31
1 parent 02ba492
commit 6f9ba31
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 12 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js
@@ -44,10 +44,10 @@ const TiledGalleryEdit = props => {
 		noticeUI,
 		onFocus,
 		setAttributes,
-		attributes: { columns, linkTo, roundedCorners },
+		attributes: { columns, images: attributeImages, linkTo, roundedCorners },
 	} = props;
 
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const { replaceInnerBlocks, updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		const { width } = sizes || {};
@@ -80,7 +80,26 @@ const TiledGalleryEdit = props => {
 		[ innerBlockImages ]
 	);
 
-	const onSelectImages = imgs => {
+	useEffect( () => {
+		images?.forEach( newImage => {
+			updateBlockAttributes( newImage.clientId, {
+				...newImage.attributes,
+				id: newImage.id,
+			} );
+		} );
+
+		const newIds = images?.map( image => image.id );
+		setAttributes( { ids: newIds } );
+	}, [ images, setAttributes, updateBlockAttributes ] );
+
+	useEffect( () => {
+		if ( ! columns ) {
+			const col = Math.min( images.length, DEFAULT_COLUMNS );
+			setAttributes( { columns: Math.max( col, 1 ) } );
+		}
+	}, [ columns, images, setAttributes ] );
+
+	const populateInnerBlocksWithImages = ( imgs, replace = false ) => {
 		const newBlocks = imgs.map( image => {
 			return createBlock( 'core/image', {
 				id: image.id,
@@ -90,7 +109,7 @@ const TiledGalleryEdit = props => {
 			} );
 		} );
 
-		replaceInnerBlocks( clientId, concat( innerBlockImages, newBlocks ) );
+		replaceInnerBlocks( clientId, replace ? newBlocks : concat( innerBlockImages, newBlocks ) );
 	};
 
 	useEffect( () => {
@@ -99,6 +118,10 @@ const TiledGalleryEdit = props => {
 		}
 	}, [ columns, setAttributes ] );
 
+	if ( attributeImages.length && ! images.length ) {
+		populateInnerBlocksWithImages( attributeImages, true );
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{},
 		{
@@ -126,7 +149,7 @@ const TiledGalleryEdit = props => {
 				title: __( 'Tiled Gallery', 'jetpack' ),
 				name: __( 'images', 'jetpack' ),
 			} }
-			onSelect={ onSelectImages }
+			onSelect={ populateInnerBlocksWithImages }
 			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js
@@ -3,9 +3,10 @@
  */
 import classnames from 'classnames';
 import { isBlobURL } from '@wordpress/blob';
+import { Platform } from '@wordpress/element';
 
 export default function GalleryImageSave( props ) {
-	const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
+	const { alt, ariaLabel, imageFilter, height, id, link, linkTo, origUrl, url, width } = props;
 
 	if ( isBlobURL( origUrl ) ) {
 		return null;
@@ -31,7 +32,7 @@ export default function GalleryImageSave( props ) {
 			data-url={ origUrl }
 			data-width={ width }
 			src={ url }
-			data-amp-layout={ 'responsive' }
+			aria-label={ Platform.OS === 'web' ? undefined : ariaLabel }
 		/>
 	);
 

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Platform } from '@wordpress/element';
 import classnames from 'classnames';
 
 /**
@@ -47,10 +47,13 @@ export default class Layout extends Component {
 
 		const { src, srcSet } = photonizedImgProps( img, { layoutStyle } );
 
+		const isWeb = Platform.OS === 'web';
+
 		return (
 			<Image
 				alt={ img.alt }
-				aria-label={ ariaLabel }
+				aria-label={ isWeb ? ariaLabel : undefined }
+				ariaLabel={ isWeb ? undefined : ariaLabel }
 				columns={ columns }
 				height={ img.height }
 				id={ img.id }

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/square.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/square.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { chunk, drop, take } from 'lodash';
+import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,14 +16,16 @@ export default function Square( { columns, renderedImages } ) {
 	const columnCount = Math.min( MAX_COLUMNS, columns );
 
 	const remainder = renderedImages.length % columnCount;
-
 	return (
 		<Gallery>
 			{ [
 				...( remainder ? [ take( renderedImages, remainder ) ] : [] ),
 				...chunk( drop( renderedImages, remainder ), columnCount ),
 			].map( ( imagesInRow, rowIndex ) => (
-				<Row key={ rowIndex } className={ `columns-${ imagesInRow.length }` }>
+				<Row
+					key={ rowIndex }
+					className={ Platform.OS === 'web' ? `columns-${ imagesInRow.length }` : undefined }
+				>
 					{ imagesInRow.map( ( image, colIndex ) => (
 						<Column key={ colIndex }>{ image }</Column>
 					) ) }

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js
@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import Layout from './layout';
+import { defaultColumnsNumber } from './edit';
+
+export default function TiledGallerySave( { attributes, innerBlocks } ) {
+	if ( ! innerBlocks.length ) {
+		return null;
+	}
+
+	const {
+		align,
+		className,
+		columns = defaultColumnsNumber( innerBlocks ),
+		linkTo,
+		roundedCorners,
+		columnWidths,
+		ids,
+	} = attributes;
+
+	return (
+		<Layout
+			align={ align }
+			className={ className }
+			columns={ columns }
+			images={ innerBlocks.map( innerBlock => ( {
+				...innerBlock.attributes,
+				height: 100,
+				width: 100,
+			} ) ) }
+			isSave
+			layoutStyle={ 'square' }
+			linkTo={ linkTo }
+			roundedCorners={ roundedCorners }
+			columnWidths={ columnWidths }
+			ids={ ids }
+		/>
+	);
+}
diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js
@@ -4,6 +4,7 @@
 import photon from 'photon';
 import { format as formatUrl, parse as parseUrl } from 'url';
 import { isBlobURL } from '@wordpress/blob';
+import { Platform } from '@wordpress/element';
 import { range } from 'lodash';
 
 /**
@@ -66,8 +67,9 @@ export function photonizedImgProps( img, galleryAtts = {} ) {
 	 * We don't know what the viewport size will be like. Use full size src.
 	 */
 
+	const isWeb = Platform.OS === 'web';
 	let src;
-	if ( isSquareishLayout( layoutStyle ) && width && height ) {
+	if ( isSquareishLayout( layoutStyle ) && width && height && isWeb ) {
 		// Layouts with 1:1 width/height ratio should be made square
 		const size = Math.min( PHOTON_MAX_RESIZE, width, height );
 		src = photonImplementation( url, {