Eventbrite Block: refactor Edit component to function (#36739)

* Eventbrite Block: refactor Edit component to function

* Add missing export

projects/plugins/jetpack/changelog/update-bump-block-api-version-2

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Eventbrite Block: refactor Edit component to function

projects/plugins/jetpack/extensions/blocks/eventbrite/controls.js

@@ -1,5 +1,26 @@
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import BlockStylesSelector from '../../shared/components/block-styles-selector';
+import EventbriteInPageExample from './eventbrite-in-page-example.png';
+
+const embedTypes = [
+	{
+		value: 'inline',
+		label: __( 'In-page Embed', 'jetpack' ),
+		preview: (
+			<div className="block-editor-block-preview__container">
+				<img
+					src={ EventbriteInPageExample }
+					alt={ __( 'In page Eventbrite checkout example', 'jetpack' ) }
+				/>
+			</div>
+		),
+	},
+	{
+		value: 'modal',
+		label: __( 'Button & Modal', 'jetpack' ),
+	},
+];
 
 export const ToolbarControls = ( { setEditingUrl } ) => (
 	<ToolbarGroup>
@@ -11,3 +32,19 @@ export const ToolbarControls = ( { setEditingUrl } ) => (
 		/>
 	</ToolbarGroup>
 );
+
+export const InspectorControls = ( { attributes, clientId, setAttributes } ) => (
+	<BlockStylesSelector
+		title={ _x(
+			'Embed Type',
+			'option for how the embed displays on a page, e.g. inline or as a modal',
+			'jetpack'
+		) }
+		clientId={ clientId }
+		styleOptions={ embedTypes }
+		onSelectStyle={ setAttributes }
+		activeStyle={ attributes.style }
+		attributes={ attributes }
+		viewportWidth={ 130 }
+	/>
+);