diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/edit-product-link.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/edit-product-link.js new file mode 100644 index 00000000000..86696b2e016 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/edit-product-link.js @@ -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 ( +
+
+ + { __( + "Edit this product's details", + 'woo-gutenberg-products-block' + ) } + + +
+
+ { __( + 'Edit details such as title, price, description and more.', + 'woo-gutenberg-products-block' + ) } +
+
+ ); +}; + +export default EditProductLink; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss index 12b79d37ca4..8cfe0ae2338 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/editor.scss @@ -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; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js index 2f360d7c793..8123065f599 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.js @@ -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 } /> +