Add event ticket block

plugins/tickets/src/modules/blocks/index.js

@@ -8,9 +8,11 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import { initStore } from '@moderntribe/tickets/data';
 import tickets from '@moderntribe/tickets/blocks/tickets';
+import ticket from '@moderntribe/tickets/blocks/ticket';
 
 const blocks = [
 	tickets,
+	ticket,
 ];
 
 blocks.forEach( ( block ) => registerBlockType( `tribe/${ block.id }`, block ) );

plugins/tickets/src/modules/blocks/ticket/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Single ticket block declaration Block declaration 1`] = `
+Object {
+  "attributes": Object {},
+  "category": "tribe-tickets",
+  "description": "Entry for ticket",
+  "edit": [Function],
+  "icon": [Function],
+  "id": "event-tickets-ticket",
+  "keywords": Array [
+    "event",
+    "events-tickets",
+    "tribe",
+  ],
+  "parent": Array [
+    "tribe/event-tickets",
+  ],
+  "save": [Function],
+  "supports": Object {
+    "html": false,
+  },
+  "title": "Event Ticket",
+}
+`;

plugins/tickets/src/modules/blocks/ticket/__tests__/index.test.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import TicketBlock from '@moderntribe/tickets/blocks/ticket';
+
+describe( 'Single ticket block declaration', () => {
+	test( 'Block declaration', () => {
+		expect( TicketBlock ).toMatchSnapshot();
+	} );
+} );

plugins/tickets/src/modules/blocks/ticket/index.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon } from '@moderntribe/common/elements';
+
+export default {
+	id: 'event-tickets-ticket',
+	title: __( 'Event Ticket', 'events-gutenberg' ),
+	description: __( 'Entry for ticket', 'events-gutenberg' ),
+	icon: BlockIcon,
+	category: 'tribe-tickets',
+	keywords: [ 'event', 'events-tickets', 'tribe' ],
+
+	parent: [ 'tribe/event-tickets' ],
+
+	supports: {
+		html: false,
+	},
+
+	attributes: {},
+
+	edit: ( { clientId })  => <div>Ticket { clientId }</div>,
+	save: () => null,
+};

plugins/tickets/src/modules/blocks/tickets/Container.js

@@ -27,6 +27,7 @@ const mapStateToProps = ( state, props ) => ( {
 		<ActionButton icon={ <UserIcon /> }>Attendees </ActionButton>,
 		<ActionButton icon={ <TagIcon /> }>Orders</ActionButton>,
 	],
+	allowedBlockTypes: [ 'tribe/event-tickets', 'tribe/event-tickets-ticket',  'core/image' ],
 } );
 
 export default compose(

plugins/tickets/src/modules/blocks/tickets/Template.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { InnerBlocks } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -31,6 +32,11 @@ const TicketsTemplate = ( props ) => {
 		total,
 		footerActions,
 		footerConfirmLabel,
+		// @todo limit the usage of the available blocks for this one, however at this point the
+		// appender button is only available on the paragraph block
+		// see https://github.com/WordPress/gutenberg/issues/8589 once is resolved we should be able
+		// to address this one and limit this to only this property
+		allowedBlockTypes,
 	} = props;
 
 	const availability = isSelected && (
@@ -52,6 +58,7 @@ const TicketsTemplate = ( props ) => {
 			) }
 		>
 			<div className="tribe-editor__tickets-body">
+				<InnerBlocks />
 				<DisabledTickets title={ disabled.title }>
 					{ disabled.description }
 				</DisabledTickets>
@@ -66,12 +73,14 @@ TicketsTemplate.propTypes = {
 	isSelected: PropTypes.bool,
 	footerActions: PropTypes.arrayOf( PropTypes.node ),
 	footerConfirmLabel: PropTypes.string,
+	allowedBlockTypes: PropTypes.arrayOf( PropTypes.string ),
 }
 
 TicketsTemplate.defaultProps = {
 	isSelected: false,
 	footerActions: [],
 	footerConfirmLabel: __( 'Add Tickets', 'events-gutenberg' ),
+	allowedBlockTypes: [],
 }
 
 export default TicketsTemplate;

plugins/tickets/src/modules/blocks/tickets/index.js

@@ -15,10 +15,7 @@ import TicketsBlock from './Container';
 export default {
 	id: 'event-tickets',
 	title: __( 'Event Tickets', 'events-gutenberg' ),
-	description: __(
-		'Basic ticket functionality',
-		'events-gutenberg',
-	),
+	description: __( 'Basic ticket functionality', 'events-gutenberg' ),
 	icon: BlockIcon,
 	category: 'tribe-tickets',
 	keywords: [ 'event', 'events-gutenberg', 'tribe' ],