[MVP QA woocommerce#1] Visual: spacings (woocommerce#38325)

* Update the margin-left on the buttons in the top bar from 16px to 8px * On mobile, the left and right body margins should be 32 px * The inner padding in the tab in the top bar should be 12px, not 16px * In the edit product link modal, let's set this modal’s width to 650 px and remove the line separating the header from the contents * All modals should now have 8 px window radius * In the feedback form, can we fix the buttons at the bottom * The help icon in checkboxes small, detached from the item label, and vertically misaligned. Left margin of 4 px, no vertical adjustment; somehow it has a -2px set for the top margin) * Fix block-editor-block-contextual-toolbar top position * When the product is in a draft state, the button in the top bar should say Add, not Save. It should change into Update once it's published on the store * Fix layout margin top * Add ection support for blockGap and set title and description to optional * Remove non needed control field margin bottom * Fix schedule sale block spacing * Remove non needed control field help text margin bottom * Remove the sub section outer spacing * Move pricing fields into a sub section block * Fix collapsible-contet margin top * Remove invalid inner block layout spacing * Wrap sku, stock toogle and quantity within a sub section * Group inventory advance section inner blocks into a sub section * Fix linter error * Add changelog files * Fix php lint error * Change unit names to fit GB definitions see: https://github.com/WordPress/gutenberg/blob/b2c16f3c684098a8dabff3911c610caa5c053701/packages/base-styles/_variables.scss\#L31-L41
vishstack · Jun 1, 2023 · abcedbe · abcedbe
1 parent f815d4f
commit abcedbe
Show file tree

Hide file tree

Showing 22 changed files with 354 additions and 232 deletions.
diff --git a/packages/js/components/changelog/add-38202 b/packages/js/components/changelog/add-38202
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix collapsible content heading alignment
diff --git a/packages/js/components/src/collapsible-content/collapsible-content.tsx b/packages/js/components/src/collapsible-content/collapsible-content.tsx
@@ -57,14 +57,12 @@ export const CollapsibleContent: React.FC< CollapsedProps > = ( {
 					displayState !== 'hidden' ? collapsibleContentId : undefined
 				}
 			>
-				<div>
-					<span>{ toggleText }</span>
+				<span>{ toggleText }</span>
 
-					<Icon
-						icon={ collapsed ? chevronDown : chevronUp }
-						size={ 16 }
-					/>
-				</div>
+				<Icon
+					icon={ collapsed ? chevronDown : chevronUp }
+					size={ 16 }
+				/>
 			</button>
 
 			<DisplayState state={ displayState }>

diff --git a/packages/js/components/src/collapsible-content/style.scss b/packages/js/components/src/collapsible-content/style.scss
@@ -1,18 +1,14 @@
 .woocommerce-collapsible-content {
-
 	.woocommerce-collapsible-content__toggle {
 		all: unset;
 		font-size: 13px;
-		color: #007CBA;
+		color: #007cba;
 		cursor: pointer;
+		display: flex;
+		align-items: center;
 
-		> div {
-			display: flex;
-			align-items: center;
-		}
-
 		svg {
-			fill: #007CBA;
+			fill: #007cba;
 			margin-left: 2px;
 		}
 	}

diff --git a/packages/js/customer-effort-score/changelog/add-38202 b/packages/js/customer-effort-score/changelog/add-38202
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix modal border radius and content scrolling
diff --git a/packages/js/customer-effort-score/src/style.scss b/packages/js/customer-effort-score/src/style.scss
@@ -107,8 +107,18 @@
 	}
 }
 
+.components-modal__content {
+	padding-bottom: 100px;
+}
+
 .woocommerce-customer-effort-score__buttons {
 	text-align: right;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	padding: calc( 2 * $gap );
 
 	.components-button {
 		margin-left: 1em;

diff --git a/packages/js/product-editor/changelog/add-38202 b/packages/js/product-editor/changelog/add-38202
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add sub section and section spacing
diff --git a/packages/js/product-editor/src/blocks/checkbox/edit.tsx b/packages/js/product-editor/src/blocks/checkbox/edit.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { createElement, createInterpolateElement } from '@wordpress/element';
+import { createElement } from '@wordpress/element';
 import type { BlockAttributes } from '@wordpress/blocks';
 import { CheckboxControl, Tooltip } from '@wordpress/components';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -25,38 +25,30 @@ export function Edit( { attributes }: { attributes: BlockAttributes } ) {
 
 	return (
 		<div { ...blockProps }>
-			<h4> { title } </h4>
-			<CheckboxControl
-				label={
-					tooltip
-						? createInterpolateElement( `<label /> <tooltip />`, {
-								label: <span>{ label }</span>,
-								tooltip: (
-									<Tooltip
-										text={ <span>{ tooltip }</span> }
-										position="top center"
-										// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-										// @ts-ignore Incorrect types.
-										className={
-											'woocommerce-product-form__checkbox-tooltip'
-										}
-										delay={ 0 }
-									>
-										<span className="woocommerce-product-form__checkbox-tooltip-icon">
-											<Icon
-												icon={ help }
-												size={ 22 }
-												fill="#949494"
-											/>
-										</span>
-									</Tooltip>
-								),
-						  } )
-						: label
-				}
-				checked={ value }
-				onChange={ ( selected ) => setValue( selected ) }
-			/>
+			<h4>{ title }</h4>
+			<div className="woocommerce-product-form__checkbox-wrapper">
+				<CheckboxControl
+					label={ label }
+					checked={ value }
+					onChange={ ( selected ) => setValue( selected ) }
+				/>
+				{ tooltip && (
+					<Tooltip
+						text={ <span>{ tooltip }</span> }
+						position="top center"
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore Incorrect types.
+						className={
+							'woocommerce-product-form__checkbox-tooltip'
+						}
+						delay={ 0 }
+					>
+						<span className="woocommerce-product-form__checkbox-tooltip-icon">
+							<Icon icon={ help } size={ 21.94 } fill="#949494" />
+						</span>
+					</Tooltip>
+				) }
+			</div>
 		</div>
 	);
 }
diff --git a/packages/js/product-editor/src/blocks/checkbox/editor.scss b/packages/js/product-editor/src/blocks/checkbox/editor.scss
@@ -1,27 +1,27 @@
-
 .woocommerce-product-form__checkbox {
-
-	.components-base-control__field {
+	.components-base-control__field,
+	.components-checkbox-control__label,
+	&-wrapper,
+	&-tooltip-icon {
 		display: flex;
 		align-items: center;
 	}
 
-	.components-checkbox-control__label {
-		display: flex;
-	}
-
-	&-tooltip-icon {
-		margin: -2px 0 0 $gap-small;
+	.components-base-control__field {
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
 	}
 }
 
+.woocommerce-product-form__checkbox-wrapper {
+	gap: $gap-smallest;
+}
+
 .woocommerce-product-form__checkbox-tooltip {
 	.components-popover__content {
 		width: 200px;
 		min-width: auto;
 		white-space: normal !important;
 	}
 }
-
diff --git a/packages/js/product-editor/src/blocks/schedule-sale/edit.tsx b/packages/js/product-editor/src/blocks/schedule-sale/edit.tsx
@@ -145,7 +145,7 @@ export function Edit( {
 			/>
 
 			{ showScheduleSale && (
-				<div className="wp-block-columns">
+				<div className="wp-block-columns wp-block-woocommerce-product-schedule-sale-fields__content">
 					<div className="wp-block-column">
 						<DateTimePickerControl
 							ref={

diff --git a/packages/js/product-editor/src/blocks/schedule-sale/editor.scss b/packages/js/product-editor/src/blocks/schedule-sale/editor.scss
@@ -1,21 +1,5 @@
 .wp-block-woocommerce-product-schedule-sale-fields {
-	margin-bottom: $gap-large;
-
-	.components-toggle-control {
-		margin-bottom: $gap;
-		padding-bottom: $gap-smaller;
-	}
-
-	.components-toggle-control__label {
-		display: flex;
-		align-items: center;
-	}
-}
-
-.wp-block-woocommerce-product-section {
-	> .block-editor-inner-blocks > .block-editor-block-list__layout {
-		> .wp-block.wp-block-woocommerce-product-schedule-sale-fields:not( :first-child ) {
-			margin-top: $gap;
-		}
+	&__content {
+		margin-top: $gap-large;
 	}
 }
diff --git a/packages/js/product-editor/src/blocks/section/block.json b/packages/js/product-editor/src/blocks/section/block.json
@@ -14,6 +14,11 @@
 		"description": {
 			"type": "string",
 			"__experimentalRole": "content"
+		},
+		"blockGap": {
+			"type": "string",
+			"enum": [ "unit-30", "unit-40" ],
+			"default": "unit-30"
 		}
 	},
 	"supports": {

diff --git a/packages/js/product-editor/src/blocks/section/edit.tsx b/packages/js/product-editor/src/blocks/section/edit.tsx
@@ -1,34 +1,57 @@
 /**
  * External dependencies
  */
+import classNames from 'classnames';
 import { createElement } from '@wordpress/element';
 import type { BlockEditProps } from '@wordpress/blocks';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	// @ts-expect-error no exported member.
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { SectionBlockAttributes } from './types';
 import { sanitizeHTML } from '../../utils/sanitize-html';
+import { SectionBlockAttributes } from './types';
 
 export function Edit( {
 	attributes,
 }: BlockEditProps< SectionBlockAttributes > ) {
+	const { description, title, blockGap } = attributes;
 	const blockProps = useBlockProps();
-	const { description, title } = attributes;
+	const innerBlockProps = useInnerBlocksProps(
+		{
+			className: classNames(
+				'wp-block-woocommerce-product-section__content',
+				`wp-block-woocommerce-product-section__content--block-gap-${ blockGap }`
+			),
+		},
+		{ templateLock: 'all' }
+	);
+	const SectionTagName = title ? 'fieldset' : 'div';
+	const HeadingTagName = SectionTagName === 'fieldset' ? 'legend' : 'div';
 
 	return (
-		<div { ...blockProps }>
-			<h2 className="wp-block-woocommerce-product-section__title">
-				<span>{ title }</span>
-			</h2>
-			{ description && (
-				<p
-					className="wp-block-woocommerce-product-section__description"
-					dangerouslySetInnerHTML={ sanitizeHTML( description ) }
-				/>
+		<SectionTagName { ...blockProps }>
+			{ title && (
+				<HeadingTagName className="wp-block-woocommerce-product-section__heading">
+					<h2 className="wp-block-woocommerce-product-section__heading-title">
+						{ title }
+					</h2>
+					{ description && (
+						<p
+							className="wp-block-woocommerce-product-section__heading-description"
+							dangerouslySetInnerHTML={ sanitizeHTML(
+								description
+							) }
+						/>
+					) }
+				</HeadingTagName>
 			) }
-			<InnerBlocks templateLock="all" />
-		</div>
+
+			<div { ...innerBlockProps } />
+		</SectionTagName>
 	);
 }
diff --git a/packages/js/product-editor/src/blocks/section/editor.scss b/packages/js/product-editor/src/blocks/section/editor.scss
@@ -1,29 +1,61 @@
 .wp-block-woocommerce-product-section {
-    margin-bottom: 48px;
-	padding-top: 48px;
+	margin: calc(3 * $gap) 0 0;
+	padding: 0 0 calc(3 * $gap);
+	border-bottom: 1px solid #ddd;
 
 	&:first-child {
-		padding-top: 64px;
+		margin-top: calc(4 * $gap);
 	}
 
-    .wp-block-woocommerce-product-section__title {
-        margin-top: 0;
-        margin-bottom: 0;
-        font-size: 20px;
-        font-weight: 500;
-        color: $gray-900;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    &__description {
-        margin-top: $gap-small;
-        font-size: 13px;
-        color: $gray-700;
-        line-height: 1.5;
-    }
-}
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&__heading {
+		padding: 0;
+		margin: 0 0 calc(2 * $gap) 0;
+		width: 100%;
+
+		.wp-block-woocommerce-product-section__heading-title {
+			margin: 0;
+			font-size: 20px;
+			font-weight: 500;
+			color: $gray-900;
+			display: inline-flex;
+			align-items: center;
+
+			.block-editor-block-icon {
+				margin-right: 14px;
+
+				> div {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		}
 
-.wp-block-woocommerce-product-section + .wp-block-woocommerce-product-section {
-	border-top: 1px solid #ddd;
+		.wp-block-woocommerce-product-section__heading-description {
+			margin: $gap-small 0 0;
+			font-size: 13px;
+			color: $gray-700;
+			line-height: 1.5;
+		}
+	}
+
+	&__content {
+		&--block-gap-unit-30 > * + * {
+			margin-top: $grid-unit-30;
+		}
+
+		&--block-gap-unit-40 > * + * {
+			margin-top: $grid-unit-40;
+		}
+
+		.wp-block-woocommerce-product-section {
+			margin-top: 0;
+			padding-bottom: 0;
+			border-bottom: none;
+		}
+	}
 }
diff --git a/packages/js/product-editor/src/blocks/section/types.ts b/packages/js/product-editor/src/blocks/section/types.ts
@@ -4,6 +4,7 @@
 import { BlockAttributes } from '@wordpress/blocks';
 
 export interface SectionBlockAttributes extends BlockAttributes {
-	title: string;
-	description: string;
+	title?: string;
+	description?: string;
+	blockGap: 'lg' | '2xlg';
 }