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

Revert "Add To Cart Form: Add `Stepper` layout" (#48624) 

* Revert "Add To Cart Form: Improve the default style and add the `Stepper` style (#47664)"

This reverts commit 0712c6037b.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-06-19 18:28:56 +02:00 committed by GitHub
parent d1dce11535
commit c3a2e275f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 140 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-blocks/assets/js/atomic/blocks/index.js
View File

@ -13,6 +13,7 @@ import './product-elements/summary';
import './product-elements/sale-badge';
import './product-elements/sku';
import './product-elements/stock-indicator';
import './product-elements/add-to-cart-form';
import './product-elements/product-image-gallery';
import './product-elements/product-details';
import './product-elements/product-reviews';

8
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/block.json → plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/block.json
View File

@ -8,19 +8,11 @@
"isDescendentOfSingleProductBlock": {
"type": "boolean",
"default": false
},
"quantitySelectorStyle": {
"type": "string",
"enum": [ "input", "stepper" ],
"default": "input"
}
},
"keywords": [ "WooCommerce" ],
"usesContext": [ "postId" ],
"textdomain": "woocommerce",
"supports": {
"interactivity": true
},
"apiVersion": 2,
"$schema": "https://schemas.wp.org/trunk/block.json"
}

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

@ -0,0 +1,66 @@
/**
* External dependencies
*/
import { useEffect } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Disabled, Tooltip } from '@wordpress/components';
import { Skeleton } from '@woocommerce/base-components/skeleton';
import { BlockEditProps } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import './editor.scss';
import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
export interface Attributes {
className?: string;
isDescendentOfSingleProductBlock: boolean;
}
const Edit = ( props: BlockEditProps< Attributes > ) => {
const { setAttributes } = props;
const blockProps = useBlockProps( {
className: 'wc-block-add-to-cart-form',
} );
const { isDescendentOfSingleProductBlock } =
useIsDescendentOfSingleProductBlock( {
blockClientId: blockProps?.id,
} );
useEffect( () => {
setAttributes( {
isDescendentOfSingleProductBlock,
} );
}, [ setAttributes, isDescendentOfSingleProductBlock ] );
return (
<div { ...blockProps }>
<Tooltip
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-add-to-cart-form-container">
<Skeleton numberOfLines={ 3 } />
<Disabled>
<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', 'woocommerce' ) }
</button>
</Disabled>
</div>
</Tooltip>
</div>
);
};
export default Edit;

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

@ -0,0 +1,6 @@
.wc-block-editor-add-to-cart-form-container {
cursor: help;
gap: 10px;
display: flex;
flex-direction: column;
}

1
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/index.tsx → plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx
View File

@ -11,7 +11,6 @@ import metadata from './block.json';
import edit from './edit';
import './style.scss';
import './editor.scss';
import '../../../base/components/quantity-selector/style.scss';
const blockSettings = {
edit,

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

@ -0,0 +1,33 @@
.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.
*
* @link https://github.com/woocommerce/woocommerce/blob/95ca53675f2817753d484583c96ca9ab9f725172/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss#L203-L206
*/
.input-text {
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;
}
}
}
.woocommerce div.product .wc-block-add-to-cart-form form.cart .quantity {
margin-bottom: 10px;
}
.woocommerce div.product .wc-block-add-to-cart-form form.cart button.single_add_to_cart_button {
margin-bottom: 10px;
}

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

@ -1,110 +0,0 @@
/**
* External dependencies
*/
import { useEffect } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { Skeleton } from '@woocommerce/base-components/skeleton';
import { BlockEditProps } from '@wordpress/blocks';
import { Disabled, Tooltip } from '@wordpress/components';
/**
* Internal dependencies
*/
import './editor.scss';
import { useIsDescendentOfSingleProductBlock } from '../../../atomic/blocks/product-elements/shared/use-is-descendent-of-single-product-block';
import { QuantitySelectorStyle, Settings } from './settings';
export interface Attributes {
className?: string;
isDescendentOfSingleProductBlock: boolean;
quantitySelectorStyle: QuantitySelectorStyle;
}
const Edit = ( props: BlockEditProps< Attributes > ) => {
const { setAttributes } = props;
const quantitySelectorStyleClass =
props.attributes.quantitySelectorStyle === QuantitySelectorStyle.Input
? 'wc-block-add-to-cart-form--input'
: 'wc-block-add-to-cart-form--stepper';
const blockProps = useBlockProps( {
className: `wc-block-add-to-cart-form ${ quantitySelectorStyleClass }`,
} );
const { isDescendentOfSingleProductBlock } =
useIsDescendentOfSingleProductBlock( {
blockClientId: blockProps?.id,
} );
useEffect( () => {
setAttributes( {
isDescendentOfSingleProductBlock,
} );
}, [ setAttributes, isDescendentOfSingleProductBlock ] );
return (
<>
<Settings
quantitySelectorStyle={ props.attributes.quantitySelectorStyle }
setAttributes={ setAttributes }
/>
<div { ...blockProps }>
<Tooltip
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-add-to-cart-form-container">
<Skeleton numberOfLines={ 3 } />
<Disabled>
{ props.attributes.quantitySelectorStyle ===
QuantitySelectorStyle.Input && (
<>
<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', 'woocommerce' ) }
</button>
</>
) }
{ props.attributes.quantitySelectorStyle ===
QuantitySelectorStyle.Stepper && (
<>
<div className="quantity wc-block-components-quantity-selector">
<button className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">
-
</button>
<input
type={ 'number' }
value={ '1' }
className={ 'input-text qty text' }
readOnly
/>
<button className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">
+
</button>
</div>
<button
className={ `single_add_to_cart_button button alt wp-element-button` }
>
{ __( 'Add to cart', 'woocommerce' ) }
</button>
</>
) }
</Disabled>
</div>
</Tooltip>
</div>
</>
);
};
export default Edit;

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

