-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tiled Gallery: Remove i18n strings in save (#31119)
* Add deprecated declaration based on #30724 * Remove localized aria-label from save
- Loading branch information
Showing
14 changed files
with
876 additions
and
2 deletions.
There are no files selected for viewing
27 changes: 27 additions & 0 deletions
27
client/gutenberg/extensions/tiled-gallery/deprecated/v1/constants.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}, | ||
]; |
51 changes: 51 additions & 0 deletions
51
client/gutenberg/extensions/tiled-gallery/deprecated/v1/image.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
81 changes: 81 additions & 0 deletions
81
client/gutenberg/extensions/tiled-gallery/deprecated/v1/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}; |
3 changes: 3 additions & 0 deletions
3
client/gutenberg/extensions/tiled-gallery/deprecated/v1/layout/column.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Column( { children } ) { | ||
return <div className="tiled-gallery__col">{ children }</div>; | ||
} |
7 changes: 7 additions & 0 deletions
7
client/gutenberg/extensions/tiled-gallery/deprecated/v1/layout/gallery.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export default function Gallery( { children, galleryRef } ) { | ||
return ( | ||
<div className="tiled-gallery__gallery" ref={ galleryRef }> | ||
{ children } | ||
</div> | ||
); | ||
} |
141 changes: 141 additions & 0 deletions
141
client/gutenberg/extensions/tiled-gallery/deprecated/v1/layout/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ); | ||
} |
Oops, something went wrong.