← All changes | blocks/donation-form-grid/edit/inspector.js +320 -44 2.3.0 → 4.18.0.1 View file →

		@@ -1,60 +1,336 @@
1	1	/**
2	2	* WordPress dependencies
3	3	*/
4		-const { __ } = wp.i18n;
5		-const { InspectorControls } = wp.editor;
6		-const { PanelBody, SelectControl, ToggleControl } = wp.components;
	4	+import {__} from '@wordpress/i18n'
	5	+import { select } from '@wordpress/data';
	6	+import {InspectorControls, PanelColorSettings, store } from '@wordpress/block-editor';
	7	+import {
	8	+ ColorPalette,
	9	+ FormTokenField, Panel,
	10	+ PanelBody,
	11	+ SelectControl,
	12	+ TextControl,
	13	+ ToggleControl,
	14	+} from '@wordpress/components';
7	15
	16	+
8	17	/**
9	18	* Internal dependencies
10	19	*/
11	20	import giveFormOptions from '../data/options';
12	21
	22	+import ColumnSelector from '../../components/column-selector';
	23	+
	24	+import './style.scss'
	25	+
13	26	/**
14	27	* Render Inspector Controls
15		-*/
	28	+ */
16	29
17		-const Inspector = ( { attributes, setAttributes } ) => {
18		- const { columns, showExcerpt, showGoal, showFeaturedImage, displayType } = attributes;
19		- const saveSetting = ( name, value ) => {
20		- setAttributes( {
21		- [ name ]: value,
22		- } );
23		- };
	30	+const Inspector = ({attributes, setAttributes}) => {
	31	+ const {
	32	+ formsPerPage,
	33	+ paged,
	34	+ imageSize,
	35	+ imageHeight,
	36	+ formIDs,
	37	+ excludeForms,
	38	+ excludedFormIDs,
	39	+ orderBy,
	40	+ order,
	41	+ categories,
	42	+ tags,
	43	+ columns,
	44	+ showTitle,
	45	+ showExcerpt,
	46	+ excerptLength,
	47	+ showGoal,
	48	+ showFeaturedImage,
	49	+ showDonateButton,
	50	+ tagBackgroundColor,
	51	+ donateButtonTextColor,
	52	+ displayType,
	53	+ filterOptions,
	54	+ tagTextColor,
	55	+ imageHeightOptions,
	56	+ progressBarColor
	57	+ } = attributes;
24	58
25		- return (
26		- <InspectorControls key="inspector">
27		- <PanelBody title={ __( 'Settings' ) }>
28		- <SelectControl
29		- label={ __( 'Columns' ) }
30		- name="columns"
31		- value={ columns }
32		- options={ giveFormOptions.columns }
33		- onChange={ ( value ) => saveSetting( 'columns', value ) } />
34		- <ToggleControl
35		- name="showExcerpt"
36		- label={ __( 'Show Excerpt' ) }
37		- checked={ !! showExcerpt }
38		- onChange={ ( value ) => saveSetting( 'showExcerpt', value ) } />
39		- <ToggleControl
40		- name="showGoal"
41		- label={ __( 'Show Goal' ) }
42		- checked={ !! showGoal }
43		- onChange={ ( value ) => saveSetting( 'showGoal', value ) } />
44		- <ToggleControl
45		- name="showFeaturedImage"
46		- label={ __( 'Show Featured Image' ) }
47		- checked={ !! showFeaturedImage }
48		- onChange={ ( value ) => saveSetting( 'showFeaturedImage', value ) } />
49		- <SelectControl
50		- label={ __( 'Display Type' ) }
51		- name="displayType"
52		- value={ displayType }
53		- options={ giveFormOptions.displayType }
54		- onChange={ ( value ) => saveSetting( 'displayType', value ) } />
55		- </PanelBody>
56		- </InspectorControls>
57		- );
	59	+ const saveSetting = (name, value) => {
	60	+ setAttributes({
	61	+ [name]: value,
	62	+ });
	63	+ };
	64	+
	65	+ const getAsArray = value => {
	66	+ if (Array.isArray(value)) {
	67	+ return value;
	68	+ }
	69	+
	70	+ // Backward compatibility
	71	+ if (formIDs.indexOf(',')) {
	72	+ return value.split(',');
	73	+ }
	74	+
	75	+ return [value];
	76	+ };
	77	+
	78	+ const getImageSizes = () => select(store).getSettings().imageSizes.map(({slug, name}) => {
	79	+ return {
	80	+ value: slug,
	81	+ label: name
	82	+ };
	83	+ });
	84	+
	85	+ const handleImageOptions = (value) => {
	86	+ saveSetting('imageHeightOptions', value)
	87	+ saveSetting('imageHeight', value)
	88	+ }
	89	+
	90	+ const filterValue = () => {
	91	+ if (filterOptions === 'categories') {
	92	+ return <>
	93	+ <FormTokenField
	94	+ className="give-form-grid-inspector__filter"
	95	+ name="categories"
	96	+ value={getAsArray(categories)}
	97	+ onChange={(value) => saveSetting('categories', value)}
	98	+ />
	99	+
	100	+ <p className="components-form-token-field__help">
	101	+ {__('Type the name of your category to add it to the list. Only forms within the categories you choose will be displayed in this grid.', 'give')}
	102	+ </p>
	103	+ </>
	104	+ } else if (filterOptions === 'tags') {
	105	+ return <>
	106	+ <FormTokenField
	107	+ className="give-form-grid-inspector__filter"
	108	+ name="tags"
	109	+ value={getAsArray(tags)}
	110	+ onChange={(value) => saveSetting('tags', value)}
	111	+ />
	112	+
	113	+ <p className="components-form-token-field__help">
	114	+ {__('Type the name of your tag to add it to the list. Only forms with these tags you choose will be displayed in this grid.', 'give')}
	115	+ </p></>
	116	+ } else if (filterOptions === 'formIDs'){
	117	+ return <>
	118	+ <FormTokenField
	119	+ className="give-form-grid-inspector__filter"
	120	+ name="formIDs"
	121	+ value={getAsArray(formIDs)}
	122	+ onChange={(value) => saveSetting('formIDs', value)}
	123	+ />
	124	+
	125	+ <p className="components-form-token-field__help">
	126	+ {__('Type the ID of your form to add it to the list. Only forms with these IDs you choose will be displayed in this grid.', 'give')}
	127	+ </p></>
	128	+ }
	129	+ }
	130	+
	131	+ return (
	132	+ <InspectorControls key="inspector">
	133	+ <Panel>
	134	+ <PanelBody title= {__('Layout', 'give')} initialOpen={ true }>
	135	+ <ColumnSelector
	136	+ label={__('Columns', 'give')}
	137	+ selected={columns}
	138	+ onClick={(value) => saveSetting('columns', value)}
	139	+ help={__('Controls how many columns of the Form Grid appear. "Best Fit" will adjust responsively to the space available.', 'give')}
	140	+ />
	141	+ <SelectControl
	142	+ label={ __( 'Columns', 'give' ) }
	143	+ name="columns"
	144	+ value={ columns }
	145	+ options={ giveFormOptions.columns }
	146	+ onChange={ ( value ) => saveSetting( 'columns', value ) } />
	147	+ </PanelBody>
	148	+ </Panel>
	149	+ <Panel>
	150	+ <PanelBody title= {__('Display Elements', 'give')} initialOpen={ true }>
	151	+ <ToggleControl
	152	+ className="give-form-grid-inspector"
	153	+ name="showTitle"
	154	+ label={__('Show Title', 'give')}
	155	+ checked={!!showTitle}
	156	+ onChange={(value) => saveSetting('showTitle', value)}/>
	157	+ <ToggleControl
	158	+ className="give-form-grid-inspector"
	159	+ name="showGoal"
	160	+ label={__('Show Goal', 'give')}
	161	+ checked={!!showGoal}
	162	+ onChange={(value) => saveSetting('showGoal', value)}
	163	+ />
	164	+ <ToggleControl
	165	+ className="give-form-grid-inspector"
	166	+ name="showExcerpt"
	167	+ label={__('Show Excerpt', 'give')}
	168	+ checked={!!showExcerpt}
	169	+ onChange={(value) => saveSetting('showExcerpt', value)}
	170	+ />
	171	+ <ToggleControl
	172	+ className="give-form-grid-inspector"
	173	+ name="showDonateButton"
	174	+ label={__('Show Donate Button', 'give')}
	175	+ checked={!!showDonateButton}
	176	+ onChange={(value) => saveSetting('showDonateButton', value)}
	177	+ />
	178	+ <ToggleControl
	179	+ className="give-form-grid-inspector"
	180	+ align="right"
	181	+ name="showFeaturedImage"
	182	+ label={__('Show Featured Image', 'give')}
	183	+ checked={!!showFeaturedImage}
	184	+ onChange={(value) => saveSetting('showFeaturedImage', value)}
	185	+ />
	186	+ {showFeaturedImage && (
	187	+ <>
	188	+ <SelectControl
	189	+ className="give-form-grid-inspector"
	190	+ name="imageSize"
	191	+ label={__('Image Size', 'give')}
	192	+ value={imageSize}
	193	+ options={getImageSizes()}
	194	+ onChange={(value) => saveSetting('imageSize', value)}
	195	+ />
	196	+ <SelectControl
	197	+ className="give-form-grid-inspector"
	198	+ name="imageHeightOptions"
	199	+ label={__('Image Height', 'give')}
	200	+ value={imageHeightOptions}
	201	+ options={giveFormOptions.imageHeight}
	202	+ onChange={(value) => handleImageOptions(value)}
	203	+ />
	204	+
	205	+ {imageHeightOptions === 'custom' && <TextControl
	206	+ className="give-form-grid-inspector__filter" name="imageHeight"
	207	+ value={imageHeight}
	208	+ onChange={(value) => saveSetting('imageHeight', value)}
	209	+ help={__('Featured image height. Default "auto". Accepts valid heights in px, em, or rem.', 'give')}/>
	210	+ }
	211	+ </>
	212	+ )}
	213	+ </PanelBody>
	214	+ </Panel>
	215	+ <Panel>
	216	+ <PanelBody className="give-donation-form-grid--grid-settings" title= {__('Grid Settings', 'give')} initialOpen={ true }>
	217	+ <SelectControl
	218	+ className="give-form-grid-inspector"
	219	+ label={__('Order By', 'give')}
	220	+ name="orderBy"
	221	+ value={orderBy}
	222	+ options={giveFormOptions.orderBy}
	223	+ onChange={(value) => saveSetting('orderBy', value)}
	224	+ help={__('The order forms are displayed in.', 'give')}
	225	+ />
	226	+
	227	+ <SelectControl
	228	+ className="give-form-grid-inspector"
	229	+ label={__('Order', 'give')}
	230	+ name="order"
	231	+ value={order}
	232	+ options={giveFormOptions.order}
	233	+ onChange={(value) => saveSetting('order', value)}
	234	+ help={__('Whether the order ascends or descends.', 'give')}
	235	+ />
	236	+ <SelectControl
	237	+ className="give-form-grid-inspector"
	238	+ label={ __( 'Filter', 'give' ) }
	239	+ name="filter" value={filterOptions}
	240	+ options={ giveFormOptions.filter }
	241	+ onChange={ ( value ) => saveSetting( 'filterOptions', value ) } />
	242	+
	243	+ {filterValue(filterOptions)}
	244	+
	245	+ <ToggleControl
	246	+ className="give-form-grid-inspector exclude__form"
	247	+ name="excludeForms"
	248	+ label={__('Exclude specific forms?', 'give')}
	249	+ checked={!!excludeForms}
	250	+ onChange={(value) => saveSetting('excludeForms', value)}
	251	+ />
	252	+
	253	+ {excludeForms && (
	254	+ <>
	255	+ <FormTokenField
	256	+ name="excludedFormIDs"
	257	+ label={__('Excluded Form IDs', 'give')}
	258	+ value={getAsArray(excludedFormIDs)}
	259	+ onChange={(value) => saveSetting('excludedFormIDs', value)}
	260	+ />
	261	+ <p className="components-form-token-field__help">
	262	+ {__('Type the ID of your form to exclude it from the list. Forms with these IDs you choose will not be displayed in this grid.', 'give')}
	263	+ </p>
	264	+ </>
	265	+ )}
	266	+ </PanelBody>
	267	+ </Panel>
	268	+ <Panel>
	269	+ <PanelBody title= {__('Grid Interaction', 'give')} initialOpen={ true }>
	270	+ <SelectControl
	271	+ className="give-form-grid-inspector"
	272	+ label={__('Display Type', 'give')}
	273	+ name="displayType"
	274	+ value={displayType}
	275	+ options={giveFormOptions.displayType}
	276	+ onChange={(value) => saveSetting('displayType', value)}
	277	+ />
	278	+ {displayType === 'redirect' ?
	279	+ <p className="give-form-grid-inspector__help">
	280	+ {__('Users will be redirected to the donation form page.', 'give')}
	281	+ </p> :
	282	+ <p className="give-form-grid-inspector__help">
	283	+ {__('Modal with the donation form will be displayed on the same page.', 'give')}
	284	+ </p>
	285	+ }
	286	+ <TextControl
	287	+ className="give-form-grid-inspector"
	288	+ name="formsPerPage"
	289	+ label={__('Forms Per Page', 'give')}
	290	+ value={formsPerPage}
	291	+ onChange={(value) => saveSetting('formsPerPage', value)}
	292	+ help={__('Sets the number of forms to be displayed on the first page load.', 'give')}
	293	+ />
	294	+ <ToggleControl
	295	+ className="give-form-grid-inspector"
	296	+ name="paged"
	297	+ label={__('Show Pagination', 'give')}
	298	+ checked={!!paged}
	299	+ onChange={(value) => saveSetting('paged', value)}
	300	+ help={__('Enable form display to multiple pages.', 'give')}
	301	+ />
	302	+ </PanelBody>
	303	+ </Panel>
	304	+ <PanelColorSettings
	305	+ title={ __( 'Color Settings', 'give' ) }
	306	+ colorSettings={ [
	307	+ {
	308	+ value: tagBackgroundColor
	309	+, onChange: (value) => saveSetting('tagBackgroundColor', value),
	310	+ label: __('Tag Background Color', 'give')
	311	+
	312	+ },
	313	+ {
	314	+ value: tagTextColor,
	315	+ onChange: (value) => saveSetting('tagTextColor', value),
	316	+ label: __('Tag Text Color', 'give')
	317	+ },
	318	+ {
	319	+ value: donateButtonTextColor,
	320	+ onChange: (value) => saveSetting('donateButtonTextColor', value),
	321	+ label: __('Donate Button Text Color', 'give')
	322	+ },
	323	+ {
	324	+ value: progressBarColor,
	325	+ onChange: (value) => saveSetting('progressBarColor', value),
	326	+ label: __('Progress Bar Color', 'give')
	327	+ },
	328	+
	329	+ ] }
	330	+ />
	331	+
	332	+ </InspectorControls>
	333	+ );
58	334	};
59	335
60	336	export default Inspector;