Media

TwebBlockMediaControl

{ label, help, name*, onSelect, attributes*, setAttributes* }

/**
 * @param {string} [label] - Component label.
 * @param {string} [help] - Component description.
 * @param {string} name - Attribute name.
 * @param {function} [onSelect] - Callback called when a media item is selected.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */

block.json

"testMedia": {
	"type": "integer",
	"default": 0
}

index.js

import {
	TwebBlockMediaControl,
} from '@tigriweb/components/attributes';

index.js | edit()

<TwebBlockMediaControl
	label={ __('Media Label', 'your-theme-name') }
	help={ __('Media Description', 'your-theme-name') }
	name="testMedia"
	{...{ attributes, setAttributes }}
/>

TwebBlockMediaControl.Render

{ mediaId*, isBackground, className }

/**
 * @param {number} mediaId - The ID of the media item (default: 0).
 * @param {boolean} [isBackground] - Should media be rendered as a background image? (default: false).
 * @param {string} [className] - Additional CSS class name for the rendered component.
 */

index.js | save()

{ attributes.testMedia && (
	<TwebBlockMediaControl.Render
		mediaId={ attributes.testMedia }
		isBackground={ false }
		className="test-media"
	/>
) }