Extract @wordpress/reusable-blocks from @wordpress/editor

docs/manifest.json

@@ -1757,6 +1757,12 @@
 		"markdown_source": "../packages/redux-routine/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/reusable-blocks",
+		"slug": "packages-reusable-blocks",
+		"markdown_source": "../packages/reusable-blocks/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/rich-text",
 		"slug": "packages-rich-text",

package.json

@@ -69,6 +69,7 @@
 		"@wordpress/react-native-bridge": "file:packages/react-native-bridge",
 		"@wordpress/react-native-editor": "file:packages/react-native-editor",
 		"@wordpress/redux-routine": "file:packages/redux-routine",
+		"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
 		"@wordpress/rich-text": "file:packages/rich-text",
 		"@wordpress/server-side-render": "file:packages/server-side-render",
 		"@wordpress/shortcode": "file:packages/shortcode",

packages/block-editor/src/components/inserter/hooks/use-block-types-state.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
@@ -16,31 +15,20 @@ import { useSelect } from '@wordpress/data';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert ) => {
-	const { categories, collections, items, fetchReusableBlocks } = useSelect(
+	const { categories, collections, items } = useSelect(
 		( select ) => {
-			const { getInserterItems, getSettings } = select(
-				'core/block-editor'
-			);
+			const { getInserterItems } = select( 'core/block-editor' );
 			const { getCategories, getCollections } = select( 'core/blocks' );
-			const { __experimentalFetchReusableBlocks } = getSettings();
 
 			return {
 				categories: getCategories(),
 				collections: getCollections(),
 				items: getInserterItems( rootClientId ),
-				fetchReusableBlocks: __experimentalFetchReusableBlocks,
 			};
 		},
 		[ rootClientId ]
 	);
 
-	// Fetch resuable blocks on mount
-	useEffect( () => {
-		if ( fetchReusableBlocks ) {
-			fetchReusableBlocks();
-		}
-	}, [] );
-
 	const onSelectItem = ( { name, initialAttributes, innerBlocks } ) => {
 		const insertedBlock = createBlock(
 			name,

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

@@ -1504,7 +1504,7 @@ export const getInserterItems = createSelector(
 				id,
 				name: 'core/block',
 				initialAttributes: { ref: reusableBlock.id },
-				title: reusableBlock.title,
+				title: reusableBlock.title.raw,
 				icon: referencedBlockType
 					? referencedBlockType.icon
 					: templateIcon,
@@ -1695,7 +1695,9 @@ export const __experimentalGetParsedReusableBlock = createSelector(
 			return null;
 		}
 
-		return parse( reusableBlock.content );
+		// Only reusableBlock.content.raw should be used here, `reusableBlock.content` is a
+		// workaround until #22127 is fixed.
+		return parse( reusableBlock.content.raw || reusableBlock.content );
 	},
 	( state ) => [ getReusableBlocks( state ) ]
 );

packages/block-editor/src/store/test/selectors.js

@@ -2476,8 +2476,8 @@ describe( 'selectors', () => {
 							id: 1,
 							isTemporary: false,
 							clientId: 'block1',
-							title: 'Reusable Block 1',
-							content: '<!-- /wp:test-block-a -->',
+							title: { raw: 'Reusable Block 1' },
+							content: { raw: '<!-- /wp:test-block-a -->' },
 						},
 					],
 				},
@@ -2556,15 +2556,15 @@ describe( 'selectors', () => {
 							id: 1,
 							isTemporary: false,
 							clientId: 'block1',
-							title: 'Reusable Block 1',
-							content: '<!-- /wp:test-block-a -->',
+							title: { raw: 'Reusable Block 1' },
+							content: { raw: '<!-- /wp:test-block-a -->' },
 						},
 						{
 							id: 2,
 							isTemporary: false,
 							clientId: 'block2',
-							title: 'Reusable Block 2',
-							content: '<!-- /wp:test-block-b -->',
+							title: { raw: 'Reusable Block 2' },
+							content: { raw: '<!-- /wp:test-block-b -->' },
 						},
 					],
 				},

packages/block-library/package.json

@@ -49,6 +49,7 @@
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/primitives": "file:../primitives",
+		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",

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

@@ -5,7 +5,6 @@ import { Button } from '@wordpress/components';
 import { useInstanceId, usePrevious } from '@wordpress/compose';
 import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
 
 /** @typedef {import('@wordpress/element').WPComponent} WPComponent */
 
@@ -44,7 +43,6 @@ export default function ReusableBlockEditPanel( {
 	isEditDisabled,
 	isEditing,
 	isSaving,
-	onCancel,
 	onChangeTitle,
 	onEdit,
 	onSave,
@@ -79,13 +77,6 @@ export default function ReusableBlockEditPanel( {
 		onChangeTitle( event.target.value );
 	}
 
-	function handleTitleKeyDown( event ) {
-		if ( event.keyCode === ESCAPE ) {
-			event.stopPropagation();
-			onCancel();
-		}
-	}
-
 	return (
 		<>
 			{ ! isEditing && ! isSaving && (
@@ -120,7 +111,6 @@ export default function ReusableBlockEditPanel( {
 						className="reusable-block-edit-panel__title"
 						value={ title }
 						onChange={ handleTitleChange }
-						onKeyDown={ handleTitleKeyDown }
 						id={ `reusable-block-edit-panel__title-${ instanceId }` }
 					/>
 					<Button