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

Use real previews for the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2992) 

* Use real previews for the cart and checkout

* remove extra files and css
This commit is contained in:
Seghir Nadir 2020-08-13 14:24:51 +01:00 committed by GitHub
parent 44591f2db5
commit 1fddb9451d
9 changed files with 27 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/woocommerce-blocks/assets/img/cart-preview.svg
View File

@ -1,20 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 250">
<g fill="#E1E3E6" fill-rule="evenodd">
<g transform="translate(0 43)">
<path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
<rect width="28" height="14" x="87" rx="2"/>
<path d="M38 10h44v8H38zM0 38h148v1H0z"/>
</g>
<g transform="translate(0 87)">
<path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
<rect width="28" height="14" x="87" rx="2"/>
<path d="M38 10h44v8H38zM0 38h148v1H0z"/>
</g>
<g transform="translate(0 131)">
<path d="M0 0h33v33H0zM38 0h24v8H38zM120 0h28v8h-28z"/>
<rect width="28" height="14" x="87" rx="2"/>
<path d="M38 10h44v8H38zM0 38h148v1H0z"/>
</g>
<path d="M164 0h66v170h-66zM0 24h33v8H0zM120 24h28v8h-28zM87 24h28v8H87zM0 37h148v1H0zM0 0h66v14H0z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 844 B

20
plugins/woocommerce-blocks/assets/img/checkout-preview.svg
View File

@ -1,20 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 250">
<g fill="none" fill-rule="evenodd">
<g transform="translate(0 72)">
<path fill="#E1E3E6" d="M15 33h125V0H15z"/>
<circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
<path fill="#D8D8D8" d="M5 16h1v23H5z"/>
</g>
<g transform="translate(0 113)">
<path fill="#E1E3E6" d="M15 33h125V0H15z"/>
<circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
<path fill="#D8D8D8" d="M5 16h1v23H5z"/>
</g>
<g transform="translate(0 154)">
<path fill="#E1E3E6" d="M15 33h125V0H15z"/>
<circle cx="5.5" cy="5.5" r="5.5" fill="#D8D8D8"/>
</g>
<path fill="#E1E3E6" d="M164 0h66v148h-66zM61 57h33v8H61zM107 194h33v11h-33zM15 61h43v1H15zM97 60h43v1H97z"/>
<rect width="154" height="50" fill="#E1E3E6" rx="3"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 839 B

13
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js
View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { CartCheckoutFeedbackPrompt } from '@woocommerce/block-components/feedback-prompt';
import { InspectorControls } from '@wordpress/block-editor';
@ -23,7 +24,7 @@ import {
import { __experimentalCreateInterpolateElement } from 'wordpress-element';
import { useRef } from '@wordpress/element';
import { getAdminLink } from '@woocommerce/settings';
import { previewCart, cartBlockPreview } from '@woocommerce/resource-previews';
import { previewCart } from '@woocommerce/resource-previews';
/**
* Internal dependencies
@ -143,12 +144,12 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
* in the frontend.
*/
const CartEditor = ( { className, attributes, setAttributes } ) => {
if ( attributes.isPreview ) {
return cartBlockPreview;
}
return (
<div className={ className }>
<div
className={ classnames( className, 'wp-block-woocommerce-cart', {
'is-editor-preview': attributes.isPreview,
} ) }
>
<ViewSwitcher
label={ __( 'Edit', 'woo-gutenberg-products-block' ) }
views={ [

5
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/editor.scss
View File

@ -1,3 +1,8 @@
.wc-block-cart__page-notice {
margin: 0;
}
.wp-block-woocommerce-cart.is-editor-preview {
max-height: 1000px;
overflow: hidden;
}

17
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/edit.js
View File

@ -1,6 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { CartCheckoutFeedbackPrompt } from '@woocommerce/block-components/feedback-prompt';
import { InspectorControls } from '@wordpress/block-editor';
@ -25,7 +26,6 @@ import PageSelector from '@woocommerce/block-components/page-selector';
import {
previewCart,
previewSavedPaymentMethods,
checkoutBlockPreview,
} from '@woocommerce/resource-previews';
/**
@ -270,16 +270,19 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
const CheckoutEditor = ( { attributes, setAttributes } ) => {
const { className, isPreview } = attributes;
if ( isPreview ) {
return checkoutBlockPreview;
}
return (
<EditorProvider
previewData={ { previewCart, previewSavedPaymentMethods } }
>
<div className={ className }>
<div
className={ classnames(
className,
'wp-block-woocommerce-checkout',
{
'is-editor-preview': isPreview,
}
) }
>
<BlockSettings
attributes={ attributes }
setAttributes={ setAttributes }

5
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
View File

@ -22,3 +22,8 @@
.components-panel__body-title .components-button {
opacity: 1;
}
.wp-block-woocommerce-checkout.is-editor-preview {
max-height: 1000px;
overflow: hidden;
}

16
plugins/woocommerce-blocks/assets/js/previews/cart-block.js
View File

@ -1,16 +0,0 @@
/**
* External dependencies
*/
import { WC_BLOCKS_ASSET_URL } from '@woocommerce/block-settings';
export const cartBlockPreview = (
<img
src={ WC_BLOCKS_ASSET_URL + 'img/cart-preview.svg' }
alt=""
width="230"
height="250"
style={ {
width: '100%',
} }
/>
);

16
plugins/woocommerce-blocks/assets/js/previews/checkout-block.js
View File

@ -1,16 +0,0 @@
/**
* External dependencies
*/
import { WC_BLOCKS_ASSET_URL } from '@woocommerce/block-settings';
export const checkoutBlockPreview = (
<img
src={ WC_BLOCKS_ASSET_URL + 'img/checkout-preview.svg' }
alt=""
width="230"
height="250"
style={ {
width: '100%',
} }
/>
);

2
plugins/woocommerce-blocks/assets/js/previews/index.js
View File

@ -5,7 +5,5 @@ export { previewCategories } from './categories';
export { previewShippingRates } from './shipping-rates';
export { previewSavedPaymentMethods } from './saved-payment-methods';
export { cartBlockPreview } from './cart-block';
export { checkoutBlockPreview } from './checkout-block';
export { gridBlockPreview } from './grid-block';
export { singleProductBlockPreview } from './single-product-block';