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 * External dependencies
*/ */
import { createElement, useEffect } from '@wordpress/element'; 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 { useSelect } from '@wordpress/data';
import classNames from 'classnames'; import classNames from 'classnames';
import { useWooBlockProps } from '@woocommerce/block-templates'; import { useWooBlockProps } from '@woocommerce/block-templates';
import { useEntityProp } from '@wordpress/core-data'; import { useEntityProp } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { import {
BlockControls,
// @ts-expect-error no exported member. // @ts-expect-error no exported member.
useInnerBlocksProps, useInnerBlocksProps,
BlockControls, // @ts-expect-error no exported member.
BlockPreview,
} from '@wordpress/block-editor'; } from '@wordpress/block-editor';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { ContentPreview } from '../../../components/content-preview';
import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide'; import ModalEditorWelcomeGuide from '../../../components/modal-editor-welcome-guide';
import { store } from '../../../store/product-editor-ui'; import { store } from '../../../store/product-editor-ui';
import type { DescriptionBlockEditComponent } from './types'; import type { DescriptionBlockEditComponent } from './types';
@ -108,11 +109,13 @@ export function DescriptionBlockEdit( {
{ ! description.length && <div { ...innerBlockProps } /> } { ! description.length && <div { ...innerBlockProps } /> }
{ !! description.length && ( { !! description.length && (
<div className="wp-block-woocommerce-product-description-field__cover" /> <BlockPreview
) } blocks={ parse( description ) }
viewportWidth={ 800 }
{ !! description.length && ( additionalStyles={ [
<ContentPreview content={ description } /> { css: 'body { padding: 32px; height: 10000px }' }, // hack: setting height to 10000px to ensure the preview is not cut off.
] }
/>
) } ) }
{ isModalEditorOpen && <ModalEditorWelcomeGuide /> } { 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 { .wp-block-woocommerce-product-description-field {
&:focus { &:focus {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); 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; outline: 3px solid transparent;
} }
&.has-blocks { .block-editor-block-preview__container {
min-height: 320px; resize: vertical;
.wp-block-woocommerce-product-description-field__cover, height: 320px;
.woocommerce-content-preview {
min-height: 320px;
&:after {
display: none;
}
.woocommerce-content-preview__iframe {
min-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;
}