demo.diff

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 2485c73e9..ad77a6965 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -72,6 +72,7 @@ function BlockStyles( {
 	block,
 	onSwitch = noop,
 	onHoverClassName = noop,
+	allBlocks,
 } ) {
 	if ( ! styles || styles.length === 0 ) {
 		return null;
@@ -97,55 +98,61 @@ function BlockStyles( {
 	}
 
 	return (
-		<div className="editor-block-styles block-editor-block-styles">
-			{ styles.map( ( style ) => {
-				const styleClassName = replaceActiveStyle( className, activeStyle, style );
-				return (
-					<div
-						key={ style.name }
-						className={ classnames(
-							'editor-block-styles__item block-editor-block-styles__item', {
-								'is-active': activeStyle === style,
-							}
-						) }
-						onClick={ () => updateClassName( style ) }
-						onKeyDown={ ( event ) => {
-							if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
-								event.preventDefault();
-								updateClassName( style );
-							}
-						} }
-						onMouseEnter={ () => onHoverClassName( styleClassName ) }
-						onMouseLeave={ () => onHoverClassName( null ) }
-						role="button"
-						tabIndex="0"
-						aria-label={ style.label || style.name }
-					>
-						<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
-							<BlockPreviewContent
-								blocks={ cloneBlock( block, {
-									className: styleClassName,
-								} ) }
-							/>
+		<>
+			<div className="editor-block-styles block-editor-block-styles">
+				{ styles.map( ( style ) => {
+					const styleClassName = replaceActiveStyle( className, activeStyle, style );
+					return (
+						<div
+							key={ style.name }
+							className={ classnames(
+								'editor-block-styles__item block-editor-block-styles__item', {
+									'is-active': activeStyle === style,
+								}
+							) }
+							onClick={ () => updateClassName( style ) }
+							onKeyDown={ ( event ) => {
+								if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+									event.preventDefault();
+									updateClassName( style );
+								}
+							} }
+							onMouseEnter={ () => onHoverClassName( styleClassName ) }
+							onMouseLeave={ () => onHoverClassName( null ) }
+							role="button"
+							tabIndex="0"
+							aria-label={ style.label || style.name }
+						>
+							<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
+								<BlockPreviewContent
+									blocks={ cloneBlock( block, {
+										className: styleClassName,
+									} ) }
+								/>
+							</div>
+							<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
+								{ style.label || style.name }
+							</div>
 						</div>
-						<div className="editor-block-styles__item-label block-editor-block-styles__item-label">
-							{ style.label || style.name }
-						</div>
-					</div>
-				);
-			} ) }
-		</div>
+					);
+				} ) }
+			</div>
+			<BlockPreviewContent
+				blocks={ allBlocks }
+			/>
+		</>
 	);
 }
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock } = select( 'core/block-editor' );
+		const { getBlock, getBlocks } = select( 'core/block-editor' );
 		const { getBlockStyles } = select( 'core/blocks' );
 		const block = getBlock( clientId );
 		const blockType = getBlockType( block.name );
 
 		return {
+			allBlocks: getBlocks(),
 			block,
 			className: block.attributes.className || '',
 			styles: getBlockStyles( block.name ),