From 2a4c5cd8c0f6df357076c5fdb836204c6ebf92bf Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 7 Mar 2022 16:12:20 +0700 Subject: [PATCH 1/3] style block as inline --- assets/js/blocks/cart-checkout/mini-cart/index.tsx | 14 +------------- .../js/blocks/cart-checkout/mini-cart/style.scss | 12 +----------- src/BlockTypes/MiniCart.php | 13 ------------- 3 files changed, 2 insertions(+), 37 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/index.tsx b/assets/js/blocks/cart-checkout/mini-cart/index.tsx index 2e2720aa7fd..f22cb3e3ca7 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/index.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart/index.tsx @@ -31,19 +31,7 @@ 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: { diff --git a/assets/js/blocks/cart-checkout/mini-cart/style.scss b/assets/js/blocks/cart-checkout/mini-cart/style.scss index e0b270b017e..63a6ba88d66 100644 --- 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 index 279c6ffc7a5..98fb21a1fdc 100644 --- a/src/BlockTypes/MiniCart.php +++ b/src/BlockTypes/MiniCart.php @@ -438,7 +438,6 @@ protected function get_tax_label() { ); } - /** * Get Cart Payload. * @@ -447,16 +446,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', - ]; - } } From c8b2bd7aea3d49e0c2564590e2da2b5b85cabf79 Mon Sep 17 00:00:00 2001 From: Tung Du Date: Mon, 7 Mar 2022 16:16:15 +0700 Subject: [PATCH 2/3] remove alignment --- .../blocks/cart-checkout/mini-cart/edit.tsx | 51 ++----------------- .../blocks/cart-checkout/mini-cart/index.tsx | 4 -- src/BlockTypes/MiniCart.php | 4 -- 3 files changed, 3 insertions(+), 56 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx index debad223a5a..612d680ee67 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx @@ -1,19 +1,13 @@ /** * 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'; /** @@ -23,7 +17,6 @@ import QuantityBadge from './quantity-badge'; import { useColorProps } from '../../../hooks/style-attributes'; interface Attributes { - align: string; isInitiallyOpen?: boolean; backgroundColor?: string; textColor?: string; @@ -35,13 +28,9 @@ interface Props { setAttributes: ( attributes: Record< string, unknown > ) => void; } -const MiniCartBlock = ( { - attributes, - setAttributes, -}: Props ): ReactElement => { - const { align } = attributes; +const MiniCartBlock = ( { attributes }: Props ): ReactElement => { const blockProps = useBlockProps( { - className: `wc-block-mini-cart align-${ align }`, + className: `wc-block-mini-cart`, } ); const colorProps = useColorProps( attributes ); @@ -55,40 +44,6 @@ const MiniCartBlock = ( { return (
- - - setAttributes( { align: newAlign } ) - } - /> - { templatePartEditUri && ( Date: Mon, 7 Mar 2022 16:25:30 +0700 Subject: [PATCH 3/3] remove unecessary style manipulation --- .../blocks/cart-checkout/mini-cart/edit.tsx | 21 ++----------------- src/BlockTypes/MiniCart.php | 12 +++++------ 2 files changed, 8 insertions(+), 25 deletions(-) diff --git a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx index 612d680ee67..213b71651b2 100644 --- a/assets/js/blocks/cart-checkout/mini-cart/edit.tsx +++ b/assets/js/blocks/cart-checkout/mini-cart/edit.tsx @@ -14,25 +14,11 @@ import Noninteractive from '@woocommerce/base-components/noninteractive'; * Internal dependencies */ import QuantityBadge from './quantity-badge'; -import { useColorProps } from '../../../hooks/style-attributes'; -interface Attributes { - 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 }: Props ): ReactElement => { +const MiniCartBlock = (): ReactElement => { const blockProps = useBlockProps( { className: `wc-block-mini-cart`, } ); - const colorProps = useColorProps( attributes ); const templatePartEditUri = getSetting( 'templatePartEditUri', @@ -62,10 +48,7 @@ const MiniCartBlock = ( { attributes }: Props ): ReactElement => { ) } - +
'; } @@ -369,8 +369,8 @@ protected function get_markup( $attributes ) { ); } - return '
- + return '
+