| Server IP : 46.105.57.169 / Your IP : 216.73.216.67 Web Server : Apache System : Linux webm002.cluster120.gra.hosting.ovh.net 6.18.42-ovh-vps-grsec-zfs+ #1 SMP PREEMPT_DYNAMIC Wed Aug 5 15:59:48 CEST 2026 x86_64 User : verseaumee ( 152031) PHP Version : 8.5.7 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/verseaumee/blueversion/wp-content/plugins/wc-donation-platform/src/ |
Upload File : |
/**
* Register wc-donation-platform/wcdp Gutenberg block
*/
import { registerBlockType } from '@wordpress/blocks';
const {__} = wp.i18n; //translation functions
const {
InspectorControls,
} = wp.blockEditor;
const {
PanelBody,
ToggleControl,
TextControl,
SelectControl,
} = wp.components;
const { Fragment } = wp.element;
import {useBlockProps} from "@wordpress/block-editor";
/**
* Register Gutenberg Block
*/
registerBlockType( 'wc-donation-platform/wcdp', {
attributes: {
id: {
default: 1,
},
style: {
default: '1'
},
popup: {
default: false
},
button: {
default: true
},
title: {
default: false
},
description: {
default: false
},
short_description: {
default: false
},
image: {
default: false
}
},
//Edit Function
edit(props){
const {
attributes,
className,
setAttributes,
} = props;
const { id, style, popup, button, title, description, short_description, image} = attributes;
function changeId( newId ) {
setAttributes( { id: newId } );
}
function changeStyle( newStyle ) {
setAttributes( { style: newStyle } );
}
function changePopup( newPopup ) {
setAttributes( { popup: newPopup } );
}
function changeButton( newButton ) {
setAttributes( { button: newButton } );
}
function changeTitle( newTitle ) {
setAttributes( { title: newTitle } );
}
function changeDescription( newDescription ) {
setAttributes( { description: newDescription } );
}
function changeShort_description( newShort_description ) {
setAttributes( { short_description: newShort_description } );
}
function changeImage( newImage ) {
setAttributes( { image: newImage } );
}
//Display block preview and UI
return (
<Fragment>
<InspectorControls>
<PanelBody title={ __( 'General Settings', 'wc-donation-platform' ) }>
<TextControl
label="Product ID"
value={ id }
type="number"
onChange={ changeId }
/>
<SelectControl
label={ __( 'Donation Form Style', 'wc-donation-platform' ) }
value={ style }
options={ [
{ label: __( 'Style 1 (3 steps, progress header)', 'wc-donation-platform' ), value: '1' },
{ label: __( 'Style 2 (one page)', 'wc-donation-platform' ), value: '2' },
{ label: __( 'Style 3 (3 steps, no header)', 'wc-donation-platform' ), value: '3' },
{ label: __( 'Style 4 (just first step)', 'wc-donation-platform' ), value: '4' },
{ label: __( 'Style 5 (Banner Header)', 'wc-donation-platform' ), value: '5' },
] }
onChange={ changeStyle }
/>
<ToggleControl
label={ __( 'Display in a popup?', 'wc-donation-platform' ) }
checked={ popup }
onChange={ changePopup }
/>
<ToggleControl
label={ __( 'Display a open popup button?', 'wc-donation-platform' ) }
checked={ button }
help={ __( 'Applies only if popup is enabled', 'wc-donation-platform' ) }
onChange={ changeButton }
/>
<ToggleControl
label={ __( 'Display the product title?', 'wc-donation-platform' ) }
checked={ title }
onChange={ changeTitle }
/>
<ToggleControl
label={ __( 'Display description?', 'wc-donation-platform' ) }
checked={ description }
onChange={ changeDescription }
/>
<ToggleControl
label={ __( 'Display short description?', 'wc-donation-platform' ) }
checked={ short_description }
onChange={ changeShort_description }
/>
<ToggleControl
label={ __( 'Display product image?', 'wc-donation-platform' ) }
checked={ image }
onChange={ changeImage }
/>
</PanelBody>
</InspectorControls>
<p { ...useBlockProps() }>
{ __( 'Your donation form will be displayed here.', 'wc-donation-platform' ) }
</p>
</Fragment>
)
},
save(){
return null; //Server Side Render -> Callback function
}
} );