diff --git a/extensions/blocks/calendly/blockStylesPreviewAndSelector.js b/extensions/blocks/calendly/blockStylesPreviewAndSelector.js
deleted file mode 100644
index 5248c13e0d090..0000000000000
--- a/extensions/blocks/calendly/blockStylesPreviewAndSelector.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External Dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { getBlockType, cloneBlock, getBlockFromExample } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { ENTER, SPACE } from '@wordpress/keycodes';
-
-export default function BlockStylesPreviewAndSelector( {
-	attributes,
-	clientId,
-	styleOptions,
-	onSelectStyle,
-	activeStyle,
-} ) {
-	const block = useSelect( select => {
-		const { getBlock } = select( 'core/block-editor' );
-		return getBlock( clientId );
-	} );
-
-	const type = getBlockType( block.name );
-
-	return (
-		<div className="block-editor-block-styles">
-			{ styleOptions.map( styleOption => {
-				return (
-					<div
-						key={ styleOption.name }
-						className={ classnames( 'block-editor-block-styles__item', {
-							'is-active': styleOption.name === activeStyle,
-						} ) }
-						onClick={ () => {
-							onSelectStyle( { style: styleOption.name } );
-						} }
-						onKeyDown={ event => {
-							if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-								event.preventDefault();
-								onSelectStyle( { style: styleOption.name } );
-							}
-						} }
-						role="button"
-						tabIndex="0"
-						aria-label={ styleOption.label }
-					>
-						<div className="block-editor-block-styles__item-preview editor-styles-wrapper">
-							<BlockPreview
-								viewportWidth={ 500 }
-								blocks={
-									type.example
-										? getBlockFromExample( block.name, {
-												attributes: { ...type.example.attributes, style: styleOption.name },
-												innerBlocks: type.example.innerBlocks,
-										  } )
-										: cloneBlock( block, {
-												...attributes,
-												style: styleOption.name,
-										  } )
-								}
-							/>
-						</div>
-						<div className="block-editor-block-styles__item-label">{ styleOption.label }</div>
-					</div>
-				);
-			} ) }
-		</div>
-	);
-}
diff --git a/extensions/blocks/calendly/edit.js b/extensions/blocks/calendly/edit.js
index 67ce1eb33db4b..0846673c11f8c 100644
--- a/extensions/blocks/calendly/edit.js
+++ b/extensions/blocks/calendly/edit.js
@@ -30,7 +30,7 @@ import attributeDetails from './attributes';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import SubmitButton from '../../shared/submit-button';
 import { getAttributesFromEmbedCode } from './utils';
