Use a Map to implement Legacy Widget -> Navigation transformation

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/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();

packages/block-library/src/navigation/edit/index.js

@@ -68,6 +68,7 @@ import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import { classicMenuIds } from '../classic-menu-ids';
 
 function Navigation( {
 	attributes,
@@ -402,18 +403,35 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const onSelectClassicMenu = async ( classicMenu ) => {
-		const navMenu = await convertClassicMenu(
-			classicMenu.id,
-			classicMenu.name,
-			'draft'
-		);
-		if ( navMenu ) {
-			handleUpdateMenu( navMenu.id, {
-				focusNavigationBlock: true,
-			} );
+	const onSelectClassicMenu = useCallback(
+		async ( classicMenu ) => {
+			const navMenu = await convertClassicMenu(
+				classicMenu.id,
+				classicMenu.name,
+				'draft'
+			);
+			if ( navMenu ) {
+				handleUpdateMenu( navMenu.id, {
+					focusNavigationBlock: true,
+				} );
+			}
+		},
+		[ convertClassicMenu, handleUpdateMenu ]
+	);
+
+	// Convert the classic menu provided by the Legacy Widget block transform if
+	// it exists.
+	useEffect( () => {
+		if ( classicMenuIds.has( clientId ) ) {
+			const menuId = classicMenuIds.get( clientId );
+			const classicMenu = classicMenus?.find(
+				( menu ) => menu.id === menuId
+			);
+			if ( classicMenu ) {
+				onSelectClassicMenu( classicMenu );
+			}
 		}
-	};
+	}, [ clientId, classicMenus, onSelectClassicMenu ] );
 
 	const onSelectNavigationMenu = ( menuId ) => {
 		handleUpdateMenu( menuId );

packages/customize-widgets/src/index.js

@@ -8,7 +8,6 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import {
-	registerLegacyWidgetBlock,
 	registerLegacyWidgetVariations,
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
@@ -60,7 +59,6 @@ export function initialize( editorName, blockEditorSettings ) {
 		);
 	} );
 	registerCoreBlocks( coreBlocks );
-	registerLegacyWidgetBlock();
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS,

packages/edit-post/src/index.js

@@ -5,16 +5,14 @@ import { store as blocksStore } from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
+	__experimentalGetCoreBlocks,
 } from '@wordpress/block-library';
 import deprecated from '@wordpress/deprecated';
 import { createRoot } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	registerLegacyWidgetBlock,
-	registerWidgetGroupBlock,
-} from '@wordpress/widgets';
+import { registerWidgetGroupBlock } from '@wordpress/widgets';
 
 /**
  * Internal dependencies
@@ -24,6 +22,34 @@ import './plugins';
 import Editor from './editor';
 import { store as editPostStore } from './store';
 
+function registerBlocks( settings ) {
+	const coreBlocksByName = __experimentalGetCoreBlocks().reduce(
+		( acc, block ) => {
+			acc[ block.name ] = block;
+			return acc;
+		},
+		{}
+	);
+
+	coreBlocksByName[ 'core/legacy-widget' ] = {
+		...coreBlocksByName[ 'core/legacy-widget' ],
+		supports: {
+			...coreBlocksByName[ 'core/legacy-widget' ].supports,
+			inserter: false,
+		},
+	};
+
+	registerCoreBlocks( Object.values( coreBlocksByName ) );
+
+	registerWidgetGroupBlock( { inserter: false } );
+
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		__experimentalRegisterExperimentalCoreBlocks( {
+			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
+		} );
+	}
+}
+
 /**
  * Initializes and returns an instance of Editor.
  *
@@ -69,14 +95,7 @@ export function initializeEditor(
 		dispatch( editPostStore ).setIsListViewOpened( true );
 	}
 
-	registerCoreBlocks();
-	registerLegacyWidgetBlock( { inserter: false } );
-	registerWidgetGroupBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		__experimentalRegisterExperimentalCoreBlocks( {
-			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
-		} );
-	}
+	registerBlocks( settings );
 
 	/*
 	 * Prevent adding template part in the post editor.