diff --git a/src/Campaigns/Blocks/CampaignCover/Icon.tsx b/src/Campaigns/Blocks/CampaignCover/Icon.tsx
new file mode 100644
index 0000000000..6c893fba1c
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/Icon.tsx
@@ -0,0 +1,16 @@
+import {Path, SVG} from "@wordpress/components";
+
+export function GalleryIcon() {
+ return (
+
+ );
+}
diff --git a/src/Campaigns/Blocks/CampaignCover/block.json b/src/Campaigns/Blocks/CampaignCover/block.json
new file mode 100644
index 0000000000..a3f58c4d89
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/block.json
@@ -0,0 +1,88 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 3,
+ "name": "givewp/campaign-cover-block",
+ "version": "1.0.0",
+ "title": "Campaign Cover",
+ "category": "give",
+ "description": "Displays the cover image of the campaign.",
+ "attributes": {
+ "campaignId": {
+ "type": "integer"
+ },
+ "alt": {
+ "type": "string"
+ },
+ "width": {
+ "type": "number",
+ "default": 645
+ },
+ "height": {
+ "type": "number",
+ "default": 865
+ },
+ "align": {
+ "type": "string",
+ "default": ""
+ }
+ },
+ "supports": {
+ "align": [
+ "wide",
+ "full",
+ "left",
+ "center",
+ "right"
+ ],
+ "filter": {
+ "duotone": true
+ },
+ "selectors": {
+ "filter": {
+ "duotone": ".wp-block-givewp-campaign-cover-block img"
+ }
+ },
+ "anchor": true,
+ "className": true,
+ "splitting": true,
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
+ "color": {
+ "gradients": true,
+ "link": true,
+ "__experimentalDefaultControls": {
+ "background": true,
+ "text": true
+ }
+ },
+ "spacing": {
+ "margin": true,
+ "padding": true,
+ "__experimentalDefaultControls": {
+ "margin": false,
+ "padding": false
+ }
+ },
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontStyle": true,
+ "__experimentalFontWeight": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalWritingMode": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ }
+ },
+ "textdomain": "give",
+ "render": "file:./render.php",
+ "style": "file:./style.css"
+}
diff --git a/src/Campaigns/Blocks/CampaignCover/edit.tsx b/src/Campaigns/Blocks/CampaignCover/edit.tsx
new file mode 100644
index 0000000000..99e1a3d539
--- /dev/null
+++ b/src/Campaigns/Blocks/CampaignCover/edit.tsx
@@ -0,0 +1,143 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor';
+import {__} from '@wordpress/i18n';
+import {useSelect} from '@wordpress/data';
+import {external} from '@wordpress/icons';
+import {BaseControl, Icon, PanelBody, Placeholder, ResizableBox, TextareaControl} from '@wordpress/components';
+import {BlockEditProps} from '@wordpress/blocks';
+import {CampaignSelector} from '../shared/components/CampaignSelector';
+import useCampaign from '../shared/hooks/useCampaign';
+import {GalleryIcon} from "./Icon";
+
+import './editor.scss';
+
+interface EditProps extends BlockEditProps<{
+ campaignId: number;
+ alt: string;
+ width: number;
+ height: number;
+ align: string;
+}> {
+ toggleSelection: (isSelected: boolean) => void;
+}
+
+export default function Edit({attributes, setAttributes, toggleSelection}: EditProps) {
+ const blockProps = useBlockProps();
+ const {campaign, hasResolved} = useCampaign(attributes.campaignId);
+
+ const adminBaseUrl = useSelect(
+ // @ts-ignore
+ (select) => select('core').getSite()?.url + '/wp-admin/edit.php?post_type=give_forms&page=give-campaigns',
+ []
+ );
+ const editCampaignUrl = `${adminBaseUrl}&id=${attributes.campaignId}&tab=settings`;
+
+ const handleResizeStop = (event: MouseEvent | TouchEvent, direction, refToElement: HTMLDivElement, delta: {
+ height: number,
+ width: number
+ }) => {
+ setAttributes({
+ height: attributes.height + delta.height,
+ width: attributes.width + delta.width,
+ });
+ toggleSelection(true);
+ };
+
+ const isSizeAligned = attributes.align === 'full' || attributes.align === 'wide';
+
+ return (
+
+ {__('Shows the cover image of the campaign.', 'give')}
+
+
+ ))}
+
+ )}
+
+
{__('or drag your image or video here', 'give')}
+{__('or drag your image here', 'give')}