From 3ecc8ace46041d242ff4edf8eb1a858c82d2dcf0 Mon Sep 17 00:00:00 2001
From: Jon Christensen <jon.christensen@10up.com>
Date: Mon, 24 Jun 2024 15:51:45 -0500
Subject: [PATCH] Update media toolbar component

---
 components/media-toolbar/index.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/media-toolbar/index.tsx b/components/media-toolbar/index.tsx
index cf7f5bf6..aaa49670 100644
--- a/components/media-toolbar/index.tsx
+++ b/components/media-toolbar/index.tsx
@@ -25,6 +25,15 @@ interface MediaToolbarProps {
 	 * The ID of the media, in this case the image.
 	 */
 	id: number;
+
+	/**
+	 * Labels for the buttons.
+	 */
+	labels?: {
+		replace?: string;
+		remove?: string;
+		add?: string;
+	};
 }
 
 /*
@@ -40,6 +49,11 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 	onRemove,
 	isOptional = false,
 	id,
+	labels = {
+		replace: __('Replace Image', '10up-block-components'),
+		remove: __('Remove Image', '10up-block-components'),
+		add: __('Add Image', '10up-block-components'),
+	},
 }) => {
 	const hasImage = !!id;
 	const { media } = useMedia(id);
@@ -51,11 +65,11 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 					<MediaReplaceFlow
 						mediaUrl={media?.source_url}
 						onSelect={onSelect}
-						name={__('Replace Image', '10up-block-components')}
+						name={labels.replace}
 					/>
 					{!!isOptional && (
 						<ToolbarButton onClick={onRemove}>
-							{__('Remove Image', '10up-block-components')}
+							{labels.remove}
 						</ToolbarButton>
 					)}
 				</>
@@ -65,7 +79,7 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 						onSelect={onSelect}
 						render={({ open }) => (
 							<ToolbarButton onClick={open}>
-								{__('Add Image', '10up-block-components')}
+								{labels.add}
 							</ToolbarButton>
 						)}
 					/>