Skip to content

Commit

Permalink
move block switcher & inserter to use common component for styling
Browse files Browse the repository at this point in the history
  • Loading branch information
marekhrabe committed Jul 31, 2019
1 parent 5bc673e commit 3006c01
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 54 deletions.
7 changes: 3 additions & 4 deletions packages/block-editor/src/components/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
}
</>
) }
Expand Down
23 changes: 0 additions & 23 deletions packages/block-editor/src/components/block-switcher/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
7 changes: 3 additions & 4 deletions packages/block-editor/src/components/inserter/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
);
Expand Down
23 changes: 0 additions & 23 deletions packages/block-editor/src/components/inserter/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 3006c01

Please sign in to comment.