34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import { useSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* BackgroundImage
|
|
*
|
|
* This component is used to display a background image for a block based on its attributes.
|
|
*
|
|
* @param {object} props
|
|
* @param {string} props.background_image The url of the background image.
|
|
* @param {string} props.background_position The background-position property.
|
|
* @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
|
|
* @param {number} props.background_opacity The opacity value applied to the image.
|
|
* @returns {*} React JSX
|
|
*/
|
|
export default function BackgroundImage({ background_url, background_position = 'center', background_fixed = false, background_opacity = 70 }) {
|
|
|
|
return (
|
|
<>
|
|
{background_url && (
|
|
<div
|
|
className="badegg-block-background"
|
|
style={{
|
|
backgroundImage: `url(${background_url})`,
|
|
backgroundPosition: background_position,
|
|
backgroundSize: 'cover',
|
|
backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
|
|
opacity: Number(background_opacity) * 0.01,
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|