move block switcher & inserter to use common component for styling

WordPress · Jul 31, 2019 · 3006c01 · 3006c01
1 parent 5bc673e
commit 3006c01
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 54 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -20,6 +20,7 @@ import { compose } from '@wordpress/compose';
 import BlockIcon from '../block-icon';
 import BlockStyles from '../block-styles';
 import BlockPreview from '../block-preview';
+import BlockPreviewDropdownWrapper from '../block-preview/dropdown-wrapper';
 import BlockTypesList from '../block-types-list';
 
 export class BlockSwitcher extends Component {
@@ -160,17 +161,15 @@ export class BlockSwitcher extends Component {
 						}
 
 						{ ( hoveredClassName !== null ) &&
-							<div className="block-editor-block-switcher__preview">
-								<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>
+							<BlockPreviewDropdownWrapper>
 								<BlockPreview
-									className="block-editor-block-switcher__preview-content"
 									blocks={
 										cloneBlock( blocks[ 0 ], {
 											className: hoveredClassName,
 										} )
 									}
 								/>
-							</div>
+							</BlockPreviewDropdownWrapper>
 						}
 					</>
 				) }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -125,26 +125,3 @@
 .block-editor-block-switcher__popover .block-editor-block-types-list {
 	margin: 8px -8px -8px;
 }
-
-.block-editor-block-switcher__preview {
-	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-switcher__preview-title {
-	margin-bottom: 10px;
-	color: $dark-gray-300;
-}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -38,6 +38,7 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
+import BlockPreviewDropdownWrapper from '../block-preview/dropdown-wrapper';
 import BlockTypesList from '../block-types-list';
 import ChildBlocks from './child-blocks';
 
@@ -351,13 +352,11 @@ export class InserterMenu extends Component {
 				</div>
 
 				{ hoveredItem && isReusableBlock( hoveredItem ) &&
-					<div className="block-editor-inserter__preview">
-						<div className="block-editor-inserter__preview-title">{ __( 'Preview' ) }</div>
+					<BlockPreviewDropdownWrapper>
 						<BlockPreview
-							className="block-editor-inserter__preview-content"
 							blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
 						/>
-					</div>
+					</BlockPreviewDropdownWrapper>
 				}
 			</div>
 		);

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -129,26 +129,3 @@ $block-inserter-search-height: 38px;
 		margin-right: $grid-size;
 	}
 }
-
-.block-editor-inserter__preview {
-	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-inserter__preview-title {
-	margin-bottom: 10px;
-	color: $dark-gray-300;
-}