Use Maps to pass "constructor args" to blocks from a transform

docs/reference-guides/core-blocks.md

@@ -332,6 +332,15 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
 -	**Supports:** align, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor
 
+## Legacy Widget
+
+Display a legacy widget. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/legacy-widget))
+
+-	**Name:** core/legacy-widget
+-	**Category:** widgets
+-	**Supports:** ~~customClassName~~, ~~html~~, ~~reusable~~
+-	**Attributes:** id, idBase, instance
+
 ## List
 
 Create a bulleted or numbered list. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list))

packages/block-library/src/editor.scss

@@ -21,6 +21,7 @@
 @import "./html/editor.scss";
 @import "./image/editor.scss";
 @import "./latest-posts/editor.scss";
+@import "./legacy-widget/editor.scss";
 @import "./media-text/editor.scss";
 @import "./more/editor.scss";
 @import "./navigation/editor.scss";

packages/block-library/src/file/blob-urls.js

@@ -0,0 +1 @@
+export const blobURLs = new Map();

packages/block-library/src/file/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { getBlobByURL, revokeBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	ResizableBox,
@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -35,6 +35,7 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
+import { blobURLs } from './blob-urls';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -72,6 +73,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
+
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -87,21 +89,34 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ isUploadingBlob, setIsUploadingBlob ] = useState( false );
+
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
+		if ( blobURLs.has( clientId ) ) {
+			const blobURL = blobURLs.get( clientId );
+			const file = getBlobByURL( blobURL );
+
+			setIsUploadingBlob( true );
 
 			mediaUpload( {
 				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
+				onFileChange: ( [ newMedia ] ) => {
+					onSelectFile( newMedia, { isPersistent: false } );
+					setIsUploadingBlob( false );
+				},
+				onError: ( message ) => {
+					onUploadError( message );
+					setIsUploadingBlob( false );
+				},
 			} );
 
-			revokeBlobURL( href );
+			revokeBlobURL( blobURL );
+			blobURLs.delete( clientId );
 		}
 
 		if ( downloadButtonText === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			changeDownloadButtonText( _x( 'Download', 'button label' ) );
 		}
 	}, [] );
@@ -114,9 +129,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 	}, [ href, fileId, clientId ] );
 
