Tiled Gallery: Remove i18n strings in save (#31119)

* Add deprecated declaration based on #30724

* Remove localized aria-label from save

client/gutenberg/extensions/tiled-gallery/deprecated/v1/constants.js

@@ -0,0 +1,27 @@
+export const ALLOWED_MEDIA_TYPES = [ 'image' ];
+export const GUTTER_WIDTH = 4;
+export const MAX_COLUMNS = 20;
+export const PHOTON_MAX_RESIZE = 2000;
+
+/**
+ * Layouts
+ */
+export const LAYOUT_CIRCLE = 'circle';
+export const LAYOUT_COLUMN = 'columns';
+export const LAYOUT_DEFAULT = 'rectangular';
+export const LAYOUT_SQUARE = 'square';
+export const LAYOUT_STYLES = [
+	{
+		isDefault: true,
+		name: LAYOUT_DEFAULT,
+	},
+	{
+		name: LAYOUT_CIRCLE,
+	},
+	{
+		name: LAYOUT_SQUARE,
+	},
+	{
+		name: LAYOUT_COLUMN,
+	},
+];

client/gutenberg/extensions/tiled-gallery/deprecated/v1/image.js

@@ -0,0 +1,51 @@
+/**
+ * External Dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+
+export default function GalleryImageSave( props ) {
+	const {
+		'aria-label': ariaLabel,
+		alt,
+		// caption,
+		height,
+		id,
+		link,
+		linkTo,
+		origUrl,
+		url,
+		width,
+	} = props;
+
+	if ( isBlobURL( origUrl ) ) {
+		return null;
+	}
+
+	let href;
+
+	switch ( linkTo ) {
+		case 'media':
+			href = url;
+			break;
+		case 'attachment':
+			href = link;
+			break;
+	}
+
+	const img = (
+		<img
+			alt={ alt }
+			aria-label={ ariaLabel }
+			data-height={ height }
+			data-id={ id }
+			data-link={ link }
+			data-url={ origUrl }
+			data-width={ width }
+			src={ url }
+		/>
+	);
+
+	return (
+		<figure className="tiled-gallery__item">{ href ? <a href={ href }>{ img }</a> : img }</figure>
+	);
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Internal dependencies
+ */
+export { default as save } from './save';
+import { LAYOUT_DEFAULT } from './constants';
+
+export const attributes = {
+	// Set default align
+	align: {
+		default: 'center',
+		type: 'string',
+	},
+	// Set default className (used with block styles)
+	className: {
+		default: `is-style-${ LAYOUT_DEFAULT }`,
+		type: 'string',
+	},
+	columns: {
+		type: 'number',
+	},
+	ids: {
+		default: [],
+		type: 'array',
+	},
+	images: {
+		type: 'array',
+		default: [],
+		source: 'query',
+		selector: '.tiled-gallery__item',
+		query: {
+			alt: {
+				attribute: 'alt',
+				default: '',
+				selector: 'img',
+				source: 'attribute',
+			},
+			caption: {
+				selector: 'figcaption',
+				source: 'html',
+				type: 'string',
+			},
+			height: {
+				attribute: 'data-height',
+				selector: 'img',
+				source: 'attribute',
+				type: 'number',
+			},
+			id: {
+				attribute: 'data-id',
+				selector: 'img',
+				source: 'attribute',
+			},
+			link: {
+				attribute: 'data-link',
+				selector: 'img',
+				source: 'attribute',
+			},
+			url: {
+				attribute: 'data-url',
+				selector: 'img',
+				source: 'attribute',
+			},
+			width: {
+				attribute: 'data-width',
+				selector: 'img',
+				source: 'attribute',
+				type: 'number',
+			},
+		},
+	},
+	linkTo: {
+		default: 'none',
+		type: 'string',
+	},
+};
+
+export const support = {
+	align: [ 'center', 'wide', 'full' ],
+	customClassName: false,
+	html: false,
+};

client/gutenberg/extensions/tiled-gallery/deprecated/v1/layout/column.js

@@ -0,0 +1,3 @@
+export default function Column( { children } ) {
+	return <div className="tiled-gallery__col">{ children }</div>;
+}

client/gutenberg/extensions/tiled-gallery/deprecated/v1/layout/gallery.js

@@ -0,0 +1,7 @@
+export default function Gallery( { children, galleryRef } ) {
+	return (
+		<div className="tiled-gallery__gallery" ref={ galleryRef }>
+			{ children }
+		</div>
+	);
+}

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

@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import photon from 'photon';
+import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
+import { Component } from '@wordpress/element';
+import { format as formatUrl, parse as parseUrl } from 'url';
+import { isBlobURL } from '@wordpress/blob';
+import { sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Image from '../image';
+import Mosaic from './mosaic';
+import Square from './square';
+import { PHOTON_MAX_RESIZE } from '../constants';
+
+export default class Layout extends Component {
+	photonize( { height, width, url } ) {
+		if ( ! url ) {
+			return;
+		}
+
+		// Do not Photonize images that are still uploading or from localhost
+		if ( isBlobURL( url ) || /^https?:\/\/localhost/.test( url ) ) {
+			return url;
+		}
+
+		// Drop query args, photon URLs can't handle them
+		// This should be the "raw" url, we'll add dimensions later
+		const cleanUrl = url.split( '?', 1 )[ 0 ];
+
+		const photonImplementation = isWpcomFilesUrl( url ) ? photonWpcomImage : photon;
+
+		const { layoutStyle } = this.props;
+
+		if ( isSquareishLayout( layoutStyle ) && width && height ) {
+			const size = Math.min( PHOTON_MAX_RESIZE, width, height );
+			return photonImplementation( cleanUrl, { resize: `${ size },${ size }` } );
+		}
+		return photonImplementation( cleanUrl );
+	}
+
+	// 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 { images, linkTo, selectedImage } = 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 );
+		return (
+			<Image
+				alt={ img.alt }
+				aria-label={ ariaLabel }
+				height={ img.height }
+				id={ img.id }
+				origUrl={ img.url }
+				isSelected={ selectedImage === i }
+				key={ i }
+				link={ img.link }
+				linkTo={ linkTo }
+				url={ this.photonize( img ) }
+				width={ img.width }
+			/>
+		);
+	}
+
+	render() {
+		const { align, children, className, columns, images, layoutStyle } = this.props;
+
+		const LayoutRenderer = isSquareishLayout( layoutStyle ) ? Square : Mosaic;
+
+		const renderedImages = this.props.images.map( this.renderImage, this );
+
+		return (
+			<div className={ className }>
+				<LayoutRenderer
+					align={ align }
+					columns={ columns }
+					images={ images }
+					layoutStyle={ layoutStyle }
+					renderedImages={ renderedImages }
+				/>
+				{ children }
+			</div>
+		);
+	}
+}
+
+function isSquareishLayout( layout ) {
+	return [ 'circle', 'square' ].includes( layout );
+}
+
+function isWpcomFilesUrl( url ) {
+	const { host } = parseUrl( url );
+	return /\.files\.wordpress\.com$/.test( host );
+}
+
+/**
+ * Apply photon arguments to *.files.wordpress.com images
+ *
+ * This function largely duplicates the functionlity of the photon.js lib.
+ * This is necessary because we want to serve images from *.files.wordpress.com so that private
+ * WordPress.com sites can use this block which depends on a Photon-like image service.
+ *
+ * If we pass all images through Photon servers, some images are unreachable. *.files.wordpress.com
+ * is already photon-like so we can pass it the same parameters for image resizing.
+ *
+ * @param  {string} url  Image url
+ * @param  {Object} opts Options to pass to photon
+ *
+ * @return {string}      Url string with options applied
+ */
+function photonWpcomImage( url, opts = {} ) {
+	// Adhere to the same options API as the photon.js lib
+	const photonLibMappings = {
+		width: 'w',
+		height: 'h',
+		letterboxing: 'lb',
+		removeLetterboxing: 'ulb',
+	};
+
+	// Discard some param parts
+	const { auth, hash, port, query, search, ...urlParts } = parseUrl( url );
+
+	// Build query
+	// This reduction intentionally mutates the query as it is built internally.
+	urlParts.query = Object.keys( opts ).reduce(
+		( q, key ) =>
+			Object.assign( q, {
+				[ photonLibMappings.hasOwnProperty( key ) ? photonLibMappings[ key ] : key ]: opts[ key ],
+			} ),
+		{}
+	);
+
+	return formatUrl( urlParts );
+}