Update BlockStylesSelector component and implement in Eventbrite

extensions/blocks/calendly/edit.js

@@ -8,15 +8,14 @@ import queryString from 'query-string';
 /**
  * WordPress dependencies
  */
-import { BlockControls, BlockIcon, InspectorControls } from '@wordpress/block-editor';
+import { BlockIcon, InspectorControls } from '@wordpress/block-editor';
 import {
 	Button,
 	ExternalLink,
 	Notice,
 	PanelBody,
 	Placeholder,
 	ToggleControl,
-	Toolbar,
 	withNotices,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -190,79 +189,58 @@ function CalendlyEdit( props ) {
 		{ value: 'link', label: __( 'Link', 'jetpack' ) },
 	];
 
-	const blockControls = (
-		<BlockControls>
+	const inspectorControls = (
+		<>
 			{ url && (
-				<Toolbar
-					isCollapsed={ true }
-					icon="admin-appearance"
-					label={ __( 'Style', 'jetpack' ) }
-					controls={ styleOptions.map( styleOption => ( {
-						title: styleOption.label,
-						isActive: styleOption.value === style,
-						onClick: () => setAttributes( { style: styleOption.value } ),
-					} ) ) }
-					popoverProps={ { className: 'is-calendly' } }
+				<BlockStylesSelector
+					clientId={ clientId }
+					styleOptions={ styleOptions }
+					onSelectStyle={ setAttributes }
+					activeStyle={ style }
+					attributes={ attributes }
+					viewportWidth={ 500 }
 				/>
 			) }
-		</BlockControls>
-	);
-
-	const inspectorControls = (
-		<InspectorControls>
-			{ url && (
-				<>
-					<PanelBody title={ __( 'Styles', 'jetpack' ) }>
-						<BlockStylesSelector
-							clientId={ clientId }
-							styleOptions={ styleOptions }
-							onSelectStyle={ setAttributes }
-							activeStyle={ style }
-							attributes={ attributes }
-							viewportWidth={ 500 }
+			<InspectorControls>
+				<PanelBody title={ __( 'Calendar Settings', 'jetpack' ) } initialOpen={ false }>
+					<form onSubmit={ parseEmbedCode } className={ `${ defaultClassName }-embed-form-sidebar` }>
+						<input
+							type="text"
+							id="embedCode"
+							onChange={ event => setEmbedCode( event.target.value ) }
+							placeholder={ __( 'Calendly web address or embed code…', 'jetpack' ) }
+							value={ embedCode }
+							className="components-placeholder__input"
 						/>
-					</PanelBody>
-				</>
-			) }
-			<PanelBody title={ __( 'Calendar Settings', 'jetpack' ) } initialOpen={ false }>
-				<form onSubmit={ parseEmbedCode } className={ `${ defaultClassName }-embed-form-sidebar` }>
-					<input
-						type="text"
-						id="embedCode"
-						onChange={ event => setEmbedCode( event.target.value ) }
-						placeholder={ __( 'Calendly web address or embed code…', 'jetpack' ) }
-						value={ embedCode }
-						className="components-placeholder__input"
+						<div>
+							<Button isSecondary isLarge type="submit">
+								{ _x( 'Embed', 'button label', 'jetpack' ) }
+							</Button>
+						</div>
+					</form>
+
+					<ToggleControl
+						label={ __( 'Hide Event Type Details', 'jetpack' ) }
+						checked={ hideEventTypeDetails }
+						onChange={ () => setAttributes( { hideEventTypeDetails: ! hideEventTypeDetails } ) }
 					/>
-					<div>
-						<Button isSecondary isLarge type="submit">
-							{ _x( 'Embed', 'button label', 'jetpack' ) }
-						</Button>
-					</div>
-				</form>
-
-				<ToggleControl
-					label={ __( 'Hide Event Type Details', 'jetpack' ) }
-					checked={ hideEventTypeDetails }
-					onChange={ () => setAttributes( { hideEventTypeDetails: ! hideEventTypeDetails } ) }
-				/>
-			</PanelBody>
-			{ url && (
-				<Notice className={ `${ defaultClassName }-color-notice` } isDismissible={ false }>
-					<ExternalLink href="https://help.calendly.com/hc/en-us/community/posts/360033166114-Embed-Widget-Color-Customization-Available-Now-">
-						{ __( 'Follow these instructions to change the colors in this block.', 'jetpack' ) }
-					</ExternalLink>
-				</Notice>
-			) }
-		</InspectorControls>
+				</PanelBody>
+				{ url && (
+					<Notice className={ `${ defaultClassName }-color-notice` } isDismissible={ false }>
+						<ExternalLink href="https://help.calendly.com/hc/en-us/community/posts/360033166114-Embed-Widget-Color-Customization-Available-Now-">
+							{ __( 'Follow these instructions to change the colors in this block.', 'jetpack' ) }
+						</ExternalLink>
+					</Notice>
+				) }
+			</InspectorControls>
+		</>
 	);
 
 	const classes = `${ className } calendly-style-${ style }`;
 
 	return (
 		<div className={ classes }>
 			{ inspectorControls }
-			{ blockControls }
 			{ url ? blockPreview( style ) : blockPlaceholder }
 		</div>
 	);

extensions/blocks/calendly/editor.scss

@@ -29,9 +29,3 @@
 		margin: 0;
 	}
 }
