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

react -> extract full editor toolbar button cpm

This commit is contained in:
Damián Suárez 2023-12-01 16:02:29 -03:00
parent f573a0a4b4
commit beca44c12b
2 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/js/product-editor/src/blocks/product-fields/description/components/full-editor-toolbar-button.tsx Normal file
View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
import { dispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store } from '../../../../store/product-editor-ui';
export default function FullEditorToolbarButton( {
label = __( 'Edit Product description', 'woocommerce' ),
text = __( 'Full editor', 'woocommerce' ),
} ) {
const { openModalEditor } = dispatch( store );
return (
<ToolbarButton
label={ label }
onClick={ () => {
recordEvent( 'product_add_description_click' );
openModalEditor();
} }
>
{ text }
</ToolbarButton>
);
}

23
packages/js/product-editor/src/blocks/product-fields/description/components/with-full-editor-toolbar-button.tsx
View File

@ -4,26 +4,20 @@
import { createElement, Fragment } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks';
import { useDispatch } from '@wordpress/data';
/**
* Internal dependencies
*/
import { store } from '../../../../store/product-editor-ai';
import type {
DescriptionBlockEditComponent,
DescriptionBlockEditProps,
} from '../types';
import FullEditorToolbarButton from './full-editor-toolbar-button';
const wooBlockwithFullEditorToolbarButton =
createHigherOrderComponent< DescriptionBlockEditComponent >(
( BlockEdit: DescriptionBlockEditComponent ) => {
return ( props: DescriptionBlockEditProps ) => {
const { openModalEditor } = useDispatch( store );
// Only extend summary field block instances
if ( props?.name !== 'woocommerce/product-summary-field' ) {
return <BlockEdit { ...props } />;
@ -50,20 +44,7 @@ const wooBlockwithFullEditorToolbarButton =
return (
<>
<BlockControls { ...blockControlProps }>
<ToolbarButton
label={ __(
'Edit Product description',
'woocommerce'
) }
onClick={ () => {
recordEvent(
'product_add_description_click'
);
openModalEditor();
} }
>
{ __( 'Full editor', 'woocommerce' ) }
</ToolbarButton>
<FullEditorToolbarButton />
</BlockControls>
<BlockEdit { ...props } />
</>