Update readme

components/media-toolbar/index.tsx

@@ -50,9 +50,9 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 	isOptional = false,
 	id,
 	labels = {
-		replace: __('Replace Image', '10up-block-components'),
-		remove: __('Remove Image', '10up-block-components'),
 		add: __('Add Image', '10up-block-components'),
+		remove: __('Remove Image', '10up-block-components'),
+		replace: __('Replace Image', '10up-block-components'),
 	},
 }) => {
 	const hasImage = !!id;

components/media-toolbar/readme.md

@@ -5,6 +5,7 @@ The MediaToolbar component is build to quickly add a complete media editing expe
 ## Usage
 
 ```js
+import { __ } from '@wordpress/i18n';
 import { BlockControls } from '@wordpress/block-editor';
 import { MediaToolbar } from '@10up/block-components';
 
@@ -28,6 +29,11 @@ function BlockEdit(props) {
                     id={ imageId }
                     onSelect={ handleImageSelect }
                     onRemove={ handleImageRemove }
+                    labels={{
+                        add: __('Custom add label'),
+                        remove: __('Custom remove label'),
+                        replace: __('Custom replace label'), 
+                    }}
                 />
             </BlockControls>
             ...
@@ -43,4 +49,5 @@ function BlockEdit(props) {
 | `id` | `number`    | `null`   | image id          |
 | `onSelect` | `Function` | `null` | Callback that gets called with the new image when one is selected |
 | `onRemove` | `Function` | `null` | Callback that gets called when the remove image button is clicked |
-| `isOptional` | `boolean` | `false` | Wether or not the Remove Image button should be shown |
+| `isOptional` | `boolean` | `false` | Whether or not the Remove Image button should be shown |
+| `labels`     | `object` | `{}` | Custom labels prop. Used to override default labels for better UX when using different media types. Allows the sub properties `add`, `remove`, and `replace`. |