Skip to content

Unify BlockPreview & BlockPreviewContent into one component #16801

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marekhrabe merged 18 commits into from
Aug 2, 2019
Merged

Unify BlockPreview & BlockPreviewContent into one component #16801

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6493ad6
export BlockPreview
marekhrabe Jun 7, 2019
99ae472
Update reusable Blocks preview to use the new single blocks prop
getdave Jul 24, 2019
5b4c708
Remove export. This is being handled in another PR
getdave Jul 30, 2019
fff5c40
mark all usages with red for easier visual tracking
marekhrabe Jul 29, 2019
cd9ee53
make a new unified component
marekhrabe Jul 29, 2019
88701f7
use new component in style thumbnail
marekhrabe Jul 29, 2019
b1f0f4d
update usage in block switcher, add isScaled & className support
marekhrabe Jul 29, 2019
c322e31
revert initial state in block switcher
marekhrabe Jul 29, 2019
d9f5f52
use in block inserter
marekhrabe Jul 29, 2019
d4dc64a
use the new unified component as default, migrate usages
marekhrabe Jul 29, 2019
873bd40
drop word 'unified' from classname
marekhrabe Jul 29, 2019
3251ebd
remove extra import. h/t @retrofox
marekhrabe Jul 31, 2019
1695492
remove border around previews
marekhrabe Jul 31, 2019
c9ecef0
fix styling of scaled previews
marekhrabe Jul 31, 2019
5bc673e
make abstract component for styling previews inside dropdowns
marekhrabe Jul 31, 2019
3006c01
move block switcher & inserter to use common component for styling
marekhrabe Jul 31, 2019
0822e3d
drop the old editor-block-preview class
marekhrabe Aug 1, 2019
5c367a7
revert dropdown component abstraction
marekhrabe Aug 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
move block switcher & inserter to use common component for styling
  • Loading branch information
@marekhrabe
marekhrabe committed Jul 31, 2019
commit 3006c01f9d728086a8a89a43a0e51664a996a6c0
7 changes: 3 additions & 4 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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;
}