Move getSerializedBlocks to blocks.js

Author: kean

src/utils/blocks.js

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { unregisterBlockType } from '@wordpress/blocks';
+import { renderToString } from '@wordpress/element';
 import { debug } from './logger';
 
 /**
@@ -24,3 +25,66 @@ export function unregisterDisallowedBlocks( allowedBlockTypes ) {
 
 	debug( 'Blocks unregistered:', unregisteredBlocks );
 }
+
+/**
+ * Extract and serialize a block's icon.
+ *
+ * @param {Object} blockType The block type object.
+ *
+ * @return {string|null} The serialized icon string or null.
+ */
+function getBlockIcon( blockType ) {
+	if ( ! blockType.icon ) {
+		return null;
+	}
+
+	let iconSource = blockType.icon;
+
+	// If icon is an object with src property, extract src
+	if ( typeof iconSource === 'object' && iconSource.src ) {
+		iconSource = iconSource.src;
+	}
+
+	// Convert React element to SVG string
+	if (
+		typeof iconSource === 'object' &&
+		iconSource !== null &&
+		typeof iconSource.type !== 'undefined'
+	) {
+		try {
+			return renderToString( iconSource );
+		} catch ( error ) {
+			// If rendering fails, ignore the icon
+			debug(
+				`Failed to render icon for block ${ blockType.name }`,
+				error
+			);
+			return null;
+		}
+	}
+
+	else if ( typeof iconSource === 'string' ) {
+		return iconSource;
+	}
+
+	return null;
+}
+
+/**
+ * Get serialized block data for all registered block types.
+ *
+ * @return {Array} Array of serialized block objects.
+ */
+export function getSerializedBlocks() {
+	const { getBlockTypes } = await import( '@wordpress/blocks' );
+	return getBlockTypes().map( ( blockType ) => {
+		return {
+			name: blockType.name,
+			title: blockType.title,
+			description: blockType.description,
+			category: blockType.category,
+			keywords: blockType.keywords || [],
+			icon: getBlockIcon( blockType ),
+		};
+	} );
+}

src/utils/bridge.js

@@ -5,6 +5,7 @@ import parseException from './exception-parser';
 import { debug } from './logger';
 import { isDevMode } from './dev-mode';
 import { basicFetch } from './fetch';
+import { getSerializedBlocks } from './blocks';
 
 /**
  * Generic function to dispatch messages to both Android and iOS bridges.
@@ -91,51 +92,8 @@ export function onBlocksChanged( isEmpty = false ) {
  *
  * @return {void}
  */
-export async function showBlockInserter() {
-	// Lazy-load getBlockTypes to defer the import until this function is called.
-	// In the remote editor, dependencies are loaded asynchronously, so this ensures
-	// window.wp.blocks is defined before we access it.
-	const { getBlockTypes } = await import( '@wordpress/blocks' );
-	const blocks = getBlockTypes().map( ( blockType ) => {
-		// Extract and serialize icon
-		let icon = null;
-		if ( blockType.icon ) {
-			let iconSource = blockType.icon;
-
-			// If icon is an object with src property, extract src
-			if ( typeof iconSource === 'object' && iconSource.src ) {
-				iconSource = iconSource.src;
-			}
-
-			// Convert React element to SVG string
-			if (
-				typeof iconSource === 'object' &&
-				iconSource !== null &&
-				typeof iconSource.type !== 'undefined'
-			) {
-				try {
-					icon = renderToString( iconSource );
-				} catch ( error ) {
-					// If rendering fails, ignore the icon
-					debug(
-						`Failed to render icon for block ${ blockType.name }`,
-						error
-					);
-				}
-			} else if ( typeof iconSource === 'string' ) {
-				icon = iconSource;
-			}
-		}
-
-		return {
-			name: blockType.name,
-			title: blockType.title,
-			description: blockType.description,
-			category: blockType.category,
-			keywords: blockType.keywords || [],
-			icon,
-		};
-	} );
+export function showBlockInserter() {
+	const blocks = getSerializedBlocks();
 	dispatchToBridge( 'showBlockInserter', { blocks } );
 }