MediaToolbar component: Allow configuring labels

[benlk]

Is your enhancement related to a problem? Please describe.

Use case: I want to use the MediaToolbar with the Video component introduced in #225, but the labels on this component assume that the bound media is an image: "Add Image", "Replace Image", "Remove Image".

block-components/components/media-toolbar/index.js

Lines 28 to 32 in 6cec6c1

	<MediaReplaceFlow
	mediaUrl={media?.source_url}
	onSelect={onSelect}
	name={__('Replace Image', '10up-block-components')}
	/>

block-components/components/media-toolbar/index.js

Lines 33 to 37 in 6cec6c1

	{!!isOptional && (
	<ToolbarButton onClick={onRemove}>
	{__('Remove Image', '10up-block-components')}
	</ToolbarButton>
	)}

block-components/components/media-toolbar/index.js

Lines 44 to 46 in 6cec6c1

	<ToolbarButton onClick={open}>
	{__('Add Image', '10up-block-components')}
	</ToolbarButton>

Designs

Ideally, we'd be able to pass a labels argument to MediaToolbar, something like:

<BlockControls>
	<MediaToolbar
		isOptional
		id={ video }
		onSelect={( media ) => setAttributes( {video: media.id} )}
		labels={{
			add: __( 'Add Video' ),
			replace: __( 'Replace Video' ),
			remove: __( 'Remove Video' )
		}}
	/>
</BlockControls>

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Firestorm980]

@benlk @fabiankaegy WIP PR above that adds this feature.