| 1 |
import { |
| 2 |
__experimentalUnitControl, |
| 3 |
SelectControl, |
| 4 |
} from '@wordpress/components'; |
| 5 |
import { useSelect } from '@wordpress/data'; |
| 6 |
import { useEffect, useState } from '@wordpress/element'; |
| 7 |
import { __ } from '@wordpress/i18n'; |
| 8 |
const UnitControl = __experimentalUnitControl; |
| 9 |
|
| 10 |
export default function MediaSizeSelector(props) { |
| 11 |
const { |
| 12 |
attributes, |
| 13 |
hasAspectRatio = true, |
| 14 |
hasSizeSelectors = true, |
| 15 |
hasOriginalOption = true, |
| 16 |
onChangeAspectRatio, |
| 17 |
onChangeWidth, |
| 18 |
onChangeHeight, |
| 19 |
onChangeResolution, |
| 20 |
} = props; |
| 21 |
const { aspectRatio, width, height, resolution } = attributes; |
| 22 |
|
| 23 |
const options = []; |
| 24 |
|
| 25 |
if (hasOriginalOption) { |
| 26 |
options.push({ label: 'Original', value: '' }); |
| 27 |
} |
| 28 |
|
| 29 |
options.push( |
| 30 |
{ label: 'Square - 1:1', value: '1:1' }, |
| 31 |
{ label: 'Standard - 4:3', value: '4:3' }, |
| 32 |
{ label: 'Portrait - 3:4', value: '3:4' }, |
| 33 |
{ label: 'Classic - 3:2', value: '3:2' }, |
| 34 |
{ label: 'Classic Portrait - 2:3', value: '2:3' }, |
| 35 |
{ label: 'Wide - 16:9', value: '16:9' }, |
| 36 |
{ label: 'Ultra Wide - 21:9', value: '21:9' }, |
| 37 |
{ label: 'Tall - 9:16', value: '9:16' } |
| 38 |
); |
| 39 |
|
| 40 |
if (width && height) { |
| 41 |
options.push({ label: 'Custom', value: 'custom', hidden: true }); |
| 42 |
} |
| 43 |
|
| 44 |
const editorSettings = useSelect((select) => { |
| 45 |
return select('core/block-editor').getSettings(); |
| 46 |
}); |
| 47 |
|
| 48 |
const [customAspectRatio, setCustomAspectRatio] = useState(false); |
| 49 |
|
| 50 |
useEffect(() => { |
| 51 |
setCustomAspectRatio(width && height ? 'custom' : false); |
| 52 |
// eslint-disable-next-line react-hooks/exhaustive-deps |
| 53 |
}, []); |
| 54 |
|
| 55 |
const handleAspectRatioChange = (val) => { |
| 56 |
setCustomAspectRatio(false); |
| 57 |
|
| 58 |
const { label } = options.find((opt) => opt.value === val); |
| 59 |
onChangeAspectRatio(val, label); |
| 60 |
|
| 61 |
if (width && height) { |
| 62 |
onChangeHeight(''); |
| 63 |
} |
| 64 |
}; |
| 65 |
|
| 66 |
const handleWidthChange = (val) => { |
| 67 |
onChangeWidth(parseFloat(val) ? val : ''); |
| 68 |
setCustomAspectRatio(val && height ? 'custom' : false); |
| 69 |
}; |
| 70 |
|
| 71 |
const handleHeightChange = (val) => { |
| 72 |
onChangeHeight(parseFloat(val) ? val : ''); |
| 73 |
setCustomAspectRatio(width && val ? 'custom' : false); |
| 74 |
}; |
| 75 |
|
| 76 |
return ( |
| 77 |
<> |
| 78 |
{/* Aspect ratio. */} |
| 79 |
{hasAspectRatio && ( |
| 80 |
<SelectControl |
| 81 |
label={__('Aspect Ratio', 'ghostkit')} |
| 82 |
value={customAspectRatio || aspectRatio} |
| 83 |
onChange={handleAspectRatioChange} |
| 84 |
options={options} |
| 85 |
/> |
| 86 |
)} |
| 87 |
{/* Width and height. */} |
| 88 |
{hasSizeSelectors && ( |
| 89 |
<> |
| 90 |
<div style={{ display: 'flex', gap: 10 }}> |
| 91 |
<UnitControl |
| 92 |
value={width} |
| 93 |
placeholder={__('Auto', 'ghostkit')} |
| 94 |
label={__('Width', 'ghostkit')} |
| 95 |
onChange={handleWidthChange} |
| 96 |
/> |
| 97 |
<UnitControl |
| 98 |
value={height} |
| 99 |
placeholder={__('Auto', 'ghostkit')} |
| 100 |
label={__('Height', 'ghostkit')} |
| 101 |
onChange={handleHeightChange} |
| 102 |
/> |
| 103 |
</div> |
| 104 |
{!resolution && <div style={{ marginTop: '-22px' }} />} |
| 105 |
</> |
| 106 |
)} |
| 107 |
{/* Resolution. */} |
| 108 |
{resolution && editorSettings?.imageSizes ? ( |
| 109 |
<SelectControl |
| 110 |
label={__('Resolution', 'ghostkit')} |
| 111 |
help={__( |
| 112 |
'Select the size of the source image.', |
| 113 |
'ghostkit' |
| 114 |
)} |
| 115 |
value={resolution} |
| 116 |
onChange={onChangeResolution} |
| 117 |
options={editorSettings.imageSizes.map((imgSize) => ({ |
| 118 |
value: imgSize.slug, |
| 119 |
label: imgSize.name, |
| 120 |
}))} |
| 121 |
/> |
| 122 |
) : null} |
| 123 |
</> |
| 124 |
); |
| 125 |
} |
| 126 |
|
