Fix multiple empty icon blocks as one (#265)

* make the icon chooser open event distinct for each icon being edited

* refactor the handleSelect callback for IconModifier to separate concerns

* rebuild block-editor bundle

Author: mlwilkerson

block-editor/build/index.asset.php

@@ -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' => '17f5c0bec291cb2ddb3f');
+<?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' => '053349df96bda0ebca60');

block-editor/build/index.js

@@ -12,7 +12,6 @@ import { computeIconLayerCount, prepareParamsForUseBlock, renderIcon } from './r
 import IconModifier from './iconModifier'
 import createCustomEvent from './createCustomEvent'
 
-const openIconChooserForAddLayerEvent = createCustomEvent()
 const { IconChooserModal } = get(window, [GLOBAL_KEY, 'iconChooser'], {})
 const modifyToolbarIcon = wpIconFromFaIconDefinition(faBrush)
 const defaultStylingParams = {
@@ -23,6 +22,8 @@ const defaultStylingParams = {
 export function Edit(props) {
   const { attributes, setAttributes } = props
 
+  const iconChooserOpenEvent = createCustomEvent()
+
   const [justificationDropdownMenuIcon, setJustificationDropdownMenuIcon] = useState(justifyCenter)
 
   const setJustification = (justification) => {
@@ -121,8 +122,8 @@ export function Edit(props) {
               attributes={attributes}
               setAttributes={setAttributes}
               IconChooserModal={IconChooserModal}
-              prepareHandleSelect={prepareHandleSelect}
-              iconChooserOpenEvent={openIconChooserForAddLayerEvent}
+              handleSelect={prepareHandleSelect({ replace: 0 })}
+              iconChooserOpenEvent={iconChooserOpenEvent}
             />
           </Modal>
         )}
@@ -145,11 +146,11 @@ export function Edit(props) {
       >
         <IconChooserModal
           onSubmit={prepareHandleSelect({ append: true })}
-          openEvent={openIconChooserForAddLayerEvent}
+          openEvent={iconChooserOpenEvent}
         />
         <Button
           variant="secondary"
-          onClick={() => document.dispatchEvent(openIconChooserForAddLayerEvent)}
+          onClick={() => document.dispatchEvent(iconChooserOpenEvent)}
         >
           {__('Choose Icon', 'font-awesome')}
         </Button>

block-editor/src/edit.js

@@ -379,7 +379,7 @@ export default function (params) {
     context,
     iconChooserOpenEvent,
     IconChooserModal,
-    prepareHandleSelect
+    handleSelect
   } = params
 
   const iconLayers = attributes.iconLayers || []
@@ -483,7 +483,7 @@ export default function (params) {
       </div>
       <IconChooserModal
         title={__('Change Font Awesome Icon', 'font-awesome')}
-        onSubmit={prepareHandleSelect({ replace: 0 })}
+        onSubmit={handleSelect}
         openEvent={iconChooserOpenEvent}
       />
     </div>