Enable changing icon in block editor (#262)

* enable change of icon in the IconModifier modal

* WIP: first draft of adding a pencil icon

* fix the layout of the pencil

* make the pencil invisible until hover

* get rid of the extra state for size in IconModifier

* Fix icon layer replacement when changing icon in IconModifier

* rebuild block-editor bundle

* remove the pencil icon

* refactor the IconChooserModal stuff for changing the icon

* rebuild icon-chooser bundle

* rebuild block-editor bundle

* remove the position: relative

* rebuild block-editor bundle

Author: mlwilkerson

block-editor/build/index-rtl.css

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '987f5e49022d05fb19a8');
+<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '17f5c0bec291cb2ddb3f');

block-editor/build/index.asset.php

@@ -46,18 +46,21 @@ export function Edit(props) {
 
     if (!iconDefinition) return
 
-    const layer = {
-      iconDefinition,
-      ...defaultStylingParams
-    }
+    const { replace, append } = layerParams
 
     const newIconLayers = [...iconLayers]
-    const { replace, append } = layerParams
 
     if (append) {
+      const layer = {
+        iconDefinition,
+        ...defaultStylingParams
+      }
+
       newIconLayers.push(layer)
     } else if (Number.isInteger(replace) && replace < iconLayers.length) {
-      newIconLayers[replace] = layer
+      const oldLayer = iconLayers[replace] || {}
+      const newLayer = {...oldLayer, iconDefinition }
+      newIconLayers[replace] = newLayer
     }
 
     setAttributes({ iconLayers: newIconLayers })
@@ -119,6 +122,7 @@ export function Edit(props) {
               setAttributes={setAttributes}
               IconChooserModal={IconChooserModal}
               prepareHandleSelect={prepareHandleSelect}
+              iconChooserOpenEvent={openIconChooserForAddLayerEvent}
             />
           </Modal>
         )}

block-editor/build/index.css

@@ -42,12 +42,10 @@ const SettingsTabPanel = ({ onSelect, onSizeChange, setColor, setAnimation, upda
   if ('object' !== typeof currentIconLayer) return
   const currentTransform = currentIconLayer?.transform
   const currentRotate = currentTransform?.rotate
-  const currentSize = currentIconLayer?.style?.fontSize
-  const [size, setSize] = useState(currentSize || DEFAULT_SIZE)
+  const currentSize = currentIconLayer?.style?.fontSize || DEFAULT_SIZE
 
   const updateSize = (size) => {
     const newSize = size || DEFAULT_SIZE
-    setSize(newSize)
     onSizeChange(newSize)
   }
 
@@ -195,7 +193,7 @@ const SettingsTabPanel = ({ onSelect, onSizeChange, setColor, setAnimation, upda
               <div className="fawp-icon-styling-tab-content fawp-icon-styling-size fawp-tab-content">
                 <div className="">
                   <FontSizePicker
-                    value={size}
+                    value={currentSize}
                     fontSizes={[
                       {
                         name: 'tiny',
@@ -374,7 +372,16 @@ const SettingsTabPanel = ({ onSelect, onSizeChange, setColor, setAnimation, upda
   )
 }
 
-export default function ({ attributes, setAttributes, context }) {
+export default function (params) {
+  const {
+    attributes,
+    setAttributes,
+    context,
+    iconChooserOpenEvent,
+    IconChooserModal,
+    prepareHandleSelect
+  } = params
+
   const iconLayers = attributes.iconLayers || []
 
   const updateSize = (size) => {
@@ -459,6 +466,7 @@ export default function ({ attributes, setAttributes, context }) {
         <div
           className="fawp-icon-modifier-preview"
           style={contextStyle}
+          onClick={() => document.dispatchEvent(iconChooserOpenEvent)}
         >
           {renderIcon(attributes)}
         </div>
@@ -473,6 +481,11 @@ export default function ({ attributes, setAttributes, context }) {
           setAnimation={setAnimation}
         />
       </div>
+      <IconChooserModal
+        title={__('Change Font Awesome Icon', 'font-awesome')}
+        onSubmit={prepareHandleSelect({ replace: 0 })}
+        openEvent={iconChooserOpenEvent}
+      />
     </div>
   )
 }

block-editor/build/index.js

@@ -82,6 +82,12 @@
   padding: var(--spacing-md-fa);
 }
 
+.fawp-icon-modifier-preview:hover {
+    background: var(--gray7-fa);
+    cursor: pointer;
+    border-radius: var(--border-radius-fa);
+}
+
 .fawp-icon-modifier-preview div {
   display: flex;
   margin: auto;

block-editor/src/edit.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-i18n'), 'version' => '9291d79bfa031a0e70d7');
+<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-i18n'), 'version' => '1ffd38231f1a41762e04');

block-editor/src/iconModifier.js

@@ -30,10 +30,12 @@ export default function (params) {
 
     const isProCdn = !!pro && !kitToken;
 
+    const title = props.title || __("Add a Font Awesome Icon", "font-awesome")
+
     return (
       <>
         {isOpen && (
-          <Modal title="Add a Font Awesome Icon" onRequestClose={closeModal}>
+          <Modal title={title} onRequestClose={closeModal}>
             {isProCdn && (
               <div
                 style={{