Skip to content
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

Jump to bottom

Unify BlockPreview & BlockPreviewContent into one component #16801

Merged
merged 18 commits into from
Aug 2, 2019
Merged

Unify BlockPreview & BlockPreviewContent into one component #16801

Show file tree
Hide file tree
Changes from all commits
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
28 changes: 15 additions & 13 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
* External dependencies
*/
import { castArray } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Disabled } from '@wordpress/components';
import { withSelect } from '@wordpress/data';

Expand All @@ -23,22 +23,24 @@ import BlockList from '../block-list';
*
* @return {WPElement} Rendered element.
*/
function BlockPreview( props ) {
return (
<div className="editor-block-preview block-editor-block-preview">
<div className="editor-block-preview__title block-editor-block-preview__title">{ __( 'Preview' ) }</div>
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
<BlockPreviewContent { ...props } />
</div>
);
}

export function BlockPreviewContent( { blocks, settings } ) {
function BlockPreview( { blocks, settings, className, isScaled } ) {
if ( ! blocks ) {
return null;
}

return (
<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
<Disabled
aria-hidden
className={
classnames(
className,
'block-editor-block-preview',
'editor-styles-wrapper',
{
'is-scaled': isScaled,
}
)
}
>
<BlockEditorProvider
value={ castArray( blocks ) }
settings={ settings }
Expand Down
54 changes: 21 additions & 33 deletions packages/block-editor/src/components/block-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,9 @@
.block-editor-block-preview {
pointer-events: none;
padding: 10px;
padding: $block-padding;
font-family: $editor-font;
overflow: hidden;
display: none;
width: 100%;

@include break-medium {
display: block;
}

.block-editor-block-preview__content {
padding: $block-padding;
border: $border-width solid $light-gray-500;
font-family: $editor-font;

> div {
transform: scale(0.9);
transform-origin: center top;
font-family: $editor-font;
}

> div section {
height: auto;
}

> .reusable-block-indicator {
display: none;
}
}
}

.block-editor-block-preview__content {
// Resetting the block editor paddings and margins
.block-editor-block-list__layout,
.block-editor-block-list__block {
Expand All @@ -38,9 +12,23 @@
.editor-block-list__block-edit [data-block] {
margin-top: 0;
}
}

.block-editor-block-preview__title {
margin-bottom: 10px;
color: $dark-gray-300;
> div section {
height: auto;
}

> .reusable-block-indicator {
display: none;
}

.block-list-appender {
display: none;
}

&.is-scaled {
> div {
transform: scale(0.9);
transform-origin: center top;
}
}
}
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { getBlockType, cloneBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { BlockPreviewContent } from '../block-preview';
import BlockPreview from '../block-preview';

/**
* Returns the active style from the given className.
Expand Down Expand Up @@ -122,7 +122,8 @@ function BlockStyles( {
aria-label={ style.label || style.name }
>
<div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
<BlockPreviewContent
<BlockPreview
isScaled
blocks={ cloneBlock( block, {
className: styleClassName,
} ) }
Expand Down
19 changes: 11 additions & 8 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 @@ -160,14 +160,17 @@ export class BlockSwitcher extends Component {
}

{ ( hoveredClassName !== null ) &&
<BlockPreview
blocks={
cloneBlock( blocks[ 0 ], {
className: hoveredClassName,
} )
}

/>
<div className="block-editor-block-switcher__preview">
<div className="block-editor-block-switcher__preview-title">{ __( 'Preview' ) }</div>
<BlockPreview
className="block-editor-block-switcher__preview-content"
blocks={
cloneBlock( blocks[ 0 ], {
className: hoveredClassName,
} )
}
/>
</div>
}
</>
) }
Expand Down
35 changes: 23 additions & 12 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 @@ -97,18 +97,6 @@
.block-editor-block-switcher__popover .components-popover__content {
@include break-medium {
position: relative;

.block-editor-block-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;
}
}

// Hide the bottom border on the last panel so it stacks with the popover.
Expand Down Expand Up @@ -137,3 +125,26 @@
.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;
}
8 changes: 7 additions & 1 deletion 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 @@ -351,7 +351,13 @@ export class InserterMenu extends Component {
</div>

{ hoveredItem && isReusableBlock( hoveredItem ) &&
<BlockPreview blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) } />
<div className="block-editor-inserter__preview">
<div className="block-editor-inserter__preview-title">{ __( 'Preview' ) }</div>
<BlockPreview
className="block-editor-inserter__preview-content"
blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
/>
</div>
}
</div>
);
Expand Down
34 changes: 23 additions & 11 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 @@ -43,17 +43,6 @@ $block-inserter-search-height: 38px;
@include break-medium {
width: 400px;
position: relative;

.block-editor-block-preview {
border: $border-width solid $light-gray-500;
box-shadow: $shadow-popover;
background: $white;
position: absolute;
left: 100%;
top: -1px;
bottom: -1px;
width: 300px;
}
}
}

Expand Down Expand Up @@ -140,3 +129,26 @@ $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;
}