make abstract component for styling previews inside dropdowns

packages/block-editor/src/components/block-preview/dropdown-wrapper.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * BlockPreviewDropdownWrapper provides styling so you can show Preview inside
+ * Dropdown components. It expects BlockPreview as a single child.
+ *
+ * @param {Object} props Component props.
+ *
+ * @return {WPElement} Rendered element.
+ */
+export default function BlockPreviewDropdownWrapper( { children } ) {
+	return (
+		<div className="block-editor-block-preview__dropdown-wrapper">
+			<div className="block-editor-block-preview__dropdown-wrapper-title">{ __( 'Preview' ) }</div>
+			{ children }
+		</div>
+	);
+}

packages/block-editor/src/components/block-preview/style.scss

@@ -32,3 +32,26 @@
 		}
 	}
 }
+
+.block-editor-block-preview__dropdown-wrapper {
+	border: $border-width solid $light-gray-500;
+	box-shadow: $shadow-popover;
+	background: $white;
+	position: absolute;
+	left: 100%;
+	top: -1px;
+	bottom: -1px;
+	width: 300px;
+	height: auto;
+	padding: 10px;
+	display: none;
+
+	@include break-medium {
+		display: block;
+	}
+}
+
+.block-editor-block-preview__dropdown-wrapper-title {
+	margin-bottom: 10px;
+	color: $dark-gray-300;
+}