FIXED: Fix an issue where the first item in a newly inserted icon lis…

…t would not be editable

src/blocks/icon-list/icon-list-item/edit.js

@@ -1,4 +1,4 @@
-import { Fragment, useRef } from 'wp.element';
+import { Fragment, useRef, useEffect } from 'wp.element';
 import { __ } from 'wp.i18n';
 import { RichText, InspectorControls } from 'wp.blockEditor';
 import {
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { createBlock } from 'wp.blocks';
 import ReactSelect from 'react-select';
 import startCase from 'lodash.startcase';
+import { useSelect } from 'wp.data';
 
 import Icon from './Icon';
 import icons from '../../icon/icons';
@@ -23,14 +24,32 @@ const IconListItemEdit = ({
   setAttributes,
   onReplace,
   isSelected,
+  clientId,
 }) => {
   const { content, icon, listUrl, newTab } = attributes;
   const ref = useRef();
+  const richTextRef = useRef();
+
+  const isParentSelected = useSelect(
+    select => {
+      const { getBlockParents, isBlockSelected } = select('core/block-editor');
+      const [parentBlockId] = getBlockParents(clientId);
+      return isBlockSelected(parentBlockId);
+    },
+    [clientId],
+  );
+
+  useEffect(() => {
+    if (richTextRef.current && isParentSelected) {
+      richTextRef.current.focus();
+    }
+  }, [richTextRef.current, isParentSelected]);
 
   const listItem = (
     <Fragment>
       <Icon className={className} {...attributes} />
       <RichText
+        ref={richTextRef}
         identifier="content"
         tagName="div"
         className={classNames(
@@ -40,9 +59,8 @@ const IconListItemEdit = ({
         value={content}
         aria-label={__('Icon List Item block')}
         placeholder={__('Start writing…')}
-        keepPlaceholderOnFocus={true}
         multiline={false}
-        disableLineBreaks={true}
+        disableLineBreaks
         onChange={content => setAttributes({ content })}
         onReplace={onReplace}
         onSplit={value => {