Icon.tsx
1 year ago
block.json
1 year ago
edit.tsx
1 year ago
editor.scss
1 year ago
index.tsx
1 year ago
render.php
1 year ago
edit.tsx
92 lines
| 1 | import {InspectorControls, useBlockProps} from '@wordpress/block-editor'; |
| 2 | import {__} from '@wordpress/i18n'; |
| 3 | import {useSelect} from '@wordpress/data'; |
| 4 | import {external} from '@wordpress/icons'; |
| 5 | import {BaseControl, Icon, PanelBody, Placeholder, TextareaControl} from '@wordpress/components'; |
| 6 | import {BlockEditProps} from '@wordpress/blocks'; |
| 7 | import CampaignSelector from '../shared/components/CampaignSelector'; |
| 8 | import useCampaign from '../shared/hooks/useCampaign'; |
| 9 | import {GalleryIcon} from "./Icon"; |
| 10 | |
| 11 | import './editor.scss'; |
| 12 | |
| 13 | interface EditProps extends BlockEditProps<{ |
| 14 | campaignId: number; |
| 15 | alt: string; |
| 16 | width: number; |
| 17 | height: number; |
| 18 | align: string; |
| 19 | }> { |
| 20 | toggleSelection: (isSelected: boolean) => void; |
| 21 | } |
| 22 | |
| 23 | export default function Edit({attributes, setAttributes, toggleSelection}: EditProps) { |
| 24 | const blockProps = useBlockProps(); |
| 25 | const {campaign, hasResolved} = useCampaign(attributes.campaignId); |
| 26 | |
| 27 | const adminBaseUrl = useSelect( |
| 28 | // @ts-ignore |
| 29 | (select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns', |
| 30 | [] |
| 31 | ); |
| 32 | const editCampaignUrl = `${adminBaseUrl}&id=${attributes.campaignId}&tab=settings`; |
| 33 | |
| 34 | return ( |
| 35 | <figure {...blockProps}> |
| 36 | <CampaignSelector |
| 37 | campaignId={attributes.campaignId} |
| 38 | handleSelect={(campaignId: number) => setAttributes({campaignId})} |
| 39 | > |
| 40 | |
| 41 | {hasResolved && campaign?.image ? ( |
| 42 | <img |
| 43 | className={'givewp-campaign-cover-block-preview__image'} |
| 44 | src={campaign?.image} |
| 45 | alt={attributes.alt ?? __('Campaign Image', 'give')} |
| 46 | /> |
| 47 | ) : ( |
| 48 | <Placeholder |
| 49 | icon={<GalleryIcon />} |
| 50 | label={__('Campaign Cover Image', 'give')} |
| 51 | instructions={__('Upload a cover image for your campaign.', 'give')} |
| 52 | /> |
| 53 | )} |
| 54 | </CampaignSelector> |
| 55 | |
| 56 | {hasResolved && campaign && ( |
| 57 | <InspectorControls> |
| 58 | <PanelBody title="Settings" initialOpen={true}> |
| 59 | <BaseControl label={__('Cover', 'give')} id="givewp-campaign-cover-block__title-field"> |
| 60 | {campaign?.image && ( |
| 61 | <img |
| 62 | className={'givewp-campaign-cover-block__image'} |
| 63 | src={campaign?.image} |
| 64 | alt={attributes.alt ?? __('Campaign Cover image', 'give')} |
| 65 | /> |
| 66 | )} |
| 67 | <p className={'givewp-campaign-cover-block__help-text'}> |
| 68 | {__('Shows the cover image of the campaign.', 'give')} |
| 69 | </p> |
| 70 | <a |
| 71 | href={editCampaignUrl} |
| 72 | target="_blank" |
| 73 | rel="noopener noreferrer" |
| 74 | className="givewp-campaign-cover-block__edit-campaign-link" |
| 75 | aria-label={__('Edit campaign settings in a new tab', 'give')} |
| 76 | > |
| 77 | {__('Change campaign cover', 'give')} |
| 78 | <Icon icon={external} /> |
| 79 | </a> |
| 80 | </BaseControl> |
| 81 | <TextareaControl |
| 82 | label={__('Alternative text', 'give')} |
| 83 | value={attributes.alt} |
| 84 | onChange={(value: string) => setAttributes({alt: value})} |
| 85 | /> |
| 86 | </PanelBody> |
| 87 | </InspectorControls> |
| 88 | )} |
| 89 | </figure> |
| 90 | ); |
| 91 | } |
| 92 |