Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Product Block Editor]: replace custom preview component with BlockPreview core (#42019)

This commit is contained in:
Damián Suárez 2023-12-12 17:19:29 -03:00 committed by GitHub
parent 76b4f39116 8b9651276a
commit 0c8b1b2624
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/update-product-editor-use-block-preview-in-description-block Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: update
[Product Block Editor]: replace custom preview component by BlockPreview core

19
packages/js/product-editor/src/blocks/product-fields/description/edit.tsx
View File

@ -2,22 +2,23 @@
* External dependencies
*/
import { createElement, useEffect } from '@wordpress/element';
import { BlockInstance, serialize } from '@wordpress/blocks';
import { BlockInstance, parse, serialize } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import classNames from 'classnames';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { useEntityProp } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';
import {
BlockControls,
// @ts-expect-error no exported member.
useInnerBlocksProps,
BlockControls,
// @ts-expect-error no exported member.
BlockPreview,
} from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { ContentPreview } from '../../../components/content-preview';
import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
import { store } from '../../../store/product-editor-ui';
import type { DescriptionBlockEditComponent } from './types';
@ -108,11 +109,13 @@ export function DescriptionBlockEdit( {
{ ! description.length && <div { ...innerBlockProps } /> }
{ !! description.length && (
<div className="wp-block-woocommerce-product-description-field__cover" />
) }
{ !! description.length && (
<ContentPreview content={ description } />
<BlockPreview
blocks={ parse( description ) }
viewportWidth={ 800 }
additionalStyles={ [
{ css: 'body { padding: 32px; height: 10000px }' }, // hack: setting height to 10000px to ensure the preview is not cut off.
] }
/>
) }
{ isModalEditorOpen && <ModalEditorWelcomeGuide /> }

33
packages/js/product-editor/src/blocks/product-fields/description/editor.scss
View File

@ -1,38 +1,11 @@
.wp-block-woocommerce-product-description-field {
&:focus {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
outline: 3px solid transparent;
}
&.has-blocks {
min-height: 320px;
.wp-block-woocommerce-product-description-field__cover,
.woocommerce-content-preview {
min-height: 320px;
&:after {
display: none;
}
.woocommerce-content-preview__iframe {
min-height: 320px;
.block-editor-block-preview__container {
resize: vertical;
height: 320px;
}
}
}
.woocommerce-content-preview {
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 100;
}
}
.wp-block-woocommerce-product-description-field__cover {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 200;
}