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.

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

Remove the old block preview implementation #21096

Merged
merged 1 commit into from
Mar 26, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function BlockPattern( { pattern, onClick } ) {
tabIndex={ 0 }
>
<div className="block-editor-patterns__item-preview">
<BlockPreview blocks={ blocks } autoHeight />
<BlockPreview blocks={ blocks } />
</div>
<div className="block-editor-patterns__item-title">{ title }</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-preview/auto.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function AutoBlockPreview( { viewportWidth } ) {

return (
<div
className="block-editor-block-preview__container editor-styles-wrapper is-auto-height"
className="block-editor-block-preview__container editor-styles-wrapper"
aria-hidden
style={ {
height: ( contentHeight * containerWidth ) / viewportWidth,
Expand Down
36 changes: 6 additions & 30 deletions packages/block-editor/src/components/block-preview/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { castArray, noop } from 'lodash';
import { castArray } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -13,7 +13,6 @@ import { useLayoutEffect, useReducer, useMemo } from '@wordpress/element';
* Internal dependencies
*/
import BlockEditorProvider from '../provider';
import ScaledBlockPreview from './scaled';
import AutoHeightBlockPreview from './auto';

/**
Expand All @@ -25,14 +24,7 @@ import AutoHeightBlockPreview from './auto';
* @param {number} viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
* @return {WPComponent} The component to be rendered.
*/
export function BlockPreview( {
blocks,
viewportWidth = 700,
padding,
autoHeight = false,
__experimentalOnReady = noop,
__experimentalScalingDelay = 100,
} ) {
export function BlockPreview( { blocks, viewportWidth = 700 } ) {
const settings = useSelect( ( select ) =>
select( 'core/block-editor' ).getSettings()
);
Expand All @@ -47,26 +39,10 @@ export function BlockPreview( {
}
return (
<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
{ /*
* The key prop is used to force recomputing the preview
* by remounting the component, ScaledBlockPreview is not meant to
* be rerendered.
*/ }
{ autoHeight ? (
<AutoHeightBlockPreview
key={ recompute }
viewportWidth={ viewportWidth }
/>
) : (
<ScaledBlockPreview
key={ recompute }
blocks={ renderedBlocks }
viewportWidth={ viewportWidth }
padding={ padding }
onReady={ __experimentalOnReady }
scalingDelay={ __experimentalScalingDelay }
/>
) }
<AutoHeightBlockPreview
key={ recompute }
viewportWidth={ viewportWidth }
/>
</BlockEditorProvider>
);
}
Expand Down
155 changes: 0 additions & 155 deletions packages/block-editor/src/components/block-preview/scaled.js

This file was deleted.

10 changes: 0 additions & 10 deletions packages/block-editor/src/components/block-preview/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@
width: 100%;

overflow: hidden;
&.is-ready {
overflow: visible;
}
}

.block-editor-block-preview__content {
Expand All @@ -35,13 +32,6 @@
overflow: visible;
min-height: auto;

.block-editor-block-preview__container &.is-centered {
.block-editor-block-list__layout,
.block-editor-block-list__block {
padding: 0;
}
}

.block-editor-block-list__insertion-point,
.block-editor-block-drop-zone,
.reusable-block-indicator,
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/block-styles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ function BlockStyles( {
>
<div className="block-editor-block-styles__item-preview">
<BlockPreview
autoHeight
viewportWidth={ 500 }
blocks={
type.example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,6 @@ export class BlockSwitcher extends Component {
{ __( 'Preview' ) }
</div>
<BlockPreview
autoHeight
viewportWidth={ 500 }
blocks={
hoveredBlockType.example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ function InserterPreviewPanel( { item } ) {
{ isReusableBlock( item ) || hoveredItemBlockType.example ? (
<div className="block-editor-inserter__preview-content">
<BlockPreview
padding={ 10 }
viewportWidth={ 500 }
blocks={
hoveredItemBlockType.example
Expand All @@ -43,7 +42,6 @@ function InserterPreviewPanel( { item } ) {
item.initialAttributes
)
}
autoHeight
/>
</div>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function TemplatePartPreview() {
<div className="wp-block-template-part__placeholder-preview-title">
{ __( 'Preview' ) }
</div>
<BlockPreview blocks={ blocks } autoHeight />
<BlockPreview blocks={ blocks } />
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function TemplatePreview( { item } ) {
);
return (
<div className="edit-site-template-switcher__preview">
{ !! blocks && <BlockPreview blocks={ blocks } autoHeight /> }
{ !! blocks && <BlockPreview blocks={ blocks } /> }
</div>
);
}
Expand Down