block-components icon indicating copy to clipboard operation
block-components copied to clipboard

MediaToolbar component: Allow configuring labels

Open benlk opened this issue 2 years ago • 0 comments

Is your enhancement related to a problem? Please describe.

Use case: I want to use the MediaToolbar with the Video component introduced in https://github.com/10up/block-components/pull/225, but the labels on this component assume that the bound media is an image: "Add Image", "Replace Image", "Remove Image".

https://github.com/10up/block-components/blob/6cec6c17b89abe9d19254f89b73f29ffd198a36d/components/media-toolbar/index.js#L28-L32

https://github.com/10up/block-components/blob/6cec6c17b89abe9d19254f89b73f29ffd198a36d/components/media-toolbar/index.js#L33-L37

https://github.com/10up/block-components/blob/6cec6c17b89abe9d19254f89b73f29ffd198a36d/components/media-toolbar/index.js#L44-L46

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

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

benlk avatar Jul 14 '23 23:07 benlk