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 1702bbd59c8751..97077cb7efdfaa 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 0d3d05936ef90f..aa1bba1c341d2f 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 70ae87ccf5f36c..c9a00ccf4b33f0 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 441336316415b9..85770a23268cba 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 68d8eb6f8b9300..fc10df08e17dee 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 01fe15598d6f1b..87934888ce4380 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 5839abc4c19f25..dea09dd7c98298 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 00000000000000..296a39a5d065d1 --- /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 10455855d97e58..b9d2502ef8bc10 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 c081703f1f37b2..16c9b9c418dcad 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; +}