jonwaldstein · tjdownes · Mar 27, 2022 · Mar 27, 2022
diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'c17b2ebfd7e2d5b350a1840699ee3d08');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'eb39fd2b6993e9848e4ed03f7a7a5db2');
diff --git a/build/index.js b/build/index.js
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,20 +14,20 @@
 		"packages-update": "wp-scripts packages-update"
 	},
 	"devDependencies": {
-		"@wordpress/eslint-plugin": "^4.0.0",
-		"@wordpress/i18n": "^3.16.0",
-		"@wordpress/scripts": "^7.1.3",
-		"css-loader": "^3.4.2",
-		"cssnano": "^4.1.10",
+		"@wordpress/eslint-plugin": "^11.1.0",
+		"@wordpress/i18n": "^4.5.0",
+		"@wordpress/scripts": "^8.0.0",
+		"css-loader": "^3.6.0",
+		"cssnano": "^4.1.11",
 		"postcss-loader": "^3.0.0",
-		"postcss-nested": "^4.2.1",
-		"style-loader": "^1.1.3"
+		"postcss-nested": "^4.2.3",
+		"style-loader": "^1.3.0"
 	},
 	"dependencies": {
-		"@tippyjs/react": "^4.0.0-alpha.4",
-		"axios": "^0.19.2",
-		"classnames": "^2.2.6",
-		"prop-types": "^15.7.2",
-		"tailwindcss": "^1.2.0"
+		"@tippyjs/react": "^4.2.6",
+		"axios": "^0.26.1",
+		"classnames": "^2.3.1",
+		"prop-types": "^15.8.1",
+		"tailwindcss": "^1.9.6"
 	}
 }
diff --git a/src/blocks/event-cards/attributes.js b/src/blocks/event-cards/attributes.js
@@ -44,4 +44,8 @@ export default {
 		type: 'number',
 		default: 50,
 	},
+	itemJustification: {
+		type: 'string',
+		default: 'center',
+	},
 };
diff --git a/src/components/EditBlock.js b/src/components/EditBlock.js
@@ -1,4 +1,4 @@
-import { Fragment, useState } from '@wordpress/element';
+import { React, Fragment, useState } from '@wordpress/element';
 import {
 	SelectControl,
 	TextControl,
@@ -9,15 +9,18 @@ import {
 	Button,
 	Spinner,
 	Dashicon,
+	Icon,
+	close,
 } from '@wordpress/components';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, BlockControls, JustifyContentControl } from '@wordpress/block-editor';
 import { dispatch, select } from '@wordpress/data';
 import axios from 'axios';
 import { __ } from '@wordpress/i18n';
 import { getLocalizeData } from '../utilities';
 import Event from '../components/Event';
 import styles from '../style.module.css';
 import classNames from 'classnames/bind';
+import EventList from "./EventList";
 
 const cx = classNames.bind( styles );
 
@@ -35,6 +38,7 @@ export default function EditBlock( { attributes, setAttributes } ) {
 		timeFormat,
 		nameFilter,
 		pageSize,
+		itemJustification,
 	} = attributes;
 
 	const [ apiKeyState, setApiKeyState ] = useState( apiKey );
