BlockEditor: expose BlockPreview component (#16834)

* block-editor: expose BlockPreview block

* block-preview: add README file. props to @jasmussen and @getdate

* match readme with current functionality

* move doc comment so it is picked up by the generator

packages/block-editor/README.md

@@ -122,6 +122,18 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="BlockPreview" href="#BlockPreview">#</a> **BlockPreview**
+
+BlockPreview renders a preview given an array of blocks.
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+
+_Returns_
+
+-   `WPElement`: Rendered element.
+
 <a name="BlockSelectionClearer" href="#BlockSelectionClearer">#</a> **BlockSelectionClearer**
 
 Undocumented declaration.

packages/block-editor/src/components/block-preview/README.md

@@ -0,0 +1,29 @@
+BlockPreview
+============
+
+`<BlockPreview />` allows you to preview blocks.
+
+## Usage
+
+Render the component passing in the required props:
+
+```jsx
+<BlockPreview
+	blocks={ blocks }
+	isScaled={ false }
+/>
+```
+
+## Props
+
+### `blocks`
+* **Type:** `array|object`
+* **Default:** `undefined`
+
+A block instance (object) or a blocks array you would like to render a preview.
+
+### `isScaled`
+* **Type:** `Boolean`
+* **Default:** `false`
+
+Use this if you need to render previews in smaller areas, like block thumbnails.

packages/block-editor/src/components/block-preview/index.js

@@ -16,14 +16,7 @@ import { withSelect } from '@wordpress/data';
 import BlockEditorProvider from '../provider';
 import BlockList from '../block-list';
 
-/**
- * Block Preview Component: It renders a preview given a block name and attributes.
- *
- * @param {Object} props Component props.
- *
- * @return {WPElement} Rendered element.
- */
-function BlockPreview( { blocks, settings, className, isScaled } ) {
+export function BlockPreview( { blocks, settings, className, isScaled } ) {
 	if ( ! blocks ) {
 		return null;
 	}
@@ -51,6 +44,13 @@ function BlockPreview( { blocks, settings, className, isScaled } ) {
 	);
 }
 
+/**
+ * BlockPreview renders a preview given an array of blocks.
+ *
+ * @param {Object} props Component props.
+ *
+ * @return {WPElement} Rendered element.
+ */
 export default withSelect( ( select ) => {
 	return {
 		settings: select( 'core/block-editor' ).getSettings(),

packages/block-editor/src/components/index.js

@@ -45,6 +45,7 @@ export { default as BlockEditorKeyboardShortcuts } from './block-editor-keyboard
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
+export { default as BlockPreview } from './block-preview';
 export { default as BlockSelectionClearer } from './block-selection-clearer';
 export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockTitle } from './block-title';