Gutenberg MediaUpload コンポーネント和訳

このページは Gutenberg の MediaUpload コンポーネントの[リファレンス](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload)  2019年11月18日版を和訳したものです。


MediaUpload
===========

MediaUpload は WordPress のメディアモーダルを開くボタンを描画するコンポーネントです。

## 設定

これはメディアファイルを扱うコアブロックとの統合を可能にするために必要なプレースホルダコンポーネントです。デフォルトでは何も描画しませんが、`components.MediaUpload` フィルタでオーバーライドする方法を提供します。

```jsx
import { addFilter } from '@wordpress/hooks';
import MediaUpload from './media-upload';

const replaceMediaUpload = () => MediaUpload;

addFilter(
	'editor.MediaUpload',
	'core/edit-post/components/media-upload/replace-media-upload',
	replaceMediaUpload
);
```

投稿の編集ページで `wp.media` モジュールを使用してこのコンポーネントがどのように実装されているかは [edit-post](https://github.com/WordPress/gutenberg/blob/master/packages/media-utils/src/components/media-upload/index.js) で確認できます。

## 使い方

現在のユーザがアップロード権限を持つことを確実にするため、MediaUpload コンポーネントは MediaUploadCheck コンポーネントでラップする必要があります。

```jsx
import { Button } from '@wordpress/components';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';

const ALLOWED_MEDIA_TYPES = [ 'audio' ];

function MyMediaUploader() {
	return (
		<MediaUploadCheck>
			<MediaUpload
				onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
				allowedTypes={ ALLOWED_MEDIA_TYPES }
				value={ mediaId }
				render={ ( { open } ) => (
					<Button onClick={ open }>
						メディアライブラリを開く
					</Button>
				) }
			/>
		</MediaUploadCheck>
	);
}
```

## プロパティ

以下のプロパティを受け付けます。このセットに含まれないプロパティは Popover コンテントをラップするエレメントに適用されます。

### allowedTypes

メディアライブラリにアップロード、またはそこで選択できるメディアの型を示す配列。
各型は汎用的な mime type を含む文字列(例: 'image', 'audio', 'text')、または完全な mime type (例: 'audio/mpeg', 'image/gif') です。
この値を省略するとすべての mime type が許可されます。

- 型: `Array`
- 必須: いいえ
- プラットフォーム: Web | Mobile

### multiple

複数選択を許可するかどうか。

- 型: `Boolean`
- 必須: いいえ
- デフォルト: false
- プラットフォーム: Web

### value

メディアライブラリを開いたとき、デフォルトで選択されている Media ID (multiple が true のときは複数の media ID)。

- 型: `Number|Array`
- 必須: いいえ
- プラットフォーム: Web

### onClose

メディアモーダルが閉じられたときのコールバック関数

メディアが選択されたとき、およびユーザがメディアを選ばずにモーダルを閉じたときの両方呼ばれる。

- 型: `Function`
- 必須: いいえ

### onSelect

メディア選択後にモーダルが閉じられたときに呼ばれるコールバック関数。

これはメディアを選択しているとき `onClose` の次に呼ばれる。選択されたメディアは引数に渡される。

- 型: `Function`
- 必須: はい
- プラットフォーム: Web | Mobile

### title

メディアモーダルに表示するタイトル。

- 型: `String`
- 必須: いいえ
- デフォルト: `Select or Upload Media`
- プラットフォーム: Web

### modalClass

メディアモーダルのフレームに追加される CSS クラス。

- 型: `String`
- 必須: いいえ
- プラットフォーム: Web

### addToGallery

true にすると、ユーザが画像を追加できるように、ギャラリーメディアモーダルをメディアライブラリ内で直接開きます。
false にすると、ギャラリーメディアモーダルは編集モードで開き、ユーザが既存の画像などを編集、削除、並び替え、属性の変更ができます。
`gallery === true` のときのみ適用されます。

- 型: `Boolean`
- 必須: いいえ
- デフォルト: `false`
- プラットフォーム: Web

### gallery

true にするとコンポーネントはすべてのステートをギャラリー用に設定します。メディアモーダルはデフォルトでギャラリー編集フレームで開きます。ただし、`addToGallery` フラグを使用しなければ変更はできません。

- 型: `Boolean`
- 必須: いいえ
- デフォルト: `false`
- プラットフォーム: Web

## render

メディアライブラリを開くボタンを描画するときに呼び出されるコールバック。

- 型: `Function`
- 必須: はい
- プラットフォーム: Web | Mobile

コールバックの第一引数は以下のプロパティを含むオブジェクトとなります:

 - `open`: コール時にメディアモーダルを開く関数


#訳注
Create Guten Block 使用時の初期化例です。

```js
import './style.scss';
import './editor.scss';

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

// MediaUploadコンポーネント
const { MediaUpload, MediaUploadCheck } = wp.editor;
const { Button } = wp.components;
const ALLOWED_MEDIA_TYPES = [ 'image' ];

wp.blocks.registerBlockType( 'gutenberg-examples/myBlock', {
...
```