From 070e18249e90051670119aaf00d8537ffb835f28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Thu, 30 Mar 2023 10:53:24 +0300
Subject: [PATCH] Simplify UI

---
 .../src/components/rich-text/content.scss     | 10 +++--
 packages/format-library/src/footnote/index.js | 42 +++++--------------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss
index d1052ff9a9afb0..5b3389e16071e3 100644
--- a/packages/block-editor/src/components/rich-text/content.scss
+++ b/packages/block-editor/src/components/rich-text/content.scss
@@ -1,5 +1,7 @@
 // Should be in theme compatibility file.
-.editor-styles-wrapper { counter-reset:footnotes }
+.editor-styles-wrapper {
+	counter-reset: footnotes;
+}
 
 .rich-text {
 	[data-rich-text-placeholder] {
@@ -23,9 +25,11 @@
 	}
 
 	// Should be in theme compatibility file.
-	.note-link { counter-increment:footnotes }
+	.note-link {
+		counter-increment: footnotes;
+	}
 	.note-link::after {
-		content: "[" counter( footnotes ) "]";
+		content: "[" counter(footnotes) "]";
 		vertical-align: super;
 		font-size: smaller;
 	}
diff --git a/packages/format-library/src/footnote/index.js b/packages/format-library/src/footnote/index.js
index 65c49f3d9f46c1..dba304f619877b 100644
--- a/packages/format-library/src/footnote/index.js
+++ b/packages/format-library/src/footnote/index.js
@@ -4,14 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { insertObject, useAnchor } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
-import { formatListNumbered, keyboardReturn } from '@wordpress/icons';
-import {
-	Popover,
-	Button,
-	TextControl,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { formatListNumbered } from '@wordpress/icons';
+import { Popover, TextControl } from '@wordpress/components';
 
 const name = 'core/footnote';
 const title = __( 'Footnote' );
@@ -67,7 +61,6 @@ export const footnote = {
 function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 	const { 'data-shortcode-content': shortcodeContent } =
 		activeObjectAttributes;
-	const [ note, setNote ] = useState( shortcodeContent );
 	const popoverAnchor = useAnchor( {
 		editableContentElement: contentRef.current,
 		settings: footnote,
@@ -76,20 +69,22 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 	return (
 		<Popover
 			placement="bottom"
-			focusOnMount={ false }
+			focusOnMount={ true }
 			anchor={ popoverAnchor }
 			className="block-editor-format-toolbar__image-popover"
 		>
-			<form
-				className="block-editor-format-toolbar__image-container-content"
-				onSubmit={ ( event ) => {
+			<TextControl
+				className="block-editor-format-toolbar__image-container-value"
+				label={ __( 'Note' ) }
+				value={ shortcodeContent }
+				onChange={ ( newNote ) => {
 					const newReplacements = value.replacements.slice();
 
 					newReplacements[ value.start ] = {
 						type: name,
 						attributes: {
 							...activeObjectAttributes,
-							'data-shortcode-content': note,
+							'data-shortcode-content': newNote,
 						},
 					};
 
@@ -97,25 +92,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 						...value,
 						replacements: newReplacements,
 					} );
-
-					event.preventDefault();
 				} }
-			>
-				<HStack alignment="bottom" spacing="0">
-					<TextControl
-						className="block-editor-format-toolbar__image-container-value"
-						label={ __( 'Note' ) }
-						value={ note }
-						onChange={ ( newNote ) => setNote( newNote ) }
-					/>
-					<Button
-						className="block-editor-format-toolbar__image-container-button"
-						icon={ keyboardReturn }
-						label={ __( 'Apply' ) }
-						type="submit"
-					/>
-				</HStack>
-			</form>
+			/>
 		</Popover>
 	);
 }