diff --git a/extensions/blocks/donations/amount.js b/extensions/blocks/donations/amount.js
new file mode 100644
index 0000000000000..307829891b164
--- /dev/null
+++ b/extensions/blocks/donations/amount.js
@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { minimumTransactionAmountForCurrency } from '../../shared/currencies';
+
+const Amount = ( {
+	className = '',
+	currency = null,
+	defaultValue = null,
+	editable = false,
+	label = '',
+	onChange = null,
+	value = '',
+} ) => {
+	const [ editedValue, setEditedValue ] = useState(
+		formatCurrency( value, currency, { symbol: '' } )
+	);
+	const [ isFocused, setIsFocused ] = useState( false );
+	const [ isInvalid, setIsInvalid ] = useState( false );
+	const richTextRef = useRef( null );
+
+	const parseAmount = useCallback(
+		amount => {
+			if ( ! amount ) {
+				return null;
+			}
+
+			if ( typeof amount === 'number' ) {
+				return amount;
+			}
+
+			amount = parseFloat(
+				amount
+					// Remove any thousand grouping separator.
+					.replace( new RegExp( '\\' + CURRENCIES[ currency ].grouping, 'g' ), '' )
+					// Replace the localized decimal separator with a dot (the standard decimal separator in float numbers).
+					.replace( new RegExp( '\\' + CURRENCIES[ currency ].decimal, 'g' ), '.' )
+			);
+
+			if ( isNaN( amount ) ) {
+				return null;
+			}
+
+			return amount;
+		},
+		[ currency ]
+	);
+
+	const setAmount = useCallback(
+		amount => {
+			setEditedValue( amount );
+
+			if ( ! onChange ) {
+				return;
+			}
+
+			const parsedAmount = parseAmount( amount, currency );
+			if ( parsedAmount && parsedAmount >= minimumTransactionAmountForCurrency( currency ) ) {
+				onChange( parsedAmount );
+				setIsInvalid( false );
+			} else if ( amount ) {
+				setIsInvalid( true );
+			}
+		},
+		[ currency, parseAmount, onChange ]
+	);
+
+	const setFocus = () => {
+		if ( ! richTextRef.current ) {
+			return;
+		}
+
+		richTextRef.current.focus();
+		setIsFocused( true );
+	};
+
+	// Tracks when user clicks out the input. Cannot be done with an `onBlur` prop because `RichText` does not support it.
+	useEffect( () => {
+		if ( ! richTextRef.current ) {
+			return;
+		}
+
+		richTextRef.current.addEventListener( 'blur', () => setIsFocused( false ) );
+	}, [ richTextRef ] );
+
+	// Sets a default value if empty when user clicks out the input.
+	useEffect( () => {
+		if ( isFocused || editedValue ) {
+			return;
+		}
+
+		setAmount( formatCurrency( defaultValue, currency, { symbol: '' } ) );
+	}, [ currency, defaultValue, editedValue, isFocused, setAmount ] );
+
+	// Syncs the edited value with the actual value whenever the latter changes (e.g. new default amount after a currency change).
+	useEffect( () => {
+		if ( isFocused || isInvalid ) {
+			return;
+		}
+		setEditedValue( formatCurrency( value, currency, { symbol: '' } ) );
+	}, [ currency, isFocused, isInvalid, setAmount, value ] );
+
+	return (
+		<div className={ classnames( 'wp-block-button', 'donations__amount', className ) }>
+			<div
+				className={ classnames( 'wp-block-button__link', {
+					'has-focus': isFocused,
+					'has-error': isInvalid,
+				} ) }
+				onClick={ setFocus }
+				onKeyDown={ setFocus }
+				role="button"
+				tabIndex={ 0 }
+			>
+				{ CURRENCIES[ currency ].symbol }
+				{ editable ? (
+					<RichText
+						allowedFormats={ [] }
+						aria-label={ label }
+						keepPlaceholderOnFocus={ true }
+						multiline={ false }
+						onChange={ amount => setAmount( amount ) }
+						placeholder={ formatCurrency( defaultValue, currency, { symbol: '' } ) }
+						ref={ richTextRef }
+						value={ editedValue }
+						withoutInteractiveFormatting
+					/>
+				) : (
+					<span className="donations__amount-value">
+						{ formatCurrency( value ? value : defaultValue, currency, { symbol: '' } ) }
+					</span>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default Amount;
diff --git a/extensions/blocks/donations/attributes.js b/extensions/blocks/donations/attributes.js
index 5446d6a8ce5cf..2beef97025102 100644
--- a/extensions/blocks/donations/attributes.js
+++ b/extensions/blocks/donations/attributes.js
@@ -8,6 +8,13 @@ export default {
 		type: 'string',
 		default: 'USD',
 	},
+	amounts: {
+		type: 'array',
+		items: {
+			type: 'number',
+		},
+		default: [ 5, 15, 100 ],
+	},
 	oneTimePlanId: {
 		type: 'number',
 		default: null,
@@ -38,7 +45,7 @@ export default {
 	},
 	chooseAmountText: {
 		type: 'string',
-		default: __( 'Choose an amount (USD)', 'jetpack' ),
+		default: __( 'Choose an amount', 'jetpack' ),
 	},
 	customAmountText: {
 		type: 'string',
diff --git a/extensions/blocks/donations/controls.js b/extensions/blocks/donations/controls.js
index 46e2c1607cd0a..e60c0c38c5a5d 100644
--- a/extensions/blocks/donations/controls.js
+++ b/extensions/blocks/donations/controls.js
@@ -1,40 +1,107 @@
 /**
  * WordPress dependencies
  */
-import { ExternalLink, PanelBody, ToggleControl } from '@wordpress/components';
+import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import {
+	Button,
+	Dashicon,
+	Dropdown,
+	ExternalLink,
+	MenuGroup,
+	MenuItem,
+	PanelBody,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { DOWN } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { SUPPORTED_CURRENCIES } from '../../shared/currencies';
+import { CURRENCIES } from '@automattic/format-currency';
 
 const Controls = props => {
 	const { attributes, setAttributes, products, siteSlug } = props;
-	const { monthlyPlanId, annuallyPlanId, showCustomAmount } = attributes;
+	const { currency, monthlyPlanId, annuallyPlanId, showCustomAmount } = attributes;
+
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Settings', 'jetpack' ) }>
-				<ToggleControl
-					checked={ !! monthlyPlanId }
-					onChange={ value =>
-						setAttributes( { monthlyPlanId: value ? products[ '1 month' ] : null } )
-					}
-					label={ __( 'Show monthly donations', 'jetpack' ) }
-				/>
-				<ToggleControl
-					checked={ !! annuallyPlanId }
-					onChange={ value =>
-						setAttributes( { annuallyPlanId: value ? products[ '1 year' ] : null } )
-					}
-					label={ __( 'Show annual donations', 'jetpack' ) }
-				/>
-				<ToggleControl
-					checked={ showCustomAmount }
-					onChange={ value => setAttributes( { showCustomAmount: value } ) }
-					label={ __( 'Show custom amount option', 'jetpack' ) }
-				/>
-				<ExternalLink href={ `https://wordpress.com/earn/payments/${ siteSlug }` }>
-					{ __( 'View donation earnings', 'jetpack' ) }
-				</ExternalLink>
-			</PanelBody>
-		</InspectorControls>
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<Dropdown
+						contentClassName="jetpack-donations__currency-popover"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const openOnArrowDown = event => {
+								if ( ! isOpen && event.keyCode === DOWN ) {
+									event.preventDefault();
+									event.stopPropagation();
+									onToggle();
+								}
+							};
+
+							return (
+								<Button
+									className="jetpack-donations__currency-toggle"
+									icon={
+										<>
+											{ CURRENCIES[ currency ].symbol + ' - ' + currency }
+											<Dashicon icon="arrow-down" />
+										</>
+									}
+									label={ __( 'Change currency', 'jetpack' ) }
+									onClick={ onToggle }
+									onKeyDown={ openOnArrowDown }
+								/>
+							);
+						} }
+						renderContent={ ( { onClose } ) => (
+							<MenuGroup>
+								{ Object.keys( SUPPORTED_CURRENCIES ).map( ccy => (
+									<MenuItem
+										isSelected={ ccy === currency }
+										onClick={ () => {
+											setAttributes( { currency: ccy } );
+											onClose();
+										} }
+										key={ `jetpack-donations-currency-${ ccy }` }
+									>
+										{ CURRENCIES[ ccy ].symbol + ' - ' + ccy }
+									</MenuItem>
+								) ) }
+							</MenuGroup>
+						) }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+					<ToggleControl
+						checked={ !! monthlyPlanId }
+						onChange={ value =>
+							setAttributes( { monthlyPlanId: value ? products[ '1 month' ] : null } )
+						}
+						label={ __( 'Show monthly donations', 'jetpack' ) }
+					/>
+					<ToggleControl
+						checked={ !! annuallyPlanId }
+						onChange={ value =>
+							setAttributes( { annuallyPlanId: value ? products[ '1 year' ] : null } )
+						}
+						label={ __( 'Show annual donations', 'jetpack' ) }
+					/>
+					<ToggleControl
+						checked={ showCustomAmount }
+						onChange={ value => setAttributes( { showCustomAmount: value } ) }
+						label={ __( 'Show custom amount option', 'jetpack' ) }
+					/>
+					<ExternalLink href={ `https://wordpress.com/earn/payments/${ siteSlug }` }>
+						{ __( 'View donation earnings', 'jetpack' ) }
+					</ExternalLink>
+				</PanelBody>
+			</InspectorControls>
+		</>
 	);
 };
 
diff --git a/extensions/blocks/donations/edit.js b/extensions/blocks/donations/edit.js
index c9fd8fb452100..c840d56419d0f 100644
--- a/extensions/blocks/donations/edit.js
+++ b/extensions/blocks/donations/edit.js
@@ -100,7 +100,6 @@ const Edit = props => {
 	return (
 		<Tabs
 			{ ...props }
-			className={ className }
 			products={ products }
 			shouldUpgrade={ shouldUpgrade }
 			siteSlug={ siteSlug }
diff --git a/extensions/blocks/donations/editor.scss b/extensions/blocks/donations/editor.scss
index 1477f61a18f2b..c56a4d3611770 100644
--- a/extensions/blocks/donations/editor.scss
+++ b/extensions/blocks/donations/editor.scss
@@ -60,20 +60,48 @@
 			background-color: $white;
 			color: $dark-gray-800;
 			border: 1px solid $light-gray-700;
-		}
+			cursor: text;
 
-		.donations__custom-amount {
-			margin-bottom: 30px;
+			&.has-focus {
+				box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-wordpress-700;
+				outline: 2px solid transparent;
+				outline-offset: -2px;
+			}
+
+			&.has-error {
+				box-shadow: 0 0 0 1px $white, 0 0 0 3px $alert-red;
+				outline: 2px solid transparent;
+				outline-offset: -2px;
+			}
 		}
 
-		.donations__custom-amount .wp-block-button__link {
-			cursor: default;
+		.donations__amount .block-editor-rich-text__editable {
+			display: inline-block;
+			text-align: left;
+
+			&:focus {
+				box-shadow: none;
+				outline: none;
+				outline-offset: 0;
+			}
 		}
 
-		.donations__custom-amount-placeholder {
-			margin-left: 8px;
+		.donations__amount.wp-block-button:not(.has-text-color):not(.is-style-outline) [data-rich-text-placeholder]:after {
 			color: $light-gray-700;
-			padding-right: 40px;
+		}
+
+		.donations__custom-amount {
+			margin-bottom: 30px;
+
+			.wp-block-button__link {
+				cursor: default;
+			}
+
+			.donations__amount-value {
+				margin-left: 4px;
+				min-width: 60px;
+				color: $light-gray-700;
+			}
 		}
 
 		.donations__separator {
@@ -90,3 +118,13 @@
 		max-width: none;
 	}
 }
+
+.jetpack-donations__currency-toggle {
+	font-weight: bold;
+	line-height: 100%;
+	width: max-content;
+}
+
+.jetpack-donations__currency-popover .components-popover__content {
+	min-width: 120px;
+}
diff --git a/extensions/blocks/donations/tab.js b/extensions/blocks/donations/tab.js
index 5782ff49650e7..01b0199497189 100644
--- a/extensions/blocks/donations/tab.js
+++ b/extensions/blocks/donations/tab.js
@@ -1,14 +1,20 @@
+/**
+ * External dependencies
+ */
+import formatCurrency from '@automattic/format-currency';
+
 /**
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Context from './context';
-import formatCurrency, { CURRENCIES } from '@automattic/format-currency';
+import Amount from './amount';
 import { minimumTransactionAmountForCurrency } from '../../shared/currencies';
 
 const attributesPerInterval = {
@@ -25,11 +31,12 @@ const attributesPerInterval = {
 };
 
 const Tab = props => {
-	const { attributes, interval, setAttributes } = props;
+	const { attributes, setAttributes } = props;
+	const { activeTab } = useContext( Context );
 
 	const getAttribute = attributeName => {
 		if ( attributeName in attributesPerInterval ) {
-			return attributes[ attributesPerInterval[ attributeName ][ interval ] ];
+			return attributes[ attributesPerInterval[ attributeName ][ activeTab ] ];
 		}
 		return attributes[ attributeName ];
 	};
@@ -37,85 +44,115 @@ const Tab = props => {
 	const setAttribute = ( attributeName, value ) => {
 		if ( attributeName in attributesPerInterval ) {
 			return setAttributes( {
-				[ attributesPerInterval[ attributeName ][ interval ] ]: value,
+				[ attributesPerInterval[ attributeName ][ activeTab ] ]: value,
 			} );
 		}
 		return setAttributes( { [ attributeName ]: value } );
 	};
-	const currency = getAttribute( 'currency' );
 
+	const amounts = getAttribute( 'amounts' );
+	const currency = getAttribute( 'currency' );
+	const showCustomAmount = getAttribute( 'showCustomAmount' );
 	const minAmount = minimumTransactionAmountForCurrency( currency );
-	// TODO: This generates good amounts for USD, but let's revisit once we support more currencies.
-	const tiers = [
-		minAmount * 10, // USD 5
-		minAmount * 30, // USD 15
-		minAmount * 200, // USD 100
-	];
-	const customAmountPlaceholder = minAmount * 100; // USD 50
+
+	const [ defaultAmounts, setDefaultAmounts ] = useState( [
+		minAmount * 10, // 1st tier (USD 5)
+		minAmount * 30, // 2nd tier (USD 15)
+		minAmount * 200, // 3rd tier (USD 100)
+	] );
+	const [ defaultCustomAmount, setDefaultCustomAmount ] = useState( minAmount * 100 );
+	const [ previousCurrency, setPreviousCurrency ] = useState( currency );
+
+	// Updates the amounts whenever the currency changes.
+	useEffect( () => {
+		if ( previousCurrency === currency ) {
+			return;
+		}
+		setPreviousCurrency( currency );
+
+		const newDefaultAmounts = [
+			minAmount * 10, // 1st tier (USD 5)
+			minAmount * 30, // 2nd tier (USD 15)
+			minAmount * 200, // 3rd tier (USD 100)
+		];
+		setDefaultAmounts( newDefaultAmounts );
+		setAttributes( { amounts: newDefaultAmounts } );
+		setDefaultCustomAmount( minAmount * 100 ); // USD 50
+	}, [ currency, minAmount, previousCurrency, setAttributes ] );
+
+	const setAmount = ( amount, tier ) => {
+		const newAmounts = [ ...amounts ];
+		newAmounts[ tier ] = amount;
+		setAttributes( { amounts: newAmounts } );
+	};
+
+	if ( ! amounts ) {
+		return null;
+	}
 
 	return (
-		<Context.Consumer>
-			{ ( { activeTab } ) => (
-				<div hidden={ activeTab !== interval }>
-					<RichText
-						tagName="h4"
-						placeholder={ __( 'Write a message…', 'jetpack' ) }
-						value={ getAttribute( 'heading' ) }
-						onChange={ value => setAttribute( 'heading', value ) }
-						inlineToolbar
-					/>
-					<RichText
-						tagName="p"
-						placeholder={ __( 'Write a message…', 'jetpack' ) }
-						value={ getAttribute( 'chooseAmountText' ) }
-						onChange={ value => setAttribute( 'chooseAmountText', value ) }
-						inlineToolbar
+		<>
+			<RichText
+				tagName="h4"
+				placeholder={ __( 'Write a message…', 'jetpack' ) }
+				value={ getAttribute( 'heading' ) }
+				onChange={ value => setAttribute( 'heading', value ) }
+			/>
+			<RichText
+				tagName="p"
+				placeholder={ __( 'Write a message…', 'jetpack' ) }
+				value={ getAttribute( 'chooseAmountText' ) }
+				onChange={ value => setAttribute( 'chooseAmountText', value ) }
+			/>
+			<div className="wp-block-buttons donations__amounts">
+				{ amounts.map( ( amount, index ) => (
+					<Amount
+						currency={ currency }
+						defaultValue={ defaultAmounts[ index ] }
+						editable={ true }
+						label={ sprintf(
+							// translators: %d: Tier level e.g: "1", "2", "3"
+							__( 'Tier %d', 'jetpack' ),
+							index + 1
+						) }
+						key={ `jetpack-donations-amount-${ index }` }
+						onChange={ newAmount => setAmount( newAmount, index ) }
+						value={ amount }
 					/>
-					<div className="wp-block-buttons donations__amounts">
-						{ tiers.map( amount => (
-							<div className="wp-block-button donations__amount">
-								<div className="wp-block-button__link">{ formatCurrency( amount, currency ) }</div>
-							</div>
-						) ) }
-					</div>
-					{ getAttribute( 'showCustomAmount' ) && (
-						<>
-							<RichText
-								tagName="p"
-								placeholder={ __( 'Write a message…', 'jetpack' ) }
-								value={ getAttribute( 'customAmountText' ) }
-								onChange={ value => setAttribute( 'customAmountText', value ) }
-								inlineToolbar
-							/>
-							<div className="wp-block-button donations__amount donations__custom-amount">
-								<div className="wp-block-button__link">
-									{ CURRENCIES[ currency ].symbol }
-									<span className="donations__custom-amount-placeholder">
-										{ formatCurrency( customAmountPlaceholder, currency, { symbol: '' } ) }
-									</span>
-								</div>
-							</div>
-						</>
-					) }
-					<div className="donations__separator">——</div>
+				) ) }
+			</div>
+			{ showCustomAmount && (
+				<>
 					<RichText
 						tagName="p"
 						placeholder={ __( 'Write a message…', 'jetpack' ) }
-						value={ getAttribute( 'extraText' ) }
-						onChange={ value => setAttribute( 'extraText', value ) }
-						inlineToolbar
+						value={ getAttribute( 'customAmountText' ) }
+						onChange={ value => setAttribute( 'customAmountText', value ) }
 					/>
-					<RichText
-						wrapperClassName="wp-block-button donations__donate-button"
-						className="wp-block-button__link"
-						placeholder={ __( 'Write a message…', 'jetpack' ) }
-						value={ getAttribute( 'buttonText' ) }
-						onChange={ value => setAttribute( 'buttonText', value ) }
-						inlineToolbar
+					<Amount
+						currency={ currency }
+						label={ __( 'Custom amount', 'jetpack' ) }
+						defaultValue={ defaultCustomAmount }
+						className="donations__custom-amount"
 					/>
-				</div>
+				</>
 			) }
-		</Context.Consumer>
+			<div className="donations__separator">——</div>
+			<RichText
+				tagName="p"
+				placeholder={ __( 'Write a message…', 'jetpack' ) }
+				value={ getAttribute( 'extraText' ) }
+				onChange={ value => setAttribute( 'extraText', value ) }
+			/>
+			<div className="wp-block-button donations__donate-button">
+				<RichText
+					className="wp-block-button__link"
+					placeholder={ __( 'Write a message…', 'jetpack' ) }
+					value={ getAttribute( 'buttonText' ) }
+					onChange={ value => setAttribute( 'buttonText', value ) }
+				/>
+			</div>
+		</>
 	);
 };
 
diff --git a/extensions/blocks/donations/tabs.js b/extensions/blocks/donations/tabs.js
index 0eb8a01bf37e7..9408323e6d5a6 100644
--- a/extensions/blocks/donations/tabs.js
+++ b/extensions/blocks/donations/tabs.js
@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -23,7 +23,7 @@ const Tabs = props => {
 	const { oneTimePlanId, monthlyPlanId, annuallyPlanId } = attributes;
 	const [ activeTab, setActiveTab ] = useState( 'one-time' );
 
-	const isTabActive = tab => activeTab === tab;
+	const isTabActive = useCallback( tab => activeTab === tab, [ activeTab ] );
 
 	const tabs = {
 		'one-time': { title: __( 'One-Time', 'jetpack' ) },
@@ -35,14 +35,16 @@ const Tabs = props => {
 	useEffect( () => {
 		// Since there is no setting for disabling the one-time option, we can assume that the block has been just
 		// inserted if the attribute `oneTimePlanId` is not set.
-		if ( ! oneTimePlanId ) {
-			setAttributes( {
-				oneTimePlanId: products[ 'one-time' ],
-				monthlyPlanId: products[ '1 month' ],
-				annuallyPlanId: products[ '1 year' ],
-			} );
+		if ( oneTimePlanId ) {
+			return;
 		}
-	}, [ oneTimePlanId ] );
+
+		setAttributes( {
+			oneTimePlanId: products[ 'one-time' ],
+			monthlyPlanId: products[ '1 month' ],
+			annuallyPlanId: products[ '1 year' ],
+		} );
+	}, [ oneTimePlanId, products, setAttributes ] );
 
 	// Sets the plans when Stripe has been connected (we use fake plans while Stripe is not connected so user can still try the block).
 	useEffect( () => {
@@ -53,7 +55,7 @@ const Tabs = props => {
 				...( annuallyPlanId && { annuallyPlanId: products[ '1 year' ] } ),
 			} );
 		}
-	}, [ oneTimePlanId, monthlyPlanId, annuallyPlanId ] );
+	}, [ oneTimePlanId, monthlyPlanId, annuallyPlanId, setAttributes, products ] );
 
 	// Activates the one-time tab if the interval of the current active tab is disabled.
 	useEffect( () => {
@@ -64,7 +66,7 @@ const Tabs = props => {
 		if ( ! annuallyPlanId && isTabActive( '1 year' ) ) {
 			setActiveTab( 'one-time' );
 		}
-	}, [ monthlyPlanId, annuallyPlanId ] );
+	}, [ monthlyPlanId, annuallyPlanId, setActiveTab, isTabActive ] );
 
 	return (
 		<div className={ className }>
@@ -80,6 +82,7 @@ const Tabs = props => {
 									'is-active': isTabActive( interval ),
 								} ) }
 								onClick={ () => setActiveTab( interval ) }
+								key={ `jetpack-donations-tab-${ interval } ` }
 							>
 								{ title }
 							</Button>
@@ -88,9 +91,7 @@ const Tabs = props => {
 				) }
 				<div className="donations__content">
 					<Context.Provider value={ { activeTab } }>
-						{ Object.keys( tabs ).map( interval => (
-							<Tab { ...props } interval={ interval } />
-						) ) }
+						<Tab attributes={ attributes } setAttributes={ setAttributes } />
 					</Context.Provider>
 				</div>
 			</div>