diff --git a/extensions/blocks/send-a-message/editor.scss b/extensions/blocks/send-a-message/editor.scss
index f1b050b466c2..470100f3e856 100644
--- a/extensions/blocks/send-a-message/editor.scss
+++ b/extensions/blocks/send-a-message/editor.scss
@@ -1,11 +1,7 @@
 .wp-block-jetpack-send-a-message {
 	.block-editor-block-list__layout {
-		display: inline-flex;
-
 		.wp-block {
-			margin-top: 0px;
-			margin-bottom: 0px;
-			margin-right: 10px;
+			margin: 0;
 		}
 	}
 
diff --git a/extensions/blocks/send-a-message/whatsapp-button/edit.js b/extensions/blocks/send-a-message/whatsapp-button/edit.js
index 489dd992df3b..29b55dc65610 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/edit.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/edit.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -191,8 +192,12 @@ export default function WhatsAppButtonEdit( { attributes, setAttributes, classNa
 		);
 	};
 
+	const getBlockClassNames = () => {
+		return classnames( className, colorClass ? 'is-color-' + colorClass : undefined );
+	};
+
 	return (
-		<div className={ className + ' is-color-' + colorClass }>
+		<div className={ getBlockClassNames() }>
 			{ ToolbarGroup && (
 				<BlockControls>
 					<ToolbarGroup>
diff --git a/extensions/blocks/send-a-message/whatsapp-button/editor.scss b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
index c62356f134fc..c5117ba47591 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/editor.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/editor.scss
@@ -43,3 +43,9 @@
 		padding: 12px;
 	}
 }
+
+.wp-block[data-align="center"] {
+	.wp-block-jetpack-whatsapp-button {
+		justify-content: center;
+	}
+}
diff --git a/extensions/blocks/send-a-message/whatsapp-button/index.js b/extensions/blocks/send-a-message/whatsapp-button/index.js
index 7cf13154f698..e1701f35665c 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/index.js
+++ b/extensions/blocks/send-a-message/whatsapp-button/index.js
@@ -43,6 +43,7 @@ export const settings = {
 	supports: {
 		html: false,
 		reusable: false,
+		align: [ 'left', 'center', 'right' ],
 	},
 	attributes,
 	edit,
diff --git a/extensions/blocks/send-a-message/whatsapp-button/view.scss b/extensions/blocks/send-a-message/whatsapp-button/view.scss
index 5defa86379ff..b84f16461b0f 100644
--- a/extensions/blocks/send-a-message/whatsapp-button/view.scss
+++ b/extensions/blocks/send-a-message/whatsapp-button/view.scss
@@ -1,11 +1,11 @@
 div.wp-block-jetpack-whatsapp-button {
-	display: inline-block;
 	margin-right: 5px;
+	display: flex;
 
 	a.whatsapp-block__button {
 		background: #25D366;
 		color: #fff;
-		display: inline-block;
+		display: block;
 		padding: 8px 16px 8px 56px;
 		border-radius: 8px;
 		text-decoration: none;
@@ -28,12 +28,18 @@ div.wp-block-jetpack-whatsapp-button {
 		}
 	}
 
+	&.alignleft {
+		float: none;
+		justify-content: flex-start;
+	}
+
 	&.aligncenter {
-		text-align: center;
+		justify-content: center;
 	}
 
 	&.alignright {
-		text-align: right;
+		float: none;
+		justify-content: flex-end;
 	}
 
 	&.has-no-text {