audio.md

audio

See Example Usage.

Properties

label:

A label for the field.

• Type: String
• Required: No

help:

Used to add help text below the field.

• Type: String
• Required: No

buttonText:

Upload button text.

• Type: String
• Required: No

mediaButtonText:

Media button text.

• Type: String
• Required: No

placeholderText:

Audio placeholder text.

• Type: String
• Required: No

fileUpload:

Show file upload button or not.

• Type: Boolean
• Required: No
• Default: true

mediaUploadButton:

Show file media upload button or not.

• Type: Boolean
• Required: No
• Default: true

inputUrl:

Show file input url button or not.

• Type: Boolean
• Required: No
• Default: true

placeholder:

Show placeholder or not.

• Type: Boolean
• Required: No
• Default: true

placement:

Defines where you want to show the field. By default a field would be added to the block however it can be added to the sidebar settings by using inspector .

• Accepts: inspector
• Type: string
• Required: No

helperFields:

If caption field is required, define a new attribute field and use the attribute key name as

{ caption: 'yourCaptionAttributeKeyName' } .

• Type: Object
• Required: No

Example:

audio: {
	type: 'object',
	field: {
		type: 'audio',
	},
},

Example with caption:

audio: {
	type: 'object',
	field: {
		type: 'audio',
		helperFields: {
			caption: 'audioCaption',
		},
	},
},
audioCaption: {
	type: 'array',
	field: {
		type: 'rich-text',
	},
	source: 'children',
	selector: '.audio-caption',
},

Return value in props.attribute

Returns complete audio object.

• Type: object

{
	"id": 153375,
	"title": "Audio Title",
	"filename": "audio-file-name.mp3",
	"url": "http://example.org/wp-content/uploads/2018/04/audio-file-name.mp3",
	"link": "http://example.org/audio-file-name/",
	"alt": "",
	"author": "3755",
	"description": "",
	"caption": "",
	"name": "audio-file-name",
	"status": "inherit",
	"uploadedTo": 0,
	"date": "2018-04-17T07:13:14.000Z",
	"modified": "2018-04-17T07:13:14.000Z",
	"menuOrder": 0,
	"mime": "audio/mpeg",
	"type": "audio",
	"subtype": "mpeg",
	"icon": "https://example.org/wp-includes/images/media/audio.png",
	"dateFormatted": "April 17, 2018",
	"nonces": {
		"update": "6d54241ae5",
		"delete": "f1a208a878",
		"edit": "f6721af69c"
	},
	"editLink": "https://example.org/wp-admin/post.php?post=153375&action=edit",
	"meta": {
		"artist": "Artist Name",
		"album": "Album name",
		"bitrate": 320055.29661016946,
		"bitrate_mode": "vbr"
	},
	"authorName": "Author Name",
	"filesizeInBytes": 6123133,
	"filesizeHumanReadable": "6 MB",
	"context": "",
	"fileLength": "2:31",
	"image": {
		"src": "http://example.org/wp-content/uploads/2018/04/audio-file-name-mp3-image.jpg",
		"width": 400,
		"height": 400
	},
	"thumb": {
		"src": "http://example.org/wp-content/uploads/2018/04/audio-file-name-mp3-image-240x184.jpg",
		"width": 240,
		"height": 184
	},
	"compat": {
		"item": "",
		"meta": ""
	}
}

Example Usage ( ES5 )

wp.blocks.registerBlockType( 'gb-m-example/single-field-block-audio', {
	title: 'Single Field Block Audio.',
	attributes: {
		audio: {
			type: 'object',
			field: {
				type: 'audio',
				fileUpload: true,
				inputUrl: true,
				mediaUploadButton: true,
				placeholder: true,
				helperFields: {
					caption: 'audioCaption', // If required.
				},
			},
		},
		audioCaption: {
			type: 'array',
			field: {
				type: 'rich-text',
				placeholder: 'Enter caption',
			},
			source: 'children',
			selector: '.audio-caption',
		},
	},

	edit: function( props, middleware ) {
		return [
			middleware.fields.audio,
		];
	},

	save: function( props ) {
		return wp.element.createElement( 'div', {},
			wp.element.createElement( 'audio', {
					className: 'audio',
					controls: true,
				},
				wp.element.createElement( 'source', {
					src: props.attributes.audio ? props.attributes.audio.url : null,
					type: props.attributes.audio ? props.attributes.audio.mime : null,
				}, null )
			),
			wp.element.createElement( 'div', {
					className: 'audio-caption'
				},
				props.attributes.audioCaption || ''
			)
		);
	},
} );

Read more about defining attributes on official Gutenberg handbook.

After uploading audio: