From 37bd47dfa5e1617e1e6771a0b68e7bbfd2e55f4c Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Wed, 7 Dec 2022 16:00:20 +0530 Subject: [PATCH] Add block preview component in global styles (#45719) * add block preview in global styles panel update viewport widths for few blocks add border to preview block and convert viewport width to scale fix border radius and address minor review comments address review comments * revert scale * revert defaultPadding and alignment APIs * remove dropcap for paragraph --- .../block-api/block-registration.md | 2 +- packages/block-library/src/audio/index.js | 1 + packages/block-library/src/paragraph/index.js | 6 ---- packages/block-library/src/search/index.js | 6 +++- packages/block-library/src/site-logo/index.js | 1 + .../block-library/src/site-title/index.js | 1 + packages/block-library/src/table/index.js | 1 + .../global-styles/block-preview-panel.js | 29 +++++++++++++++++++ .../components/global-styles/screen-block.js | 5 ++++ .../src/components/global-styles/style.scss | 12 ++++++++ 10 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/block-preview-panel.js diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md index 1702bbd59c875..97077cb7efdfa 100644 --- a/docs/reference-guides/block-api/block-registration.md +++ b/docs/reference-guides/block-api/block-registration.md @@ -179,7 +179,7 @@ attributes: { - **Type:** `Object` -Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block. +Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block and in the Styles panel when the block is selected. The data provided in the example object should match the attributes defined. For example: diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index 0d3d05936ef90..aa1bba1c341d2 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -23,6 +23,7 @@ export const settings = { attributes: { src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg', }, + viewportWidth: 350, }, transforms, deprecated, diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 70ae87ccf5f36..c9a00ccf4b33f 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -30,12 +30,6 @@ export const settings = { content: __( 'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.' ), - style: { - typography: { - fontSize: 28, - }, - }, - dropCap: true, }, }, __experimentalLabel( attributes, { context } ) { diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js index 441336316415b..85770a23268cb 100644 --- a/packages/block-library/src/search/index.js +++ b/packages/block-library/src/search/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { search as icon } from '@wordpress/icons'; /** @@ -17,7 +18,10 @@ export { metadata, name }; export const settings = { icon, - example: {}, + example: { + attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) }, + viewportWidth: 400, + }, variations, edit, }; diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js index 68d8eb6f8b930..fc10df08e17de 100644 --- a/packages/block-library/src/site-logo/index.js +++ b/packages/block-library/src/site-logo/index.js @@ -16,6 +16,7 @@ export { metadata, name }; export const settings = { icon, + example: {}, edit, transforms, }; diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js index 01fe15598d6f1..87934888ce438 100644 --- a/packages/block-library/src/site-title/index.js +++ b/packages/block-library/src/site-title/index.js @@ -17,6 +17,7 @@ export { metadata, name }; export const settings = { icon, + example: {}, edit, transforms, deprecated, diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index 5839abc4c19f2..dea09dd7c9829 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -91,6 +91,7 @@ export const settings = { }, ], }, + viewportWidth: 450, }, transforms, edit, diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js new file mode 100644 index 0000000000000..296a39a5d065d --- /dev/null +++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { BlockPreview } from '@wordpress/block-editor'; +import { getBlockType, getBlockFromExample } from '@wordpress/blocks'; +import { useResizeObserver } from '@wordpress/compose'; + +const BlockPreviewPanel = ( { name } ) => { + const blockExample = getBlockType( name )?.example; + const [ + containerResizeListener, + { width: containerWidth, height: containerHeight }, + ] = useResizeObserver(); + const viewportWidth = blockExample?.viewportWidth || containerWidth; + + return ! blockExample ? null : ( +
+ { containerResizeListener } + + +
+ ); +}; + +export default BlockPreviewPanel; diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 10455855d97e5..b9d2502ef8bc1 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -2,12 +2,14 @@ * WordPress dependencies */ import { getBlockType } from '@wordpress/blocks'; +import { __experimentalSpacer as Spacer } from '@wordpress/components'; /** * Internal dependencies */ import ContextMenu from './context-menu'; import ScreenHeader from './header'; +import BlockPreviewPanel from './block-preview-panel'; function ScreenBlock( { name } ) { const blockType = getBlockType( name ); @@ -15,6 +17,9 @@ function ScreenBlock( { name } ) { return ( <> + + + ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index c081703f1f37b..16c9b9c418dca 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -1,3 +1,6 @@ +// Variables +$block-preview-height: 150px; + .edit-site-global-styles-preview { display: flex; align-items: center; @@ -121,3 +124,12 @@ overflow: hidden; text-overflow: ellipsis; } + +.edit-site-global-styles__block-preview-panel { + position: relative; + width: 100%; + height: $block-preview-height + 2 * $border-width; + overflow: auto; + border: $gray-200 $border-width solid; + border-radius: $radius-block-ui; +}