@ -1,39 +0,0 @@
.wc-block-editor-add-to-cart-form-container {
cursor: help;
gap: 10px;
display: flex;
flex-direction: column;
width: 400px;
}
.wc-block-editor-quantity-selector-style {
width: 100%;
}
.quantity .qty {
// WooCommerce core styles: https://github.com/woocommerce/woocommerce/blob/c9f62609155825cd817976c7611b9b0415e90f2f/plugins/woocommerce/client/legacy/css/woocommerce.scss/#L111-L112
width: 3.631em;
text-align: center;
}
div.product form.cart div.quantity {
display: inline-block;
float: none;
vertical-align: middle;
}
input {
height: auto;
}
.wc-block-components-quantity-selector--input {
padding: unset;
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
.wc-block-components-quantity-selector {
height: 100%;
margin: 0 4px 0 0;
background: #fff;
}
}

40
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/frontend.ts
View File

@ -1,40 +0,0 @@
/**
* External dependencies
*/
import { store } from '@woocommerce/interactivity';
import { HTMLElementEvent } from '@woocommerce/types';
const getInputElement = ( event: HTMLElementEvent< HTMLButtonElement > ) => {
const target = event.target as HTMLButtonElement;
const inputForm = target.parentElement?.querySelector(
'.input-text.qty.text'
) as HTMLInputElement | null | undefined;
return inputForm;
};
store( 'woocommerce/add-to-cart-form', {
state: {},
actions: {
addQuantity: ( event: HTMLElementEvent< HTMLButtonElement > ) => {
const inputElement = getInputElement( event );
if ( inputElement ) {
const parsedValue = parseInt( inputElement.value, 10 );
const currentValue = isNaN( parsedValue ) ? 0 : parsedValue;
inputElement.value = ( currentValue + 1 ).toString();
}
},
removeQuantity: ( event: HTMLElementEvent< HTMLButtonElement > ) => {
const inputElement = getInputElement( event );
if ( inputElement?.value ) {
const parsedValue = parseInt( inputElement.value, 10 );
if ( parsedValue > 1 ) {
inputElement.value = ( parsedValue - 1 ).toString();
}
}
},
},
} );

77
plugins/woocommerce-blocks/assets/js/blocks/product-elements/add-to-cart-form/settings.tsx
View File

@ -1,77 +0,0 @@
/**
* External dependencies
*/
import { InspectorControls } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
PanelBody,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - Ignoring because `__experimentalToggleGroupControl` is not yet in the type definitions.
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
export enum QuantitySelectorStyle {
Input = 'input',
Stepper = 'stepper',
}
type AddToCartFormSettings = {
quantitySelectorStyle: QuantitySelectorStyle;
setAttributes: ( attributes: {
quantitySelectorStyle: QuantitySelectorStyle;
} ) => void;
};
const getHelpText = ( quantitySelectorStyle: QuantitySelectorStyle ) => {
if ( quantitySelectorStyle === QuantitySelectorStyle.Input ) {
return __(
'Shoppers can enter a number of items to add to cart.',
'woocommerce'
);
}
if ( quantitySelectorStyle === QuantitySelectorStyle.Stepper ) {
return __(
'Shoppers can use buttons to change the number of items to add to cart.',
'woocommerce'
);
}
};
export const Settings = ( {
quantitySelectorStyle,
setAttributes,
}: AddToCartFormSettings ) => {
return (
<InspectorControls>
<PanelBody title={ __( 'Quantity Selector', 'woocommerce' ) }>
<ToggleGroupControl
className="wc-block-editor-quantity-selector-style"
__nextHasNoMarginBottom
value={ quantitySelectorStyle }
isBlock
onChange={ ( value: QuantitySelectorStyle ) => {
setAttributes( {
quantitySelectorStyle:
value as QuantitySelectorStyle,
} );
} }
help={ getHelpText( quantitySelectorStyle ) }
>
<ToggleGroupControlOption
label={ __( 'Input', 'woocommerce' ) }
value={ QuantitySelectorStyle.Input }
/>
<ToggleGroupControlOption
label={ __( 'Stepper', 'woocommerce' ) }
value={ QuantitySelectorStyle.Stepper }
/>
</ToggleGroupControl>
</PanelBody>
</InspectorControls>
);
};

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

