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 16 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
21 changes: 21 additions & 0 deletions packages/block-editor/src/components/block-preview/dropdown-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } ) {
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
return (
<div className="block-editor-block-preview__dropdown-wrapper">
<div className="block-editor-block-preview__dropdown-wrapper-title">{ __( 'Preview' ) }</div>
{ children }
</div>
);
}
27 changes: 14 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,23 @@ 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(
'editor-block-preview', 'block-editor-block-preview',
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
'editor-styles-wrapper', className,
{
'is-scaled': isScaled,
}
)
}
>
<BlockEditorProvider
value={ castArray( blocks ) }
settings={ settings }
Expand Down
65 changes: 38 additions & 27 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,46 +1,57 @@
.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;
// Resetting the block editor paddings and margins
.block-editor-block-list__layout,
.block-editor-block-list__block {
padding: 0;
}
.editor-block-list__block-edit [data-block] {
margin-top: 0;
}

> div section {
height: auto;
}

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

.block-editor-block-preview__content {
padding: $block-padding;
border: $border-width solid $light-gray-500;
font-family: $editor-font;
.block-list-appender {
display: none;
}

&.is-scaled {
> 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 {
padding: 0;
}
.editor-block-list__block-edit [data-block] {
margin-top: 0;
.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__title {
.block-editor-block-preview__dropdown-wrapper-title {
margin-bottom: 10px;
color: $dark-gray-300;
}
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
18 changes: 10 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 @@ -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,14 +161,15 @@ export class BlockSwitcher extends Component {
}

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

/>
<BlockPreviewDropdownWrapper>
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
<BlockPreview
blocks={
cloneBlock( blocks[ 0 ], {
className: hoveredClassName,
} )
}
/>
</BlockPreviewDropdownWrapper>
}
</>
) }
Expand Down
12 changes: 0 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
7 changes: 6 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 @@ -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,7 +352,11 @@ export class InserterMenu extends Component {
</div>

{ hoveredItem && isReusableBlock( hoveredItem ) &&
<BlockPreview blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) } />
<BlockPreviewDropdownWrapper>
<BlockPreview
blocks={ createBlock( hoveredItem.name, hoveredItem.initialAttributes ) }
/>
</BlockPreviewDropdownWrapper>
}
</div>
);
Expand Down
11 changes: 0 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