accommodate rich text icons in the preview editor

Author: mlwilkerson

block-editor/src/iconModifier.js

@@ -9,6 +9,7 @@ import { FontSizePicker, TabPanel, Tooltip } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import Colors from './colors'
 import { NO_CUSTOM_VALUE, SELECTED_CLASS, ANIMATIONS, DEFAULT_SIZE } from './constants'
+import { deprecatedRenderIconV1 } from './deprecated/deprecatedSaveV1'
 
 const STYLES_TAB_NAME = 'styling'
 const ANIMATIONS_TAB_NAME = 'animations'
@@ -379,7 +380,8 @@ export default function (params) {
     context,
     iconChooserOpenEvent,
     IconChooserModal,
-    handleSelect
+    handleSelect,
+    isInlineRichText = false
   } = params
 
   const iconLayers = attributes.iconLayers || []
@@ -460,6 +462,8 @@ export default function (params) {
   const { color, fontSize, backgroundColor } = context || {}
   const contextStyle = { color, fontSize, backgroundColor }
 
+  const renderIcon = isInlineRichText ? deprecatedRenderIconV1 : renderIconForEditor
+
   return (
     <div className="fawp-icon-modifier">
       <div className="fawp-icon-modifier-preview-container">
@@ -468,7 +472,7 @@ export default function (params) {
           style={contextStyle}
           onClick={() => document.dispatchEvent(iconChooserOpenEvent)}
         >
-          {renderIconForEditor(attributes)}
+          {renderIcon(attributes)}
         </div>
       </div>
       <div className={classnames('fawp-icon-modifier-preview-controls')}>

block-editor/src/richTextIcon.js

@@ -211,6 +211,7 @@ function InlineUI({ value, changeValue, contentRef, handleSelect }) {
             context={context}
             handleSelect={handleSelect}
             iconChooserOpenEvent={modalOpenEvent}
+            isInlineRichText={true}
           />
         </Modal>
       )}