Eventbrite Block: Add alignment support (#14817)

* Eventbrite Alignment: Add left, center, right alignment support to the Eventbrite block. Fixes #14505

* Eventbrite Alignment: Add position relative to block to make sure that the iframe cannot be interacted with when alignment is set. See #14820

* Eventbrite Alignment: Make sure the alignment classes are added to the server side rendered iframe embed.

* Use the block_classes helper function and escape the result

* Update the CSS to target the new class name

* Add support for wide and full alignments

Co-authored-by: Ben Dwyer <ben@scruffian.com>

extensions/blocks/eventbrite/editor.scss

@@ -1,5 +1,9 @@
-.wp-block-jetpack-eventbrite .components-placeholder__learn-more {
-	margin-top: 1em;
+.wp-block-jetpack-eventbrite {
+	position: relative;
+
+	.components-placeholder__learn-more {
+		margin-top: 1em;
+	}
 }
 
 // Styles needed to display block style options correctly when using Button & Modal embed type.

extensions/blocks/eventbrite/eventbrite.php

@@ -53,9 +53,12 @@ function jetpack_render_eventbrite_block( $attr, $content ) {
 
 		// $content contains a fallback link to the event that's saved in the post_content.
 		// Append a div that will hold the iframe embed created by the Eventbrite widget.js.
+		$classes = \Jetpack_Gutenberg::block_classes( 'eventbrite', $attr );
+
 		$content .= sprintf(
-			'<div id="%s" class="eventbrite__in-page-checkout"></div>',
-			esc_attr( $widget_id )
+			'<div id="%1$s" class="%2$s"></div>',
+			esc_attr( $widget_id ),
+			esc_attr( $classes )
 		);
 
 		return sprintf(

extensions/blocks/eventbrite/index.js

@@ -47,6 +47,7 @@ export const settings = {
 	],
 	supports: {
 		html: false,
+		align: true,
 	},
 	attributes,
 	edit,

extensions/blocks/eventbrite/style.scss

@@ -6,7 +6,7 @@
 // default/minimum value set by Eventbrite (425px), by overriding
 // the container's inline height (set by Eventbrite, sometimes incorrectly as 0px),
 // and setting the default height directly to the iframe.
-.eventbrite__in-page-checkout {
+.wp-block-jetpack-eventbrite {
 	height: auto !important;
 	iframe {
 		height: 425px;