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

Add "edit product" card to single product block sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/2585) 

* Add edit product card

* Replace with div
This commit is contained in:
Mike Jolley 2020-05-29 14:50:12 +01:00 committed by GitHub
parent a5b09b7a43
commit 2361c5f52c
3 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/edit-product-link.js Normal file
View File

@ -0,0 +1,37 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon, external } from '@woocommerce/icons';
import { ADMIN_URL } from '@woocommerce/settings';
/**
* Component to render an edit product link in the sidebar.
*/
const EditProductLink = ( { productId } ) => {
return (
<div className="wc-block-single-product__edit-card">
<div className="wc-block-single-product__edit-card-title">
<a
href={ `${ ADMIN_URL }post.php?post=${ productId }&action=edit` }
target="_blank"
rel="noopener noreferrer"
>
{ __(
"Edit this product's details",
'woo-gutenberg-products-block'
) }
<Icon srcElement={ external } size={ 16 } />
</a>
</div>
<div className="wc-block-single-product__edit-card-description">
{ __(
'Edit details such as title, price, description and more.',
'woo-gutenberg-products-block'
) }
</div>
</div>
);
};
export default EditProductLink;

8
plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss
View File

@ -8,3 +8,11 @@
margin-right: 4px;
}
}
.wc-block-single-product__edit-card {
padding: 16px;
border-top: 1px solid #e2e4e7;
.wc-block-single-product__edit-card-title {
margin: 0 0 $gap;
}
}

2
plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js
View File

@ -17,6 +17,7 @@ import ApiError from './api-error';
import SharedProductControl from './shared-product-control';
import EditorBlockControls from './editor-block-controls';
import LayoutEditor from './layout-editor';
import EditProductLink from './edit-product-link';
import { BLOCK_TITLE, BLOCK_ICON, BLOCK_DESCRIPTION } from '../constants';
/**
@ -98,6 +99,7 @@ const Editor = ( {
setAttributes={ setAttributes }
/>
</PanelBody>
<EditProductLink productId={ productId } />
</InspectorControls>
<LayoutEditor
clientId={ clientId }