@@ -44,6 +48,99 @@ export default function EditBlock( { attributes, setAttributes } ) {
 
 	const defaultColors = [ { name: 'orange', color: '#d6472b' } ];
 
+	const mockEvents = [
+		{
+			id: '1',
+			name: {
+				text: 'Test Event 1'
+			},
+			url: 'http://example.com',
+			description: {
+				text: 'Test description'
+			},
+			summary: 'Test summary',
+			ticket_classes: [
+				{
+					cost: {
+						display: '$25',
+					}
+				}
+			],
+			start: {
+				local: new Date(2022,3, 26).toString(),
+			},
+			logo: {
+				original: {
+					url: assets?.placeholderImage
+						? assets?.placeholderImage
+						: 'https://placekitten.com/500/500'
+				}
+			},
+			status: 'live',
+			venue: {
+				name: 'Test Venue',
+				address: {
+					city: 'Providence',
+					region: 'RI',
+				}
+			},
+		},
+		{
+			id: '2',
+			name: {
+				text: 'Test Event 2'
+			},
+			url: 'http://example.com',
+			description: {
+				text: 'Test 2 description'
+			},
+			summary: 'Test summary',
+			ticket_classes: [
+				{
+					cost: {
+						display: '$65',
+					}
+				}
+			],
+			start: {
+				local: new Date(2022,9, 14).toString(),
+			},
+			logo: {
+				original: {
+					url: assets?.placeholderImage
+						? assets?.placeholderImage
+						: 'https://placekitten.com/500/500'
+				}
+			},
+			status: 'live',
+			venue: {
+				name: 'Test Venue',
+				address: {
+					city: 'Providence',
+					region: 'RI',
+				}
+			},
+		},
+	]
+
+	const setJustificationAttribute = (value) => {
+		let justification;
+		switch(value) {
+			case 'left':
+				justification = 'start';
+				break;
+			case 'right':
+				justification = 'end';
+				break;
+			case 'space-between':
+				justification = 'between';
+				break;
+			default:
+				justification = value;
+		}
+		setAttributes( { itemJustification: justification } );
+	}
+
 	const testApiKey = () => {
 		setApiKeyLoading( true );
 		axios
@@ -76,7 +173,7 @@ export default function EditBlock( { attributes, setAttributes } ) {
 							label="Api Token Key"
 							value={ apiKeyState }
 							help={
-								<p>
+								<>
 									{ __(
 										'Get api token',
 										'blocks-for-eventbrite'
@@ -92,29 +189,25 @@ export default function EditBlock( { attributes, setAttributes } ) {
 											'blocks-for-eventbrite'
 										) }
 									</a>
-								</p>
+								</>
 							}
 							onChange={ ( newApiKey ) => {
 								setApiKeyState( newApiKey );
 							} }
 						/>
 					</PanelRow>
 					{ apiKeyError && (
-						<PanelRow>
-							<p className={ cx( 'text-red-700' ) }>
-								{ apiKeyError }
-							</p>
+						<PanelRow className={ cx( 'text-red-700' ) }>
+							{ apiKeyError }
 						</PanelRow>
 					) }
 					{ organizationName && (
-						<PanelRow>
-							<p className={ cx( 'text-green-700' ) }>
-								{ __(
-									'Organization name',
-									'blocks-for-eventbrite'
-								) }
-								: { organizationName }
-							</p>
+						<PanelRow className={ cx( 'text-green-700' ) }>
+							{ __(
+								'Organization name',
+								'blocks-for-eventbrite'
+							) }
+							: { organizationName }
 						</PanelRow>
 					) }
 					<PanelRow>
@@ -254,6 +347,47 @@ export default function EditBlock( { attributes, setAttributes } ) {
 						/>
 					</PanelRow>
 				</PanelBody>
+				<PanelBody title="Eventbrite Event Layout">
+					<PanelRow>
+						<SelectControl
+							label="Position"
+							value={ itemJustification }
+							options={ [
+								{
+									label: __(
+										'Left',
+										'blocks-for-eventbrite'
+									),
+									value: 'left',
+								},
+								{
+									label: __(
+										'Right',
+										'blocks-for-eventbrite'
+									),
+									value: 'right',
+								},,
+								{
+									label: __(
+										'Center',
+										'blocks-for-eventbrite'
+									),
+									value: 'center',
+								},,
+								{
+									label: __(
+										'Space Between',
+										'blocks-for-eventbrite'
+									),
+									value: 'space-between',
+								},
+							] }
+							onChange={ ( next ) => {
+								setJustificationAttribute(next);
+							} }
+						/>
+					</PanelRow>
+				</PanelBody>
 				<PanelBody
 					title={ __(
 						'Eventbrite Button Settings',
@@ -348,7 +482,14 @@ export default function EditBlock( { attributes, setAttributes } ) {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
-
+			<BlockControls>
+				<JustifyContentControl
+					value={ itemJustification }
+					onChange={ ( next ) => {
+						setJustificationAttribute(next);
+					} }
+				/>
+			</BlockControls>
 			<Fragment>
 				{ ! apiKey ? (
 					<div
@@ -364,7 +505,6 @@ export default function EditBlock( { attributes, setAttributes } ) {
 						<div
 							className={ cx(
 								'p-2',
-								'items-center',
 								'text-indigo-100',
 								'bg-red-800',
 								'lg:rounded-full',
@@ -392,46 +532,8 @@ export default function EditBlock( { attributes, setAttributes } ) {
 						</div>
 					</div>
 				) : (
-					<div className="blocks-for-eventbrite-css-wrapper">
-						<p className={ cx( 'font-sans', 'text-center' ) }>
-							{ __(
-								'This is a static preview of how your event card will look.  Each event pulled from your Eventbrite account will be displayed in this format on the frontend of your website.',
-								'blocks-for-eventbrite'
-							) }
-						</p>
-						<Event
-							className={ cx( 'mx-auto' ) }
-							title={ __(
-								'Event Title',
-								'blocks-for-eventbrite'
-							) }
-							description={ 'Event description' }
-							summary={ 'Event description summary' }
-							cost={ '$25' }
-							startDate={ new Date() }
-							dateFormat={ dateFormat }
-							timeFormat={ timeFormat }
-							image={
-								assets?.placeholderImage
-									? assets?.placeholderImage
-									: 'https://placekitten.com/500/500'
-							}
-							status={ 'live' }
-							colors={ {
-								signUpButtonBackgroundColor,
-							} }
-							signUpButtonText={ signUpButtonText }
-							venue={ {
-								name: __(
-									'Venue name',
-									'blocks-for-eventbrite'
-								),
-								address: {
-									city: 'Providence',
-									region: 'RI',
-								},
-							} }
-						/>
+					<div className={cx('flex', 'flex-row', 'blocks-for-eventbrite-css-wrapper', 'items-center' )}>
+						<EventList events={ mockEvents } attributes={ attributes } />
 					</div>
 				) }
 			</Fragment>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'c17b2ebfd7e2d5b350a1840699ee3d08');
		<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'eb39fd2b6993e9848e4ed03f7a7a5db2');