-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
block-preview: add README file. props to @jasmussen and @getdate
- Loading branch information
Showing
1 changed file
with
46 additions
and
0 deletions.
There are no files selected for viewing
46 changes: 46 additions & 0 deletions
46
packages/block-editor/src/components/block-preview/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
BlockPreview | ||
============ | ||
|
||
`<BlockPreview />` allows you to preview any arbitrary HTML and CSS content, with a perfectly scaled thumbnail. | ||
|
||
## Usage | ||
|
||
Render the component passing in the required props: | ||
|
||
```jsx | ||
<BlockPreview | ||
blocks={ blocks } | ||
srcWidth={ 400 } | ||
srcHeight={ 300 } | ||
|
||
/> | ||
``` | ||
|
||
## A note on source dimensions | ||
|
||
Please note that `srcWidth` and `srcHeight` refer to the _unscaled dimensions_ of what you mean to preview. | ||
|
||
Think of the preview as a big source image, say 800x600 that's scaled down. So if the HTML you mean to preview looks good at 800x600, those are your source dimensionss. | ||
|
||
A calculated `transform: scale( ... )` value will be assigned to the thumbnail, so that it fits your _destination_ dimensions, which you set in CSS. | ||
|
||
|
||
## Props | ||
|
||
### `blocks` | ||
* **Type:** `array|object` | ||
* **Default:** `undefined` | ||
|
||
A block instance (object) or a blocks array you would like to render a preview. | ||
|
||
### `srcWidth` | ||
* **Type:** `Integer` | ||
* **Default:** `400` | ||
|
||
The unscaled dimension of the Block you are looking to preview. For example, if the Block looks good at `700x450` then you should set this value to `750`. See also `A note on source dimensions` above. | ||
|
||
### `srcHeight` | ||
* **Type:** `Integer` | ||
* **Default:** `300` | ||
|
||
The unscaled dimension of the Block you are looking to preview. For example, if the Block looks good at `700x450` then you should set this value to `450`. See also `A note on source dimensions` above. |