forked from 10up/block-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
88 lines (78 loc) · 2.22 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { FC } from 'react';
import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor';
import { Spinner, FocalPointPicker, PanelBody, Placeholder } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useMedia } from '../../hooks/use-media';
interface ImageProps {
id: number;
size?: string;
onSelect: (media: any) => void; // Define a more specific type for media if possible
focalPoint?: { x: number; y: number };
onChangeFocalPoint?: (focalPoint: { x: number; y: number }) => void;
labels?: { [key: string]: string };
canEditImage?: boolean;
allowedTypes?: string[];
[key: string]: any; // For additional props spread onto the img element
}
export const Image: FC<ImageProps> = ({
id,
size = 'full',
onSelect,
focalPoint = { x: 0.5, y: 0.5 },
onChangeFocalPoint = undefined,
labels = {},
canEditImage = true,
allowedTypes = ['image'],
...rest
}) => {
const hasImage = !!id;
const { media, isResolvingMedia } = useMedia(id);
const shouldDisplayFocalPointPicker = typeof onChangeFocalPoint === 'function';
if (!hasImage && !canEditImage) {
return <Placeholder className="block-editor-media-placeholder" withIllustration />;
}
if (!hasImage && canEditImage) {
return (
<MediaPlaceholder
labels={labels}
onSelect={onSelect}
accept="image"
multiple={false}
allowedTypes={allowedTypes}
/>
);
}
if (isResolvingMedia) {
return <Spinner />;
}
// @ts-ignore-next-line - The media object is not typed by WordPress currently
const imageUrl = media?.media_details?.sizes?.[size]?.source_url ?? media?.source_url;
const altText = media?.alt_text;
if (shouldDisplayFocalPointPicker) {
const focalPointStyle = {
objectFit: 'cover',
objectPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`,
};
rest.style = {
...rest.style,
...focalPointStyle,
};
}
return (
<>
{shouldDisplayFocalPointPicker && (
<InspectorControls>
<PanelBody title={__('Image Settings')}>
<FocalPointPicker
label={__('Focal Point Picker')}
url={imageUrl}
value={focalPoint}
onChange={onChangeFocalPoint}
/>
</PanelBody>
</InspectorControls>
)}
<img src={imageUrl} alt={altText} {...rest} />
</>
);
};