diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/tiled-gallery')
40 files changed, 7 insertions, 3175 deletions
diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/constants.js b/plugins/jetpack/extensions/blocks/tiled-gallery/constants.js deleted file mode 100644 index 0df90737..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/constants.js +++ /dev/null @@ -1,28 +0,0 @@ -export const ALLOWED_MEDIA_TYPES = [ 'image' ]; -export const DEFAULT_GALLERY_WIDTH = 580; -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, - }, -]; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss deleted file mode 100644 index 9fd2f49c..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/css-gram.scss +++ /dev/null @@ -1,86 +0,0 @@ -/** - * This code is based on CSS gram: - * https://github.com/una/CSSgram/tree/master - * - * Due to the packaging options available, the source has been duplicated and adapted here - * to best fit our specific needs. - */ - -/* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/_shared.scss */ -@mixin pseudo-elem { - content: ''; - display: block; - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; - pointer-events: none; -} - -@mixin filter-base { - position: relative; - - img { - width: 100%; - z-index: 1; - } - - &::before { - @include pseudo-elem; - z-index: 2; - } - - &::after { - @include pseudo-elem; - z-index: 3; - } -} - -/** - * 1977 - * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/1977.scss - */ -@mixin _1977( $filters... ) { - @include filter-base; - filter: contrast( 1.1 ) brightness( 1.1 ) saturate( 1.3 ) $filters; - - &::after { - background: rgba( 243, 106, 188, 0.3 ); - mix-blend-mode: screen; - } - - @content; -} - -/* - * Clarendon - * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/clarendon.scss - */ -@mixin clarendon( $filters... ) { - @include filter-base; - filter: contrast( 1.2 ) saturate( 1.35 ) $filters; - - &::before { - background: rgba( 127, 187, 227, 0.2 ); - mix-blend-mode: overlay; - } - - @content; -} - -/** - * Gingham - * From https://github.com/una/CSSgram/blob/0.1.12/source/scss/gingham.scss - */ -@mixin gingham( $filters... ) { - @include filter-base; - filter: brightness( 1.05 ) hue-rotate( -10deg ) $filters; - - &::after { - background: rgb( 230, 230, 250 ); - mix-blend-mode: soft-light; - } - - @content; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/constants.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/constants.js deleted file mode 100644 index 55a451fc..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/constants.js +++ /dev/null @@ -1,27 +0,0 @@ -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, - }, -]; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js deleted file mode 100644 index 61d4a2cd..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/image.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * 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> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/index.js deleted file mode 100644 index 69539d00..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/index.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * 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, -}; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/column.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/column.js deleted file mode 100644 index a3ed5cdf..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/column.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Column( { children } ) { - return <div className="tiled-gallery__col">{ children }</div>; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/gallery.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/gallery.js deleted file mode 100644 index 94fc61e4..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/gallery.js +++ /dev/null @@ -1,7 +0,0 @@ -export default function Gallery( { children, galleryRef } ) { - return ( - <div className="tiled-gallery__gallery" ref={ galleryRef }> - { children } - </div> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/index.js deleted file mode 100644 index 3b434fe4..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/index.js +++ /dev/null @@ -1,144 +0,0 @@ -/** - * External dependencies - */ -import photon from 'photon'; -import { __, sprintf } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { format as formatUrl, parse as parseUrl } from 'url'; -import { isBlobURL } from '@wordpress/blob'; - -/** - * 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', 'jetpack' ), - 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 ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/index.js deleted file mode 100644 index 8c56b164..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/index.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * 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, ratiosToColumns, ratiosToMosaicRows } 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(); - } else if ( 'columns' === this.props.layoutStyle && prevProps.columns !== this.props.columns ) { - 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 { align, columns, images, layoutStyle, renderedImages } = this.props; - - const ratios = imagesToRatios( images ); - const rows = - 'columns' === layoutStyle - ? ratiosToColumns( ratios, columns ) - : ratiosToMosaicRows( ratios, { isWide: [ 'full', 'wide' ].includes( align ) } ); - - let cursor = 0; - return ( - <Gallery galleryRef={ this.gallery }> - { rows.map( ( row, rowIndex ) => ( - <Row key={ rowIndex }> - { row.map( ( colSize, colIndex ) => { - const columnImages = renderedImages.slice( cursor, cursor + colSize ); - cursor += colSize; - return <Column key={ colIndex }>{ columnImages }</Column>; - } ) } - </Row> - ) ) } - </Gallery> - ); - } -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/ratios.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/ratios.js deleted file mode 100644 index 8accd552..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/ratios.js +++ /dev/null @@ -1,280 +0,0 @@ -/** - * External dependencies - */ -import { - drop, - every, - isEqual, - map, - overEvery, - some, - sum, - take, - takeRight, - takeWhile, - zipWith, -} from 'lodash'; - -export function imagesToRatios( images ) { - return map( images, ratioFromImage ); -} - -export function ratioFromImage( { height, width } ) { - return height && width ? width / height : 1; -} - -/** - * Build three columns, each of which should contain approximately 1/3 of the total ratio - * - * @param {Array.<number>} ratios Ratios of images put into shape - * @param {number} columnCount Number of columns - * - * @return {Array.<Array.<number>>} Shape of rows and columns - */ -export function ratiosToColumns( ratios, columnCount ) { - // If we don't have more than 1 per column, just return a simple 1 ratio per column shape - if ( ratios.length <= columnCount ) { - return [ Array( ratios.length ).fill( 1 ) ]; - } - - const total = sum( ratios ); - const targetColRatio = total / columnCount; - - const row = []; - let toProcess = ratios; - let accumulatedRatio = 0; - - // We skip the last column in the loop and add rest later - for ( let i = 0; i < columnCount - 1; i++ ) { - const colSize = takeWhile( toProcess, ratio => { - const shouldTake = accumulatedRatio <= ( i + 1 ) * targetColRatio; - if ( shouldTake ) { - accumulatedRatio += ratio; - } - return shouldTake; - } ).length; - row.push( colSize ); - toProcess = drop( toProcess, colSize ); - } - - // Don't calculate last column, just add what's left - row.push( toProcess.length ); - - // A shape is an array of rows. Wrap our row in an array. - return [ row ]; -} - -/** - * These are partially applied functions. - * They rely on helper function (defined below) to create a function that expects to be passed ratios - * during processing. - * - * …FitsNextImages() functions should be passed ratios to be processed - * …IsNotRecent() functions should be passed the processed shapes - */ - -const reverseSymmetricRowIsNotRecent = isNotRecentShape( [ 2, 1, 2 ], 5 ); -const reverseSymmetricFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isPortrait, - isLandscape, - isLandscape, -] ); -const longSymmetricRowFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isLandscape, - isPortrait, - isLandscape, - isLandscape, - isLandscape, -] ); -const longSymmetricRowIsNotRecent = isNotRecentShape( [ 3, 1, 3 ], 5 ); -const symmetricRowFitsNextImages = checkNextRatios( [ - isPortrait, - isLandscape, - isLandscape, - isPortrait, -] ); -const symmetricRowIsNotRecent = isNotRecentShape( [ 1, 2, 1 ], 5 ); -const oneThreeFitsNextImages = checkNextRatios( [ - isPortrait, - isLandscape, - isLandscape, - isLandscape, -] ); -const oneThreeIsNotRecent = isNotRecentShape( [ 1, 3 ], 3 ); -const threeOneIsFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isLandscape, - isPortrait, -] ); -const threeOneIsNotRecent = isNotRecentShape( [ 3, 1 ], 3 ); -const oneTwoFitsNextImages = checkNextRatios( [ - lt( 1.6 ), - overEvery( gte( 0.9 ), lt( 2 ) ), - overEvery( gte( 0.9 ), lt( 2 ) ), -] ); -const oneTwoIsNotRecent = isNotRecentShape( [ 1, 2 ], 3 ); -const fiveIsNotRecent = isNotRecentShape( [ 1, 1, 1, 1, 1 ], 1 ); -const fourIsNotRecent = isNotRecentShape( [ 1, 1, 1, 1 ], 1 ); -const threeIsNotRecent = isNotRecentShape( [ 1, 1, 1 ], 3 ); -const twoOneFitsNextImages = checkNextRatios( [ - overEvery( gte( 0.9 ), lt( 2 ) ), - overEvery( gte( 0.9 ), lt( 2 ) ), - lt( 1.6 ), -] ); -const twoOneIsNotRecent = isNotRecentShape( [ 2, 1 ], 3 ); -const panoramicFitsNextImages = checkNextRatios( [ isPanoramic ] ); - -export function ratiosToMosaicRows( ratios, { isWide } = {} ) { - // This function will recursively process the input until it is consumed - const go = ( processed, toProcess ) => { - if ( ! toProcess.length ) { - return processed; - } - - let next; - - if ( - /* Reverse_Symmetric_Row */ - toProcess.length > 15 && - reverseSymmetricFitsNextImages( toProcess ) && - reverseSymmetricRowIsNotRecent( processed ) - ) { - next = [ 2, 1, 2 ]; - } else if ( - /* Long_Symmetric_Row */ - toProcess.length > 15 && - longSymmetricRowFitsNextImages( toProcess ) && - longSymmetricRowIsNotRecent( processed ) - ) { - next = [ 3, 1, 3 ]; - } else if ( - /* Symmetric_Row */ - toProcess.length !== 5 && - symmetricRowFitsNextImages( toProcess ) && - symmetricRowIsNotRecent( processed ) - ) { - next = [ 1, 2, 1 ]; - } else if ( - /* One_Three */ - oneThreeFitsNextImages( toProcess ) && - oneThreeIsNotRecent( processed ) - ) { - next = [ 1, 3 ]; - } else if ( - /* Three_One */ - threeOneIsFitsNextImages( toProcess ) && - threeOneIsNotRecent( processed ) - ) { - next = [ 3, 1 ]; - } else if ( - /* One_Two */ - oneTwoFitsNextImages( toProcess ) && - oneTwoIsNotRecent( processed ) - ) { - next = [ 1, 2 ]; - } else if ( - /* Five */ - isWide && - ( toProcess.length === 5 || ( toProcess.length !== 10 && toProcess.length > 6 ) ) && - fiveIsNotRecent( processed ) && - sum( take( toProcess, 5 ) ) < 5 - ) { - next = [ 1, 1, 1, 1, 1 ]; - } else if ( - /* Four */ - isFourValidCandidate( processed, toProcess ) - ) { - next = [ 1, 1, 1, 1 ]; - } else if ( - /* Three */ - isThreeValidCandidate( processed, toProcess, isWide ) - ) { - next = [ 1, 1, 1 ]; - } else if ( - /* Two_One */ - twoOneFitsNextImages( toProcess ) && - twoOneIsNotRecent( processed ) - ) { - next = [ 2, 1 ]; - } else if ( /* Panoramic */ panoramicFitsNextImages( toProcess ) ) { - next = [ 1 ]; - } else if ( /* One_One */ toProcess.length > 3 ) { - next = [ 1, 1 ]; - } else { - // Everything left - next = Array( toProcess.length ).fill( 1 ); - } - - // Add row - const nextProcessed = processed.concat( [ next ] ); - - // Trim consumed images from next processing step - const consumedImages = sum( next ); - const nextToProcess = toProcess.slice( consumedImages ); - - return go( nextProcessed, nextToProcess ); - }; - return go( [], ratios ); -} - -function isThreeValidCandidate( processed, toProcess, isWide ) { - const ratio = sum( take( toProcess, 3 ) ); - return ( - toProcess.length >= 3 && - toProcess.length !== 4 && - toProcess.length !== 6 && - threeIsNotRecent( processed ) && - ( ratio < 2.5 || - ( ratio < 5 && - /* nextAreSymettric */ - ( toProcess.length >= 3 && - /* @FIXME floating point equality?? */ toProcess[ 0 ] === toProcess[ 2 ] ) ) || - isWide ) - ); -} - -function isFourValidCandidate( processed, toProcess ) { - const ratio = sum( take( toProcess, 4 ) ); - return ( - ( fourIsNotRecent( processed ) && ( ratio < 3.5 && toProcess.length > 5 ) ) || - ( ratio < 7 && toProcess.length === 4 ) - ); -} - -function isNotRecentShape( shape, numRecents ) { - return recents => - ! some( takeRight( recents, numRecents ), recentShape => isEqual( recentShape, shape ) ); -} - -function checkNextRatios( shape ) { - return ratios => - ratios.length >= shape.length && - every( zipWith( shape, ratios.slice( 0, shape.length ), ( f, r ) => f( r ) ) ); -} - -function isLandscape( ratio ) { - return ratio >= 1 && ratio < 2; -} - -function isPortrait( ratio ) { - return ratio < 1; -} - -function isPanoramic( ratio ) { - return ratio >= 2; -} - -// >= -function gte( n ) { - return m => m >= n; -} - -// < -function lt( n ) { - return m => m < n; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/resize.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/resize.js deleted file mode 100644 index 022729c8..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/mosaic/resize.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * Internal dependencies - */ -import { GUTTER_WIDTH } from '../../constants'; - -/** - * Distribute a difference across ns so that their sum matches the target - * - * @param {Array<number>} parts Array of numbers to fit - * @param {number} target Number that sum should match - * @return {Array<number>} Adjusted parts - */ -function adjustFit( parts, target ) { - const diff = target - parts.reduce( ( sum, n ) => sum + n, 0 ); - const partialDiff = diff / parts.length; - return parts.map( p => p + partialDiff ); -} - -export function handleRowResize( row, width ) { - applyRowRatio( row, getRowRatio( row ), width ); -} - -function getRowRatio( row ) { - const result = getRowCols( row ) - .map( getColumnRatio ) - .reduce( - ( [ ratioA, weightedRatioA ], [ ratioB, weightedRatioB ] ) => { - return [ ratioA + ratioB, weightedRatioA + weightedRatioB ]; - }, - [ 0, 0 ] - ); - return result; -} - -export function getGalleryRows( gallery ) { - return Array.from( gallery.querySelectorAll( '.tiled-gallery__row' ) ); -} - -function getRowCols( row ) { - return Array.from( row.querySelectorAll( '.tiled-gallery__col' ) ); -} - -function getColImgs( col ) { - return Array.from( - col.querySelectorAll( '.tiled-gallery__item > img, .tiled-gallery__item > a > img' ) - ); -} - -function getColumnRatio( col ) { - const imgs = getColImgs( col ); - const imgCount = imgs.length; - const ratio = - 1 / - imgs.map( getImageRatio ).reduce( ( partialColRatio, imgRatio ) => { - return partialColRatio + 1 / imgRatio; - }, 0 ); - const result = [ ratio, ratio * imgCount || 1 ]; - return result; -} - -function getImageRatio( img ) { - const w = parseInt( img.dataset.width, 10 ); - const h = parseInt( img.dataset.height, 10 ); - const result = w && ! Number.isNaN( w ) && h && ! Number.isNaN( h ) ? w / h : 1; - return result; -} - -function applyRowRatio( row, [ ratio, weightedRatio ], width ) { - const rawHeight = - ( 1 / ratio ) * ( width - GUTTER_WIDTH * ( row.childElementCount - 1 ) - weightedRatio ); - - applyColRatio( row, { - rawHeight, - rowWidth: width - GUTTER_WIDTH * ( row.childElementCount - 1 ), - } ); -} - -function applyColRatio( row, { rawHeight, rowWidth } ) { - const cols = getRowCols( row ); - - const colWidths = cols.map( - col => ( rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ) ) * getColumnRatio( col )[ 0 ] - ); - - const adjustedWidths = adjustFit( colWidths, rowWidth ); - - cols.forEach( ( col, i ) => { - const rawWidth = colWidths[ i ]; - const width = adjustedWidths[ i ]; - applyImgRatio( col, { - colHeight: rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ), - width, - rawWidth, - } ); - } ); -} - -function applyImgRatio( col, { colHeight, width, rawWidth } ) { - const imgHeights = getColImgs( col ).map( img => rawWidth / getImageRatio( img ) ); - const adjustedHeights = adjustFit( imgHeights, colHeight ); - - // Set size of col children, not the <img /> element - Array.from( col.children ).forEach( ( item, i ) => { - const height = adjustedHeights[ i ]; - item.setAttribute( 'style', `height:${ height }px;width:${ width }px;` ); - } ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js deleted file mode 100644 index 200a58c2..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/row.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -export default function Row( { children, className } ) { - return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js deleted file mode 100644 index 2a1ab888..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/layout/square.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * 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 ( - <Gallery> - { [ - ...( remainder ? [ take( renderedImages, remainder ) ] : [] ), - ...chunk( drop( renderedImages, remainder ), columnCount ), - ].map( ( imagesInRow, rowIndex ) => ( - <Row key={ rowIndex } className={ `columns-${ imagesInRow.length }` }> - { imagesInRow.map( ( image, colIndex ) => ( - <Column key={ colIndex }>{ image }</Column> - ) ) } - </Row> - ) ) } - </Gallery> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/save.js b/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/save.js deleted file mode 100644 index 2a157a30..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/deprecated/v1/save.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Internal dependencies - */ -import Layout from './layout'; -import { getActiveStyleName } from '../../../../shared/block-styles'; -import { LAYOUT_STYLES } from './constants'; - -export function defaultColumnsNumber( attributes ) { - return Math.min( 3, attributes.images.length ); -} - -export default function TiledGallerySave( { attributes } ) { - const { images } = attributes; - - if ( ! images.length ) { - return null; - } - - const { align, className, columns = defaultColumnsNumber( attributes ), linkTo } = attributes; - - return ( - <Layout - align={ align } - className={ className } - columns={ columns } - images={ images } - layoutStyle={ getActiveStyleName( LAYOUT_STYLES, className ) } - linkTo={ linkTo } - /> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js b/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js deleted file mode 100644 index 45574252..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js +++ /dev/null @@ -1,289 +0,0 @@ -/** - * External Dependencies - */ -import { __ } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; -import { filter, get, pick } from 'lodash'; -import { - BlockControls, - BlockIcon, - InspectorControls, - MediaPlaceholder, - MediaUpload, - mediaUpload, -} from '@wordpress/editor'; -import { - DropZone, - FormFileUpload, - IconButton, - PanelBody, - RangeControl, - SelectControl, - Toolbar, - withNotices, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import FilterToolbar from './filter-toolbar'; -import Layout from './layout'; -import { ALLOWED_MEDIA_TYPES, LAYOUT_STYLES, MAX_COLUMNS } from './constants'; -import { getActiveStyleName } from '../../shared/block-styles'; -import { icon } from '.'; - -const linkOptions = [ - { value: 'attachment', label: __( 'Attachment Page', 'jetpack' ) }, - { value: 'media', label: __( 'Media File', 'jetpack' ) }, - { value: 'none', label: __( 'None', 'jetpack' ) }, -]; - -// @TODO keep here or move to ./layout ? -function layoutSupportsColumns( layout ) { - return [ 'columns', 'circle', 'square' ].includes( layout ); -} - -export function defaultColumnsNumber( attributes ) { - return Math.min( 3, attributes.images.length ); -} - -export const pickRelevantMediaFiles = image => { - const imageProps = pick( image, [ [ 'alt' ], [ 'id' ], [ 'link' ] ] ); - imageProps.url = - get( image, [ 'sizes', 'large', 'url' ] ) || - get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || - image.url; - return imageProps; -}; - -class TiledGalleryEdit extends Component { - state = { - selectedImage: null, - }; - - static getDerivedStateFromProps( props, state ) { - // Deselect images when deselecting the block - if ( ! props.isSelected && null !== state.selectedImage ) { - return { selectedImage: null }; - } - return null; - } - - setAttributes( attributes ) { - if ( attributes.ids ) { - throw new Error( - 'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes' - ); - } - - if ( attributes.images ) { - attributes = { - ...attributes, - ids: attributes.images.map( ( { id } ) => parseInt( id, 10 ) ), - }; - } - - this.props.setAttributes( attributes ); - } - - addFiles = files => { - const currentImages = this.props.attributes.images || []; - const { noticeOperations } = this.props; - mediaUpload( { - allowedTypes: ALLOWED_MEDIA_TYPES, - filesList: files, - onFileChange: images => { - const imagesNormalized = images.map( image => pickRelevantMediaFiles( image ) ); - this.setAttributes( { images: currentImages.concat( imagesNormalized ) } ); - }, - onError: noticeOperations.createErrorNotice, - } ); - }; - - onRemoveImage = index => () => { - const images = filter( this.props.attributes.images, ( img, i ) => index !== i ); - const { columns } = this.props.attributes; - this.setState( { - selectedImage: null, - } ); - this.setAttributes( { - images, - columns: columns ? Math.min( images.length, columns ) : columns, - } ); - }; - - onSelectImage = index => () => { - if ( this.state.selectedImage !== index ) { - this.setState( { - selectedImage: index, - } ); - } - }; - - onSelectImages = images => { - const { columns } = this.props.attributes; - this.setAttributes( { - columns: columns ? Math.min( images.length, columns ) : columns, - images: images.map( image => pickRelevantMediaFiles( image ) ), - } ); - }; - - setColumnsNumber = value => this.setAttributes( { columns: value } ); - - setImageAttributes = index => attributes => { - const { - attributes: { images }, - } = this.props; - if ( ! images[ index ] ) { - return; - } - this.setAttributes( { - images: [ - ...images.slice( 0, index ), - { ...images[ index ], ...attributes }, - ...images.slice( index + 1 ), - ], - } ); - }; - - setLinkTo = value => this.setAttributes( { linkTo: value } ); - - uploadFromFiles = event => this.addFiles( event.target.files ); - - render() { - const { selectedImage } = this.state; - const { - attributes, - isSelected, - className, - noticeOperations, - noticeUI, - setAttributes, - } = this.props; - const { - align, - columns = defaultColumnsNumber( attributes ), - imageFilter, - images, - linkTo, - } = attributes; - - const dropZone = <DropZone onFilesDrop={ this.addFiles } />; - - const controls = ( - <BlockControls> - { !! images.length && ( - <Fragment> - <Toolbar> - <MediaUpload - onSelect={ this.onSelectImages } - allowedTypes={ ALLOWED_MEDIA_TYPES } - multiple - gallery - value={ images.map( img => img.id ) } - render={ ( { open } ) => ( - <IconButton - className="components-toolbar__control" - label={ __( 'Edit Gallery', 'jetpack' ) } - icon="edit" - onClick={ open } - /> - ) } - /> - </Toolbar> - <FilterToolbar - value={ imageFilter } - onChange={ value => { - setAttributes( { imageFilter: value } ); - this.setState( { selectedImage: null } ); - } } - /> - </Fragment> - ) } - </BlockControls> - ); - - if ( images.length === 0 ) { - return ( - <Fragment> - { controls } - <MediaPlaceholder - icon={ <BlockIcon icon={ icon } /> } - className={ className } - labels={ { - title: __( 'Tiled Gallery', 'jetpack' ), - name: __( 'images', 'jetpack' ), - } } - onSelect={ this.onSelectImages } - accept="image/*" - allowedTypes={ ALLOWED_MEDIA_TYPES } - multiple - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } - /> - </Fragment> - ); - } - - const layoutStyle = getActiveStyleName( LAYOUT_STYLES, attributes.className ); - - return ( - <Fragment> - { controls } - <InspectorControls> - <PanelBody title={ __( 'Tiled Gallery settings', 'jetpack' ) }> - { layoutSupportsColumns( layoutStyle ) && images.length > 1 && ( - <RangeControl - label={ __( 'Columns', 'jetpack' ) } - value={ columns } - onChange={ this.setColumnsNumber } - min={ 1 } - max={ Math.min( MAX_COLUMNS, images.length ) } - /> - ) } - <SelectControl - label={ __( 'Link To', 'jetpack' ) } - value={ linkTo } - onChange={ this.setLinkTo } - options={ linkOptions } - /> - </PanelBody> - </InspectorControls> - - { noticeUI } - - <Layout - align={ align } - className={ className } - columns={ columns } - imageFilter={ imageFilter } - images={ images } - layoutStyle={ layoutStyle } - linkTo={ linkTo } - onRemoveImage={ this.onRemoveImage } - onSelectImage={ this.onSelectImage } - selectedImage={ isSelected ? selectedImage : null } - setImageAttributes={ this.setImageAttributes } - > - { dropZone } - { isSelected && ( - <div className="tiled-gallery__add-item"> - <FormFileUpload - multiple - isLarge - className="tiled-gallery__add-item-button" - onChange={ this.uploadFromFiles } - accept="image/*" - icon="insert" - > - { __( 'Upload an image', 'jetpack' ) } - </FormFileUpload> - </div> - ) } - </Layout> - </Fragment> - ); - } -} - -export default withNotices( TiledGalleryEdit ); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.js b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.js deleted file mode 100644 index d05f4039..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Internal dependencies - */ -import registerJetpackBlock from '../../shared/register-jetpack-block'; -import { name, settings } from '.'; - -registerJetpackBlock( name, settings ); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss deleted file mode 100644 index 7663d70c..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/editor.scss +++ /dev/null @@ -1,148 +0,0 @@ -@import './view.scss'; -@import './variables.scss'; -@import '../../shared/styles/gutenberg-colors.scss'; - -// inspired by from assets/shared/_animations loading-fade -@keyframes tiled-gallery-img-placeholder { - 0% { - background-color: var( --color-neutral-0 ); - } - 50% { - background-color: rgba( var( --color-neutral-0-rgb ), 0.5 ); - } - 100% { - background-color: var( --color-neutral-0 ); - } -} - -.wp-block-jetpack-tiled-gallery { - // Ensure that selected image outlines are visibile - padding-left: 4px; - padding-right: 4px; - - &.is-style-square, - &.is-style-circle { - .tiled-gallery__item.is-transient img { - // Transient images (no src attribute) occupy no vertical space. - // If on a row by themself, the row is hidden. - // By setting the bottom margin, ensure they occupy the correct vertical space. - margin-bottom: 100%; - } - } - - .tiled-gallery__item { - // Hide the focus outline that otherwise briefly appears when selecting a block. - > img:focus { - outline: none; - } - - > img { - // Inspired by Calypso's placeholder mixin - animation: tiled-gallery-img-placeholder 1.6s ease-in-out infinite; - } - - &.is-selected { - outline: 4px solid $tiled-gallery-selection; - - // Disable filters when selected - filter: none; - &::before, - &::after { - content: none; - } - } - - &.is-transient { - height: 100%; - width: 100%; - img { - background-position: center; - background-size: cover; - height: 100%; - opacity: 0.3; - width: 100%; - } - } - } - - .tiled-gallery__add-item { - margin-top: $tiled-gallery-gutter; - width: 100%; - - .components-form-file-upload, - .components-button.tiled-gallery__add-item-button { - width: 100%; - height: 100%; - } - - .components-button.tiled-gallery__add-item-button { - display: flex; - flex-direction: column; - justify-content: center; - box-shadow: none; - border: none; - border-radius: 0; - min-height: 100px; - - .dashicon { - margin-top: 10px; - } - - &:hover, - &:focus { - border: 1px solid $dark-gray-500; - } - } - } - - .tiled-gallery__item__inline-menu { - background-color: $tiled-gallery-selection; - display: inline-flex; - padding: 0 0 2px 2px; - position: absolute; - right: 0; - top: 0; - - .components-button { - color: var( --color-white ); - &:hover, - &:focus { - color: var( --color-white ); - } - } - } - - .tiled-gallery__item__remove { - padding: 0; - } - - .tiled-gallery__item .components-spinner { - position: absolute; - top: 50%; - left: 50%; - margin: 0; - transform: translate( -50%, -50% ); - } - - // Hide upload buttons in style picker preview - .editor-block-preview__content & { - .editor-media-placeholder { - display: none; - } - } -} - -.tiled-gallery__filter-picker-menu { - $active-item-outline-width: 2px; - padding: 7px; - - // Leave space between elements for active state styling - .components-menu-item__button + .components-menu-item__button { - margin-top: $active-item-outline-width; - } - - .components-menu-item__button.is-active { - color: $dark-gray-900; - box-shadow: 0 0 0 $active-item-outline-width $dark-gray-500 !important; - } -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/filter-toolbar.js b/plugins/jetpack/extensions/blocks/tiled-gallery/filter-toolbar.js deleted file mode 100644 index 7d86f335..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/filter-toolbar.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * External Dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { Dropdown, MenuItem, NavigableMenu, Path, SVG, Toolbar } from '@wordpress/components'; - -const availableFilters = [ - { - icon: ( - /* No filter */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" /> - </SVG> - ), - title: _x( 'Original', 'image style', 'jetpack' ), - value: undefined, - }, - { - icon: ( - /* 1 */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm11 10h2V5h-4v2h2v8zm7-14H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" /> - </SVG> - ), - title: _x( 'Black and White', 'image style', 'jetpack' ), - value: 'black-and-white', - }, - { - icon: ( - /* 2 */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm18-4H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zm-4-4h-4v-2h2c1.1 0 2-.89 2-2V7c0-1.11-.9-2-2-2h-4v2h4v2h-2c-1.1 0-2 .89-2 2v4h6v-2z" /> - </SVG> - ), - title: _x( 'Sepia', 'image style', 'jetpack' ), - value: 'sepia', - }, - { - icon: ( - /* 3 */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M21 1H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm14 8v-1.5c0-.83-.67-1.5-1.5-1.5.83 0 1.5-.67 1.5-1.5V7c0-1.11-.9-2-2-2h-4v2h4v2h-2v2h2v2h-4v2h4c1.1 0 2-.89 2-2z" /> - </SVG> - ), - title: '1977', - value: '1977', - }, - { - icon: ( - /* 4 */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm12 10h2V5h-2v4h-2V5h-2v6h4v4zm6-14H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14z" /> - </SVG> - ), - title: _x( 'Clarendon', 'image style', 'jetpack' ), - value: 'clarendon', - }, - { - icon: ( - /* 5 */ - <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> - <Path fill="none" d="M0 0h24v24H0z" /> - <Path d="M21 1H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 16H7V3h14v14zM3 5H1v16c0 1.1.9 2 2 2h16v-2H3V5zm14 8v-2c0-1.11-.9-2-2-2h-2V7h4V5h-6v6h4v2h-4v2h4c1.1 0 2-.89 2-2z" /> - </SVG> - ), - title: _x( 'Gingham', 'image style', 'jetpack' ), - value: 'gingham', - }, -]; - -const label = __( 'Pick an image filter', 'jetpack' ); - -export default function FilterToolbar( { value, onChange } ) { - return ( - <Dropdown - position="bottom right" - className="editor-block-switcher" - contentClassName="editor-block-switcher__popover" - renderToggle={ ( { onToggle, isOpen } ) => { - return ( - <Toolbar - controls={ [ - { - onClick: onToggle, - extraProps: { - 'aria-haspopup': 'true', - 'aria-expanded': isOpen, - }, - title: label, - tooltip: label, - icon: ( - <SVG - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - > - <Path fill="none" d="M0 0h24v24H0V0z" /> - <Path d="M19 10v9H4.98V5h9V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2zm-2.94-2.06L17 10l.94-2.06L20 7l-2.06-.94L17 4l-.94 2.06L14 7zM12 8l-1.25 2.75L8 12l2.75 1.25L12 16l1.25-2.75L16 12l-2.75-1.25z" /> - </SVG> - ), - }, - ] } - /> - ); - } } - renderContent={ ( { onClose } ) => { - const applyOrUnset = nextValue => () => { - onChange( value === nextValue ? undefined : nextValue ); - onClose(); - }; - return ( - <NavigableMenu className="tiled-gallery__filter-picker-menu"> - { availableFilters.map( ( { icon, title, value: filterValue } ) => ( - <MenuItem - className={ value === filterValue ? 'is-active' : undefined } - icon={ icon } - isSelected={ value === filterValue } - key={ filterValue || 'original' } - onClick={ applyOrUnset( filterValue ) } - role="menuitemcheckbox" - > - { title } - </MenuItem> - ) ) } - </NavigableMenu> - ); - } } - /> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js b/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js deleted file mode 100644 index e4d77349..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/edit.js +++ /dev/null @@ -1,147 +0,0 @@ -/** - * External Dependencies - */ -import classnames from 'classnames'; -import { __ } from '@wordpress/i18n'; -import { BACKSPACE, DELETE } from '@wordpress/keycodes'; -import { Component, createRef, Fragment } from '@wordpress/element'; -import { IconButton, Spinner } from '@wordpress/components'; -import { isBlobURL } from '@wordpress/blob'; -import { withSelect } from '@wordpress/data'; - -class GalleryImageEdit extends Component { - img = createRef(); - - onImageClick = () => { - if ( ! this.props.isSelected ) { - this.props.onSelect(); - } - }; - - onImageKeyDown = event => { - if ( - this.img.current === document.activeElement && - this.props.isSelected && - [ BACKSPACE, DELETE ].includes( event.keyCode ) - ) { - this.props.onRemove(); - } - }; - - componentDidUpdate() { - const { alt, height, image, link, url, width } = this.props; - - if ( image ) { - const nextAtts = {}; - - if ( ! alt && image.alt_text ) { - nextAtts.alt = image.alt_text; - } - if ( ! height && image.media_details && image.media_details.height ) { - nextAtts.height = +image.media_details.height; - } - if ( ! link && image.link ) { - nextAtts.link = image.link; - } - if ( ! url && image.source_url ) { - nextAtts.url = image.source_url; - } - if ( ! width && image.media_details && image.media_details.width ) { - nextAtts.width = +image.media_details.width; - } - - if ( Object.keys( nextAtts ).length ) { - this.props.setAttributes( nextAtts ); - } - } - } - - render() { - const { - 'aria-label': ariaLabel, - alt, - height, - id, - imageFilter, - isSelected, - link, - linkTo, - onRemove, - origUrl, - url, - width, - } = this.props; - - let href; - - switch ( linkTo ) { - case 'media': - href = url; - break; - case 'attachment': - href = link; - break; - } - - const isTransient = isBlobURL( origUrl ); - - const img = ( - // Disable reason: Image itself is not meant to be interactive, but should - // direct image selection and unfocus caption fields. - /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */ - <Fragment> - <img - alt={ alt } - aria-label={ ariaLabel } - data-height={ height } - data-id={ id } - data-link={ link } - data-url={ origUrl } - data-width={ width } - onClick={ this.onImageClick } - onKeyDown={ this.onImageKeyDown } - ref={ this.img } - src={ isTransient ? undefined : url } - tabIndex="0" - style={ isTransient ? { backgroundImage: `url(${ url })` } : undefined } - /> - { isTransient && <Spinner /> } - </Fragment> - /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */ - ); - - // Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup - return ( - <figure - className={ classnames( 'tiled-gallery__item', { - 'is-selected': isSelected, - 'is-transient': isTransient, - [ `filter__${ imageFilter }` ]: !! imageFilter, - } ) } - > - { isSelected && ( - <div className="tiled-gallery__item__inline-menu"> - <IconButton - icon="no-alt" - onClick={ onRemove } - className="tiled-gallery__item__remove" - label={ __( 'Remove Image', 'jetpack' ) } - /> - </div> - ) } - { /* Keep the <a> HTML structure, but ensure there is no navigation from edit */ - /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ } - { href ? <a>{ img }</a> : img } - </figure> - ); - } -} - -export default withSelect( ( select, ownProps ) => { - const { getMedia } = select( 'core' ); - const { id } = ownProps; - - return { - image: id ? getMedia( id ) : null, - }; -} )( GalleryImageEdit ); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js deleted file mode 100644 index 347a6f85..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * External Dependencies - */ -import classnames from 'classnames'; -import { isBlobURL } from '@wordpress/blob'; - -export default function GalleryImageSave( props ) { - const { alt, imageFilter, 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 } - data-height={ height } - data-id={ id } - data-link={ link } - data-url={ origUrl } - data-width={ width } - src={ url } - /> - ); - - return ( - <figure - className={ classnames( 'tiled-gallery__item', { - [ `filter__${ imageFilter }` ]: !! imageFilter, - } ) } - > - { href ? <a href={ href }>{ img }</a> : img } - </figure> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/index.js deleted file mode 100644 index 42079113..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/index.js +++ /dev/null @@ -1,212 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; -import { filter } from 'lodash'; -import { Path, SVG } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import edit from './edit'; -import save from './save'; -import { - LAYOUT_CIRCLE, - LAYOUT_COLUMN, - LAYOUT_DEFAULT, - LAYOUT_SQUARE, - LAYOUT_STYLES, -} from './constants'; - -/** - * Style dependencies - */ -import './editor.scss'; - -import * as deprecatedV1 from './deprecated/v1'; - -// Style names are translated. Avoid introducing an i18n dependency elsewhere (view) -// by only including the labels here, the only place they're needed. -// -// Map style names to labels and merge them together. -const styleNames = { - [ LAYOUT_DEFAULT ]: _x( 'Tiled mosaic', 'Tiled gallery layout', 'jetpack' ), - [ LAYOUT_CIRCLE ]: _x( 'Circles', 'Tiled gallery layout', 'jetpack' ), - [ LAYOUT_COLUMN ]: _x( 'Tiled columns', 'Tiled gallery layout', 'jetpack' ), - [ LAYOUT_SQUARE ]: _x( 'Square tiles', 'Tiled gallery layout', 'jetpack' ), -}; -const layoutStylesWithLabels = LAYOUT_STYLES.map( style => ( { - ...style, - label: styleNames[ style.name ], -} ) ); - -/** - * Filter valid images - * - * @param {array} images Array of image objects - * @return {array} Array of image objects which have id and url - */ -function getValidImages( images ) { - return filter( images, ( { id, url } ) => id && url ); -} - -const blockAttributes = { - // 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', - }, - imageFilter: { - type: 'string', - }, - images: { - type: 'array', - default: [], - source: 'query', - selector: '.tiled-gallery__item', - query: { - alt: { - attribute: 'alt', - default: '', - selector: 'img', - source: 'attribute', - }, - 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 name = 'tiled-gallery'; - -export const icon = ( - <SVG viewBox="0 0 24 24" width={ 24 } height={ 24 }> - <Path - fill="currentColor" - d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9 17v2H5v-2h4M21 3h-8v6h8V3zM11 3H3v10h8V3zm10 8h-8v10h8V11zm-10 4H3v6h8v-6z" - /> - </SVG> -); - -export const settings = { - attributes: blockAttributes, - category: 'jetpack', - description: __( 'Display multiple images in an elegantly organized tiled layout.', 'jetpack' ), - icon, - keywords: [ - _x( 'images', 'block search term', 'jetpack' ), - _x( 'photos', 'block search term', 'jetpack' ), - _x( 'pictures', 'block search term', 'jetpack' ), - ], - styles: layoutStylesWithLabels, - supports: { - align: [ 'center', 'wide', 'full' ], - customClassName: false, - html: false, - }, - title: __( 'Tiled Gallery', 'jetpack' ), - transforms: { - from: [ - { - type: 'block', - isMultiBlock: true, - blocks: [ 'core/image' ], - isMatch: images => getValidImages( images ).length > 0, - transform: images => { - const validImages = getValidImages( images ); - return createBlock( `jetpack/${ name }`, { - images: validImages.map( ( { id, url, alt } ) => ( { - id, - url, - alt, - } ) ), - ids: validImages.map( ( { id } ) => id ), - } ); - }, - }, - { - type: 'block', - blocks: [ 'core/gallery', 'jetpack/slideshow' ], - transform: ( { images } ) => { - const validImages = getValidImages( images ); - if ( validImages.length > 0 ) { - return createBlock( `jetpack/${ name }`, { - images: validImages.map( ( { id, url, alt } ) => ( { - id, - url, - alt, - } ) ), - ids: validImages.map( ( { id } ) => id ), - } ); - } - return createBlock( `jetpack/${ name }` ); - }, - }, - ], - to: [ - { - type: 'block', - blocks: [ 'core/gallery' ], - transform: ( { images, ids, columns, linkTo } ) => - createBlock( 'core/gallery', { images, ids, columns, imageCrop: true, linkTo } ), - }, - { - type: 'block', - blocks: [ 'core/image' ], - transform: ( { align, images } ) => { - if ( images.length > 0 ) { - return images.map( ( { id, url, alt } ) => - createBlock( 'core/image', { align, id, url, alt } ) - ); - } - return createBlock( 'core/image' ); - }, - }, - ], - }, - edit, - save, - deprecated: [ deprecatedV1 ], -}; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/column.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/column.js deleted file mode 100644 index a3ed5cdf..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/column.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Column( { children } ) { - return <div className="tiled-gallery__col">{ children }</div>; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/gallery.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/gallery.js deleted file mode 100644 index 94fc61e4..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/gallery.js +++ /dev/null @@ -1,7 +0,0 @@ -export default function Gallery( { children, galleryRef } ) { - return ( - <div className="tiled-gallery__gallery" ref={ galleryRef }> - { children } - </div> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js deleted file mode 100644 index abcb5641..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js +++ /dev/null @@ -1,160 +0,0 @@ -/** - * External dependencies - */ -import photon from 'photon'; -import { __, sprintf } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; -import { format as formatUrl, parse as parseUrl } from 'url'; -import { isBlobURL } from '@wordpress/blob'; - -/** - * Internal dependencies - */ -import GalleryImageEdit from '../gallery-image/edit'; -import GalleryImageSave from '../gallery-image/save'; -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 { - imageFilter, - 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', 'jetpack' ), - i + 1, - images.length - ); - const Image = isSave ? GalleryImageSave : GalleryImageEdit; - - return ( - <Image - alt={ img.alt } - aria-label={ ariaLabel } - height={ img.height } - id={ img.id } - imageFilter={ imageFilter } - isSelected={ selectedImage === i } - key={ i } - link={ img.link } - linkTo={ linkTo } - onRemove={ isSave ? undefined : onRemoveImage( i ) } - onSelect={ isSave ? undefined : onSelectImage( i ) } - origUrl={ img.url } - setAttributes={ isSave ? undefined : setImageAttributes( i ) } - 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 ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/index.js deleted file mode 100644 index 8c56b164..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/index.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * 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, ratiosToColumns, ratiosToMosaicRows } 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(); - } else if ( 'columns' === this.props.layoutStyle && prevProps.columns !== this.props.columns ) { - 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 { align, columns, images, layoutStyle, renderedImages } = this.props; - - const ratios = imagesToRatios( images ); - const rows = - 'columns' === layoutStyle - ? ratiosToColumns( ratios, columns ) - : ratiosToMosaicRows( ratios, { isWide: [ 'full', 'wide' ].includes( align ) } ); - - let cursor = 0; - return ( - <Gallery galleryRef={ this.gallery }> - { rows.map( ( row, rowIndex ) => ( - <Row key={ rowIndex }> - { row.map( ( colSize, colIndex ) => { - const columnImages = renderedImages.slice( cursor, cursor + colSize ); - cursor += colSize; - return <Column key={ colIndex }>{ columnImages }</Column>; - } ) } - </Row> - ) ) } - </Gallery> - ); - } -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/ratios.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/ratios.js deleted file mode 100644 index 8accd552..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/ratios.js +++ /dev/null @@ -1,280 +0,0 @@ -/** - * External dependencies - */ -import { - drop, - every, - isEqual, - map, - overEvery, - some, - sum, - take, - takeRight, - takeWhile, - zipWith, -} from 'lodash'; - -export function imagesToRatios( images ) { - return map( images, ratioFromImage ); -} - -export function ratioFromImage( { height, width } ) { - return height && width ? width / height : 1; -} - -/** - * Build three columns, each of which should contain approximately 1/3 of the total ratio - * - * @param {Array.<number>} ratios Ratios of images put into shape - * @param {number} columnCount Number of columns - * - * @return {Array.<Array.<number>>} Shape of rows and columns - */ -export function ratiosToColumns( ratios, columnCount ) { - // If we don't have more than 1 per column, just return a simple 1 ratio per column shape - if ( ratios.length <= columnCount ) { - return [ Array( ratios.length ).fill( 1 ) ]; - } - - const total = sum( ratios ); - const targetColRatio = total / columnCount; - - const row = []; - let toProcess = ratios; - let accumulatedRatio = 0; - - // We skip the last column in the loop and add rest later - for ( let i = 0; i < columnCount - 1; i++ ) { - const colSize = takeWhile( toProcess, ratio => { - const shouldTake = accumulatedRatio <= ( i + 1 ) * targetColRatio; - if ( shouldTake ) { - accumulatedRatio += ratio; - } - return shouldTake; - } ).length; - row.push( colSize ); - toProcess = drop( toProcess, colSize ); - } - - // Don't calculate last column, just add what's left - row.push( toProcess.length ); - - // A shape is an array of rows. Wrap our row in an array. - return [ row ]; -} - -/** - * These are partially applied functions. - * They rely on helper function (defined below) to create a function that expects to be passed ratios - * during processing. - * - * …FitsNextImages() functions should be passed ratios to be processed - * …IsNotRecent() functions should be passed the processed shapes - */ - -const reverseSymmetricRowIsNotRecent = isNotRecentShape( [ 2, 1, 2 ], 5 ); -const reverseSymmetricFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isPortrait, - isLandscape, - isLandscape, -] ); -const longSymmetricRowFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isLandscape, - isPortrait, - isLandscape, - isLandscape, - isLandscape, -] ); -const longSymmetricRowIsNotRecent = isNotRecentShape( [ 3, 1, 3 ], 5 ); -const symmetricRowFitsNextImages = checkNextRatios( [ - isPortrait, - isLandscape, - isLandscape, - isPortrait, -] ); -const symmetricRowIsNotRecent = isNotRecentShape( [ 1, 2, 1 ], 5 ); -const oneThreeFitsNextImages = checkNextRatios( [ - isPortrait, - isLandscape, - isLandscape, - isLandscape, -] ); -const oneThreeIsNotRecent = isNotRecentShape( [ 1, 3 ], 3 ); -const threeOneIsFitsNextImages = checkNextRatios( [ - isLandscape, - isLandscape, - isLandscape, - isPortrait, -] ); -const threeOneIsNotRecent = isNotRecentShape( [ 3, 1 ], 3 ); -const oneTwoFitsNextImages = checkNextRatios( [ - lt( 1.6 ), - overEvery( gte( 0.9 ), lt( 2 ) ), - overEvery( gte( 0.9 ), lt( 2 ) ), -] ); -const oneTwoIsNotRecent = isNotRecentShape( [ 1, 2 ], 3 ); -const fiveIsNotRecent = isNotRecentShape( [ 1, 1, 1, 1, 1 ], 1 ); -const fourIsNotRecent = isNotRecentShape( [ 1, 1, 1, 1 ], 1 ); -const threeIsNotRecent = isNotRecentShape( [ 1, 1, 1 ], 3 ); -const twoOneFitsNextImages = checkNextRatios( [ - overEvery( gte( 0.9 ), lt( 2 ) ), - overEvery( gte( 0.9 ), lt( 2 ) ), - lt( 1.6 ), -] ); -const twoOneIsNotRecent = isNotRecentShape( [ 2, 1 ], 3 ); -const panoramicFitsNextImages = checkNextRatios( [ isPanoramic ] ); - -export function ratiosToMosaicRows( ratios, { isWide } = {} ) { - // This function will recursively process the input until it is consumed - const go = ( processed, toProcess ) => { - if ( ! toProcess.length ) { - return processed; - } - - let next; - - if ( - /* Reverse_Symmetric_Row */ - toProcess.length > 15 && - reverseSymmetricFitsNextImages( toProcess ) && - reverseSymmetricRowIsNotRecent( processed ) - ) { - next = [ 2, 1, 2 ]; - } else if ( - /* Long_Symmetric_Row */ - toProcess.length > 15 && - longSymmetricRowFitsNextImages( toProcess ) && - longSymmetricRowIsNotRecent( processed ) - ) { - next = [ 3, 1, 3 ]; - } else if ( - /* Symmetric_Row */ - toProcess.length !== 5 && - symmetricRowFitsNextImages( toProcess ) && - symmetricRowIsNotRecent( processed ) - ) { - next = [ 1, 2, 1 ]; - } else if ( - /* One_Three */ - oneThreeFitsNextImages( toProcess ) && - oneThreeIsNotRecent( processed ) - ) { - next = [ 1, 3 ]; - } else if ( - /* Three_One */ - threeOneIsFitsNextImages( toProcess ) && - threeOneIsNotRecent( processed ) - ) { - next = [ 3, 1 ]; - } else if ( - /* One_Two */ - oneTwoFitsNextImages( toProcess ) && - oneTwoIsNotRecent( processed ) - ) { - next = [ 1, 2 ]; - } else if ( - /* Five */ - isWide && - ( toProcess.length === 5 || ( toProcess.length !== 10 && toProcess.length > 6 ) ) && - fiveIsNotRecent( processed ) && - sum( take( toProcess, 5 ) ) < 5 - ) { - next = [ 1, 1, 1, 1, 1 ]; - } else if ( - /* Four */ - isFourValidCandidate( processed, toProcess ) - ) { - next = [ 1, 1, 1, 1 ]; - } else if ( - /* Three */ - isThreeValidCandidate( processed, toProcess, isWide ) - ) { - next = [ 1, 1, 1 ]; - } else if ( - /* Two_One */ - twoOneFitsNextImages( toProcess ) && - twoOneIsNotRecent( processed ) - ) { - next = [ 2, 1 ]; - } else if ( /* Panoramic */ panoramicFitsNextImages( toProcess ) ) { - next = [ 1 ]; - } else if ( /* One_One */ toProcess.length > 3 ) { - next = [ 1, 1 ]; - } else { - // Everything left - next = Array( toProcess.length ).fill( 1 ); - } - - // Add row - const nextProcessed = processed.concat( [ next ] ); - - // Trim consumed images from next processing step - const consumedImages = sum( next ); - const nextToProcess = toProcess.slice( consumedImages ); - - return go( nextProcessed, nextToProcess ); - }; - return go( [], ratios ); -} - -function isThreeValidCandidate( processed, toProcess, isWide ) { - const ratio = sum( take( toProcess, 3 ) ); - return ( - toProcess.length >= 3 && - toProcess.length !== 4 && - toProcess.length !== 6 && - threeIsNotRecent( processed ) && - ( ratio < 2.5 || - ( ratio < 5 && - /* nextAreSymettric */ - ( toProcess.length >= 3 && - /* @FIXME floating point equality?? */ toProcess[ 0 ] === toProcess[ 2 ] ) ) || - isWide ) - ); -} - -function isFourValidCandidate( processed, toProcess ) { - const ratio = sum( take( toProcess, 4 ) ); - return ( - ( fourIsNotRecent( processed ) && ( ratio < 3.5 && toProcess.length > 5 ) ) || - ( ratio < 7 && toProcess.length === 4 ) - ); -} - -function isNotRecentShape( shape, numRecents ) { - return recents => - ! some( takeRight( recents, numRecents ), recentShape => isEqual( recentShape, shape ) ); -} - -function checkNextRatios( shape ) { - return ratios => - ratios.length >= shape.length && - every( zipWith( shape, ratios.slice( 0, shape.length ), ( f, r ) => f( r ) ) ); -} - -function isLandscape( ratio ) { - return ratio >= 1 && ratio < 2; -} - -function isPortrait( ratio ) { - return ratio < 1; -} - -function isPanoramic( ratio ) { - return ratio >= 2; -} - -// >= -function gte( n ) { - return m => m >= n; -} - -// < -function lt( n ) { - return m => m < n; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/resize.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/resize.js deleted file mode 100644 index 022729c8..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/resize.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * Internal dependencies - */ -import { GUTTER_WIDTH } from '../../constants'; - -/** - * Distribute a difference across ns so that their sum matches the target - * - * @param {Array<number>} parts Array of numbers to fit - * @param {number} target Number that sum should match - * @return {Array<number>} Adjusted parts - */ -function adjustFit( parts, target ) { - const diff = target - parts.reduce( ( sum, n ) => sum + n, 0 ); - const partialDiff = diff / parts.length; - return parts.map( p => p + partialDiff ); -} - -export function handleRowResize( row, width ) { - applyRowRatio( row, getRowRatio( row ), width ); -} - -function getRowRatio( row ) { - const result = getRowCols( row ) - .map( getColumnRatio ) - .reduce( - ( [ ratioA, weightedRatioA ], [ ratioB, weightedRatioB ] ) => { - return [ ratioA + ratioB, weightedRatioA + weightedRatioB ]; - }, - [ 0, 0 ] - ); - return result; -} - -export function getGalleryRows( gallery ) { - return Array.from( gallery.querySelectorAll( '.tiled-gallery__row' ) ); -} - -function getRowCols( row ) { - return Array.from( row.querySelectorAll( '.tiled-gallery__col' ) ); -} - -function getColImgs( col ) { - return Array.from( - col.querySelectorAll( '.tiled-gallery__item > img, .tiled-gallery__item > a > img' ) - ); -} - -function getColumnRatio( col ) { - const imgs = getColImgs( col ); - const imgCount = imgs.length; - const ratio = - 1 / - imgs.map( getImageRatio ).reduce( ( partialColRatio, imgRatio ) => { - return partialColRatio + 1 / imgRatio; - }, 0 ); - const result = [ ratio, ratio * imgCount || 1 ]; - return result; -} - -function getImageRatio( img ) { - const w = parseInt( img.dataset.width, 10 ); - const h = parseInt( img.dataset.height, 10 ); - const result = w && ! Number.isNaN( w ) && h && ! Number.isNaN( h ) ? w / h : 1; - return result; -} - -function applyRowRatio( row, [ ratio, weightedRatio ], width ) { - const rawHeight = - ( 1 / ratio ) * ( width - GUTTER_WIDTH * ( row.childElementCount - 1 ) - weightedRatio ); - - applyColRatio( row, { - rawHeight, - rowWidth: width - GUTTER_WIDTH * ( row.childElementCount - 1 ), - } ); -} - -function applyColRatio( row, { rawHeight, rowWidth } ) { - const cols = getRowCols( row ); - - const colWidths = cols.map( - col => ( rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ) ) * getColumnRatio( col )[ 0 ] - ); - - const adjustedWidths = adjustFit( colWidths, rowWidth ); - - cols.forEach( ( col, i ) => { - const rawWidth = colWidths[ i ]; - const width = adjustedWidths[ i ]; - applyImgRatio( col, { - colHeight: rawHeight - GUTTER_WIDTH * ( col.childElementCount - 1 ), - width, - rawWidth, - } ); - } ); -} - -function applyImgRatio( col, { colHeight, width, rawWidth } ) { - const imgHeights = getColImgs( col ).map( img => rawWidth / getImageRatio( img ) ); - const adjustedHeights = adjustFit( imgHeights, colHeight ); - - // Set size of col children, not the <img /> element - Array.from( col.children ).forEach( ( item, i ) => { - const height = adjustedHeights[ i ]; - item.setAttribute( 'style', `height:${ height }px;width:${ width }px;` ); - } ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/index.js.snap b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/index.js.snap deleted file mode 100644 index e726fa52..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,98 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders as expected 1`] = ` -<Gallery - galleryRef={ - Object { - "current": null, - } - } -> - <Row - key="0" - > - <Column - key="0" - > - 0 - </Column> - </Row> - <Row - key="1" - > - <Column - key="0" - > - 1 - </Column> - </Row> - <Row - key="2" - > - <Column - key="0" - > - 2 - </Column> - <Column - key="1" - > - 3 - </Column> - <Column - key="2" - > - 4 - </Column> - <Column - key="3" - > - 5 - </Column> - </Row> - <Row - key="3" - > - <Column - key="0" - > - 6 - </Column> - <Column - key="1" - > - 7 - </Column> - </Row> - <Row - key="4" - > - <Column - key="0" - > - 8 - </Column> - <Column - key="1" - > - 9 - 10 - </Column> - </Row> - <Row - key="5" - > - <Column - key="0" - > - 11 - 12 - </Column> - <Column - key="1" - > - 13 - </Column> - </Row> -</Gallery> -`; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/ratios.js.snap b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/ratios.js.snap deleted file mode 100644 index df02118c..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/__snapshots__/ratios.js.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ratiosToMosaicRows transforms as expected 1`] = ` -Array [ - Array [ - 1, - ], - Array [ - 1, - ], - Array [ - 1, - 1, - 1, - 1, - ], - Array [ - 1, - 1, - ], - Array [ - 1, - 2, - ], - Array [ - 2, - 1, - ], -] -`; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/fixtures/ratios.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/fixtures/ratios.js deleted file mode 100644 index 77db288c..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/fixtures/ratios.js +++ /dev/null @@ -1,16 +0,0 @@ -export const ratios = [ - 4, - 2.26056338028169, - 0.6676143094053542, - 0.75, - 0.7444409646100846, - 0.6666666666666666, - 0.8000588062334607, - 3.6392174704276616, - 1.335559265442404, - 1.509433962264151, - 1.6, - 1.3208430913348945, - 1.3553937789543349, - 1.499531396438613, -]; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/index.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/index.js deleted file mode 100644 index 72e49ba6..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * External dependencies - */ -import React from 'react'; -import { range } from 'lodash'; -import { shallow } from 'enzyme'; - -/** - * Internal dependencies - */ -import Mosaic from '..'; -import * as imageSets from '../../test/fixtures/image-sets'; - -test( 'renders as expected', () => { - Object.keys( imageSets ).forEach( k => { - const images = imageSets[ k ]; - expect( - shallow( <Mosaic images={ images } renderedImages={ range( images.length ) } /> ) - ).toMatchSnapshot(); - } ); -} ); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/ratios.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/ratios.js deleted file mode 100644 index 3756b971..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/test/ratios.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Internal dependencies - */ -import { ratiosToMosaicRows } from '../ratios'; -import { ratios } from './fixtures/ratios'; - -describe( 'ratiosToMosaicRows', () => { - test( 'transforms as expected', () => { - expect( ratiosToMosaicRows( ratios ) ).toMatchSnapshot(); - } ); -} ); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js deleted file mode 100644 index 200a58c2..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/row.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -export default function Row( { children, className } ) { - return <div className={ classnames( 'tiled-gallery__row', className ) }>{ children }</div>; -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/square.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/square.js deleted file mode 100644 index 2a1ab888..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/square.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * 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 ( - <Gallery> - { [ - ...( remainder ? [ take( renderedImages, remainder ) ] : [] ), - ...chunk( drop( renderedImages, remainder ), columnCount ), - ].map( ( imagesInRow, rowIndex ) => ( - <Row key={ rowIndex } className={ `columns-${ imagesInRow.length }` }> - { imagesInRow.map( ( image, colIndex ) => ( - <Column key={ colIndex }>{ image }</Column> - ) ) } - </Row> - ) ) } - </Gallery> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js b/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js deleted file mode 100644 index fd477f5a..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/layout/test/fixtures/image-sets.js +++ /dev/null @@ -1,103 +0,0 @@ -export const imageSet1 = [ - { - alt: '', - id: 163, - url: 'https://example.files.wordpress.com/2018/12/architecture-bay-bridge-356830.jpg', - height: 2048, - width: 8192, - }, - { - alt: '', - id: 162, - url: 'https://example.files.wordpress.com/2018/12/bloom-blossom-flora-40797-1.jpg', - height: 1562, - width: 3531, - }, - { - alt: '', - id: 161, - url: 'https://example.files.wordpress.com/2018/12/architecture-building-city-597049.jpg', - height: 4221, - width: 2818, - }, - { - alt: '', - id: 160, - url: 'https://example.files.wordpress.com/2018/12/architecture-art-blue-699466.jpg', - height: 4032, - width: 3024, - }, - { - alt: '', - id: 159, - url: - 'https://example.files.wordpress.com/2018/12/black-and-white-construction-ladder-54335.jpg', - height: 3193, - width: 2377, - }, - { - alt: '', - id: 158, - url: 'https://example.files.wordpress.com/2018/12/architecture-buildings-city-1672110.jpg', - height: 6000, - width: 4000, - }, - { - alt: '', - id: 157, - url: - 'https://example.files.wordpress.com/2018/12/architectural-design-architecture-black-and-white-1672122-1.jpg', - height: 3401, - width: 2721, - }, - { - alt: '', - id: 156, - url: 'https://example.files.wordpress.com/2018/12/grass-hd-wallpaper-lake-127753.jpg', - height: 2198, - width: 7999, - }, - { - alt: '', - id: 122, - url: 'https://example.files.wordpress.com/2018/12/texaco-car-1.jpg', - height: 599, - width: 800, - }, - { - alt: '', - id: 92, - url: 'https://example.files.wordpress.com/2018/12/43824553435_ea38cbc92a_m.jpg', - height: 159, - width: 240, - }, - { - alt: '', - id: 90, - url: 'https://example.files.wordpress.com/2018/12/42924685680_7b5632e58e_m.jpg', - height: 150, - width: 240, - }, - { - alt: '', - id: 89, - url: - 'https://example.files.wordpress.com/2018/12/31962299833_1e106f7f7a_z-1-e1545262352979.jpg', - height: 427, - width: 564, - }, - { - alt: '', - id: 88, - url: 'https://example.files.wordpress.com/2018/12/29797558147_3c72afa8f4_k.jpg', - height: 1511, - width: 2048, - }, - { - alt: '', - id: 8, - url: 'https://example.files.wordpress.com/2018/11/person-smartphone-office-table.jpeg', - height: 1067, - width: 1600, - }, -]; diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/save.js b/plugins/jetpack/extensions/blocks/tiled-gallery/save.js deleted file mode 100644 index e21e56e1..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/save.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Internal dependencies - */ -import Layout from './layout'; -import { defaultColumnsNumber } from './edit'; -import { getActiveStyleName } from '../../shared/block-styles'; -import { LAYOUT_STYLES } from './constants'; - -export default function TiledGallerySave( { attributes } ) { - const { imageFilter, images } = attributes; - - if ( ! images.length ) { - return null; - } - - const { align, className, columns = defaultColumnsNumber( attributes ), linkTo } = attributes; - - return ( - <Layout - align={ align } - className={ className } - columns={ columns } - imageFilter={ imageFilter } - images={ images } - isSave - layoutStyle={ getActiveStyleName( LAYOUT_STYLES, className ) } - linkTo={ linkTo } - /> - ); -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php b/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php index bcfdaf1f..d53feae4 100644 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php +++ b/plugins/jetpack/extensions/blocks/tiled-gallery/tiled-gallery.php @@ -44,6 +44,10 @@ class Jetpack_Tiled_Gallery_Block { $is_squareish_layout = self::is_squareish_layout( $attr ); + $jetpack_plan = Jetpack_Plan::get(); + + wp_localize_script( 'jetpack-gallery-settings', 'jetpack_plan', array( 'data' => $jetpack_plan['product_slug'] ) ); + if ( preg_match_all( '/<img [^>]+>/', $content, $images ) ) { /** * This block processes all of the images that are found and builds $find and $replace. @@ -85,7 +89,7 @@ class Jetpack_Tiled_Gallery_Block { $srcset_src = add_query_arg( array( 'resize' => $w . ',' . $w, - 'strip' => 'all', + 'strip' => 'info', ), $orig_src ); @@ -104,7 +108,7 @@ class Jetpack_Tiled_Gallery_Block { for ( $w = $min_width; $w <= $max_width; $w = min( $max_width, $w + self::IMG_SRCSET_WIDTH_STEP ) ) { $srcset_src = add_query_arg( array( - 'strip' => 'all', + 'strip' => 'info', 'w' => $w, ), $orig_src @@ -163,9 +167,4 @@ class Jetpack_Tiled_Gallery_Block { } } -if ( - ( defined( 'IS_WPCOM' ) && IS_WPCOM ) - || class_exists( 'Jetpack_Photon' ) && Jetpack::is_module_active( 'photon' ) -) { - Jetpack_Tiled_Gallery_Block::register(); -} +Jetpack_Tiled_Gallery_Block::register(); diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/variables.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/variables.scss deleted file mode 100644 index f0054531..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$tiled-gallery-gutter: 4px; // Fixed in JS, see `LayoutStyles` from `edit.jsx` -$tiled-gallery-selection: #0085ba; // Gutenberg primary theme color (https://github.com/WordPress/gutenberg/blob/6928e41c8afd7daa3a709afdda7eee48218473b7/bin/packages/post-css-config.js#L4) diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/view.js b/plugins/jetpack/extensions/blocks/tiled-gallery/view.js deleted file mode 100644 index 1f45b13d..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/view.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Internal dependencies - */ -import './view.scss'; -import ResizeObserver from 'resize-observer-polyfill'; -import { handleRowResize } from './layout/mosaic/resize'; - -/** - * Handler for Gallery ResizeObserver - * - * @param {Array<ResizeObserverEntry>} galleries Resized galleries - */ -function handleObservedResize( galleries ) { - if ( handleObservedResize.pendingRaf ) { - cancelAnimationFrame( handleObservedResize.pendingRaf ); - } - handleObservedResize.pendingRaf = requestAnimationFrame( () => { - handleObservedResize.pendingRaf = null; - for ( const gallery of galleries ) { - const { width: galleryWidth } = gallery.contentRect; - // We can't use childNodes becuase post content may contain unexpected text nodes - const rows = Array.from( gallery.target.querySelectorAll( '.tiled-gallery__row' ) ); - rows.forEach( row => handleRowResize( row, galleryWidth ) ); - } - } ); -} - -/** - * Get all the galleries on the document - * - * @return {Array} List of gallery nodes - */ -function getGalleries() { - return Array.from( - document.querySelectorAll( - '.wp-block-jetpack-tiled-gallery.is-style-rectangular > .tiled-gallery__gallery,' + - '.wp-block-jetpack-tiled-gallery.is-style-columns > .tiled-gallery__gallery' - ) - ); -} - -/** - * Setup ResizeObserver to follow each gallery on the page - */ -const observeGalleries = () => { - const galleries = getGalleries(); - - if ( galleries.length === 0 ) { - return; - } - - const observer = new ResizeObserver( handleObservedResize ); - - galleries.forEach( gallery => observer.observe( gallery ) ); -}; - -if ( typeof window !== 'undefined' && typeof document !== 'undefined' ) { - // `DOMContentLoaded` may fire before the script has a chance to run - if ( document.readyState === 'loading' ) { - document.addEventListener( 'DOMContentLoaded', observeGalleries ); - } else { - observeGalleries(); - } -} diff --git a/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss b/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss deleted file mode 100644 index 456f8acb..00000000 --- a/plugins/jetpack/extensions/blocks/tiled-gallery/view.scss +++ /dev/null @@ -1,115 +0,0 @@ -@import '../../shared/styles/jetpack-variables.scss'; -@import './variables.scss'; -@import './css-gram.scss'; - -$tiled-gallery-max-column-count: 20; - -.wp-block-jetpack-tiled-gallery { - margin: 0 auto $jetpack-block-margin-bottom; - - &.is-style-circle .tiled-gallery__item img { - border-radius: 50%; - } - - &.is-style-square, - &.is-style-circle { - .tiled-gallery__row { - flex-grow: 1; - width: 100%; - - @for $cols from 1 through $tiled-gallery-max-column-count { - &.columns-#{$cols} { - .tiled-gallery__col { - width: calc( ( 100% - #{ $tiled-gallery-gutter * ( $cols - 1 ) } ) / #{$cols} ); - } - } - } - } - } - - &.is-style-columns, - &.is-style-rectangular { - .tiled-gallery__item { - display: flex; - } - } -} - -.tiled-gallery__gallery { - width: 100%; - display: flex; - padding: 0; - flex-wrap: wrap; -} - -.tiled-gallery__row { - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - margin: 0; - - & + & { - margin-top: $tiled-gallery-gutter; - } -} - -.tiled-gallery__col { - display: flex; - flex-direction: column; - justify-content: center; - margin: 0; - - & + & { - margin-left: $tiled-gallery-gutter; - } -} - -.tiled-gallery__item { - justify-content: center; - margin: 0; - overflow: hidden; - padding: 0; - position: relative; - - &.filter__black-and-white { - filter: grayscale( 100% ); - } - - &.filter__sepia { - filter: sepia( 100% ); - } - - &.filter__1977 { - @include _1977; - } - - &.filter__clarendon { - @include clarendon; - } - - &.filter__gingham { - @include gingham; - } - - & + & { - margin-top: $tiled-gallery-gutter; - } - - > img { - background-color: rgba( 0, 0, 0, 0.1 ); - } - - > a, - > a > img, - > img { - display: block; - height: auto; - margin: 0; - max-width: 100%; - object-fit: cover; - object-position: center; - padding: 0; - width: 100%; - } -} |