Merge branch 'master' into 'master'

PCP, Petition and other fixes

Closes #3

See merge request !3

.prettierrc.js

+module.exports = {
+    singleQuote: true,
+    semi: false,
+    tabs: true,
+    tabWidth: 4,
+    bracketSpacing: true
+}

build/index.asset.php

-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-date', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-server-side-render'), 'version' => 'fb086dbfa0b1641a4085d9fe0884dc53');
\ No newline at end of file
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-date', 'wp-element', 'wp-i18n', 'wp-polyfill', 'wp-server-side-render'), 'version' => 'f2a8769655af43f753dd776336b12e01');
\ No newline at end of file

civicrm-gutenberg-blocks.php

@@ -136,7 +136,7 @@ class CiviCRM_Gutenberg_Blocks {
 			],
 			'editor_script'   => 'civicrm-gutenberg-blocks', // The script name we gave in the wp_register_script() call.
 			'render_callback' => [ $this, 'block_render' ],
-		 ] );
+		] );
 
 		/**
 		 * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
@@ -245,6 +245,14 @@ class CiviCRM_Gutenberg_Blocks {
 			case 'user-dashboard':
 				return $this->render_user_dashboard( $atts );
 				break;
+
+			case 'pcp':
+				return $this->render_pcp( $atts );
+				break;
+
+			case 'petition':
+				return $this->render_petition( $atts );
+				break;
 		}
 
 	}
@@ -269,13 +277,21 @@ class CiviCRM_Gutenberg_Blocks {
 			$atts['mode']
 		];
 
-		$_REQUEST['gid'] = $atts['gid'];
+		$_GET['gid'] = $_REQUEST['gid'] = $atts['gid'];
 
 		ob_start();
+
 		try {
-			( new CRM_Profile_Page_Router )->run( $args );
+			if ( $atts['mode'] == 'view' ) {
+				( new CRM_Profile_Page_View )->run();
+			} elseif ( $atts['mode'] == 'search' ) {
+				$_GET['reset'] = 1;
+				( new CRM_Profile_Page_Listings )->run();
+			} else {
+				( new CRM_Profile_Page_Router )->run( $args );
+			}
 		} catch ( Exception $e ) {
-			// silence
+			return $e->getMessage();
 		}
 
 		return ob_get_clean();
@@ -304,8 +320,8 @@ class CiviCRM_Gutenberg_Blocks {
 				'CiviContribute',
 				CRM_Core_Action::ADD
 			) )->run();
-		} catch (Exception $e) {
-			// silence
+		} catch ( Exception $e ) {
+			return $e->getMessage();
 		}
 
 		return ob_get_clean();
@@ -332,12 +348,12 @@ class CiviCRM_Gutenberg_Blocks {
 
 		try {
 			if ( $atts['action'] == 'register' ) {
-				( new CRM_Event_Controller_Registration() )->run();
+				( new CRM_Event_Controller_Registration )->run();
 			} else {
 				( new CRM_Event_Page_EventInfo )->run();
 			}
 		} catch ( Exception $e ) {
-			// silence
+			return $e->getMessage();
 		}
 
 		return ob_get_clean();
@@ -359,9 +375,61 @@ class CiviCRM_Gutenberg_Blocks {
 		ob_start();
 
 		try {
-			( new CRM_Contact_Page_View_UserDashBoard() )->run();
+			( new CRM_Contact_Page_View_UserDashBoard )->run();
+		} catch ( Exception $e ) {
+			return $e->getMessage();
+		}
+
+		return ob_get_clean();
+
+	}
+
+
+
+	/**
+	 * Renders a PCP's html.
+	 *
+	 * @since 0.1
+	 *
+	 * @param array $atts The block attributes
+	 * @return string $html
+	 */
+	public function render_pcp( array $atts ) {
+
+		ob_start();
+
+		$_REQUEST['id'] = $atts['id'];
+
+		try {
+			( new CRM_PCP_Page_PCPInfo )->run();
+		} catch ( Exception $e ) {
+			return $e->getMessage();
+		}
+
+		return ob_get_clean();
+
+	}
+
+
+
+	/**
+	 * Renders a Petition's html.
+	 *
+	 * @since 0.1
+	 *
+	 * @param array $atts The block attributes
+	 * @return string $html
+	 */
+	public function render_petition( array $atts ) {
+
+		ob_start();
+
+		$_REQUEST['sid'] = $atts['id'];
+
+		try {
+			(new CRM_Utils_Wrapper )->run( 'CRM_Campaign_Form_Petition_Signature', 'Sign Petition', null );
 		} catch ( Exception $e ) {
-			// silence
+			return $e->getMessage();
 		}
 
 		return ob_get_clean();
@@ -520,6 +588,11 @@ class CiviCRM_Gutenberg_Blocks {
 			case 'user-dashboard':
 				$attributes = ['component' => 'user-dashboard', 'hijack' => $attributes['hijack']];
 				break;
+
+			case 'petition':
+			case 'pcp':
+				unset( $attributes['gid'], $attributes['action'] );
+				break;
 		}
 
 		return $attributes;
@@ -582,5 +655,3 @@ function civicrm_gutenberg_blocks() {
 
 // Init plugin.
 add_action( 'plugins_loaded', 'civicrm_gutenberg_blocks' );
-
-

package.json

@@ -4,13 +4,13 @@
   "license": "GPL-2.0-or-later",
   "main": "index.js",
   "devDependencies": {
-    "@wordpress/scripts": "^6.0.0"
+    "@wordpress/scripts": "^6.2.0"
   },
   "scripts": {
     "build": "wp-scripts build",
     "start": "wp-scripts start"
   },
   "dependencies": {
-    "react-select": "^3.0.8"
+    "react-select": "^3.1.0"
   }
 }

src/assets/blocks/civicrm-content/CiviCRMContentBlock.js

 import { __ } from '@wordpress/i18n'
 import { InspectorControls } from '@wordpress/block-editor'
+import { PanelBody } from '@wordpress/components'
 import ServerSideRender from '@wordpress/server-side-render'
 
 import ComponentControl from './components/ComponentControl'
@@ -7,6 +8,8 @@ import HijackControl from './components/HijackControl'
 import SelectProfileControl from './components/SelectProfileControl'
 import SelectEventControl from './components/SelectEventControl'
 import SelectContributionPageControl from './components/SelectContributionPageControl'
+import SelectPCPControl from './components/SelectPCPControl'
+import SelectPetitionControl from './components/SelectPetitionControl'
 import ProfileModeControl from './components/ProfileModeControl'
 import ModeControl from './components/ModeControl'
 import ActionControl from './components/ActionControl'
@@ -14,52 +17,80 @@ import ExtraAttributesListControl from './components/ExtraAttributesListControl'
 import NoPreview from './components/NoPreview'
 
 const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
-	const { component, gid, id, mode, action, hijack, extra_attributes } = attributes
-	const profileModes = ['create', 'edit', 'view', 'search']
-	const pageModes = ['live', 'test']
+    const {
+        component,
+        gid,
+        id,
+        mode,
+        action,
+        hijack,
+        extra_attributes,
+    } = attributes
+    const profileModes = ['create', 'edit', 'view', 'search']
+    const pageModes = ['live', 'test']
 
-	switch (component) {
-		case 'profile':
-			selectControl = <SelectProfileControl {...{ gid, setAttributes }} />
-			if (!profileModes.includes(mode)) setAttributes({ mode: 'create' })
-			break
+    switch (component) {
+        case 'profile':
+            selectControl = <SelectProfileControl {...{ gid, setAttributes }} />
+            if (!profileModes.includes(mode)) setAttributes({ mode: 'create' })
+            break
 
-		case 'event':
-			selectControl = <SelectEventControl {...{ id, setAttributes }} />
-			if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
-			break
+        case 'event':
+            selectControl = <SelectEventControl {...{ id, setAttributes }} />
+            if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
+            break
 
-		case 'contribution':
-			selectControl = <SelectContributionPageControl {...{ id, setAttributes }} />
-			if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
-			break
-	}
+        case 'contribution':
+            selectControl = (
+                <SelectContributionPageControl {...{ id, setAttributes }} />
+            )
+            if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
+            break
 
-	let selectControl,
-		profileModeControl = <ProfileModeControl {...{ mode, setAttributes }} />,
-		modeControl = <ModeControl {...{ mode, setAttributes }} />,
-		actionControl = <ActionControl {...{ action, setAttributes }} />
+        case 'pcp':
+            selectControl = <SelectPCPControl {...{ id, setAttributes }} />
+            if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
+            break
 
-	return (
-		<>
-			<InspectorControls key='inspector'>
-				<ComponentControl {...{ component, setAttributes }} />
-				{selectControl}
-				{component == 'profile' ? profileModeControl : ''}
-				{component == 'event' ? actionControl : ''}
-				{['event', 'contribution'].includes(component) ? modeControl : ''}
-				<HijackControl {...{ hijack, setAttributes }} />
-				<ExtraAttributesListControl {...{ extra_attributes, setAttributes }} />
-			</InspectorControls>
-			<ServerSideRender
-				block='civicrm/civicrm-content-block'
-				attributes={attributes}
-				className='civicrm-content-block'
-				ErrorResponsePlaceholder={NoPreview}
-				EmptyResponsePlaceholder={NoPreview}
-			/>
-		</>
-	)
+        case 'petition':
+            selectControl = <SelectPetitionControl {...{ id, setAttributes }} />
+            break
+    }
+
+    let selectControl,
+        profileModeControl = (
+            <ProfileModeControl {...{ mode, setAttributes }} />
+        ),
+        modeControl = <ModeControl {...{ mode, setAttributes }} />,
+        actionControl = <ActionControl {...{ action, setAttributes }} />
+
+    return (
+        <>
+            <InspectorControls key="inspector">
+                <PanelBody>
+                    <ComponentControl {...{ component, setAttributes }} />
+                    {selectControl}
+                    <span style={{ height: '10px', display: 'block' }}></span>
+                    {component == 'profile' ? profileModeControl : ''}
+                    {component == 'event' ? actionControl : ''}
+                    {['event', 'contribution', 'pcp'].includes(component)
+                        ? modeControl
+                        : ''}
+                    <HijackControl {...{ hijack, setAttributes }} />
+                </PanelBody>
+                <ExtraAttributesListControl
+                    {...{ extra_attributes, setAttributes }}
+                />
+            </InspectorControls>
+            <ServerSideRender
+                block="civicrm/civicrm-content-block"
+                attributes={attributes}
+                className="civicrm-content-block"
+                ErrorResponsePlaceholder={NoPreview}
+                EmptyResponsePlaceholder={NoPreview}
+            />
+        </>
+    )
 }
 
 export default CiviCRMContentBlock

