Fix: Transforms: Audio and Video to file transform bug on cations wit…

…h custom formats; Add: getTextElements function

The audio and video to file transform contain a bug where if formats were used (e.g: bold, italic, ...)  the caption was not correctly parsed.
Here we add a new function getTextElements that returns an array of all the text nodes present in an elements hieraraquy, and we make use of that function to solve the bug in the transform.

core-blocks/file/index.js

@@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
+import { getTextElements } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -96,9 +97,10 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/audio' ],
 				transform: ( attributes ) => {
+					const captionProcessed = getTextElements( attributes.caption );
 					return createBlock( 'core/file', {
 						href: attributes.src,
-						fileName: attributes.caption && attributes.caption.join(),
+						fileName: captionProcessed && captionProcessed.join( '' ),
 						textLinkHref: attributes.src,
 						id: attributes.id,
 					} );
@@ -108,9 +110,10 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/video' ],
 				transform: ( attributes ) => {
+					const captionProcessed = getTextElements( attributes.caption );
 					return createBlock( 'core/file', {
 						href: attributes.src,
-						fileName: attributes.caption && attributes.caption.join(),
+						fileName: captionProcessed && captionProcessed.join( '' ),
 						textLinkHref: attributes.src,
 						id: attributes.id,
 					} );
@@ -120,9 +123,10 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/image' ],
 				transform: ( attributes ) => {
+					const captionProcessed = getTextElements( attributes.caption );
 					return createBlock( 'core/file', {
 						href: attributes.url,
-						fileName: attributes.caption && attributes.caption.join(),
+						fileName: captionProcessed && captionProcessed.join( '' ),
 						textLinkHref: attributes.url,
 						id: attributes.id,
 					} );

packages/element/src/react.js

@@ -13,7 +13,7 @@ import {
 	isValidElement,
 	StrictMode,
 } from 'react';
-import { isString } from 'lodash';
+import { flatMap, isArray, isString } from 'lodash';
 
 export { Children };
 
@@ -133,3 +133,24 @@ export function switchChildrenNodeName( children, nodeName ) {
 		return createElement( nodeName, { key: index, ...props }, childrenProp );
 	} );
 }
+
+/**
+ * Function that returns an array of all the text elements
+ * descendants of the element passed.
+ *
+ * @param {?Array|string|WPElement} element Element object, a string representing a text node
+ *                                          or an array of nodes.
+ *
+ * @return {?Array} An array of all text nodes present on the tree of the element passed.
+ */
+export function getTextElements( element ) {
+	if ( isString( element ) ) {
+		return element;
+	}
+	if ( isArray( element ) ) {
+		return flatMap( element, ( child ) => getTextElements( child ) );
+	}
+	if ( element && element.props && element.props.children ) {
+		return getTextElements( element.props.children );
+	}
+}