apply-popup-button-trigger-ui.js
10 months ago
apply-popup-image-trigger-placeholder.js
10 months ago
apply-popup-preview-toggle.js
10 months ago
apply-popup-image-trigger-placeholder.js
113 lines
| 1 | import { addFilter } from "@wordpress/hooks"; |
| 2 | import { createHigherOrderComponent } from "@wordpress/compose"; |
| 3 | import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor"; |
| 4 | import { Button, Placeholder } from "@wordpress/components"; |
| 5 | import { __ } from "@wordpress/i18n"; |
| 6 | import { usePopupTemplate } from "../blocks/popup/hooks/usePopupTemplate"; |
| 7 | |
| 8 | /** |
| 9 | * Higher order component to add image placeholder for popup-image-trigger block variation |
| 10 | */ |
| 11 | const WithPopupImageTriggerPlaceholder = createHigherOrderComponent( |
| 12 | (BlockEdit) => { |
| 13 | return (props) => { |
| 14 | const { name, attributes, setAttributes } = props; |
| 15 | |
| 16 | // Return if block type is not cover or image. |
| 17 | if (name !== "core/cover" && name !== "core/image") { |
| 18 | return <BlockEdit {...props} />; |
| 19 | } |
| 20 | |
| 21 | // Return if block doesn't have required class names. |
| 22 | if ( |
| 23 | attributes?.className !== "presto-popup-image-trigger" && |
| 24 | attributes?.className !== "presto-popup-cover-trigger" |
| 25 | ) { |
| 26 | return <BlockEdit {...props} />; |
| 27 | } |
| 28 | |
| 29 | // Return if image/cover already has URL |
| 30 | if (attributes?.url) { |
| 31 | return <BlockEdit {...props} />; |
| 32 | } |
| 33 | |
| 34 | /** |
| 35 | * Handle the image upload. |
| 36 | * @param {Object} media - The uploaded media object |
| 37 | * @returns {void} |
| 38 | */ |
| 39 | const handleImageUpload = (media) => { |
| 40 | if (!media?.url) { |
| 41 | return; |
| 42 | } |
| 43 | |
| 44 | if (name === "core/cover") { |
| 45 | // Update the cover block attributes with the image url. |
| 46 | setAttributes({ |
| 47 | url: media?.url, |
| 48 | id: media?.id, |
| 49 | customOverlayColor: "#131313", |
| 50 | isUserOverlayColor: true, |
| 51 | dimRatio: 50, |
| 52 | minHeight: 336, |
| 53 | minHeightUnit: "px", |
| 54 | contentPosition: "center center", |
| 55 | layout: { type: "constrained" }, |
| 56 | style: { |
| 57 | aspectRatio: "16/9", |
| 58 | border: { |
| 59 | radius: "5px", |
| 60 | }, |
| 61 | }, |
| 62 | }); |
| 63 | } else if (name === "core/image") { |
| 64 | // Update the image block attributes with the image url. |
| 65 | setAttributes({ |
| 66 | url: media?.url, |
| 67 | id: media?.id, |
| 68 | alt: media?.alt || "", |
| 69 | style: { |
| 70 | border: { |
| 71 | radius: "8px", |
| 72 | }, |
| 73 | }, |
| 74 | }); |
| 75 | } |
| 76 | }; |
| 77 | |
| 78 | return ( |
| 79 | <Placeholder |
| 80 | icon="format-image" |
| 81 | label={__("Choose media", "presto-player")} |
| 82 | instructions={__( |
| 83 | "Select an image that will trigger the popup when clicked.", |
| 84 | "presto-player" |
| 85 | )} |
| 86 | > |
| 87 | <MediaUploadCheck> |
| 88 | <MediaUpload |
| 89 | onSelect={handleImageUpload} |
| 90 | allowedTypes={["image"]} |
| 91 | render={({ open }) => ( |
| 92 | <Button onClick={open} variant="primary"> |
| 93 | {__("Add / Select Image", "presto-player")} |
| 94 | </Button> |
| 95 | )} |
| 96 | /> |
| 97 | </MediaUploadCheck> |
| 98 | </Placeholder> |
| 99 | ); |
| 100 | }; |
| 101 | }, |
| 102 | "withPopupImageTriggerPlaceholder" |
| 103 | ); |
| 104 | |
| 105 | /** |
| 106 | * Apply the filter to popup-image-trigger block variation for image placeholder |
| 107 | */ |
| 108 | addFilter( |
| 109 | "editor.BlockEdit", |
| 110 | "presto-player/popup-image-trigger-placeholder", |
| 111 | WithPopupImageTriggerPlaceholder |
| 112 | ); |
| 113 |