src/assets/blocks/civicrm-content/components/ActionControl.js

 import { __ } from '@wordpress/i18n'
 import { RadioControl } from '@wordpress/components'
 
-const ActionControl = ({action, setAttributes}) => {
-	const onChangeAction = action => setAttributes({ action })
-  	const options = [
-		{ label: __('Event Info Page', 'civicrm'), value: 'info' },
-		{ label: __('Event Registration Page', 'civicrm'), value: 'register' },
-  	]
+const ActionControl = ({ action, setAttributes }) => {
+    const onChangeAction = (action) => setAttributes({ action })
+    const options = [
+        { label: __('Event Info Page', 'civicrm'), value: 'info' },
+        { label: __('Event Registration Page', 'civicrm'), value: 'register' },
+    ]
 
-  	return <RadioControl
-		label={__('Action', 'civicrm')}
-		value={action}
-		options={options}
-		selected={action || 'info'}
-		onChange={onChangeAction}
-  	/>
+    return (
+        <RadioControl
+            label={__('Action', 'civicrm')}
+            value={action}
+            options={options}
+            selected={action || 'info'}
+            onChange={onChangeAction}
+        />
+    )
 }
 
 export default ActionControl

src/assets/blocks/civicrm-content/components/ComponentControl.js

 import { __ } from '@wordpress/i18n'
-import { useState, useEffect } from "@wordpress/element";
+import { useState, useEffect } from '@wordpress/element'
 import { SelectControl } from '@wordpress/components'
 
 const ComponentControl = ({ component, setAttributes }) => {
-	const onChangeComponent = component => setAttributes({ component })
+    const onChangeComponent = (component) => setAttributes({ component })
 
-	const [components, setComponents] = useState([
-		{ label: __('User Dashboard', 'civicrm'), value: 'user-dashboard' },
-		{ label: __('Profile', 'civicrm'), value: 'profile' },
-		{ label: __('Contribution Page', 'civicrm'), value: 'contribution', component: 'CiviContribute' },
-		{ label: __('Event Page', 'civicrm'), value: 'event', component: 'CiviEvent' },
-		{ label: __('Petition', 'civicrm'), value: 'petition', component: 'CiviCampaign' },
-	])
+    const [components, setComponents] = useState([
+        { label: __('User Dashboard', 'civicrm'), value: 'user-dashboard' },
+        { label: __('Profile', 'civicrm'), value: 'profile' },
+        {
+            label: __('Contribution Page', 'civicrm'),
+            value: 'contribution',
+            component: 'CiviContribute',
+        },
+        {
+            label: __('Personal Campaign Page', 'civicrm'),
+            value: 'pcp',
+            component: 'CiviContribute',
+        },
+        {
+            label: __('Event Page', 'civicrm'),
+            value: 'event',
+            component: 'CiviEvent',
+        },
+        {
+            label: __('Petition', 'civicrm'),
+            value: 'petition',
+            component: 'CiviCampaign',
+        },
+    ])
 
-	useEffect(() => {
-		CRM.api4('Setting', 'get', {
-			select: ['enable_components']
-		})
-		.then(function(result) {
-			const setting = result[0]
-			if (!setting.value || !setting.value.length) return;
+    useEffect(() => {
+        CRM.api4('Setting', 'get', {
+            select: ['enable_components'],
+        }).then(function (result) {
+            const setting = result[0]
+            if (!setting.value || !setting.value.length) return
 
-			const filteredComponents = components.filter(component => {
-				const isEnabled = setting.value.includes(
-					component.component
-				);
-				return !component.component || isEnabled;
-			});
+            const filteredComponents = components.filter((component) => {
+                const isEnabled = setting.value.includes(component.component)
+                return !component.component || isEnabled
+            })
 
-			setComponents(filteredComponents)
-		})
-	}, [])
+            setComponents(filteredComponents)
+        })
+    }, [])
 
-	return <SelectControl
-		label={__('Component', 'civicrm')}
-		value={component}
-		options={components}
-		onChange={onChangeComponent}
-  	/>
+    return (
+        <SelectControl
+            label={__('Component', 'civicrm')}
+            value={component}
+            options={components}
+            onChange={onChangeComponent}
+        />
+    )
 }
 
 export default ComponentControl

src/assets/blocks/civicrm-content/components/ExtraAttributeItemControl.js

 import { __ } from '@wordpress/i18n'
 import { BaseControl, IconButton } from '@wordpress/components'
 
-const ExtraAttributeItemControl = ({ attribute, index, extra_attributes, setAttributes }) => {
+const ExtraAttributeItemControl = ({
+    attribute,
+    index,
+    extra_attributes,
+    setAttributes,
+}) => {
+    const updateAttribute = (e) => {
+        const newAttrs = [...extra_attributes]
+        newAttrs[index] = {
+            ...attribute,
+            [e.target.name]: e.target.value,
+        }
+        setAttributes({
+            extra_attributes: [...newAttrs],
+        })
+    }
 
-	const updateAttribute = e => {
-		const newAttrs = [...extra_attributes]
-		newAttrs[index] = {
-			...attribute,
-			[e.target.name]: e.target.value
-		}
-		setAttributes({
-			extra_attributes: [...newAttrs]
-		})
-	}
+    const deleteAttribute = () => {
+        const newAttrs = [...extra_attributes]
+        newAttrs.splice(index, 1)
+        setAttributes({
+            extra_attributes: [...newAttrs],
+        })
+    }
 
-	const deleteAttribute = () => {
-		const newAttrs = [...extra_attributes]
-		newAttrs.splice(index, 1)
-		setAttributes({
-			extra_attributes: [...newAttrs]
-		})
-	}
-
-	return <>
-		<strong>{__('Attribute', 'civicrm')} {index + 1}</strong>
-		<BaseControl label={__('Attribute name', 'civicrm')}>
-			<input
-				className='components-text-control__input'
-				type='text'
-				name='name'
-				value={attribute.name}
-				onChange={updateAttribute}
-			/>
-		</BaseControl>
-		<BaseControl label={__('Attribute value', 'civicrm')}>
-			<input
-				className='components-text-control__input'
-				type='text'
-				name='value'
-				value={attribute.value}
-				onChange={updateAttribute}
-			/>
-		</BaseControl>
-		<IconButton icon='trash' onClick={() => deleteAttribute()}>
-			{__('Delete attribute', 'civicrm')} {index + 1}
-		</IconButton>
-		<hr />
-	</>
+    return (
+        <>
+            <strong>
+                {__('Attribute', 'civicrm')} {index + 1}
+            </strong>
+            <BaseControl label={__('Attribute name', 'civicrm')}>
+                <input
+                    className="components-text-control__input"
+                    type="text"
+                    name="name"
+                    value={attribute.name}
+                    onChange={updateAttribute}
+                />
+            </BaseControl>
+            <BaseControl label={__('Attribute value', 'civicrm')}>
+                <input
+                    className="components-text-control__input"
+                    type="text"
+                    name="value"
+                    value={attribute.value}
+                    onChange={updateAttribute}
+                />
+            </BaseControl>
+            <IconButton icon="trash" onClick={() => deleteAttribute()}>
+                {__('Delete attribute', 'civicrm')} {index + 1}
+            </IconButton>
+            <hr />
+        </>
+    )
 }
 
 export default ExtraAttributeItemControl

src/assets/blocks/civicrm-content/components/ExtraAttributesListControl.js

@@ -3,36 +3,48 @@ import { PanelBody, PanelRow, IconButton } from '@wordpress/components'
 import ExtraAttributeItemControl from './ExtraAttributeItemControl'
 
 const ExtraAttributesListControl = ({ extra_attributes, setAttributes }) => {
+    const addAttribute = () => {
+        setAttributes({
+            extra_attributes: [
+                ...extra_attributes,
+                {
+                    name: '',
+                    value: '',
+                },
+            ],
+        })
+    }
 
-	const addAttribute = () => {
-		setAttributes({
-			extra_attributes: [
-				...extra_attributes,
-				{
-					name: '',