Polish up the event for the block directory

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;
+		}
+	}
 }

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' );
 } );

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;

blocks/event/src/edit.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useState } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -13,19 +12,27 @@ 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';
 
 /**
  * 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>
 				) }

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>
+);