Update Mini-Cart block editor sidebar (II)

woocommerce · May 10, 2023 · a99ca4c · a99ca4c
1 parent b54eea5
commit a99ca4c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 49 deletions.
diff --git a/assets/js/blocks/mini-cart/edit.tsx b/assets/js/blocks/mini-cart/edit.tsx
@@ -55,7 +55,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 		<div { ...blockProps }>
 			<InspectorControls>
 				<PanelBody
-					title={ __( 'Display', 'woo-gutenberg-products-block' ) }
+					title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
 				>
 					<ToggleControl
 						label={ __(
@@ -66,7 +66,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 							'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
 							'woo-gutenberg-products-block'
 						) }
-						checked={ hasHiddenPrice }
+						checked={ ! hasHiddenPrice }
 						onChange={ () =>
 							setAttributes( {
 								hasHiddenPrice: ! hasHiddenPrice,
@@ -108,59 +108,62 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
 						</ToggleGroupControl>
 					) }
 				</PanelBody>
-				{ templatePartEditUri && (
-					<PanelBody
-						title={ __(
-							'Cart Drawer',
+				<PanelBody
+					title={ __(
+						'Cart Drawer',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					{ templatePartEditUri && (
+						<>
+							<img
+								className="wc-block-editor-mini-cart__drawer-image"
+								src="/wp-content/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg"
+								alt=""
+							/>
+							<p>
+								{ __(
+									'When opened, the mini-cart drawer gives shoppers quick access to view their selected products and checkout.',
+									'woo-gutenberg-products-block'
+								) }
+							</p>
+							<p className="wc-block-editor-mini-cart__drawer-link">
+								<ExternalLink href={ templatePartEditUri }>
+									{ __(
+										'Edit Mini-Cart Drawer template',
+										'woo-gutenberg-products-block'
+									) }
+								</ExternalLink>
+							</p>
+						</>
+					) }
+					<BaseControl
+						id="wc-block-mini-cart__add-to-cart-behaviour-toggle"
+						label={ __(
+							'Behavior',
 							'woo-gutenberg-products-block'
 						) }
 					>
-						<img
-							src="/wp-content/plugins/woocommerce-blocks/images/blocks/mini-cart/cart-drawer.svg"
-							alt=""
-						/>
-						<p>
-							{ __(
-								'When opened, the mini-cart drawer gives shoppers quick access to view their selected products and checkout.',
+						<ToggleControl
+							label={ __(
+								'Open drawer when adding',
 								'woo-gutenberg-products-block'
 							) }
-						</p>
-						<p className="wc-block-editor-mini-cart__edit-template-link">
-							<ExternalLink href={ templatePartEditUri }>
-								{ __(
-									'Edit Mini-Cart Drawer template',
-									'woo-gutenberg-products-block'
-								) }
-							</ExternalLink>
-						</p>
-						<BaseControl
-							id="wc-block-mini-cart__add-to-cart-behaviour-toggle"
-							label={ __(
-								'Behavior',
+							onChange={ ( value ) => {
+								setAttributes( {
+									addToCartBehaviour: value
+										? 'open_drawer'
+										: 'none',
+								} );
+							} }
+							help={ __(
+								'Toggle to open the Mini-Cart drawer when a shopper adds a product to their cart.',
 								'woo-gutenberg-products-block'
 							) }
-						>
-							<ToggleControl
-								label={ __(
-									'Open drawer when adding',
-									'woo-gutenberg-products-block'
-								) }
-								onChange={ ( value ) => {
-									setAttributes( {
-										addToCartBehaviour: value
-											? 'open_drawer'
-											: 'none',
-									} );
-								} }
-								help={ __(
-									'Toggle to open the Mini-Cart drawer when a shopper adds a product to their cart.',
-									'woo-gutenberg-products-block'
-								) }
-								checked={ addToCartBehaviour === 'open_drawer' }
-							/>
-						</BaseControl>
-					</PanelBody>
-				) }
+							checked={ addToCartBehaviour === 'open_drawer' }
+						/>
+					</BaseControl>
+				</PanelBody>
 			</InspectorControls>
 			<Noninteractive>
 				<button className="wc-block-mini-cart__button">

diff --git a/assets/js/blocks/mini-cart/editor.scss b/assets/js/blocks/mini-cart/editor.scss
@@ -2,6 +2,10 @@
 	width: 100%;
 }
 
-.wc-block-editor-mini-cart__edit-template-link {
+.wc-block-editor-mini-cart__drawer-image {
+	margin-bottom: 6px;
+}
+
+.wc-block-editor-mini-cart__drawer-link {
 	margin-bottom: 24px;
 }