@voila.dev/ui-email-block-editor 1.1.9 → 1.1.10

package/src/blocks/product-block.tsx

@@ -21,7 +21,7 @@ import { EMAIL_COLOR } from "#/theme.ts";
 
 /**
  * A catalogue item on the shared card shell: visual, name, description, price
- * with an optional struck-through « tarif de base », and a call to action.
+ * with an optional struck-through base price, and a call to action.
  */
 function ProductBlockView({
 	block,
@@ -30,17 +30,17 @@ function ProductBlockView({
 	return (
 		<EmailCardShell image={block.image}>
 			<BlockTextInput
-				ariaLabel="Nom du produit"
+				ariaLabel="Product name"
 				value={block.name}
-				placeholder="Nom du produit"
+				placeholder="Product name"
 				onChange={(name) => onChange({ ...block, name })}
 				className="font-bold text-[17px] leading-[1.3]"
 				style={{ color: EMAIL_COLOR.brand }}
 			/>
 			<textarea
-				aria-label="Description du produit"
+				aria-label="Product description"
 				value={block.description}
-				placeholder="La description du produit."
+				placeholder="The product description."
 				rows={2}
 				onChange={(event) =>
 					onChange({ ...block, description: event.target.value })
@@ -75,9 +75,9 @@ function ProductBlockSettings({
 }: EmailBlockComponentProps<EmailEditorProductBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Nom"
+					label="Name"
 					value={block.name}
 					onChange={(name) => onChange({ ...block, name })}
 				/>
@@ -87,12 +87,12 @@ function ProductBlockSettings({
 					onChange={(description) => onChange({ ...block, description })}
 				/>
 				<MoneyOption
-					label="Prix"
+					label="Price"
 					value={block.price}
 					onChange={(price) => onChange({ ...block, price })}
 				/>
 				<ToggleOption
-					label="Tarif de base barré"
+					label="Struck-through base price"
 					checked={block.compareAtPrice !== null}
 					onChange={(enabled) =>
 						onChange({
@@ -100,11 +100,11 @@ function ProductBlockSettings({
 							compareAtPrice: enabled ? { ...block.price } : null,
 						})
 					}
-					description="Affiche un prix barré à côté du prix courant."
+					description="Shows a struck-through price next to the current price."
 				/>
 				{block.compareAtPrice === null ? null : (
 					<MoneyOption
-						label="Tarif de base"
+						label="Base price"
 						value={block.compareAtPrice}
 						onChange={(compareAtPrice) =>
 							onChange({ ...block, compareAtPrice })
@@ -112,9 +112,9 @@ function ProductBlockSettings({
 					/>
 				)}
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<TextOption
-					label="Adresse de l'image"
+					label="Image URL"
 					value={block.image.src}
 					onChange={(src) =>
 						onChange({ ...block, image: { ...block.image, src } })
@@ -122,20 +122,20 @@ function ProductBlockSettings({
 					placeholder="https://"
 				/>
 				<TextOption
-					label="Texte alternatif"
+					label="Alt text"
 					value={block.image.alt}
 					onChange={(alt) =>
 						onChange({ ...block, image: { ...block.image, alt } })
 					}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<TextOption
-					label="Libellé du bouton"
+					label="Button label"
 					value={block.buttonLabel}
 					onChange={(buttonLabel) => onChange({ ...block, buttonLabel })}
-					placeholder="Commander"
-					description="Laissez vide pour une carte sans bouton."
+					placeholder="Order now"
+					description="Leave empty for a card without a button."
 				/>
 				<LinkOption
 					value={block.href}
@@ -148,7 +148,7 @@ function ProductBlockSettings({
 
 export const productBlockDefinition: EmailBlockDefinition<EmailEditorProductBlock> =
 	{
-		label: "Produit",
+		label: "Product",
 		icon: TagIcon,
 		View: ProductBlockView,
 		Settings: ProductBlockSettings,

package/src/blocks/rating-block.tsx

@@ -23,8 +23,8 @@ const STYLE_OPTIONS: ReadonlyArray<{
 	readonly value: EmailEditorRatingStyle;
 	readonly label: string;
 }> = [
-	{ value: "filled", label: "Étoiles pleines" },
-	{ value: "outline", label: "Étoiles contour" },
+	{ value: "filled", label: "Filled stars" },
+	{ value: "outline", label: "Outlined stars" },
 ];
 
 /**
@@ -42,7 +42,7 @@ function RatingBlockView({
 				spans={block.question}
 				onChange={(question) => onChange({ ...block, question })}
 				ariaLabel="Question"
-				placeholder="Que pensez-vous de votre dernière mission ?"
+				placeholder="How did your last project go?"
 				className="text-center text-[16px] leading-[1.6]"
 				style={{ fontFamily: EMAIL_FONT, color: EMAIL_COLOR.ink }}
 			/>
@@ -75,25 +75,25 @@ function RatingBlockSettings({
 }: EmailBlockComponentProps<EmailEditorRatingBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<p className="text-muted-foreground text-xs">
-					La question se saisit et se met en forme directement sur le bloc,
-					comme un paragraphe.
+					The question is typed and formatted directly on the block, like a
+					paragraph.
 				</p>
 				<TextOption
-					label="Libellé bas de l'échelle"
+					label="Low end of the scale"
 					value={block.lowLabel}
 					onChange={(lowLabel) => onChange({ ...block, lowLabel })}
-					placeholder="Pas du tout"
+					placeholder="Not at all"
 				/>
 				<TextOption
-					label="Libellé haut de l'échelle"
+					label="High end of the scale"
 					value={block.highLabel}
 					onChange={(highLabel) => onChange({ ...block, highLabel })}
-					placeholder="Tout à fait"
+					placeholder="Absolutely"
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<SelectOption
 					label="Style"
 					value={block.style}
@@ -101,11 +101,11 @@ function RatingBlockSettings({
 					onChange={(style) => onChange({ ...block, style })}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Lien">
+			<BlockOptionSection title="Link">
 				<LinkOption
 					value={block.href}
 					onChange={(href) => onChange({ ...block, href })}
-					description="Chaque étoile pointe vers cette adresse avec « rating=1 » à « rating=5 » ajouté : les cinq notes sont donc comptées séparément dans les statistiques de clic."
+					description="Each star points to this address with rating=1 through rating=5 appended: the five scores are therefore counted separately in the click statistics."
 				/>
 			</BlockOptionSection>
 		</>
@@ -114,7 +114,7 @@ function RatingBlockSettings({
 
 export const ratingBlockDefinition: EmailBlockDefinition<EmailEditorRatingBlock> =
 	{
-		label: "Notation",
+		label: "Rating",
 		icon: StarIcon,
 		View: RatingBlockView,
 		Settings: RatingBlockSettings,

package/src/blocks/stat-block.tsx

@@ -37,7 +37,7 @@ function StatBlockView({
 			style={{ textAlign, fontFamily: EMAIL_FONT }}
 		>
 			<BlockTextInput
-				ariaLabel="Valeur"
+				ariaLabel="Value"
 				value={block.value}
 				placeholder="128"
 				onChange={(value) => onChange({ ...block, value })}
@@ -45,9 +45,9 @@ function StatBlockView({
 				style={{ color: EMAIL_COLOR.brand, textAlign }}
 			/>
 			<BlockTextInput
-				ariaLabel="Libellé"
+				ariaLabel="Label"
 				value={block.label}
-				placeholder="Missions pourvues"
+				placeholder="Projects delivered"
 				onChange={(label) => onChange({ ...block, label })}
 				className="font-semibold text-[12px] uppercase leading-[1.4] tracking-[0.04em]"
 				style={{ color: EMAIL_COLOR.muted, textAlign }}
@@ -59,7 +59,7 @@ function StatBlockView({
 				<BlockTextInput
 					ariaLabel="Description"
 					value={block.description}
-					placeholder="Description (optionnelle)"
+					placeholder="Description (optional)"
 					onChange={(description) => onChange({ ...block, description })}
 					className="text-[14px] leading-[1.5]"
 					style={{ color: EMAIL_COLOR.ink, textAlign }}
@@ -75,18 +75,18 @@ function StatBlockSettings({
 }: EmailBlockComponentProps<EmailEditorStatBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<TextOption
-					label="Valeur"
+					label="Value"
 					value={block.value}
 					onChange={(value) => onChange({ ...block, value })}
 					placeholder="128"
 				/>
 				<TextOption
-					label="Libellé"
+					label="Label"
 					value={block.label}
 					onChange={(label) => onChange({ ...block, label })}
-					placeholder="Missions pourvues"
+					placeholder="Projects delivered"
 				/>
 				<TextAreaOption
 					label="Description"
@@ -95,7 +95,7 @@ function StatBlockSettings({
 					rows={2}
 				/>
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<AlignmentOption
 					value={block.align}
 					onChange={(align) => onChange({ ...block, align })}
@@ -106,7 +106,7 @@ function StatBlockSettings({
 }
 
 export const statBlockDefinition: EmailBlockDefinition<EmailEditorStatBlock> = {
-	label: "Chiffre clé",
+	label: "Key figure",
 	icon: ChartBarIcon,
 	View: StatBlockView,
 	Settings: StatBlockSettings,

package/src/blocks/table-block.tsx

@@ -21,8 +21,8 @@ const ALIGN_OPTIONS: ReadonlyArray<{
 	readonly value: EmailEditorTableColumn["align"];
 	readonly label: string;
 }> = [
-	{ value: "left", label: "À gauche" },
-	{ value: "right", label: "À droite" },
+	{ value: "left", label: "Left" },
+	{ value: "right", label: "Right" },
 ];
 
 /** Mirrors `emailLineItemsTable`'s `flushEdges`: the first and last columns
@@ -84,9 +84,9 @@ function TableBlockView({
 								}}
 							>
 								<BlockTextInput
-									ariaLabel={`Titre de la colonne ${columnIndex + 1}`}
+									ariaLabel={`Column ${columnIndex + 1} title`}
 									value={column.label}
-									placeholder="Colonne"
+									placeholder="Column"
 									onChange={(label) =>
 										onChange({
 											...block,
@@ -116,7 +116,7 @@ function TableBlockView({
 								style={{ borderBottom: `1px solid ${EMAIL_COLOR.border}` }}
 							>
 								<BlockTextInput
-									ariaLabel={`Ligne ${rowIndex + 1}, colonne ${columnIndex + 1}`}
+									ariaLabel={`Row ${rowIndex + 1}, column ${columnIndex + 1}`}
 									value={cell}
 									onChange={(value) => setCell(rowIndex, columnIndex, value)}
 									className="text-[14px] leading-[1.4]"
@@ -147,7 +147,7 @@ function TableColumnSettings({
 				<div key={index} className="flex items-end gap-2">
 					<div className="flex-1">
 						<SelectOption
-							label={column.label.trim() || `Colonne ${index + 1}`}
+							label={column.label.trim() || `Column ${index + 1}`}
 							value={column.align}
 							options={ALIGN_OPTIONS}
 							onChange={(align) =>
@@ -163,7 +163,7 @@ function TableColumnSettings({
 					<Button
 						variant="ghost"
 						size="icon-sm"
-						aria-label={`Supprimer la colonne ${index + 1}`}
+						aria-label={`Remove column ${index + 1}`}
 						disabled={block.columns.length === 1}
 						onClick={() =>
 							onChange({
@@ -191,7 +191,7 @@ function TableColumnSettings({
 				}
 			>
 				<PlusIcon aria-hidden />
-				Ajouter une colonne
+				Add a column
 			</Button>
 		</>
 	);
@@ -203,16 +203,16 @@ function TableBlockSettings({
 }: EmailBlockComponentProps<EmailEditorTableBlock>) {
 	return (
 		<>
-			<BlockOptionSection title="Contenu">
+			<BlockOptionSection title="Content">
 				<div className="flex items-center justify-between gap-2 text-sm">
 					<span className="text-muted-foreground">
-						{block.rows.length} ligne{block.rows.length > 1 ? "s" : ""}
+						{block.rows.length} row{block.rows.length > 1 ? "s" : ""}
 					</span>
 					<div className="flex gap-1">
 						<Button
 							variant="ghost"
 							size="icon-sm"
-							aria-label="Supprimer la dernière ligne"
+							aria-label="Remove the last row"
 							disabled={block.rows.length === 1}
 							onClick={() =>
 								onChange({ ...block, rows: block.rows.slice(0, -1) })
@@ -231,14 +231,14 @@ function TableBlockSettings({
 							}
 						>
 							<PlusIcon aria-hidden />
-							Ligne
+							Row
 						</Button>
 					</div>
 				</div>
 			</BlockOptionSection>
-			<BlockOptionSection title="Apparence">
+			<BlockOptionSection title="Appearance">
 				<ToggleOption
-					label="Ligne d'en-tête"
+					label="Header row"
 					checked={block.headerRow}
 					onChange={(headerRow) => onChange({ ...block, headerRow })}
 				/>
@@ -250,7 +250,7 @@ function TableBlockSettings({
 
 export const tableBlockDefinition: EmailBlockDefinition<EmailEditorTableBlock> =
 	{
-		label: "Tableau",
+		label: "Table",
 		icon: TableIcon,
 		View: TableBlockView,
 		Settings: TableBlockSettings,

package/src/document/types.ts

@@ -190,7 +190,7 @@ export interface EmailEditorProductBlock {
 	readonly description: string;
 	readonly image: EmailEditorCardImage;
 	readonly price: EmailEditorMoney;
-	/** The struck-through « tarif de base », mirroring the shop catalogue's
+	/** The struck-through base price, mirroring the shop catalogue's
 	 * `publicPriceHtCents`. Null when the product is not discounted. */
 	readonly compareAtPrice: EmailEditorMoney | null;
 	readonly href: string;
@@ -205,7 +205,7 @@ export interface EmailEditorOfferBlock {
 	readonly description: string;
 	readonly image: EmailEditorCardImage;
 	readonly price: EmailEditorMoney;
-	/** « par mois », « par an »; empty for a one-off price. */
+	/** "per month", "per year"; empty for a one-off price. */
 	readonly period: string;
 	readonly features: ReadonlyArray<string>;
 	readonly buttonLabel: string;

package/src/email-block-editor.tsx

@@ -23,7 +23,7 @@ import {
 } from "#/sections/editor-sidebar.tsx";
 import { PreviewToggle } from "#/sections/preview-toggle.tsx";
 
-/** « Réglages du bloc » as a bottom sheet, for the viewports where a 280px
+/** The block settings panel as a bottom sheet, for the viewports where a 280px
  * column would put the options a screenful away from their block. */
 function BlockSettingsSheet({
 	open,
@@ -42,9 +42,9 @@ function BlockSettingsSheet({
 		<Drawer open={open} onOpenChange={onOpenChange}>
 			<DrawerContent>
 				<DrawerHeader>
-					<DrawerTitle>Réglages du bloc</DrawerTitle>
+					<DrawerTitle>Block settings</DrawerTitle>
 					<DrawerDescription className="sr-only">
-						Options du bloc sélectionné.
+						Options for the selected block.
 					</DrawerDescription>
 				</DrawerHeader>
 				<div className="flex flex-col gap-4 overflow-y-auto px-4 pb-8">

package/src/lib/use-media-query.ts

@@ -31,7 +31,7 @@ export const useCoarsePointer = (): boolean =>
 
 /**
  * Below Tailwind's `lg`, the 280px settings column no longer fits beside the
- * canvas, so « Réglages du bloc » moves into a bottom sheet reachable from the
+ * canvas, so the block settings panel moves into a bottom sheet reachable from the
  * selected block's toolbar.
  */
 export const useCompactEditorLayout = (): boolean =>

package/src/sections/add-block-menu.tsx

@@ -14,7 +14,7 @@ import {
 import type { EmailEditorBlockType } from "#/document/types.ts";
 
 /**
- * The « Ajouter un bloc » menu, fed by the block registry. The default trigger
+ * The "Add a block" menu, fed by the block registry. The default trigger
  * is the outlined empty-state button; the block toolbar passes its own icon
  * trigger instead.
  */
@@ -35,7 +35,7 @@ export function AddBlockMenu({
 					trigger ?? (
 						<Button variant="outline" size="sm">
 							<PlusIcon aria-hidden />
-							Ajouter un bloc
+							Add a block
 						</Button>
 					)
 				}

package/src/sections/block-options/alignment-option.tsx

@@ -13,28 +13,28 @@ const ALIGNMENTS: ReadonlyArray<{
 }> = [
 	{
 		value: "left",
-		label: "Aligner à gauche",
+		label: "Align left",
 		icon: <TextAlignLeftIcon aria-hidden />,
 	},
 	{
 		value: "center",
-		label: "Centrer",
+		label: "Align center",
 		icon: <TextAlignCenterIcon aria-hidden />,
 	},
 	{
 		value: "right",
-		label: "Aligner à droite",
+		label: "Align right",
 		icon: <TextAlignRightIcon aria-hidden />,
 	},
 ];
 
 /**
  * The one alignment control. Every block that can be aligned uses this exact
- * segmented control, so « Alignement » means the same thing and looks the same
+ * segmented control, so "Alignment" means the same thing and looks the same
  * everywhere (§1.2 of the editor plan).
  */
 export function AlignmentOption({
-	label = "Alignement",
+	label = "Alignment",
 	value,
 	onChange,
 }: {

package/src/sections/block-options/block-option-row.tsx

@@ -7,7 +7,7 @@ import {
 import type { ReactNode } from "react";
 
 /**
- * One labelled option in « Réglages du bloc ». Every block setting goes
+ * One labelled option in the block settings panel. Every block setting goes
  * through this row rather than hand-rolling `useId()` + `Label` + control, so
  * spacing, label typography and description placement cannot drift from block
  * to block.
@@ -58,8 +58,8 @@ export function BlockOptionRow({
 
 /**
  * A titled group of rows. §1.4 of the editor plan: once a block carries more
- * than a handful of options they are split into « Contenu », « Apparence » and
- * « Lien », always in that order.
+ * than a handful of options they are split into "Content", "Appearance" and
+ * "Link", always in that order.
  */
 export function BlockOptionSection({
 	title,

package/src/sections/block-options/money-option.tsx

@@ -62,7 +62,7 @@ export function MoneyOption({
 					})
 				}
 				currency={value.currency}
-				currencyLabel="Devise"
+				currencyLabel="Currency"
 			/>
 		</BlockOptionRow>
 	);

package/src/sections/block-options/text-option.tsx

@@ -61,12 +61,12 @@ export function TextAreaOption({
 }
 
 /**
- * The one destination-URL control. Always « Lien (URL) », always
+ * The one destination-URL control. Always "Link (URL)", always
  * `type="url"` with the `https://` placeholder, so a link field is
  * recognisable at a glance in any block (§1.2 of the editor plan).
  */
 export function LinkOption({
-	label = "Lien (URL)",
+	label = "Link (URL)",
 	value,
 	onChange,
 	description,

package/src/sections/block-toolbar.tsx

@@ -141,7 +141,7 @@ function StructureControls({
 					<Button
 						variant="ghost"
 						size={coarsePointer ? "icon" : "icon-sm"}
-						aria-label="Ajouter un bloc"
+						aria-label="Add a block"
 						className={toolbarButtonClassName(coarsePointer)}
 					>
 						<PlusIcon aria-hidden />
@@ -151,7 +151,7 @@ function StructureControls({
 			<Button
 				variant="ghost"
 				size={coarsePointer ? "icon" : "icon-sm"}
-				aria-label="Déplacer le bloc"
+				aria-label="Move block"
 				className={cn(
 					toolbarButtonClassName(coarsePointer),
 					"cursor-grab touch-none active:cursor-grabbing",
@@ -164,7 +164,7 @@ function StructureControls({
 			</Button>
 			{onSelectContainer ? (
 				<ToolbarIconButton
-					label="Sélectionner la ligne de colonnes"
+					label="Select the column row"
 					coarsePointer={coarsePointer}
 					onClick={onSelectContainer}
 				>
@@ -190,7 +190,7 @@ function RichTextControls({
 		<>
 			<ToolbarSeparator />
 			<ToolbarIconButton
-				label="Gras"
+				label="Bold"
 				active={active.has("bold")}
 				coarsePointer={coarsePointer}
 				onMouseDown={keepSelection}
@@ -199,7 +199,7 @@ function RichTextControls({
 				<TextBIcon aria-hidden />
 			</ToolbarIconButton>
 			<ToolbarIconButton
-				label="Italique"
+				label="Italic"
 				active={active.has("italic")}
 				coarsePointer={coarsePointer}
 				onMouseDown={keepSelection}
@@ -208,7 +208,7 @@ function RichTextControls({
 				<TextItalicIcon aria-hidden />
 			</ToolbarIconButton>
 			<ToolbarIconButton
-				label="Souligné"
+				label="Underline"
 				active={active.has("underline")}
 				coarsePointer={coarsePointer}
 				onMouseDown={keepSelection}
@@ -253,7 +253,7 @@ function SelectionLinkButton({
 				<Button
 					variant="ghost"
 					size={coarsePointer ? "icon" : "icon-sm"}
-					aria-label="Insérer un lien"
+					aria-label="Insert a link"
 					aria-pressed={active || undefined}
 					className={toolbarButtonClassName(coarsePointer, active)}
 					onMouseDown={keepSelection}
@@ -295,7 +295,7 @@ function SelectionLinkButton({
 /**
  * The controls of the selected block: add-below, drag handle, inline
  * formatting when the block holds rich text, duplicate, delete, plus a
- * « Réglages » button when the settings live in a bottom sheet rather than in
+ * Settings button when the settings live in a bottom sheet rather than in
  * the sidebar. App-chrome styling on purpose — the toolbar is editor UI, not
  * part of the email. Only ever rendered for the selected block, so a single
  * toolbar is visible at a time.
@@ -303,7 +303,7 @@ function SelectionLinkButton({
  * At 44px per target the full set is wider than a 390px viewport, so the row
  * wraps under a touch pointer rather than scrolling: it sits in the flow there
  * (see the canvas), so a second line costs nothing, while a scrolling row
- * would hide « Supprimer » behind an edge with no affordance.
+ * would hide Delete behind an edge with no affordance.
  */
 export function BlockToolbar({
 	handle,
@@ -353,7 +353,7 @@ export function BlockToolbar({
 			<ToolbarSeparator />
 			{onOpenSettings ? (
 				<ToolbarIconButton
-					label="Réglages du bloc"
+					label="Block settings"
 					coarsePointer={coarsePointer}
 					onClick={onOpenSettings}
 				>
@@ -361,14 +361,14 @@ export function BlockToolbar({
 				</ToolbarIconButton>
 			) : null}
 			<ToolbarIconButton
-				label="Dupliquer le bloc"
+				label="Duplicate block"
 				coarsePointer={coarsePointer}
 				onClick={onDuplicate}
 			>
 				<CopyIcon aria-hidden />
 			</ToolbarIconButton>
 			<ToolbarIconButton
-				label="Supprimer le bloc"
+				label="Delete block"
 				coarsePointer={coarsePointer}
 				onClick={onRemove}
 			>

package/src/sections/editor-canvas.tsx

@@ -53,7 +53,7 @@ interface CanvasContext {
 	readonly onOpenSettings?: () => void;
 }
 
-/** The dashed « ajouter » slot of a grid cell. */
+/** The dashed add slot of a grid cell. */
 function GridAddCell({
 	gridId,
 	context,
@@ -325,7 +325,7 @@ export function EditorCanvas({
 	preview: EmailEditorPreview;
 	onUploadImage?: (file: File) => Promise<string>;
 	/** Present when the settings live in a sheet rather than in the sidebar;
-	 * each selected block's toolbar then offers a « Réglages » button. */
+	 * each selected block's toolbar then offers a Settings button. */
 	onOpenSettings?: () => void;
 	headerSlot?: ReactNode;
 	footerSlot?: ReactNode;
@@ -387,7 +387,7 @@ export function EditorCanvas({
 									className="text-[14px]"
 									style={{ color: EMAIL_COLOR.muted, fontFamily: EMAIL_FONT }}
 								>
-									Votre email est vide.
+									Your email is empty.
 								</p>
 								<AddBlockMenu
 									onAdd={(type) => dispatch({ type: "add", blockType: type })}