diff --git a/blocks/event/editor.scss b/blocks/event/editor.scss
index 85566c66..04370cc0 100644
--- a/blocks/event/editor.scss
+++ b/blocks/event/editor.scss
@@ -1,19 +1,21 @@
 /* Editor styles */
-.wp-block-jetpack-event {
+.wp-block-a8c-event {
 	.event__date-select {
 		display: inline;
 	}
 
-	// Rich text color gets applied directly in the editor,
-	// so it only needs to be overridden here
-	.has-custom-color .rich-text {
-		color: inherit;
-	}
-}
+	// Fixes for overriding editor styles
+	.editor-styles-wrapper & {
+		text-align: left;
 
-// Fix so datetime picker doesn't have horizontal scrollbar.
-// This is a global fix, unscoped, and not very nice.
-// @todo: It won't be necessary once https://github.com/WordPress/gutenberg/pull/18235/files gets merged. 
-.components-datetime {
-	padding: 8px;
+		p {
+			font-family: inherit;
+		}
+
+		.event__title {
+			margin: 0 0 18px;
+			font-weight: 800;
+			line-height: 40px;
+		}
+	}
 }
diff --git a/blocks/event/index.php b/blocks/event/index.php
index 6c67656f..2b6847ae 100644
--- a/blocks/event/index.php
+++ b/blocks/event/index.php
@@ -1,9 +1,11 @@
 <?php
 
 add_action( 'init', function() {
-	register_block_type( 'jetpack/event', [
+	register_block_type( 'a8c/event', [
 		'editor_script' => 'block-experiments',
 		'style' => 'block-experiments',
 		'editor_style' => 'block-experiments-editor',
 	] );
+
+	wp_set_script_translations( 'a8c/event', 'event' );
 } );
diff --git a/blocks/event/src/date-select.js b/blocks/event/src/date-select.js
index 8eaabcab..fdebedea 100644
--- a/blocks/event/src/date-select.js
+++ b/blocks/event/src/date-select.js
@@ -4,7 +4,13 @@
 import { Button, DateTimePicker, Dropdown } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 
-const DateSelect = ( { placeholder, value, dateFormat, onChange, className } ) => (
+const DateSelect = ( {
+	placeholder,
+	value,
+	dateFormat,
+	onChange,
+	className,
+} ) => (
 	<Dropdown
 		className={ className }
 		position="bottom left"
@@ -19,18 +25,16 @@ const DateSelect = ( { placeholder, value, dateFormat, onChange, className } ) =
 			</Button>
 		) }
 		renderContent={ () => (
-			<DateTimePicker
-				currentDate={ value }
-				onChange={ onChange }
-			/>
+			<DateTimePicker currentDate={ value } onChange={ onChange } />
 		) }
 	/>
 );
 
-DateSelect.Content = ( { value, dateFormat, className } ) => value && (
-	<span className={ className }>
-		{ dateI18n( dateFormat, value ) }
-	</span>
-);
+DateSelect.Content = ( { value, dateFormat, className } ) =>
+	value && (
+		<time className={ className } dateTime={ dateI18n( 'c', value ) }>
+			{ dateI18n( dateFormat, value ) }
+		</time>
+	);
 
 export default DateSelect;
diff --git a/blocks/event/src/edit.js b/blocks/event/src/edit.js
index 4e2b562e..336da5e2 100644
--- a/blocks/event/src/edit.js
+++ b/blocks/event/src/edit.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useState } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -13,11 +12,17 @@ import {
 	InnerBlocks,
 	InspectorControls,
 	MediaPlaceholder,
+	MediaReplaceFlow,
 	PanelColorSettings,
 	RichText,
 	withColors,
 } from '@wordpress/block-editor';
-import { Toolbar, IconButton } from '@wordpress/components';
+import {
+	FocalPointPicker,
+	PanelBody,
+	PanelRow,
+	Button,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 
@@ -25,7 +30,9 @@ import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
  * Internal dependencies
  */
 import DateSelect from './date-select';
-import { EditImageIcon } from './icons';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const ACCEPT_MEDIA_TYPES = 'image/*';
 
 const Edit = ( {
 	attributes,
@@ -37,43 +44,87 @@ const Edit = ( {
 	isSelected,
 } ) => {
 	const settings = __experimentalGetSettings();
-	const [ isEditing, setIsEditing ] = useState( false );
+
+	const classNames = [ textColor.class, backgroundColor.class ];
 	const style = {
 		color: textColor.color,
 		backgroundColor: backgroundColor.color,
 	};
-	const classNames = [
-		textColor.class,
-		backgroundColor.class,
-	];
+	const imgStyle = {
+		backgroundImage:
+			attributes.eventImageURL && `url(${ attributes.eventImageURL })`,
+		backgroundPosition:
+			attributes.focalPoint &&
+			`${ attributes.focalPoint.x * 100 }% ${ attributes.focalPoint.y *
+				100 }%`,
+		backgroundSize: 'cover',
+	};
+
+	const onSelectImage = ( media ) => {
+		setAttributes( {
+			eventImageId: media.id,
+			eventImageURL: media.url,
+			eventImageAlt: media.alt,
+		} );
+	};
+	const onSelectImageURL = ( eventImageURL ) => {
+		setAttributes( { eventImageURL } );
+	};
 
 	return (
 		<>
 			<BlockControls>
-				{ attributes.eventImage && (
-					<Toolbar>
-						<IconButton
-							label={ __( 'Edit image' ) }
-							icon={ <EditImageIcon /> }
-							onClick={ () => setIsEditing( true ) }
-						/>
-					</Toolbar>
-				) }
+				<MediaReplaceFlow
+					mediaId={ attributes.eventImageId }
+					mediaURL={ attributes.eventImageURL }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept={ ACCEPT_MEDIA_TYPES }
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectImageURL }
+				/>
 			</BlockControls>
 			<InspectorControls>
+				{ attributes.eventImageURL && (
+					<PanelBody title={ __( 'Media settings', 'event' ) }>
+						<FocalPointPicker
+							label={ __( 'Focal point picker', 'event' ) }
+							url={ attributes.eventImageURL }
+							value={ attributes.focalPoint }
+							onChange={ ( focalPoint ) =>
+								setAttributes( { focalPoint } )
+							}
+						/>
+						<PanelRow>
+							<Button
+								isSecondary
+								isSmall
+								onClick={ () =>
+									setAttributes( {
+										eventImageURL: undefined,
+										eventImageId: undefined,
+										eventImageAlt: undefined,
+										focalPoint: undefined,
+									} )
+								}
+							>
+								{ __( 'Clear Media', 'event' ) }
+							</Button>
+						</PanelRow>
+					</PanelBody>
+				) }
 				<PanelColorSettings
-					title={ __( 'Color Settings' ) }
+					title={ __( 'Color Settings', 'event' ) }
 					initialOpen
 					colorSettings={ [
 						{
 							value: backgroundColor.color,
 							onChange: setBackgroundColor,
-							label: __( 'Background Color' ),
+							label: __( 'Background Color', 'event' ),
 						},
 						{
 							value: textColor.color,
 							onChange: setTextColor,
-							label: __( 'Text Color' ),
+							label: __( 'Text Color', 'event' ),
 						},
 					] }
 				>
@@ -84,14 +135,13 @@ const Edit = ( {
 				</PanelColorSettings>
 			</InspectorControls>
 			<div
-				className={ classnames( 'wp-block-jetpack-event', classNames ) }
+				className={ classnames( 'wp-block-a8c-event', classNames ) }
 				style={ style }
 			>
 				<div
-					className={ classnames(
-						'event__details',
-						{ 'has-custom-color': textColor.color }
-					) }
+					className={ classnames( 'event__details', {
+						'has-custom-color': textColor.color,
+					} ) }
 				>
 					<div className="event__datebox">
 						<span>{ dateI18n( 'M', attributes.eventStart ) }</span>
@@ -102,78 +152,77 @@ const Edit = ( {
 						className="event__title"
 						value={ attributes.eventTitle }
 						keepPlaceholderOnFocus
-						onChange={ ( eventTitle ) => setAttributes( { eventTitle } ) }
-						placeholder={ __( 'Event Title' ) }
+						onChange={ ( eventTitle ) =>
+							setAttributes( { eventTitle } )
+						}
+						placeholder={ __( 'Event Title', 'event' ) }
 					/>
 					<div className="event__time">
-						<span className="event__label">{ __( 'When:' ) }</span>
+						<span className="event__label">
+							{ __( 'When:', 'event' ) }
+						</span>
 						{ attributes.eventStart && ! isSelected ? (
 							<DateSelect.Content
 								className="event__date-select"
-								dateFormat={ settings.formats.datetimeAbbreviated }
+								dateFormat={
+									settings.formats.datetimeAbbreviated
+								}
 								value={ attributes.eventStart }
 							/>
 						) : (
 							<DateSelect
 								className="event__date-select"
-								dateFormat={ settings.formats.datetimeAbbreviated }
+								dateFormat={
+									settings.formats.datetimeAbbreviated
+								}
 								value={ attributes.eventStart }
-								onChange={ ( eventStart ) => setAttributes( { eventStart } ) }
-								placeholder={ __( 'Choose a Date' ) }
+								onChange={ ( eventStart ) =>
+									setAttributes( { eventStart } )
+								}
+								placeholder={ __( 'Choose a Date', 'event' ) }
 							/>
 						) }
 					</div>
 					<div className="event__location">
-						<span className="event__label">{ __( 'Where:' ) }</span>
+						<span className="event__label">
+							{ __( 'Where:', 'event' ) }
+						</span>
 						<RichText
 							value={ attributes.eventLocation }
 							multiline="false"
 							keepPlaceholderOnFocus
-							onChange={ ( eventLocation ) => setAttributes( { eventLocation } ) }
-							placeholder={ __( 'Event Location' ) }
+							onChange={ ( eventLocation ) =>
+								setAttributes( { eventLocation } )
+							}
+							placeholder={ __( 'Event Location', 'event' ) }
 						/>
 					</div>
 					<div className="event__description">
 						<InnerBlocks
 							template={ [
-								[ 'core/paragraph', { placeholder: 'Event Description' } ],
+								[
+									'core/paragraph',
+									{ placeholder: 'Event Description' },
+								],
 							] }
 						/>
 					</div>
 				</div>
-				{ attributes.eventImage && ! isEditing ? (
-					<div className="event__image event__image--save">
-						<img
-							src={ attributes.eventImage }
-							alt={ attributes.eventImageAlt }
-						/>
-					</div>
+				{ attributes.eventImageURL ? (
+					<div
+						role="img"
+						aria-label={ attributes.eventImageAlt }
+						className="event__image event__image--save"
+						style={ imgStyle }
+					/>
 				) : (
 					<div className="event__image">
 						<MediaPlaceholder
-							labels={ { title: __( 'Event Image' ) } }
-							allowedTypes={ [ 'image' ] }
-							multiple={ false }
-							mediaPreview={ isEditing && (
-								<img
-									src={ attributes.eventImage }
-									alt={ attributes.eventImageAlt }
-								/>
-							) }
-							onSelect={ ( { url, alt } ) => {
-								setAttributes( {
-									eventImage: url,
-									eventImageAlt: alt,
-								} );
-								setIsEditing( false );
-							} }
-							onSelectURL={ ( eventImage ) => {
-								setAttributes( { eventImage } );
-								setIsEditing( false );
-							} }
-							onCancel={ attributes.eventImage && ( () => {
-								setIsEditing( false );
-							} ) }
+							labels={ { title: __( 'Event Image', 'event' ) } }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept={ ACCEPT_MEDIA_TYPES }
+							onSelect={ onSelectImage }
+							onSelectURL={ onSelectImageURL }
 						/>
 					</div>
 				) }
diff --git a/blocks/event/src/icons.js b/blocks/event/src/icons.js
index 5c2a237c..dc575b7c 100644
--- a/blocks/event/src/icons.js
+++ b/blocks/event/src/icons.js
@@ -3,6 +3,13 @@
  */
 import { SVG, Rect, Path } from '@wordpress/components';
 
-export const Icon = () => ( <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><Path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" /></SVG> );
-
-export const EditImageIcon = () => ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
+export const Icon = () => (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" />
+	</SVG>
+);
diff --git a/blocks/event/src/index.js b/blocks/event/src/index.js
index c412f35f..1f03a186 100644
--- a/blocks/event/src/index.js
+++ b/blocks/event/src/index.js
@@ -16,12 +16,31 @@ import Edit from './edit';
 import Save from './save';
 
 export function registerBlock() {
-	registerBlockType( 'jetpack/event', {
-		title: __( 'Event' ),
-		description: __( 'Show the time and location of an event.' ),
+	registerBlockType( 'a8c/event', {
+		title: __( 'Event', 'event' ),
+		description: __( 'Show the time and location of an event.', 'event' ),
 		icon: <Icon />,
 		category: 'widgets',
-		example: {},
+		supports: {
+			align: [ 'center', 'wide' ],
+		},
+		example: {
+			attributes: {
+				eventTitle: 'Digging for Treasure',
+				eventLocation: 'Treasure Island',
+				eventStart: '1783-11-14T12:00:00',
+				eventImageId: 1,
+				eventImageURL:
+					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/TI-treasure.jpg/366px-TI-treasure.jpg',
+				eventImageAlt: 'Treasure',
+				focalPoint: {
+					x: '0.30',
+					y: '0.40',
+				},
+				customBackgroundColor: '#d4c5af',
+				align: 'wide',
+			},
+		},
 		attributes: {
 			eventTitle: {
 				type: 'string',
@@ -32,13 +51,19 @@ export function registerBlock() {
 			eventStart: {
 				type: 'string',
 			},
-			eventImage: {
+			eventImageId: {
+				type: 'number',
+			},
+			eventImageURL: {
 				type: 'string',
 			},
 			eventImageAlt: {
 				type: 'string',
 				default: '',
 			},
+			focalPoint: {
+				type: 'object',
+			},
 			backgroundColor: {
 				type: 'string',
 			},
diff --git a/blocks/event/src/save.js b/blocks/event/src/save.js
index 106a4636..4642f36c 100644
--- a/blocks/event/src/save.js
+++ b/blocks/event/src/save.js
@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, RichText, getColorClassName } from '@wordpress/block-editor';
+import {
+	InnerBlocks,
+	RichText,
+	getColorClassName,
+} from '@wordpress/block-editor';
 import { __experimentalGetSettings, dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 
@@ -18,17 +22,29 @@ import DateSelect from './date-select';
 const Save = ( { attributes } ) => {
 	const settings = __experimentalGetSettings();
 
-	const style = {
-		color: attributes.customTextColor,
-		backgroundColor: attributes.customBackgroundColor,
-	};
 	const classNames = [
 		getColorClassName( 'color', attributes.textColor ),
 		getColorClassName( 'background-color', attributes.backgroundColor ),
 	];
+	const style = {
+		color: attributes.customTextColor,
+		backgroundColor: attributes.customBackgroundColor,
+	};
+	const imgStyle = {
+		backgroundImage:
+			attributes.eventImageURL && `url(${ attributes.eventImageURL })`,
+		backgroundPosition:
+			attributes.focalPoint &&
+			`${ attributes.focalPoint.x * 100 }% ${ attributes.focalPoint.y *
+				100 }%`,
+		backgroundSize: 'cover',
+	};
 
 	return (
-		<div className={ classnames( 'wp-block-jetpack-event', classNames ) } style={ style } >
+		<div
+			className={ classnames( 'wp-block-a8c-event', classNames ) }
+			style={ style }
+		>
 			<div className="event__details">
 				{ attributes.eventStart && (
 					<div className="event__datebox">
@@ -43,7 +59,9 @@ const Save = ( { attributes } ) => {
 				/>
 				{ attributes.eventStart && (
 					<div className="event__time">
-						<span className="event__label">{ __( 'When:' ) }</span>
+						<span className="event__label">
+							{ __( 'When:', 'event' ) }
+						</span>
 						<DateSelect.Content
 							className="event__date-select"
 							dateFormat={ settings.formats.datetimeAbbreviated }
@@ -53,19 +71,23 @@ const Save = ( { attributes } ) => {
 				) }
 				{ attributes.eventLocation && (
 					<div className="event__location">
-						<span className="event__label">{ __( 'Where:' ) }</span>
+						<span className="event__label">
+							{ __( 'Where:', 'event' ) }
+						</span>
 						<RichText.Content value={ attributes.eventLocation } />
 					</div>
 				) }
-				<InnerBlocks.Content className="event__description" />
-			</div>
-			{ attributes.eventImage && (
-				<div className="event__image event__image--save">
-					<img
-						src={ attributes.eventImage }
-						alt={ attributes.eventImageAlt }
-					/>
+				<div className="event__description">
+					<InnerBlocks.Content className="event__description" />
 				</div>
+			</div>
+			{ attributes.eventImageURL && (
+				<div
+					role="img"
+					aria-label={ attributes.eventImageAlt }
+					className="event__image event__image--save"
+					style={ imgStyle }
+				/>
 			) }
 		</div>
 	);
diff --git a/blocks/event/style.scss b/blocks/event/style.scss
index 29a6d536..d1039a1b 100644
--- a/blocks/event/style.scss
+++ b/blocks/event/style.scss
@@ -1,19 +1,20 @@
 /* Front end styles */
-.wp-block-jetpack-event {
+.wp-block-a8c-event {
 	display: flex;
 	flex-direction: row;
 
 	padding: 18px;
-	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 
-	transition: box-shadow .1s ease;
-	box-shadow: 0 0 0 rgba(0,0,0,0.2);
+	transition: box-shadow 0.1s ease;
+	box-shadow: 0 0 0 rgba( 0, 0, 0, 0.2 );
 
 	.event__datebox {
 		float: left;
 		width: 40px;
 		height: 40px;
-		box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
 		background: white;
 		color: black;
 		margin: 0 18px 18px 0;
@@ -31,7 +32,6 @@
 			font-weight: bold;
 			font-size: 12px;
 		}
-
 	}
 
 	.event__title {
@@ -44,13 +44,13 @@
 	.event__time,
 	.event__location {
 		margin-top: 0;
-		margin-bottom: 1em;
+		margin-bottom: 18px;
 		hyphens: auto;
 		overflow-wrap: break-word;
 	}
 
 	.event__description {
-		margin-top: 2em;
+		margin-top: 18px;
 	}
 
 	.event__label {
@@ -66,19 +66,19 @@
 	.event__details {
 		flex: 2;
 	}
-	
+
 	.event__image {
 		flex: 1;
-		margin-left: 1rem;
+		margin-left: 18px;
 	}
-	
-	.event__image--save img {
+
+	.event__image--save {
 		float: right;
 		border-radius: 4px;
 	}
 
 	&:hover,
 	.is-selected & {
-		box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+		box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.2 );
 	}
 }
diff --git a/bundler/bundles/event.json b/bundler/bundles/event.json
index d16150cc..91f76b94 100644
--- a/bundler/bundles/event.json
+++ b/bundler/bundles/event.json
@@ -2,8 +2,8 @@
 	"blocks": [
 		"event"
 	],
-	"version": 0.1,
+	"version": 1.0,
 	"name": "Event",
-	"description": "Show the time and location of an event.",
-	"resource": "jetpack-event"
+	"description": "Show the time and location of an event",
+	"resource": "a8c-event"
 }
diff --git a/bundler/resources/a8c-event/assets/screenshot-1.png b/bundler/resources/a8c-event/assets/screenshot-1.png
new file mode 100644
index 00000000..785e8806
Binary files /dev/null and b/bundler/resources/a8c-event/assets/screenshot-1.png differ
diff --git a/bundler/resources/a8c-event/block.json b/bundler/resources/a8c-event/block.json
new file mode 100644
index 00000000..385a6b7b
--- /dev/null
+++ b/bundler/resources/a8c-event/block.json
@@ -0,0 +1,6 @@
+{
+	"name": "a8c/event",
+	"title": "Event",
+	"description": "Let everyone know about the events going on. Whether you're hosting or attending, the event block will feature your event including the time and location.",
+	"category": "widgets"
+}
diff --git a/bundler/resources/a8c-event/readme.txt b/bundler/resources/a8c-event/readme.txt
new file mode 100644
index 00000000..e9bdf912
--- /dev/null
+++ b/bundler/resources/a8c-event/readme.txt
@@ -0,0 +1,26 @@
+=== Event Block ===
+Contributors: automattic, ajlende, jasmussen
+Stable tag: 1.0.0
+Tested up to: 5.3.2
+Requires at least: 5.3
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Feature an event in your post
+
+== Description ==
+
+Let everyone know about the events going on. Whether you're hosting or attending, the event block will feature your event including the time and location.
+
+## Source and Support
+
+You can follow development, file an issue, suggest features, and view the source at the Github repo: <a href="https://github.com/Automattic/block-experiments">https://github.com/Automattic/block-experiments</a>
+
+== Screenshots ==
+
+1. Event Block
+
+== Changelog ==
+
+= 1.0.0 - 17th February 2020 =
+* Initial release