-import BlockStylesPreviewAndSelector from './blockStylesPreviewAndSelector';
+import BlockStylesSelector from '../../shared/components/block-styles-selector';
 
 export default function CalendlyEdit( { attributes, className, clientId, setAttributes } ) {
 	const validatedAttributes = getValidatedAttributes( attributeDetails, attributes );
@@ -179,8 +179,8 @@ export default function CalendlyEdit( { attributes, className, clientId, setAttr
 	};
 
 	const styleOptions = [
-		{ name: 'inline', label: __( 'Inline', 'jetpack' ) },
-		{ name: 'link', label: __( 'Link', 'jetpack' ) },
+		{ value: 'inline', label: __( 'Inline', 'jetpack' ) },
+		{ value: 'link', label: __( 'Link', 'jetpack' ) },
 	];
 
 	const blockControls = (
@@ -192,8 +192,8 @@ export default function CalendlyEdit( { attributes, className, clientId, setAttr
 					label={ __( 'Style', 'jetpack' ) }
 					controls={ styleOptions.map( styleOption => ( {
 						title: styleOption.label,
-						isActive: styleOption.name === style,
-						onClick: () => setAttributes( { style: styleOption.name } ),
+						isActive: styleOption.value === style,
+						onClick: () => setAttributes( { style: styleOption.value } ),
 					} ) ) }
 					popoverProps={ { className: 'is-calendly' } }
 				/>
@@ -204,15 +204,18 @@ export default function CalendlyEdit( { attributes, className, clientId, setAttr
 	const inspectorControls = (
 		<InspectorControls>
 			{ url && (
-				<PanelBody title={ __( 'Styles', 'jetpack' ) }>
-					<BlockStylesPreviewAndSelector
-						clientId={ clientId }
-						styleOptions={ styleOptions }
-						onSelectStyle={ setAttributes }
-						activeStyle={ style }
-						attributes={ attributes }
-					/>
-				</PanelBody>
+				<>
+					<PanelBody title={ __( 'Styles', 'jetpack' ) }>
+						<BlockStylesSelector
+							clientId={ clientId }
+							styleOptions={ styleOptions }
+							onSelectStyle={ setAttributes }
+							activeStyle={ style }
+							attributes={ attributes }
+							viewportWidth={ 500 }
+						/>
+					</PanelBody>
+				</>
 			) }
 			<PanelBody title={ __( 'Calendar Settings', 'jetpack' ) } initialOpen={ false }>
 				<form onSubmit={ parseEmbedCode } className={ `${ className }-embed-form-sidebar` }>
diff --git a/extensions/blocks/opentable/edit.js b/extensions/blocks/opentable/edit.js
index 161cc09d37f0a..c39a327fc120b 100644
--- a/extensions/blocks/opentable/edit.js
+++ b/extensions/blocks/opentable/edit.js
@@ -25,7 +25,6 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -33,6 +32,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
 import './editor.scss';
 import icon from './icon';
 import RestaurantPicker from './restaurant-picker';
+import BlockStylesSelector from '../../shared/components/block-styles-selector';
 
 import {
 	getStyleOptions,
@@ -189,33 +189,14 @@ export default function OpenTableEdit( { attributes, setAttributes, className, c
 			</InspectorAdvancedControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Styles', 'jetpack' ) }>
-					<div className="block-editor-block-styles">
-						{ styleOptions.map( styleOption => {
-							return (
-								<div
-									key={ styleOption.value }
-									className={ classnames( 'block-editor-block-styles__item is-opentable', {
-										'is-active': styleOption.value === style,
-									} ) }
-									onClick={ () => updateStyle( styleOption.value ) }
-									onKeyDown={ event => {
-										if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-											event.preventDefault();
-											updateStyle( styleOption.value );
-										}
-									} }
-									role="button"
-									tabIndex="0"
-									aria-label={ styleOption.label }
-								>
-									<div className="block-editor-block-styles__item-preview is-opentable">
-										{ blockPreview( styleOption.value ) }
-									</div>
-									<div className="block-editor-block-styles__item-label">{ styleOption.label }</div>
-								</div>
-							);
-						} ) }
-					</div>
+					<BlockStylesSelector
+						clientId={ clientId }
+						styleOptions={ styleOptions }
+						onSelectStyle={ setAttributes }
+						activeStyle={ style }
+						attributes={ attributes }
+						viewportWidth={ 150 }
+					/>
 				</PanelBody>
 				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
 					<RestaurantPicker rids={ rid } onChange={ onPickerSubmit } />
diff --git a/extensions/blocks/opentable/editor.scss b/extensions/blocks/opentable/editor.scss
index df332c9e85c74..7dac5e61663d9 100644
--- a/extensions/blocks/opentable/editor.scss
+++ b/extensions/blocks/opentable/editor.scss
@@ -126,31 +126,12 @@
 
 }
 
-.components-toggle-control.is-opentable ,
-.block-editor-block-styles__item.is-opentable {
+.components-toggle-control.is-opentable {
 	padding-top: 6px;
 }
 
-
-.block-editor-block-styles__item-preview.is-opentable {
-	height: 100px;
-	margin-top: 0;
-	padding-top: 0;
-	position: relative;
-
-	> iframe {
-		transform-origin: 0 0;
-		transform: scale( 0.7 );
-		width: 143%;
-		height: 143%;
-		position: absolute;
-		z-index: 1;
-		overflow: hidden;
-	}
-}
-
 .is-opentable {
-	.is-active {
+	button.is-active {
 		font-weight: bold;
 	}
 }
diff --git a/extensions/shared/components/block-styles-selector/index.js b/extensions/shared/components/block-styles-selector/index.js
new file mode 100644
index 0000000000000..b798f76a2d7d6
--- /dev/null
+++ b/extensions/shared/components/block-styles-selector/index.js
@@ -0,0 +1,96 @@
+/**
+ * External Dependencies
+ */
+import classnames from 'classnames';
+import { isEqual } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+import { getBlockType, getBlockFromExample, createBlock } from '@wordpress/blocks';
+import { BlockPreview } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+const StylePreview = ( { attributes, styleOption, viewportWidth, blockName } ) => {
+	const type = getBlockType( blockName );
+
+	return (
+		<div className="block-editor-block-styles__item-preview">
+			<BlockPreview
+				viewportWidth={ viewportWidth }
+				blocks={
+					type.example
+						? getBlockFromExample( blockName, {
+								attributes: { ...type.example.attributes, style: styleOption.value },
+								innerBlocks: type.example.innerBlocks,
+						  } )
+						: createBlock( type, attributes )
+				}
+			/>
+		</div>
+	);
+};
+
+const StylePreviewComponent = memo
+	? memo( StylePreview, ( prevProps, nextProps ) => isEqual( prevProps, nextProps ) )
+	: StylePreview;
+
+export default function BlockStylesSelector( {
+	attributes,
+	clientId,
+	styleOptions,
+	onSelectStyle,
+	activeStyle,
+	viewportWidth,
+} ) {
+	let block;
+	if ( useSelect ) {
+		block = useSelect( select => {
+			const { getBlock } = select( 'core/block-editor' );
+			return getBlock( clientId );
+		} );
+	}
+
+	return (
+		<div className="block-editor-block-styles">
+			{ styleOptions.map( styleOption => {
+				const optionAttributes = {
+					...attributes,
+					style: styleOption.value,
+				};
+				return (
+					<div
+						key={ styleOption.value }
+						className={ classnames( 'block-editor-block-styles__item', {
+							'is-active': styleOption.value === activeStyle,
+						} ) }
+						onClick={ () => {
+							onSelectStyle( { style: styleOption.value } );
+						} }
+						onKeyDown={ event => {
+							if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+								event.preventDefault();
+								onSelectStyle( { style: styleOption.value } );
+							}
+						} }
+						role="button"
+						tabIndex="0"
+						aria-label={ styleOption.label }
+					>
+						{ useSelect && block && (
+							<StylePreviewComponent
+								blockName={ block.name }
+								styleOption={ styleOption }
+								attributes={ optionAttributes }
+								viewportWidth={ viewportWidth }
+							/>
+						) }
+						<div className="block-editor-block-styles__item-label">{ styleOption.label }</div>
+					</div>
+				);
+			} ) }
+		</div>
+	);
+}