From 6f9ba31959a7e4e334e9938bb21a82e02f6431ce Mon Sep 17 00:00:00 2001 From: illusaen Date: Wed, 20 Oct 2021 20:33:29 -0500 Subject: [PATCH] Jetpack Tiled Gallery Block: `save` functionality (#21481) * [not verified] WIP implementation of save. * [not verified] WIP: Got block attributes to show up in serialization * [not verified] Make columnWidths nested array * [not verified] WIP: Now converts serialized HTML images to inner blocks on load if they weren't already in store. * [not verified] WIP load from save. Hacked in stuff to make it work. Need to find root cause. * Adding Platform checks to ensure that mobile changes don't affect web. Fixing some lint warnings. Co-authored-by: Wendy Chen Co-authored-by: Paul Von Schrottky --- .../blocks/tiled-gallery/edit.native.js | 33 ++++++++++++--- .../tiled-gallery/gallery-image/save.js | 5 ++- .../blocks/tiled-gallery/layout/index.js | 7 +++- .../blocks/tiled-gallery/layout/square.js | 7 +++- .../blocks/tiled-gallery/save.native.js | 40 +++++++++++++++++++ .../blocks/tiled-gallery/utils/index.js | 4 +- 6 files changed, 84 insertions(+), 12 deletions(-) create mode 100644 projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js index e8fab849af5f4..aaafeb7bce876 100644 --- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js @@ -44,10 +44,10 @@ const TiledGalleryEdit = props => { noticeUI, onFocus, setAttributes, - attributes: { columns, linkTo, roundedCorners }, + attributes: { columns, images: attributeImages, linkTo, roundedCorners }, } = props; - const { replaceInnerBlocks } = useDispatch( blockEditorStore ); + const { replaceInnerBlocks, updateBlockAttributes } = useDispatch( blockEditorStore ); useEffect( () => { const { width } = sizes || {}; @@ -80,7 +80,26 @@ const TiledGalleryEdit = props => { [ innerBlockImages ] ); - const onSelectImages = imgs => { + useEffect( () => { + images?.forEach( newImage => { + updateBlockAttributes( newImage.clientId, { + ...newImage.attributes, + id: newImage.id, + } ); + } ); + + const newIds = images?.map( image => image.id ); + setAttributes( { ids: newIds } ); + }, [ images, setAttributes, updateBlockAttributes ] ); + + useEffect( () => { + if ( ! columns ) { + const col = Math.min( images.length, DEFAULT_COLUMNS ); + setAttributes( { columns: Math.max( col, 1 ) } ); + } + }, [ columns, images, setAttributes ] ); + + const populateInnerBlocksWithImages = ( imgs, replace = false ) => { const newBlocks = imgs.map( image => { return createBlock( 'core/image', { id: image.id, @@ -90,7 +109,7 @@ const TiledGalleryEdit = props => { } ); } ); - replaceInnerBlocks( clientId, concat( innerBlockImages, newBlocks ) ); + replaceInnerBlocks( clientId, replace ? newBlocks : concat( innerBlockImages, newBlocks ) ); }; useEffect( () => { @@ -99,6 +118,10 @@ const TiledGalleryEdit = props => { } }, [ columns, setAttributes ] ); + if ( attributeImages.length && ! images.length ) { + populateInnerBlocksWithImages( attributeImages, true ); + } + const innerBlocksProps = useInnerBlocksProps( {}, { @@ -126,7 +149,7 @@ const TiledGalleryEdit = props => { title: __( 'Tiled Gallery', 'jetpack' ), name: __( 'images', 'jetpack' ), } } - onSelect={ onSelectImages } + onSelect={ populateInnerBlocksWithImages } accept="image/*" allowedTypes={ ALLOWED_MEDIA_TYPES } multiple diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js index 8d848e9aed729..9c9b170d97335 100644 --- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/gallery-image/save.js @@ -3,9 +3,10 @@ */ import classnames from 'classnames'; import { isBlobURL } from '@wordpress/blob'; +import { Platform } from '@wordpress/element'; export default function GalleryImageSave( props ) { - const { alt, imageFilter, height, id, link, linkTo, origUrl, url, width } = props; + const { alt, ariaLabel, imageFilter, height, id, link, linkTo, origUrl, url, width } = props; if ( isBlobURL( origUrl ) ) { return null; @@ -31,7 +32,7 @@ export default function GalleryImageSave( props ) { data-url={ origUrl } data-width={ width } src={ url } - data-amp-layout={ 'responsive' } + aria-label={ Platform.OS === 'web' ? undefined : ariaLabel } /> ); diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js index acfac930c1ce5..2dc81fea504f9 100644 --- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/index.js @@ -2,7 +2,7 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; +import { Component, Platform } from '@wordpress/element'; import classnames from 'classnames'; /** @@ -47,10 +47,13 @@ export default class Layout extends Component { const { src, srcSet } = photonizedImgProps( img, { layoutStyle } ); + const isWeb = Platform.OS === 'web'; + return ( { { [ ...( remainder ? [ take( renderedImages, remainder ) ] : [] ), ...chunk( drop( renderedImages, remainder ), columnCount ), ].map( ( imagesInRow, rowIndex ) => ( - + { imagesInRow.map( ( image, colIndex ) => ( { image } ) ) } diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js new file mode 100644 index 0000000000000..d842a61f290ce --- /dev/null +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/save.native.js @@ -0,0 +1,40 @@ +/** + * Internal dependencies + */ +import Layout from './layout'; +import { defaultColumnsNumber } from './edit'; + +export default function TiledGallerySave( { attributes, innerBlocks } ) { + if ( ! innerBlocks.length ) { + return null; + } + + const { + align, + className, + columns = defaultColumnsNumber( innerBlocks ), + linkTo, + roundedCorners, + columnWidths, + ids, + } = attributes; + + return ( + ( { + ...innerBlock.attributes, + height: 100, + width: 100, + } ) ) } + isSave + layoutStyle={ 'square' } + linkTo={ linkTo } + roundedCorners={ roundedCorners } + columnWidths={ columnWidths } + ids={ ids } + /> + ); +} diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js index 78023919a0c8a..f2c2491b5ac13 100644 --- a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js +++ b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/utils/index.js @@ -4,6 +4,7 @@ import photon from 'photon'; import { format as formatUrl, parse as parseUrl } from 'url'; import { isBlobURL } from '@wordpress/blob'; +import { Platform } from '@wordpress/element'; import { range } from 'lodash'; /** @@ -66,8 +67,9 @@ export function photonizedImgProps( img, galleryAtts = {} ) { * We don't know what the viewport size will be like. Use full size src. */ + const isWeb = Platform.OS === 'web'; let src; - if ( isSquareishLayout( layoutStyle ) && width && height ) { + if ( isSquareishLayout( layoutStyle ) && width && height && isWeb ) { // Layouts with 1:1 width/height ratio should be made square const size = Math.min( PHOTON_MAX_RESIZE, width, height ); src = photonImplementation( url, {