style Mini Cart block as inline to remove the experimental features u…

…sage. (#6002)
woocommerce · Mar 8, 2022 · dcda593 · dcda593
1 parent 8e1237d
commit dcda593
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 117 deletions.
diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx
@@ -1,49 +1,24 @@
 /**
  * External dependencies
  */
-import {
-	AlignmentControl,
-	BlockControls,
-	InspectorControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import type { ReactElement } from 'react';
 import { formatPrice } from '@woocommerce/price-format';
 import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
 import { PanelBody, ExternalLink } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
-import { positionCenter, positionRight, positionLeft } from '@wordpress/icons';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
  */
 import QuantityBadge from './quantity-badge';
-import { useColorProps } from '../../../hooks/style-attributes';
 
-interface Attributes {
-	align: string;
-	isInitiallyOpen?: boolean;
-	backgroundColor?: string;
-	textColor?: string;
-	style?: Record< string, Record< string, string > >;
-}
-
-interface Props {
-	attributes: Attributes;
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-}
-
-const MiniCartBlock = ( {
-	attributes,
-	setAttributes,
-}: Props ): ReactElement => {
-	const { align } = attributes;
+const MiniCartBlock = (): ReactElement => {
 	const blockProps = useBlockProps( {
-		className: `wc-block-mini-cart align-${ align }`,
+		className: `wc-block-mini-cart`,
 	} );
-	const colorProps = useColorProps( attributes );
 
 	const templatePartEditUri = getSetting(
 		'templatePartEditUri',
@@ -55,40 +30,6 @@ const MiniCartBlock = ( {
 
 	return (
 		<div { ...blockProps }>
-			<BlockControls>
-				<AlignmentControl
-					value={ align }
-					alignmentControls={ [
-						{
-							icon: positionLeft,
-							title: __(
-								'Align button left',
-								'woo-gutenberg-products-block'
-							),
-							align: 'left',
-						},
-						{
-							icon: positionCenter,
-							title: __(
-								'Align button center',
-								'woo-gutenberg-products-block'
-							),
-							align: 'center',
-						},
-						{
-							icon: positionRight,
-							title: __(
-								'Align button right',
-								'woo-gutenberg-products-block'
-							),
-							align: 'right',
-						},
-					] }
-					onChange={ ( newAlign: string ) =>
-						setAttributes( { align: newAlign } )
-					}
-				/>
-			</BlockControls>
 			<InspectorControls>
 				{ templatePartEditUri && (
 					<PanelBody
@@ -107,10 +48,7 @@ const MiniCartBlock = ( {
 				) }
 			</InspectorControls>
 			<Noninteractive>
-				<button
-					className="wc-block-mini-cart__button"
-					style={ colorProps.style }
-				>
+				<button className="wc-block-mini-cart__button">
 					<span className="wc-block-mini-cart__amount">
 						{ formatPrice( productTotal ) }
 					</span>

diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx
@@ -31,30 +31,14 @@ const settings = {
 	supports: {
 		html: false,
 		multiple: false,
-		color: {
-			/**
-			 * Because we don't target the wrapper element, we don't need
-			 * to add color classes and style to the wrapper.
-			 */
-			__experimentalSkipSerialization: true,
-		},
-		/**
-		 * We need this experimental flag because we don't want to style the
-		 * wrapper but inner elements.
-		 */
-		__experimentalSelector:
-			'.wc-block-mini-cart__button, .wc-block-mini-cart__badge',
+		color: true,
 	},
 	example: {
 		attributes: {
 			isPreview: true,
 		},
 	},
 	attributes: {
-		align: {
-			type: 'string',
-			default: 'right',
-		},
 		isPreview: {
 			type: 'boolean',
 			default: false,

diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss
@@ -1,15 +1,5 @@
 .wc-block-mini-cart {
-	background-color: transparent !important;
-	display: flex;
-	justify-content: flex-end;
-
-	&.align-center {
-		justify-content: center;
-	}
-
-	&.align-left {
-		justify-content: flex-start;
-	}
+	display: inline-block;
 }
 
 .wc-block-mini-cart__button {

diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php
@@ -317,14 +317,10 @@ protected function get_markup( $attributes ) {
 			$cart_contents_total += $cart->get_subtotal_tax();
 		}
 
-		$wrapper_classes = 'wc-block-mini-cart  wp-block-woocommerce-mini-cart';
+		$wrapper_classes = 'wc-block-mini-cart wp-block-woocommerce-mini-cart';
 		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color' ) );
-		$classes         = $classes_styles['classes'];
-		$style           = $classes_styles['styles'];
-
-		if ( ! empty( $attributes['align'] ) ) {
-			$wrapper_classes .= ' align-' . $attributes['align'];
-		}
+		$wrapper_classes = sprintf( '%1$s %2$s', $wrapper_classes, $classes_styles['classes'] );
+		$wrapper_styles  = $classes_styles['styles'];
 
 		$aria_label = sprintf(
 		/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
@@ -351,7 +347,7 @@ protected function get_markup( $attributes ) {
 
 		if ( is_cart() || is_checkout() ) {
 			return '<div class="' . $wrapper_classes . '">
-				<button class="wc-block-mini-cart__button ' . $classes . '" aria-label="' . esc_attr( $aria_label ) . '" style="' . $style . '" disabled>' . $button_html . '</button>
+				<button class="wc-block-mini-cart__button" aria-label="' . esc_attr( $aria_label ) . '" disabled>' . $button_html . '</button>
 			</div>';
 		}
 
@@ -373,8 +369,8 @@ protected function get_markup( $attributes ) {
 			);
 		}
 
-		return '<div class="' . $wrapper_classes . '">
-			<button class="wc-block-mini-cart__button ' . $classes . '" aria-label="' . esc_attr( $aria_label ) . '" style="' . $style . '">' . $button_html . '</button>
+		return '<div class="' . $wrapper_classes . '" style="' . $wrapper_styles . '">
+			<button class="wc-block-mini-cart__button" aria-label="' . esc_attr( $aria_label ) . '">' . $button_html . '</button>
 			<div class="wc-block-mini-cart__drawer is-loading is-mobile wc-block-components-drawer__screen-overlay wc-block-components-drawer__screen-overlay--is-hidden" aria-hidden="true">
 				<div class="components-modal__frame wc-block-components-drawer">
 					<div class="components-modal__content">
@@ -438,7 +434,6 @@ protected function get_tax_label() {
 		);
 	}
 
-
 	/**
 	 * Get Cart Payload.
 	 *
@@ -447,16 +442,4 @@ protected function get_tax_label() {
 	protected function get_cart_payload() {
 		return WC()->api->get_endpoint_data( '/wc/store/cart' );
 	}
-
-	/**
-	 * Get the supports array for this block type.
-	 *
-	 * @see $this->register_block_type()
-	 * @return string;
-	 */
-	protected function get_block_type_supports() {
-		return [
-			'__experimentalSelector' => '.wc-block-mini-cart__button',
-		];
-	}
 }