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

Add to Cart with Options block: fix inconsistency between editor and frontend (https://github.com/woocommerce/woocommerce-blocks/pull/11614) 

* Add to Cart with Options block: fix inconsistency between editor and frontend

* Typo

* Use same margin values as block theme stylesheet
This commit is contained in:
Albert Juhé Lluveras 2023-11-06 16:30:25 +01:00 committed by GitHub
parent 4cdffc3b07
commit 33bc75801e
4 changed files with 30 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx
View File

@ -4,7 +4,7 @@
import { useEffect } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Button, Disabled, Tooltip } from '@wordpress/components';
import { Disabled, Tooltip } from '@wordpress/components';
import { Skeleton } from '@woocommerce/base-components/skeleton';
import { BlockEditProps } from '@wordpress/blocks';
@ -37,31 +37,28 @@ const Edit = ( props: BlockEditProps< Attributes > ) => {
return (
<div { ...blockProps }>
<Tooltip
text="Customer will see product add-to-cart options in this space, dependend on the product type. "
text="Customer will see product add-to-cart options in this space, dependent on the product type. "
position="bottom right"
>
<div className="wc-block-editor-container">
<div className="wc-block-editor-add-to-cart-form-container">
<Skeleton numberOfLines={ 3 } />
<Disabled>
<input
type={ 'number' }
value={ '1' }
className={
'wc-block-editor-add-to-cart-form__quantity'
}
readOnly
/>
<Button
variant={ 'primary' }
className={
'wc-block-editor-add-to-cart-form__button'
}
<div className="quantity">
<input
type={ 'number' }
value={ '1' }
className={ 'input-text qty text' }
readOnly
/>
</div>
<button
className={ `single_add_to_cart_button button alt wp-element-button` }
>
{ __(
'Add to cart',
'woo-gutenberg-products-block'
) }
</Button>
</button>
</Disabled>
</div>
</Tooltip>

28
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/editor.scss
View File

@ -1,30 +1,4 @@
.wc-block-editor-add-to-cart-form {
display: flex;
flex-direction: column;
row-gap: $default-block-margin;
}
input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
max-width: 50px;
min-height: 23px;
float: left;
padding: 6px 6px 6px 12px;
margin-right: 10px;
font-size: 13px;
height: inherit;
}
input[type="number"]::-webkit-inner-spin-button {
opacity: 1;
}
button.components-button.wc-block-add-to-cart-form__button {
float: left;
padding: 20px 30px;
border-radius: 0;
}
.wc-block-editor-container {
.wc-block-editor-add-to-cart-form-container {
cursor: help;
gap: 10px;
display: flex;

15
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss
View File

@ -1,4 +1,4 @@
.wp-block-add-to-cart-form {
.wc-block-add-to-cart-form {
width: unset;
/**
* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
@ -9,4 +9,17 @@
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem;
}
.quantity {
display: inline-block;
float: none;
margin-right: 4px;
vertical-align: middle;
.qty {
margin-right: 0.5rem;
width: 3.631em;
text-align: center;
}
}
}

2
plugins/woocommerce-blocks/src/BlockTypes/AddToCartForm.php
View File

@ -99,7 +99,7 @@ class AddToCartForm extends AbstractBlock {
$product_classname = $is_descendent_of_single_product_block ? 'product' : '';
$form = sprintf(
'<div class="wp-block-add-to-cart-form %1$s %2$s %3$s" style="%4$s">%5$s</div>',
'<div class="wp-block-add-to-cart-form wc-block-add-to-cart-form %1$s %2$s %3$s" style="%4$s">%5$s</div>',
esc_attr( $classes_and_styles['classes'] ),
esc_attr( $classname ),
esc_attr( $product_classname ),