@ -1,119 +0,0 @@
.wc-block-add-to-cart-form {
/**
* This is a base style for the input text element in WooCommerce that prevents inputs from appearing too small.
*
* @link https://github.com/woocommerce/woocommerce/blob/95ca53675f2817753d484583c96ca9ab9f725172/plugins/woocommerce/client/legacy/css/woocommerce-blocktheme.scss#L203-L206
*/
.input-text {
font-size: var(--wp--preset--font-size--small);
padding: 0.9rem 1.1rem;
}
}
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--input {
width: unset;
.quantity {
display: inline-block;
float: none;
margin-right: 4px;
vertical-align: middle;
// WooCommerce core styles: https://github.com/woocommerce/woocommerce/blob/c9f62609155825cd817976c7611b9b0415e90f2f/plugins/woocommerce/client/legacy/css/woocommerce.scss/#L111-L112
.qty {
margin-right: 0.5rem;
width: 3.631em;
text-align: center;
}
}
}
// Stepper CSS
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
display: inline-flex;
.wc-block-components-quantity-selector {
height: 100%;
width: unset;
background-color: #fff;
margin-right: 0.5em;
margin-bottom: 0;
}
.wc-block-components-quantity-selector__button--plus,
.wc-block-components-quantity-selector__button--minus {
height: 100%;
}
input[type="number"].input-text.qty.text {
border: unset;
text-align: center;
order: 1;
padding: unset;
height: 100%;
margin-right: unset;
font-size: var(--wp--preset--font-size--small);
}
// Grouped Product
table.woocommerce-grouped-product-list.group_table > tbody {
td .wc-block-components-quantity-selector {
height: 40px;
width: 120px;
input.input-text.qty.text {
min-width: 60px;
}
}
// Grouped Product
td.woocommerce-grouped-product-list-item__label,
td.woocommerce-grouped-product-list-item__price {
vertical-align: middle;
}
}
// Product Variation
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled,
.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled {
display: flex;
.wc-block-components-quantity-selector {
height: unset;
}
}
.wc-block-components-quantity-selector {
display: inline-flex;
.input-text {
font-size: var(--wp--preset--font-size--small);
padding: unset;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"].qty.input-text.text {
margin: 0;
border: unset;
order: 1;
height: 100%;
}
}
}
// Inner of Single Product Block
.wp-block-woocommerce-single-product {
.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper {
.wc-block-components-quantity-selector {
width: 107px;
}
}
.input-text.qty.text {
// WooCommerce core styles: https://github.com/woocommerce/woocommerce/blob/c9f62609155825cd817976c7611b9b0415e90f2f/plugins/woocommerce/client/legacy/css/woocommerce.scss/#L111-L112
width: 3.631em;
}
}

6
plugins/woocommerce-blocks/bin/webpack-entries.js
View File

