From 8586af7a9e16ee231003cef4d720e5c9a992f8c6 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jul 2021 12:51:49 +1200 Subject: [PATCH 1/4] Remove the imageCount attribute and use CSS instead to set default columns --- packages/block-library/src/gallery/block.json | 4 ---- .../block-library/src/gallery/edit-wrapper.js | 11 +++++++-- packages/block-library/src/gallery/edit.js | 24 +++++++------------ packages/block-library/src/gallery/gallery.js | 13 +--------- packages/block-library/src/gallery/index.js | 1 - packages/block-library/src/gallery/save.js | 8 +------ packages/block-library/src/gallery/style.scss | 20 +++++++++++++++- .../block-library/src/gallery/transforms.js | 1 - 8 files changed, 38 insertions(+), 44 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 9aa8cb5903e944..be31337a3385a4 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -92,10 +92,6 @@ "allowResize": { "type": "boolean", "default": false - }, - "imageCount": { - "type": "number", - "default": 0 } }, "providesContext": { diff --git a/packages/block-library/src/gallery/edit-wrapper.js b/packages/block-library/src/gallery/edit-wrapper.js index e6b7b71f74938a..9258340d360c36 100644 --- a/packages/block-library/src/gallery/edit-wrapper.js +++ b/packages/block-library/src/gallery/edit-wrapper.js @@ -16,7 +16,14 @@ import EditWithoutInnerBlocks from './v1/edit'; * use of hooks lint errors if adding this logic to the top of the edit component. */ export default function GalleryEditWrapper( props ) { - const { attributes } = props; + const { attributes, clientId } = props; + + const innerBlockImages = useSelect( + ( select ) => { + return select( blockEditorStore ).getBlock( clientId )?.innerBlocks; + }, + [ clientId ] + ); const __unstableGalleryWithImageBlocks = useSelect( ( select ) => { const settings = select( blockEditorStore ).getSettings(); @@ -26,7 +33,7 @@ export default function GalleryEditWrapper( props ) { // This logic is used to infer version information from content with higher // precedence than the flag. New galleries (and existing empty galleries) will // honor the flag. - const hasNewVersionContent = !! attributes?.imageCount; + const hasNewVersionContent = !! innerBlockImages.length; const hasOldVersionContent = 0 < attributes?.ids?.length || 0 < attributes?.images?.length; if ( diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index fe6691cacc16e1..d51329fc6bbf93 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -86,8 +86,7 @@ function GalleryEdit( props ) { } = props; const { - imageCount, - columns = defaultColumnsNumber( imageCount ), + columns, imageCrop, linkTarget, linkTo, @@ -155,17 +154,6 @@ function GalleryEdit( props ) { setAttributes( { shortCodeTransforms: undefined } ); }, [ shortCodeTransforms, shortCodeImages ] ); - useEffect( () => { - if ( ! images ) { - setAttributes( { imageCount: undefined } ); - return; - } - - if ( images.length !== imageCount ) { - setAttributes( { imageCount: images.length } ); - } - }, [ images ] ); - const imageSizeOptions = useImageSizes( imageData, isSelected, @@ -181,8 +169,8 @@ function GalleryEdit( props ) { * it already existed in the gallery. If the image is in fact new, we need * to apply the gallery's current settings to the image. * - * @param {Object} existingBlock Existing Image block that still exists after gallery update. - * @param {Object} image Media object for the actual image. + * @param {Object} existingBlock Existing Image block that still exists after gallery update. + * @param {Object} image Media object for the actual image. * @return {Object} Attributes to set on the new image block. */ function buildImageAttributes( existingBlock, image ) { @@ -462,7 +450,11 @@ function GalleryEdit( props ) { { images.length > 1 && ( { @@ -37,13 +32,7 @@ export const Gallery = ( props ) => { blockProps, } = props; - const { - imageCount, - align, - columns = defaultColumnsNumber( imageCount ), - caption, - imageCrop, - } = attributes; + const { align, columns = 'default', caption, imageCrop } = attributes; const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, { allowedBlocks, diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index a0eeae8b7fb6af..b60a324dffc039 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -21,7 +21,6 @@ export const settings = { example: { attributes: { columns: 2, - imageCount: 2, }, innerBlocks: [ { diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index 1d812bfd0fe546..071015b068f822 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -6,7 +6,6 @@ import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { defaultColumnsNumber } from './shared'; import saveWithoutInnerBlocks from './v1/save'; export default function saveWithInnerBlocks( { attributes } ) { @@ -14,12 +13,7 @@ export default function saveWithInnerBlocks( { attributes } ) { return saveWithoutInnerBlocks( { attributes } ); } - const { - imageCount, - caption, - columns = defaultColumnsNumber( imageCount ), - imageCrop, - } = attributes; + const { caption, columns = 'default', imageCrop } = attributes; const className = `blocks-gallery-grid has-nested-images columns-${ columns } ${ imageCrop ? 'is-cropped' : '' diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 4b84b31576a1ba..d409dca8a66b81 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -166,13 +166,31 @@ margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); } } - // Unset the right margin on every rightmost gallery item to ensure center balance. @for $column-count from 1 through 8 { &.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) { margin-right: 0; } } + // If number of columns not explicitly set default to 3 columns if 3 or more images. + &.columns-default { + figure.wp-block-image:not(#individual-image) { + margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); + width: calc(33.33% - calc(var(--gallery-block--gutter-size, 16px) * calc(2) / 3)) + } + figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) { + margin-right: 0; + } + // If only 2 child images use 2 columns. + figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), + figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { + width: calc(50% - (var(--gallery-block--gutter-size, 16px) / 2)); + } + // For a single image set to 100%. + figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { + width: 100%; + } + } } // Apply max-width to floated items that have no intrinsic width. diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js index 8791c37022f2de..a271dd24523174 100644 --- a/packages/block-library/src/gallery/transforms.js +++ b/packages/block-library/src/gallery/transforms.js @@ -61,7 +61,6 @@ const transforms = { return createBlock( 'core/gallery', { - imageCount: innerBlocks.length, align, sizeSlug, }, From f1d761663ff2267c6f69ad29a92e76a64caa9c77 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 26 Jul 2021 13:06:38 +1200 Subject: [PATCH 2/4] remove unneeded calc --- packages/block-library/src/gallery/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index d409dca8a66b81..719cc7aea68ac3 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -176,7 +176,7 @@ &.columns-default { figure.wp-block-image:not(#individual-image) { margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); - width: calc(33.33% - calc(var(--gallery-block--gutter-size, 16px) * calc(2) / 3)) + width: calc(33.33% - calc(var(--gallery-block--gutter-size, 16px) * 2 / 3)) } figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) { margin-right: 0; From 427065fdea78b37f6200c64bae34da5a172c4a5b Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 26 Jul 2021 12:29:01 +1000 Subject: [PATCH 3/4] Remove unnecessary nested calcs and fix lint error --- packages/block-library/src/gallery/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 719cc7aea68ac3..f917d83b5a2839 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -158,7 +158,7 @@ @for $i from 3 through 8 { &.columns-#{ $i } figure.wp-block-image:not(#individual-image) { margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); - width: calc(#{100% / $i} - calc(var(--gallery-block--gutter-size, #{$grid-unit-20}) * calc(#{$i - 1}) / #{$i})); + width: calc(#{100% / $i} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{$i - 1} / #{$i})); } // Prevent collapsing margin while sibling is being dragged. @@ -176,7 +176,7 @@ &.columns-default { figure.wp-block-image:not(#individual-image) { margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20}); - width: calc(33.33% - calc(var(--gallery-block--gutter-size, 16px) * 2 / 3)) + width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * 2 / 3)); } figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) { margin-right: 0; From ba7ffcd88ec3148d7a6b6b9d53ab41d1c0408d0b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 27 Jul 2021 10:04:17 +1200 Subject: [PATCH 4/4] * Add optional chaining to innerBlockImages in edit wrapper in case it is not defined * Move setting of default columns class to classNames call to avoid confusing the type of columns var --- .../block-library/src/gallery/edit-wrapper.js | 2 +- packages/block-library/src/gallery/gallery.js | 5 +++-- packages/block-library/src/gallery/save.js | 15 +++++++++++---- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/edit-wrapper.js b/packages/block-library/src/gallery/edit-wrapper.js index 9258340d360c36..0e101dfa85e216 100644 --- a/packages/block-library/src/gallery/edit-wrapper.js +++ b/packages/block-library/src/gallery/edit-wrapper.js @@ -33,7 +33,7 @@ export default function GalleryEditWrapper( props ) { // This logic is used to infer version information from content with higher // precedence than the flag. New galleries (and existing empty galleries) will // honor the flag. - const hasNewVersionContent = !! innerBlockImages.length; + const hasNewVersionContent = !! innerBlockImages?.length; const hasOldVersionContent = 0 < attributes?.ids?.length || 0 < attributes?.images?.length; if ( diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index f3fec840af8a96..d0ad30f3e47ee6 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -32,7 +32,7 @@ export const Gallery = ( props ) => { blockProps, } = props; - const { align, columns = 'default', caption, imageCrop } = attributes; + const { align, columns, caption, imageCrop } = attributes; const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, { allowedBlocks, @@ -73,7 +73,8 @@ export const Gallery = ( props ) => { 'blocks-gallery-grid', { [ `align${ align }` ]: align, - [ `columns-${ columns }` ]: columns, + [ `columns-${ columns }` ]: columns !== undefined, + [ `columns-default` ]: columns === undefined, 'is-cropped': imageCrop, } ) } diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js index 071015b068f822..bb1fa63a1ba594 100644 --- a/packages/block-library/src/gallery/save.js +++ b/packages/block-library/src/gallery/save.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -13,11 +18,13 @@ export default function saveWithInnerBlocks( { attributes } ) { return saveWithoutInnerBlocks( { attributes } ); } - const { caption, columns = 'default', imageCrop } = attributes; + const { caption, columns, imageCrop } = attributes; - const className = `blocks-gallery-grid has-nested-images columns-${ columns } ${ - imageCrop ? 'is-cropped' : '' - }`; + const className = classnames( 'blocks-gallery-grid', 'has-nested-images', { + [ `columns-${ columns }` ]: columns !== undefined, + [ `columns-default` ]: columns === undefined, + 'is-cropped': imageCrop, + } ); return (