Media

TwebBlockMedia

{ name*, size, onSelect, customUrl, attributes*, setAttributes* }

/**
 * @param {string} name - Attribute name.
 * @param {string} [size] - Size of the image, e.g., 'thumbnail', 'medium', 'large'.
 * @param {function} [onSelect] - Callback called when a media item is selected.
 * @param {function} [customUrl] - Add a custom media URL button.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */

block.json

"testMedia": {
	"type": "object",
	"default": {}
},

index.js

import {
	TwebBlockMedia,
} from '@tigriweb/components/controls';

index.js | edit()

<TwebBlockMedia
	name="testMedia"
	size="thumbnail"
	{...{ attributes, setAttributes }}
/>

TwebBlockMedia.Content

{ value* }

/**
 * @param {object} value - Object representing the media content.
 */

index.js | save()

{ attributes.testMedia.url && (
	<div className="custom-image">
		<TwebBlockMedia.Content
			value={ attributes.testMedia }
		/>
	</div>
) }