-	function onSelectFile( newMedia ) {
+	function onSelectFile( newMedia, { isPersistent = true } = {} ) {
 		if ( newMedia && newMedia.url ) {
 			const isPdf = newMedia.url.endsWith( '.pdf' );
+			if ( ! isPersistent ) {
+				__unstableMarkNextChangeAsNotPersistent();
+			}
 			setAttributes( {
 				href: newMedia.url,
 				fileName: newMedia.title,
@@ -178,9 +196,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const blockProps = useBlockProps( {
 		className: classnames(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+			isUploadingBlob && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': isUploadingBlob,
 			}
 		),
 	} );
@@ -232,7 +250,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				/>
 				<ClipboardToolbarButton
 					text={ href }
-					disabled={ isBlobURL( href ) }
+					disabled={ isUploadingBlob }
 				/>
 			</BlockControls>
 			<div { ...blockProps }>

packages/block-library/src/file/transforms.js

@@ -7,6 +7,11 @@ import { select } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { getFilename } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { blobURLs } from './blob-urls';
+
 const transforms = {
 	from: [
 		{
@@ -22,15 +27,9 @@ const transforms = {
 
 				files.forEach( ( file ) => {
 					const blobURL = createBlobURL( file );
-
-					// File will be uploaded in componentDidMount()
-					blocks.push(
-						createBlock( 'core/file', {
-							href: blobURL,
-							fileName: file.name,
-							textLinkHref: blobURL,
-						} )
-					);
+					const block = createBlock( 'core/file' );
+					blobURLs.set( block.clientId, blobURL );
+					blocks.push( block );
 				} );
 
 				return blocks;

packages/block-library/src/index.js

@@ -55,6 +55,7 @@ import * as html from './html';
 import * as image from './image';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
+import * as legacyWidget from './legacy-widget';
 import * as list from './list';
 import * as listItem from './list-item';
 import * as logInOut from './loginout';
@@ -152,6 +153,7 @@ const getAllBlocks = () =>
 		html,
 		latestComments,
 		latestPosts,
+		...( window.wp && window.wp.widgets ? [ legacyWidget ] : [] ), // Only add the legacy widget block in widget screens.
 		mediaText,
 		missing,
 		more,

packages/widgets/src/blocks/legacy-widget/index.js → packages/block-library/src/legacy-widget/index.js

@@ -9,6 +9,7 @@ import { widget as icon } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import transforms from './transforms';
+import initBlock from '../utils/init-block';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,3 +19,5 @@ export const settings = {
 	edit,
 	transforms,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/legacy-widget/transforms.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { classicMenuIds } from '../navigation/classic-menu-ids';
+
+const toTransforms = [
+	{
+		idBase: 'calendar',
+		blockName: 'core/calendar',
+		convert: () => createBlock( 'core/calendar' ),
+	},
+	{
+		idBase: 'search',
+		blockName: 'core/search',
+		convert: () => createBlock( 'core/search' ),
+	},
+	{
+		idBase: 'custom_html',
+		blockName: 'core/html',
+		convert: ( { content } ) =>
+			createBlock( 'core/html', {
+				content,
+			} ),
+	},
+	{
+		idBase: 'archives',
+		blockName: 'core/archives',
+		convert: ( { count, dropdown } ) =>
+			createBlock( 'core/archives', {
+				displayAsDropdown: !! dropdown,
+				showPostCounts: !! count,
+			} ),
+	},
+	{
+		idBase: 'recent-posts',
+		blockName: 'core/latest-posts',
+		convert: ( { show_date: displayPostDate, number } ) =>
+			createBlock( 'core/latest-posts', {
+				displayPostDate: !! displayPostDate,
+				postsToShow: number,
+			} ),
+	},
+	{
+		idBase: 'recent-comments',
+		blockName: 'core/latest-comments',
+		convert: ( { number } ) =>
+			createBlock( 'core/latest-comments', {
+				commentsToShow: number,
+			} ),
+	},
+	{
+		idBase: 'tag_cloud',
+		blockName: 'core/tag-cloud',
+		convert: ( { taxonomy, count } ) =>
+			createBlock( 'core/tag-cloud', {
+				showTagCounts: !! count,
+				taxonomy,
+			} ),
+	},
+	{
+		idBase: 'categories',
+		blockName: 'core/categories',
+		convert: ( { count, dropdown, hierarchical } ) =>
+			createBlock( 'core/categories', {
+				displayAsDropdown: !! dropdown,
+				showPostCounts: !! count,
+				showHierarchy: !! hierarchical,
+			} ),
+	},
+	{
+		idBase: 'media_audio',
+		blockName: 'core/audio',
+		convert: ( { url, preload, loop, attachment_id: id } ) =>
+			createBlock( 'core/audio', {
+				src: url,
+				id,
+				preload,
+				loop,
+			} ),
+	},
+	{
+		idBase: 'media_video',
+		blockName: 'core/video',
+		convert: ( { url, preload, loop, attachment_id: id } ) =>
+			createBlock( 'core/video', {
+				src: url,
+				id,
+				preload,
+				loop,
+			} ),
+	},
+	{
+		idBase: 'media_image',
+		blockName: 'core/image',
+		convert: ( {
+			alt,
+			attachment_id: id,
+			caption,
+			height,
+			link_classes: linkClass,
+			link_rel: rel,
+			link_target_blank: targetBlack,
+			link_type: linkDestination,
+			link_url: link,
+			size: sizeSlug,
+			url,
+			width,
+		} ) =>
+			createBlock( 'core/image', {
+				alt,
+				caption,
+				height,
+				id,
+				link,
+				linkClass,
+				linkDestination,
+				linkTarget: targetBlack ? '_blank' : undefined,
+				rel,
+				sizeSlug,
+				url,
+				width,
+			} ),
+	},
+	{
+		idBase: 'media_gallery',
+		blockName: 'core/gallery',
+		convert: ( { ids, link_type: linkTo, size, number } ) =>
+			createBlock( 'core/gallery', {
+				ids,
+				columns: number,
+				linkTo,
+				sizeSlug: size,
+				images: ids.map( ( id ) => ( {
+					id,
+				} ) ),
+			} ),
+	},
+	{
+		idBase: 'rss',
+		blockName: 'core/rss',
+		convert: ( {
+			url,
+			show_author: displayAuthor,
+			show_date: displayDate,
+			show_summary: displayExcerpt,
+			items,
+		} ) =>
+			createBlock( 'core/rss', {
+				feedURL: url,
+				displayAuthor: !! displayAuthor,
+				displayDate: !! displayDate,
+				displayExcerpt: !! displayExcerpt,
+				itemsToShow: items,
+			} ),
+	},
+	{
+		idBase: 'nav_menu',
+		blockName: 'core/navigation',
+		convert: ( { nav_menu: navMenu } ) => {
+			const block = createBlock( 'core/navigation' );
+			classicMenuIds.set( block.clientId, navMenu );
+			return block;
+		},
+	},
+].map( ( { idBase, blockName, convert } ) => {
+	return {
+		type: 'block',
+		blocks: [ blockName ],
+		isMatch( attributes ) {
+			return attributes.idBase === idBase && !! attributes.instance?.raw;
+		},
+		transform( attributes ) {
+			const block = convert( attributes.instance.raw );
+			if ( ! attributes.instance.raw?.title ) {
+				return block;
+			}
+			return [
+				createBlock( 'core/heading', {
+					content: attributes.instance.raw.title,
+				} ),
+				block,
+			];
+		},
+	};
+} );
+
+const transforms = {
+	to: toTransforms,
+};
+
+export default transforms;

packages/block-library/src/navigation/classic-menu-ids.js

@@ -0,0 +1 @@
+export const classicMenuIds = new Map();