Use the deprecated icon rendering for the rich text icon

rich text icons require raw HTML

Author: mlwilkerson

block-editor/src/deprecated/deprecatedSaveV1.js

@@ -17,7 +17,7 @@ export default function save({ attributes }) {
   return deprecatedRenderIconV1(attributes, { extraProps })
 }
 
-function deprecatedRenderIconV1(attributes, options = {}) {
+export function deprecatedRenderIconV1(attributes, options = {}) {
   const { wrapperProps = {}, classNamesByLayer } = options?.extraProps || {}
   const elementType = options?.wrapperElement?.toLowerCase() || 'div'
   const iconLayers = attributes?.iconLayers

block-editor/src/richTextIcon.js

@@ -13,6 +13,7 @@ import { renderIconForEditor } from './rendering'
 import IconModifier from './iconModifier'
 import { ANIMATIONS, FONT_AWESOME_COMMON_BLOCK_WRAPPER_CLASS } from './constants'
 import { toIconDefinition } from './iconDefinitions'
+import { deprecatedRenderIconV1 } from './deprecated/deprecatedSaveV1'
 export const ZERO_WIDTH_SPACE = '\u200b'
 const FONT_AWESOME_RICH_TEXT_ICON_CLASS = 'wp-rich-text-font-awesome-icon'
 const FONT_AWESOME_RICH_TEXT_ICON_TRANSFORM_ATTR = 'data-transform'
@@ -237,13 +238,13 @@ function Edit(props) {
   }
 
   const changeValue = (attributes) => {
-    const blockProps = {
+    const wrapperProps = {
       className: classnames(FONT_AWESOME_RICH_TEXT_ICON_CLASS, FONT_AWESOME_COMMON_BLOCK_WRAPPER_CLASS)
     }
 
-    const element = renderIconForEditor(attributes, {
-      blockWrapperTag: 'span',
-      blockProps
+    const element = deprecatedRenderIconV1(attributes, {
+      wrapperElement: 'span',
+      extraProps: { wrapperProps }
     })
 
     const html = renderToString(element)