Gallery block: add toolbar button to convert old galleries to new format

packages/block-library/src/gallery/editor.scss

@@ -206,3 +206,15 @@ figure.wp-block-gallery {
 	// Some themes give all <ul> default margin instead of padding.
 	margin: 0;
 }
+
+.wp-block-update-gallery-modal {
+	max-width: 400px;
+	.wp-block-update-gallery-modal-buttons {
+		display: flex;
+		justify-content: flex-end;
+
+		.components-button {
+			margin-left: $grid-unit-15;
+		}
+	}
+}

packages/block-library/src/gallery/v1/edit.js

@@ -24,8 +24,10 @@ import {
 	ToggleControl,
 	withNotices,
 	RangeControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
+	BlockControls,
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
@@ -51,6 +53,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 } from './constants';
+import UpdateGalleryModal from './update-gallery-modal';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -99,10 +102,13 @@ function GalleryEdit( props ) {
 		mediaUpload,
 		getMedia,
 		wasBlockJustInserted,
+		__unstableGalleryWithImageBlocks,
 	} = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 
 		return {
+			__unstableGalleryWithImageBlocks:
+				settings.__unstableGalleryWithImageBlocks,
 			imageSizes: settings.imageSizes,
 			mediaUpload: settings.mediaUpload,
 			getMedia: select( coreStore ).getMedia,
@@ -408,6 +414,10 @@ function GalleryEdit( props ) {
 		/>
 	);
 
+	const [ isUpdateOpen, setUpdateOpen ] = useState( false );
+	const openUpdateModal = () => setUpdateOpen( true );
+	const closeUpdateModal = () => setUpdateOpen( false );
+
 	const blockProps = useBlockProps();
 
 	if ( ! hasImages ) {
@@ -456,6 +466,23 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			{ __unstableGalleryWithImageBlocks && (
+				<BlockControls group="other">
+					<ToolbarButton
+						onClick={ openUpdateModal }
+						title={ __( 'Update' ) }
+						label={ __( 'Update to the new gallery format' ) }
+					>
+						{ __( 'Update' ) }
+					</ToolbarButton>
+				</BlockControls>
+			) }
+			{ isUpdateOpen && (
+				<UpdateGalleryModal
+					onClose={ closeUpdateModal }
+					clientId={ clientId }
+				/>
+			) }
 			{ noticeUI }
 			<Gallery
 				{ ...props }

packages/block-library/src/gallery/v1/update-gallery-modal.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA,
+} from './constants';
+
+export const updateGallery = ( {
+	clientId,
+	getBlock,
+	replaceBlocks,
+} ) => () => {
+	let link;
+	const {
+		attributes: { sizeSlug, linkTo, images, caption },
+	} = getBlock( clientId );
+
+	switch ( linkTo ) {
+		case 'post':
+			link = LINK_DESTINATION_ATTACHMENT;
+			break;
+		case 'file':
+			link = LINK_DESTINATION_MEDIA;
+			break;
+		default:
+			link = LINK_DESTINATION_NONE;
+			break;
+	}
+	const innerBlocks = images.map( ( image ) =>
+		createBlock( 'core/image', {
+			id: parseInt( image.id, 10 ),
+			url: image.url,
+			alt: image.alt,
+			caption: image.caption,
+			linkDestination: link,
+		} )
+	);
+
+	replaceBlocks(
+		clientId,
+		createBlock(
+			'core/gallery',
+			{ sizeSlug, linkTo: link, caption },
+			innerBlocks
+		)
+	);
+};
+
+export default function UpdateGalleryModal( { onClose, clientId } ) {
+	const { getBlock } = useSelect( blockEditorStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	return (
+		<Modal
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onClose }
+			title={ __( 'Update to new gallery format' ) }
+			className={ 'wp-block-update-gallery-modal' }
+			aria={ {
+				describedby: 'wp-block-update-gallery-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-update-gallery-modal__description' }>
+				{ __(
+					'Updating to the new format adds the ability to add custom links or styles to individual images in the gallery, and makes it easier to add or move images around.'
+				) }
+			</p>
+			<p>
+				{ __(
+					'There is no option to convert it back to the old format, so if there are problems with the new format once updated just leave the post/page without saving.'
+				) }
+			</p>
+
+			<div className="wp-block-update-gallery-modal-buttons">
+				<Button isTertiary onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					isPrimary
+					onClick={ updateGallery( {
+						replaceBlocks,
+						getBlock,
+						clientId,
+						createBlock,
+					} ) }
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+}