index.js
109 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { Button } from '@wordpress/components'; |
| 3 | import { MediaUpload } from '@wordpress/block-editor'; |
| 4 | import { dispatch } from '@wordpress/data'; |
| 5 | import noImage from '../../../inc/vk-blocks/images/no-image.svg'; |
| 6 | |
| 7 | export const AdvancedMediaUpload = (props) => { |
| 8 | const { schema, clientId, setAttributes, attributes } = props; |
| 9 | |
| 10 | const deleteImgBtn = () => { |
| 11 | dispatch('core/block-editor').updateBlockAttributes(clientId, { |
| 12 | [schema]: null, |
| 13 | [schema + 'Id']: null, |
| 14 | }); |
| 15 | }; |
| 16 | |
| 17 | const ensureImageId = (callback) => { |
| 18 | const schemaIdKey = schema + 'Id'; |
| 19 | |
| 20 | if (attributes[schema] && !attributes[schemaIdKey]) { |
| 21 | wp.media |
| 22 | .attachment(attributes[schema]) |
| 23 | .fetch() |
| 24 | .then((media) => { |
| 25 | if (media && media.id) { |
| 26 | setAttributes({ [schemaIdKey]: media.id }); |
| 27 | } |
| 28 | }); |
| 29 | } |
| 30 | |
| 31 | // すぐにコールバック（open）を実行 |
| 32 | if (callback) { |
| 33 | callback(); |
| 34 | } |
| 35 | }; |
| 36 | |
| 37 | return ( |
| 38 | <MediaUpload |
| 39 | onSelect={(value) => { |
| 40 | const schemaIdKey = schema + 'Id'; // 例: "bgImageId" |
| 41 | const newAttributes = { [schema]: value.url }; |
| 42 | |
| 43 | if (value.id) { |
| 44 | newAttributes[schemaIdKey] = value.id; |
| 45 | } else { |
| 46 | // IDがない場合、wp.media.attachment() を使って取得 |
| 47 | wp.media |
| 48 | .attachment(value.url) |
| 49 | .fetch() |
| 50 | .then((media) => { |
| 51 | if (media && media.id) { |
| 52 | setAttributes({ [schemaIdKey]: media.id }); |
| 53 | } |
| 54 | }); |
| 55 | } |
| 56 | setAttributes(newAttributes); |
| 57 | }} |
| 58 | type="image" |
| 59 | value={attributes[schema + 'Id']} |
| 60 | render={({ open }) => ( |
| 61 | <> |
| 62 | {attributes[schema] ? ( |
| 63 | <> |
| 64 | {/* eslint-disable-next-line jsx-a11y/alt-text*/} |
| 65 | <img |
| 66 | className={'icon-image'} |
| 67 | src={attributes[schema]} |
| 68 | /> |
| 69 | <div className="components-button-group"> |
| 70 | <Button |
| 71 | onClick={deleteImgBtn} |
| 72 | className={ |
| 73 | 'image-button button button-delete' |
| 74 | } |
| 75 | > |
| 76 | {__('Delete Image', 'vk-blocks')} |
| 77 | </Button> |
| 78 | <Button |
| 79 | onClick={() => { |
| 80 | ensureImageId(open); |
| 81 | }} |
| 82 | className={ |
| 83 | 'image-button button button-replace' |
| 84 | } |
| 85 | > |
| 86 | {__('Replace Image', 'vk-blocks')} |
| 87 | </Button> |
| 88 | </div> |
| 89 | </> |
| 90 | ) : ( |
| 91 | <> |
| 92 | {/* eslint-disable-next-line jsx-a11y/alt-text*/} |
| 93 | <img className={'icon-image'} src={noImage} /> |
| 94 | <Button |
| 95 | onClick={open} |
| 96 | className={ |
| 97 | 'button button-large components-button' |
| 98 | } |
| 99 | > |
| 100 | {__('Select image', 'vk-blocks')} |
| 101 | </Button> |
| 102 | </> |
| 103 | )} |
| 104 | </> |
| 105 | )} |
| 106 | /> |
| 107 | ); |
| 108 | }; |
| 109 |