Add fallback to old gallery edit and save for existing gallery (#28961)

Co-authored-by: Glen Davies <glen.davies@a8c.com>

lib/experiments-page.php

@@ -62,6 +62,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-widgets-in-customizer',
 		)
 	);
+	add_settings_field(
+		'gutenberg-gallery-refactor',
+		__( 'Gallery Refactor', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable the refactored gallery block', 'gutenberg' ),
+			'id'    => 'gutenberg-gallery-refactor',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
@@ -99,3 +110,19 @@ function gutenberg_display_experiment_section() {
 
 	<?php
 }
+
+/**
+ * Extends default editor settings with experiments settings.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_experiments_editor_settings( $settings ) {
+	$experiments_exist    = get_option( 'gutenberg-experiments' );
+	$experiments_settings = array(
+		'__experimentalGalleryRefactor'          => $experiments_exist ? array_key_exists( 'gutenberg-gallery-refactor', get_option( 'gutenberg-experiments' ) ) : false,
+	);
+	return array_merge( $settings, $experiments_settings );
+}
+add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );

packages/block-editor/README.md

@@ -506,6 +506,7 @@ _Properties_
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
+-   _\_\_experimentalGalleryRefactor_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks
 
 <a name="SkipToSelectedBlock" href="#SkipToSelectedBlock">#</a> **SkipToSelectedBlock**
 

packages/block-editor/src/components/media-placeholder/index.js

@@ -128,15 +128,54 @@ export function MediaPlaceholder( {
 
 	const onFilesUpload = ( files ) => {
 		if ( isGallery ) {
-			// Because the Gallery hands the files over to Image component InnerBlocks just
+			// Because the refactored Gallery hands the files over to Image component InnerBlocks just
 			// hand the handling of the files over to the Gallery
 			onSelect( files );
 			return;
 		}
 		onFilesPreUpload( files );
 		let setMedia;
 		if ( multiple ) {
-			setMedia = onSelect;
+			// This is still needed to handle v1 versions of the Gallery block. It can be removed
+			// once all Gallery instances are forced to migrate.
+			if ( addToGallery ) {
+				// Since the setMedia function runs multiple times per upload group
+				// and is passed newMedia containing every item in its group each time, we must
+				// filter out whatever this upload group had previously returned to the
+				// gallery before adding and returning the image array with replacement newMedia
+				// values.
+
+				// Define an array to store urls from newMedia between subsequent function calls.
+				let lastMediaPassed = [];
+				setMedia = ( newMedia ) => {
+					// Remove any images this upload group is responsible for (lastMediaPassed).
+					// Their replacements are contained in newMedia.
+					const filteredMedia = ( value ?? [] ).filter( ( item ) => {
+						// If Item has id, only remove it if lastMediaPassed has an item with that id.
+						if ( item.id ) {
+							return ! lastMediaPassed.some(
+								// Be sure to convert to number for comparison.
+								( { id } ) => Number( id ) === Number( item.id )
+							);
+						}
+						// Compare transient images via .includes since gallery may append extra info onto the url.
+						return ! lastMediaPassed.some( ( { urlSlug } ) =>
+							item.url.includes( urlSlug )
+						);
+					} );
+					// Return the filtered media array along with newMedia.
+					onSelect( filteredMedia.concat( newMedia ) );
+					// Reset lastMediaPassed and set it with ids and urls from newMedia.
+					lastMediaPassed = newMedia.map( ( media ) => {
+						// Add everything up to '.fileType' to compare via .includes.
+						const cutOffIndex = media.url.lastIndexOf( '.' );
+						const urlSlug = media.url.slice( 0, cutOffIndex );
+						return { id: media.id, urlSlug };
+					} );
+				};
+			} else {
+				setMedia = onSelect;
+			}
 		} else {
 			setMedia = ( [ media ] ) => onSelect( media );
 		}

packages/block-editor/src/store/defaults.js

@@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean} __experimentalBlockDirectory Whether the user has enabled the Block Directory
  * @property {Array} __experimentalBlockPatterns Array of objects representing the block patterns
  * @property {Array} __experimentalBlockPatternCategories Array of objects representing the block pattern categories
+ * @property {boolean} __experimentalGalleryRefactor Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -151,6 +152,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__experimentalGalleryRefactor: false,
 
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.

packages/block-library/src/gallery/block.json

@@ -3,6 +3,57 @@
 	"name": "core/gallery",
 	"category": "media",
 	"attributes": {
+		"images": {
+			"type": "array",
+			"default": [],
+			"source": "query",
+			"selector": ".blocks-gallery-item",
+			"query": {
+				"url": {
+					"type": "string",
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "src"
+				},
+				"fullUrl": {
+					"type": "string",
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "data-full-url"
+				},
+				"link": {
+					"type": "string",
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "data-link"
+				},
+				"alt": {
+					"type": "string",
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "alt",
+					"default": ""
+				},
+				"id": {
+					"type": "string",
+					"source": "attribute",
+					"selector": "img",
+					"attribute": "data-id"
+				},
+				"caption": {
+					"type": "string",
+					"source": "html",
+					"selector": ".blocks-gallery-item__caption"
+				}
+			}
+		},
+		"ids": {
+			"type": "array",
+			"items": {
+				"type": "number"
+			},
+			"default": []
+		},
 		"imageUploads": {
 			"type": "array",
 			"default": [],