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

Add the button to migrate to the blockified version of the Product Grid Block woocommerce/woocommerce-blocks#6483 (https://github.com/woocommerce/woocommerce-blocks/pull/6485) 

Add the button to migrate to the blockified version of the Product Grid Block
This commit is contained in:
Luigi Teschio 2022-06-06 16:49:19 +02:00 committed by GitHub
parent 87a5e41e05
commit 96b9cbf0c6
2 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
View File

@ -34,3 +34,15 @@
display: block;
}
}
.wp-block-woocommerce-classic-template__placeholder-wireframe {
display: flex;
flex-direction: column;
}
.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
justify-content: center;
align-items: center;
margin: 0 auto;
}

36
plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
View File

@ -1,12 +1,16 @@
/**
* External dependencies
*/
import { registerBlockType } from '@wordpress/blocks';
import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
import { createBlock, registerBlockType } from '@wordpress/blocks';
import {
isExperimentalBuild,
WC_BLOCKS_IMAGE_URL,
} from '@woocommerce/block-settings';
import { useBlockProps } from '@wordpress/block-editor';
import { Placeholder } from '@wordpress/components';
import { Button, Placeholder } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { box, Icon } from '@wordpress/icons';
import { useDispatch } from '@wordpress/data';
/**
* Internal dependencies
@ -20,9 +24,12 @@ interface Props {
template: string;
align: string;
};
clientId: string;
}
const Edit = ( { attributes }: Props ) => {
const Edit = ( { clientId, attributes }: Props ) => {
const { replaceBlock } = useDispatch( 'core/block-editor' );
const blockProps = useBlockProps();
const templateTitle =
TEMPLATES[ attributes.template ]?.title ?? attributes.template;
@ -60,6 +67,27 @@ const Edit = ( { attributes }: Props ) => {
</p>
</div>
<div className="wp-block-woocommerce-classic-template__placeholder-wireframe">
{ isExperimentalBuild() && (
<div className="wp-block-woocommerce-classic-template__placeholder-migration-button-container">
<Button
isPrimary
onClick={ () => {
replaceBlock(
clientId,
// TODO: Replace with the blockified version of the Product Grid Block when it will be available.
createBlock( 'core/paragraph', {
content:
'Instead of this block, the new Product Grid Block will be rendered',
} )
);
} }
text={ __(
'Use the blockified Product Grid Block',
'woo-gutenberg-products-block'
) }
/>
</div>
) }
<img
className="wp-block-woocommerce-classic-template__placeholder-image"
src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ templatePlaceholder }.svg` }