diff --git a/src/Campaigns/Blocks/CampaignList/block.json b/src/Campaigns/Blocks/CampaignList/block.json new file mode 100644 index 0000000000..79a677fe5f --- /dev/null +++ b/src/Campaigns/Blocks/CampaignList/block.json @@ -0,0 +1,70 @@ +{ + "$schema": "https://json.schemastore.org/block.json", + "apiVersion": 2, + "name": "givewp/campaign-list-block", + "version": "1.0.0", + "title": "Campaign List Block", + "category": "give", + "description": "Insert an existing campaign into the page.", + "supports": { + "align": [ + "wide", + "full", + "left", + "center", + "right" + ] + }, + "attributes": { + "layout": { + "type": "string", + "default": "full", + "enum": [ + "full", + "full" + ] + }, + "showImage": { + "type": "boolean", + "default": true + }, + "showDescription": { + "type": "boolean", + "default": true + }, + "showGoal": { + "type": "boolean", + "default": true + }, + "sortBy": { + "type": "string", + "default": "date", + "enum": [ + "date" + ] + }, + "orderBy": { + "type": "string", + "default": "desc", + "enum": [ + "asc", + "desc" + ] + }, + "filterBy": { + "type": "array", + "default": [] + }, + "perPage": { + "type": "number", + "default": "6" + }, + "showPagination": { + "type": "boolean", + "default": true + } + }, + "textdomain": "give", + "editorScript": "file:../../../../build/campaignListBlock.js", + "render": "file:./render.php" +} diff --git a/src/Campaigns/Blocks/CampaignList/edit.tsx b/src/Campaigns/Blocks/CampaignList/edit.tsx new file mode 100644 index 0000000000..b92c29cfc6 --- /dev/null +++ b/src/Campaigns/Blocks/CampaignList/edit.tsx @@ -0,0 +1,98 @@ +import {__} from '@wordpress/i18n'; +import {InspectorControls, useBlockProps} from '@wordpress/block-editor'; +import {BlockEditProps} from '@wordpress/blocks'; +import {FormTokenField, PanelBody, SelectControl, ToggleControl} from '@wordpress/components'; +import {TokenItem} from "@wordpress/components/build-types/form-token-field/types" +import useCampaigns from "../shared/hooks/useCampaigns"; + +export default function Edit({attributes, setAttributes}: BlockEditProps<{ + layout: string; + showImage: boolean; + showDescription: boolean; + showGoal: boolean; + showPagination: boolean; + sortBy: string; + orderBy: string; + filterBy: (string | TokenItem)[]; + perPage: number; +}>) { + const blockProps = useBlockProps(); + const {campaigns, hasResolved} = useCampaigns(); + + return ( +
+ {hasResolved && ( + + + setAttributes({layout})} + options={[ + { + value: 'full', + label: __('Full', 'give'), + } + ]} + /> + + + + setAttributes({showImage})} + /> + setAttributes({showDescription})} + /> + setAttributes({showGoal})} + /> + + + + setAttributes({sortBy})} + help={__('The order campaigns are displayed in.', 'give')} + options={[ + { + value: 'date', + label: __('Date Created', 'give'), + } + ]} + /> + setAttributes({orderBy})} + help={__('Choose whether the campaign order ascends or descends.', 'give')} + options={[ + { + value: 'desc', + label: __('Descending', 'give'), + }, + { + value: 'asc', + label: __('Ascending', 'give'), + } + ]} + /> + setAttributes({filterBy})} + suggestions={campaigns?.map((campaign) => ({ + value: String(campaign.id), + title: campaign.title + }))} + /> + + + )} +
+ ) +} diff --git a/src/Campaigns/Blocks/CampaignList/index.tsx b/src/Campaigns/Blocks/CampaignList/index.tsx new file mode 100644 index 0000000000..7507b2c476 --- /dev/null +++ b/src/Campaigns/Blocks/CampaignList/index.tsx @@ -0,0 +1,14 @@ +import metadata from './block.json'; +import Edit from './edit'; +import initBlock from '../shared/utils/init-block'; +import GiveIcon from '@givewp/components/GiveIcon'; + +const {name} = metadata; + +export {metadata, name}; +export const settings = { + edit: Edit, + icon: , +}; + +export const init = () => initBlock({name, metadata, settings}); diff --git a/src/Campaigns/Blocks/CampaignList/render.php b/src/Campaigns/Blocks/CampaignList/render.php new file mode 100644 index 0000000000..d73a5d85fa --- /dev/null +++ b/src/Campaigns/Blocks/CampaignList/render.php @@ -0,0 +1,7 @@ + { return [ campaignTitleBlock, campaignDonateButton, campaignGoal, - campaignCover + campaignCover, + campaignList ]; };