@ -16,9 +16,7 @@ const glob = require( 'glob' );
// when you mark/unmark block experimental.
const blocks = {
'active-filters': {},
'add-to-cart-form': {
customDir: 'product-elements/add-to-cart-form',
},
'add-to-cart-form': {},
'all-products': {
customDir: 'products/all-products',
},
@ -200,6 +198,8 @@ const entries = {
'./assets/js/atomic/blocks/product-elements/product-reviews/index.tsx',
'product-details':
'./assets/js/atomic/blocks/product-elements/product-details/index.tsx',
'add-to-cart-form':
'./assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx',
...getBlockEntries( '{index,block,frontend}.{t,j}s{,x}' ),
// Interactivity component styling

4
plugins/woocommerce/changelog/47664-42299-improve-styling-for-quantity-selector-and-variation-single-product-template
View File

@ -1,4 +0,0 @@
Significance: minor
Type: add
Add to Cart with Options: Add Quantity Selector option.

4
plugins/woocommerce/changelog/48624-revert-add-to-fart-form-stepper Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: tweak
Comment: This PR is just a revert.

105
plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
View File

@ -42,76 +42,11 @@ class AddToCartForm extends AbstractBlock {
// These should match what's set in JS `registerBlockType`.
$defaults = array(
'isDescendentOfSingleProductBlock' => false,
'quantitySelectorStyle' => 'input',
);
return wp_parse_args( $attributes, $defaults );
}
/**
* Enqueue assets specific to this block.
* We enqueue frontend scripts only if the quantitySelectorStyle is set to 'stepper'.
*
* @param array $attributes Block attributes.
* @param string $content Block content.
* @param WP_Block $block Block instance.
*/
protected function enqueue_assets( $attributes, $content, $block ) {
if ( 'stepper' !== $attributes['quantitySelectorStyle'] ) {
return;
}
parent::enqueue_assets( $attributes, $content, $block );
}
/**
* Add increment and decrement buttons to the quantity input field.
*
* @param string $product add-to-cart form HTML.
* @return stringa add-to-cart form HTML with increment and decrement buttons.
*/
private function add_steppers( $product ) {
// Regex pattern to match the <input> element with id starting with 'quantity_'.
$pattern = '/(<input[^>]*id="quantity_[^"]*"[^>]*\/>)/';
// Replacement string to add button BEFORE the matched <input> element.
$minus_button = '<button type="button" data-wc-on--click="actions.removeQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus">-</button>$1';
// Replacement string to add button AFTER the matched <input> element.
$plus_button = '$1<button type="button" data-wc-on--click="actions.addQuantity" class="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus">+</button>';
$new_html = preg_replace( $pattern, $minus_button, $product );
$new_html = preg_replace( $pattern, $plus_button, $new_html );
return $new_html;
}
/**
* Add classes to the Add to Cart form input.
*
* @param string $product The Add to Cart form HTML.
* @param array $attributes Block attributes.
*
* @return string The Add to Cart form HTML with classes added.
*/
private function add_classes_to_add_to_cart_form_input( $product, $attributes ) {
$is_stepper_style = 'stepper' === $attributes['quantitySelectorStyle'];
$html = new \WP_HTML_Tag_Processor( $product );
if ( $is_stepper_style ) {
// Add classes to the form.
while ( $html->next_tag( array( 'class_name' => 'quantity' ) ) ) {
$html->add_class( 'wc-block-components-quantity-selector' );
}
$html = new \WP_HTML_Tag_Processor( $html->get_updated_html() );
while ( $html->next_tag( array( 'class_name' => 'input-text' ) ) ) {
$html->add_class( 'wc-block-components-quantity-selector__input' );
}
}
return $html->get_updated_html();
}
/**
* Render the block.
*
@ -155,32 +90,19 @@ class AddToCartForm extends AbstractBlock {
return '';
}
$is_stepper_style = 'stepper' === $attributes['quantitySelectorStyle'];
$product = $is_stepper_style ? $this->add_steppers( $product ) : $product;
$parsed_attributes = $this->parse_attributes( $attributes );
$is_descendent_of_single_product_block = $parsed_attributes['isDescendentOfSingleProductBlock'];
$product = $this->add_is_descendent_of_single_product_block_hidden_input_to_product_form( $product, $is_descendent_of_single_product_block );
$product = $this->add_classes_to_add_to_cart_form_input( $product, $attributes );
$classname = $attributes['className'] ?? '';
$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
$product_classname = $is_descendent_of_single_product_block ? 'product' : '';
$form = sprintf(
'<div class="wp-block-add-to-cart-form wp-block-woocommerce-add-to-cart-form wc-block-add-to-cart-form %1$s %2$s %3$s %4$s" %5$s style="%6$s">%7$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 ),
$is_stepper_style ? 'wc-block-add-to-cart-form--stepper' : 'wc-block-add-to-cart-form--input',
$is_stepper_style ? 'data-wc-interactive=\'' . wp_json_encode(
array(
'namespace' => 'woocommerce/add-to-cart-form',
),
JSON_NUMERIC_CHECK
) . '\'' : '',
esc_attr( $classes_and_styles['styles'] ),
$product
);
@ -250,4 +172,29 @@ class AddToCartForm extends AbstractBlock {
return $url;
}
/**
* Get the frontend script handle for this block type.
*
* @param string $key Data to get, or default to everything.
*/
protected function get_block_type_script( $key = null ) {
return null;
}
/**
* Get the frontend style handle for this block type.
*
* @return null
*/
protected function get_block_type_style() {
return array_merge( parent::get_block_type_style(), [ 'wc-blocks-packages-style' ] );
}
/**
* It isn't necessary register block assets because it is a server side block.
*/
protected function register_block_type_assets() {
return null;
}
}

1
plugins/woocommerce/src/Blocks/BlockTypesController.php
View File

@ -356,6 +356,7 @@ final class BlockTypesController {
$block_types = array_diff(
$block_types,
array(
'AddToCartForm',
'Breadcrumbs',
'CatalogSorting',
'ClassicTemplate',