diff --git a/packages/js/components/changelog/add-38202 b/packages/js/components/changelog/add-38202 new file mode 100644 index 0000000000000..32947cea92721 --- /dev/null +++ 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 index a39eb81a76985..ff9f7feb0af92 100644 --- 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 } > -
- { toggleText } + { toggleText } - -
+ diff --git a/packages/js/components/src/collapsible-content/style.scss b/packages/js/components/src/collapsible-content/style.scss index 9f94c0d883286..7433aaf0ec615 100644 --- 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 new file mode 100644 index 0000000000000..8756b505d2f64 --- /dev/null +++ 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 index ac00996f823df..acf35d5b905c5 100644 --- 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 new file mode 100644 index 0000000000000..50ce8e0cb6d66 --- /dev/null +++ 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 index ff22d1d233595..d7c1499d83890 100644 --- 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 (
-

{ title }

- `, { - label: { label }, - tooltip: ( - { tooltip } } - position="top center" - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore Incorrect types. - className={ - 'woocommerce-product-form__checkbox-tooltip' - } - delay={ 0 } - > - - - - - ), - } ) - : label - } - checked={ value } - onChange={ ( selected ) => setValue( selected ) } - /> +

{ title }

+
+ setValue( selected ) } + /> + { tooltip && ( + { tooltip } } + position="top center" + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore Incorrect types. + className={ + 'woocommerce-product-form__checkbox-tooltip' + } + delay={ 0 } + > + + + + + ) } +
); } diff --git a/packages/js/product-editor/src/blocks/checkbox/editor.scss b/packages/js/product-editor/src/blocks/checkbox/editor.scss index 4e295624fa87e..70fca8e4f5e20 100644 --- a/packages/js/product-editor/src/blocks/checkbox/editor.scss +++ b/packages/js/product-editor/src/blocks/checkbox/editor.scss @@ -1,22 +1,23 @@ - .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; @@ -24,4 +25,3 @@ 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 index d878969fb2a39..cb240ceea0b74 100644 --- 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 && ( -
+
.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 index 0fc58c9243dc3..29f34f2272ee7 100644 --- 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 index 910d6ca5cfd00..bd4d59c5d2be1 100644 --- 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 ( -
-

- { title } -

- { description && ( -

+ + { title && ( + +

+ { title } +

+ { description && ( +

+ ) } + ) } - -

+ +
+ ); } diff --git a/packages/js/product-editor/src/blocks/section/editor.scss b/packages/js/product-editor/src/blocks/section/editor.scss index 51ef2351e6c99..93a0806a59c58 100644 --- 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 index 017ae754a7df8..402141a2f3aa2 100644 --- 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'; } diff --git a/packages/js/product-editor/src/components/block-editor/style.scss b/packages/js/product-editor/src/components/block-editor/style.scss index 538eacaea7b36..f27f2c1c59161 100644 --- a/packages/js/product-editor/src/components/block-editor/style.scss +++ b/packages/js/product-editor/src/components/block-editor/style.scss @@ -11,7 +11,7 @@ label, div, input { - font-family: var( --wp--preset--font-family--system-font ); + font-family: var(--wp--preset--font-family--system-font); } label { @@ -36,15 +36,52 @@ } } - .editor-styles-wrapper { - max-width: 650px; - margin-left: auto; - margin-right: auto; - padding-bottom: 128px; + .components-base-control { + .components-base-control__field { + margin-bottom: 0; + } + + .components-base-control__help { + margin-bottom: 0; + } + } + + .components-toggle-control { + margin-bottom: 0; + + .components-form-toggle { + display: flex; + align-items: center; + } + + .components-toggle-control__label { + display: flex; + align-items: center; + } + } + + .woocommerce-collapsible-content .woocommerce-collapsible-content__content { + margin-top: calc(2 * $gap); + } + .editor-styles-wrapper { h4 { font-size: 16px; } + + .block-editor-block-list__layout.is-root-container { + padding-left: calc(2 * $gap); + padding-right: calc(2 * $gap); + padding-bottom: 128px; + + @include breakpoint(">782px") { + padding-left: 0; + padding-right: 0; + max-width: 650px; + margin-left: auto; + margin-right: auto; + } + } } .components-input-control { @@ -82,18 +119,6 @@ margin-bottom: 0; } - .wp-block-woocommerce-product-section { - > .block-editor-inner-blocks > .block-editor-block-list__layout { - > .wp-block:first-child { - margin-top: 32px; - } - - > .wp-block:not( :first-child ) { - margin-top: $gap-large; - } - } - } - .woocommerce-experimental-select-control__label { text-transform: uppercase; font-size: 11px; @@ -101,7 +126,28 @@ font-weight: 500; } - .block-editor-block-list__layout .block-editor-block-list__block:not( [contenteditable] ):focus:after { + .block-editor-block-list__layout + .block-editor-block-list__block:not([contenteditable]):focus:after { display: none; // use important or increase specificity. } } + +.woocommerce-layout:has(.woocommerce-product-block-editor) { + .woocommerce-layout__primary { + margin-top: calc($gap-largest + $gap-smaller); + } + .woocommerce-layout__header { + display: none; + } +} + +.wp-admin.woocommerce-feature-enabled-product-block-editor { + .components-modal { + &__frame { + border-radius: $gap-smaller; + } + &__header { + border: none; + } + } +} diff --git a/packages/js/product-editor/src/components/edit-product-link-modal/style.scss b/packages/js/product-editor/src/components/edit-product-link-modal/style.scss index ef963622ac35f..c4f22abc05010 100644 --- a/packages/js/product-editor/src/components/edit-product-link-modal/style.scss +++ b/packages/js/product-editor/src/components/edit-product-link-modal/style.scss @@ -1,5 +1,5 @@ .woocommerce-product-link-edit-modal { - min-width: 650px; + max-width: 650px; &__buttons { margin-top: $gap-larger; @@ -9,11 +9,8 @@ justify-content: flex-end; } - .components-modal__header { - border-color: $gray-300; - } - .woocommerce-product-link-edit-modal__description { - margin: $gap-large 0; + margin-top: 0; + margin-bottom: $gap-large; } } diff --git a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx index 6918e91a61518..5e0ae62ff9713 100644 --- a/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx +++ b/packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx @@ -54,7 +54,7 @@ export function usePublish( { const isBusy = isSaving || isValidating; - const isCreating = productStatus === 'auto-draft'; + const isPublished = productStatus === 'publish'; const { editEntityRecord, saveEditedEntityRecord } = useDispatch( 'core' ); @@ -95,9 +95,9 @@ export function usePublish( { } return { - children: isCreating - ? __( 'Add', 'woocommerce' ) - : __( 'Save', 'woocommerce' ), + children: isPublished + ? __( 'Update', 'woocommerce' ) + : __( 'Add', 'woocommerce' ), ...props, isBusy, variant: 'primary', diff --git a/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx b/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx index 05dc6c2bcbab4..c25c56bfe6ff5 100644 --- a/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx +++ b/packages/js/product-editor/src/components/header/publish-button/publish-button.tsx @@ -26,7 +26,7 @@ export function PublishButton( 'status' ); - const isCreating = productStatus === 'auto-draft'; + const isPublished = productStatus === 'publish'; const { createSuccessNotice, createErrorNotice } = useDispatch( 'core/notices' ); @@ -36,9 +36,9 @@ export function PublishButton( onPublishSuccess( savedProduct: Product ) { recordProductEvent( 'product_update', savedProduct ); - const noticeContent = isCreating - ? __( 'Product successfully created.', 'woocommerce' ) - : __( 'Product published.', 'woocommerce' ); + const noticeContent = isPublished + ? __( 'Product published.', 'woocommerce' ) + : __( 'Product successfully created.', 'woocommerce' ); const noticeOptions = { icon: '🎉', actions: [ @@ -64,9 +64,9 @@ export function PublishButton( } }, onPublishError( error ) { - const defaultMessage = isCreating - ? __( 'Failed to create product.', 'woocommerce' ) - : __( 'Failed to publish product.', 'woocommerce' ); + const defaultMessage = isPublished + ? __( 'Failed to publish product.', 'woocommerce' ) + : __( 'Failed to create product.', 'woocommerce' ); const message = getProductErrorMessage( error ); createErrorNotice( message || defaultMessage ); diff --git a/packages/js/product-editor/src/components/header/style.scss b/packages/js/product-editor/src/components/header/style.scss index 7052f1114593d..ac45d987da376 100644 --- a/packages/js/product-editor/src/components/header/style.scss +++ b/packages/js/product-editor/src/components/header/style.scss @@ -36,7 +36,7 @@ display: flex; > * + * { - margin-left: $gap; + margin-left: $gap-smaller; } } diff --git a/packages/js/product-editor/src/components/tabs/style.scss b/packages/js/product-editor/src/components/tabs/style.scss index c12769d0562f8..55cadfc5cf38e 100644 --- a/packages/js/product-editor/src/components/tabs/style.scss +++ b/packages/js/product-editor/src/components/tabs/style.scss @@ -4,8 +4,8 @@ .components-button { padding: $gap-smaller 0 20px 0; - margin-left: $gap; - margin-right: $gap; + margin-left: $gap-small; + margin-right: $gap-small; border-bottom: 3.5px solid transparent; border-radius: 0; height: auto; diff --git a/plugins/woocommerce/changelog/add-38202 b/plugins/woocommerce/changelog/add-38202 new file mode 100644 index 0000000000000..d353d7165ecd4 --- /dev/null +++ b/plugins/woocommerce/changelog/add-38202 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix block grouping within a section diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php index 071f49384527e..5d7ac9ffc0b19 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php +++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php @@ -368,46 +368,53 @@ public function add_product_template( $args ) { '', '' ), + 'blockGap' => 'unit-40', ), array( array( - 'core/columns', + 'woocommerce/product-section', array(), array( array( - 'core/column', - array( - 'templateLock' => 'all', - ), + 'core/columns', + array(), array( array( - 'woocommerce/product-regular-price-field', + 'core/column', array( - 'name' => 'regular_price', - 'label' => __( 'List price', 'woocommerce' ), + 'templateLock' => 'all', + ), + array( + array( + 'woocommerce/product-regular-price-field', + array( + 'name' => 'regular_price', + 'label' => __( 'List price', 'woocommerce' ), + ), + ), ), ), - ), - ), - array( - 'core/column', - array( - 'templateLock' => 'all', - ), - array( array( - 'woocommerce/product-sale-price-field', + 'core/column', array( - 'label' => __( 'Sale price', 'woocommerce' ), + 'templateLock' => 'all', + ), + array( + array( + 'woocommerce/product-sale-price-field', + array( + 'label' => __( 'Sale price', 'woocommerce' ), + ), + ), ), ), ), ), + array( + 'woocommerce/product-schedule-sale-fields', + ), ), ), - array( - 'woocommerce/product-schedule-sale-fields', - ), array( 'woocommerce/product-radio-field', array( @@ -488,29 +495,36 @@ public function add_product_template( $args ) { '', '' ), + 'blockGap' => 'unit-40', ), array( array( - 'woocommerce/product-sku-field', - ), - array( - 'woocommerce/product-toggle-field', - array( - 'label' => __( 'Track stock quantity for this product', 'woocommerce' ), - 'property' => 'manage_stock', - 'disabled' => 'yes' !== get_option( 'woocommerce_manage_stock' ), - ), - ), - array( - 'woocommerce/conditional', + 'woocommerce/product-section', + array(), array( - 'mustMatch' => array( - 'manage_stock' => array( true ), + array( + 'woocommerce/product-sku-field', ), - ), - array( array( - 'woocommerce/product-inventory-quantity-field', + 'woocommerce/product-toggle-field', + array( + 'label' => __( 'Track stock quantity for this product', 'woocommerce' ), + 'property' => 'manage_stock', + 'disabled' => 'yes' !== get_option( 'woocommerce_manage_stock' ), + ), + ), + array( + 'woocommerce/conditional', + array( + 'mustMatch' => array( + 'manage_stock' => array( true ), + ), + ), + array( + array( + 'woocommerce/product-inventory-quantity-field', + ), + ), ), ), ), @@ -554,61 +568,69 @@ public function add_product_template( $args ) { ), array( array( - 'woocommerce/conditional', + 'woocommerce/product-section', array( - 'mustMatch' => array( - 'manage_stock' => array( true ), - ), + 'blockGap' => 'unit-40', ), array( array( - 'woocommerce/product-radio-field', + 'woocommerce/conditional', array( - 'title' => __( 'When out of stock', 'woocommerce' ), - 'property' => 'backorders', - 'options' => array( - array( - 'label' => __( 'Allow purchases', 'woocommerce' ), - 'value' => 'yes', - ), + 'mustMatch' => array( + 'manage_stock' => array( true ), + ), + ), + array( + array( + 'woocommerce/product-radio-field', array( - 'label' => __( - 'Allow purchases, but notify customers', - 'woocommerce' + 'title' => __( 'When out of stock', 'woocommerce' ), + 'property' => 'backorders', + 'options' => array( + array( + 'label' => __( 'Allow purchases', 'woocommerce' ), + 'value' => 'yes', + ), + array( + 'label' => __( + 'Allow purchases, but notify customers', + 'woocommerce' + ), + 'value' => 'notify', + ), + array( + 'label' => __( "Don't allow purchases", 'woocommerce' ), + 'value' => 'no', + ), ), - 'value' => 'notify', - ), - array( - 'label' => __( "Don't allow purchases", 'woocommerce' ), - 'value' => 'no', ), ), + array( + 'woocommerce/product-inventory-email-field', + ), ), ), array( - 'woocommerce/product-inventory-email-field', - ), - ), - ), - array( - 'woocommerce/product-checkbox-field', - array( - 'title' => __( - 'Restrictions', - 'woocommerce' - ), - 'label' => __( - 'Limit purchases to 1 item per order', - 'woocommerce' - ), - 'property' => 'sold_individually', - 'tooltip' => __( - 'When checked, customers will be able to purchase only 1 item in a single order. This is particularly useful for items that have limited quantity, like art or handmade goods.', - 'woocommerce' + 'woocommerce/product-checkbox-field', + array( + 'title' => __( + 'Restrictions', + 'woocommerce' + ), + 'label' => __( + 'Limit purchases to 1 item per order', + 'woocommerce' + ), + 'property' => 'sold_individually', + 'tooltip' => __( + 'When checked, customers will be able to purchase only 1 item in a single order. This is particularly useful for items that have limited quantity, like art or handmade goods.', + 'woocommerce' + ), + ), ), + ), ), - ), ),