-
-.is-calendly {
-	.is-active {
-		font-weight: bold;
-	}
-}

extensions/blocks/eventbrite/attributes.js

@@ -13,8 +13,8 @@ export default {
 	eventId: {
 		type: 'number',
 	},
-	useModal: {
-		type: 'boolean',
+	style: {
+		type: 'string',
 	},
 	// Modal button attributes, used for Button & Modal embed type.
 	text: {

extensions/blocks/eventbrite/deprecated.js

@@ -0,0 +1,147 @@
+import { _x } from '@wordpress/i18n';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { RichText, getColorClassName } from '@wordpress/block-editor';
+
+/**
+ * Adapted button save function from @wordpress/block-library
+ * (Using Gutenberg code that shipped with WordPress 5.3)
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/wp/5.3/packages/block-library/src/button/save.js
+ *
+ * Uses a "button" element rather than "a", since the button opens a modal rather than
+ * an external link.
+ */
+
+function saveButton( attributes ) {
+	const {
+		backgroundColor,
+		borderRadius,
+		customBackgroundColor,
+		customTextColor,
+		eventId,
+		text,
+		textColor,
+		url,
+	} = attributes;
+
+	const textClass = getColorClassName( 'color', textColor );
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+	const buttonClasses = classnames( 'wp-block-button__link', {
+		'has-text-color': textColor || customTextColor,
+		[ textClass ]: textClass,
+		'has-background': backgroundColor || customBackgroundColor,
+		[ backgroundClass ]: backgroundClass,
+		'no-border-radius': borderRadius === 0,
+	} );
+
+	const buttonStyle = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		color: textClass ? undefined : customTextColor,
+		borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+	};
+
+	// Saves link markup, but event handlers are added with inline javascript to prevent
+	// default link behavior (see the `jetpack_render_eventbrite_block` php function).
+	return (
+		<div className="wp-block-button">
+			<RichText.Content
+				className={ buttonClasses }
+				href={ url }
+				// Placeholder id, preg replaced with a unique id generated in PHP when the block is rendered.
+				// IMPORTANT: do not remove or change unless you also update the render function in eventbrite.php.
+				id={ `eventbrite-widget-${ eventId }` }
+				rel="noopener noreferrer"
+				role="button"
+				style={ buttonStyle }
+				tagName="a"
+				target="_blank"
+				value={ text }
+			/>
+		</div>
+	);
+}
+
+export default [
+	{
+		attributes: {
+			url: {
+				type: 'string',
+			},
+			eventId: {
+				type: 'number',
+			},
+			useModal: {
+				type: 'boolean',
+			},
+			// Modal button attributes, used for Button & Modal embed type.
+			text: {
+				type: 'string',
+				default: _x( 'Register', 'verb: e.g. register for an event.', 'jetpack' ),
+			},
+			backgroundColor: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customBackgroundColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+			},
+			borderRadius: {
+				type: 'number',
+			},
+		},
+
+		migrate: ( {
+			url,
+			eventId,
+			useModal,
+			text,
+			backgroundColor,
+			textColor,
+			customBackgroundColor,
+			customTextColor,
+			borderRadius,
+		} ) => {
+			return {
+				url,
+				eventId,
+				text,
+				backgroundColor,
+				textColor,
+				customBackgroundColor,
+				customTextColor,
+				borderRadius,
+				style: useModal ? 'modal' : 'inline',
+			};
+		},
+
+		save: function save( { attributes } ) {
+			const { eventId, useModal, url } = attributes;
+
+			if ( ! eventId ) {
+				return;
+			}
+
+			if ( useModal ) {
+				return saveButton( attributes );
+			}
+
+			return (
+				url && (
+					<a className="eventbrite__direct-link" href={ url }>
+						{ url }
+					</a>
+				)
+			);
+		},
+	},
+];