Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor section and subsection blocks (#44502) 

* Add section-header component

* Use section-header and remove inventory-email scss

* Add changelog

* Rename file type
This commit is contained in:
Fernando Marichal 2024-02-09 15:47:02 -03:00 committed by GitHub
parent f68467ff96
commit dd64e2724a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 117 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/dev-44476_refactor_section_and_subsection Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: dev
Refactor section and subsection blocks #44502

48
packages/js/product-editor/src/blocks/generic/section/edit.tsx
View File

@ -3,9 +3,7 @@
*/
import classNames from 'classnames';
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
import {
// @ts-expect-error no exported member.
useInnerBlocksProps,
@ -14,10 +12,9 @@ import {
/**
* Internal dependencies
*/
import { BlockSlot } from '../../../components/block-slot-fill';
import { sanitizeHTML } from '../../../utils/sanitize-html';
import { SectionBlockAttributes } from './types';
import { ProductEditorBlockEditProps } from '../../../types';
import { SectionHeader } from '../../../components/section-header';
export function SectionBlockEdit( {
attributes,
@ -28,50 +25,23 @@ export function SectionBlockEdit( {
const innerBlockProps = useInnerBlocksProps(
{
className: classNames(
'wp-block-woocommerce-product-section__content',
`wp-block-woocommerce-product-section__content--block-gap-${ blockGap }`
'wp-block-woocommerce-product-section-header__content',
`wp-block-woocommerce-product-section-header__content--block-gap-${ blockGap }`
),
},
{ templateLock: 'all' }
);
const SectionTagName = title ? 'fieldset' : 'div';
const HeadingTagName = SectionTagName === 'fieldset' ? 'legend' : 'div';
const tooltipClassName = `wp-block-woocommerce-product-section__heading-tooltip`;
return (
<SectionTagName { ...blockProps }>
{ title && (
<HeadingTagName className="wp-block-woocommerce-product-section__heading">
<div className="wp-block-woocommerce-product-section__heading-title-wrapper">
<h2 className="wp-block-woocommerce-product-section__heading-title">
{ title }
{ description && (
<Tooltip
className={ tooltipClassName }
text={
<p
className="wp-block-woocommerce-product-section__heading-description"
dangerouslySetInnerHTML={ sanitizeHTML(
description
) }
/>
}
position={ 'bottom center' }
helperText={ __(
'View helper text',
'woocommerce'
) }
/>
) }
</h2>
<div className="wp-block-woocommerce-product-section__actions">
<BlockSlot name="section-actions" />
</div>
</div>
<BlockSlot name="section-description" />
</HeadingTagName>
<SectionHeader
description={ description }
sectionTagName={ SectionTagName }
title={ title }
type="section"
/>
) }
<div { ...innerBlockProps } />

97
packages/js/product-editor/src/blocks/generic/section/editor.scss
View File

@ -1,96 +1,7 @@
.wp-block-woocommerce-product-section {
margin: calc(3 * $gap) 0 0;
padding: 0 0 calc(3 * $gap);
border-bottom: 1px solid #ddd;
&:first-child {
margin-top: calc(4 * $gap);
}
&:last-child {
border-bottom: none;
}
&__heading {
padding: 0;
margin: 0 0 calc(2 * $gap) 0;
width: 100%;
&-title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: $grid-unit-20;
}
&-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;
}
}
}
}
&__content {
&--block-gap-unit-30 > * + * {
margin-top: $grid-unit-30;
}
&--block-gap-unit-40 > * + * {
margin-top: $grid-unit-40;
}
.wp-block-woocommerce-product-section {
&:first-child {
margin-top: 0;
}
padding-bottom: 0;
border-bottom: none;
}
}
&__heading-description {
margin: 0;
max-width: 300px;
}
// <ActionSections /> slot.
&__actions {
display: flex;
justify-content: flex-end;
gap: $grid-unit;
/*
* Core removes the "loading" animation styles
* from the button when it's disabled, so we
* let's add them back.
*/
.components-button.is-tertiary.is-busy:disabled {
background-image: linear-gradient(
-45deg,
#fafafa 33%,
#e0e0e0 0,
#e0e0e0 70%,
#fafafa 0
);
background-size: 100px 100%;
opacity: 1;
.wp-block-woocommerce-product-section-header__content {
.wp-block-woocommerce-product-section {
&:first-child {
margin-top: 0;
}
}
}
.woocommerce-tooltip > .wp-block-woocommerce-product-section__heading-tooltip {
margin-left: $gap-small;
}

48
packages/js/product-editor/src/blocks/generic/subsection/edit.tsx
View File

@ -3,9 +3,7 @@
*/
import classNames from 'classnames';
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
import {
// @ts-expect-error no exported member.
useInnerBlocksProps,
@ -14,10 +12,9 @@ import {
/**
* Internal dependencies
*/
import { BlockSlot } from '../../../components/block-slot-fill';
import { sanitizeHTML } from '../../../utils/sanitize-html';
import { SubsectionBlockAttributes } from './types';
import { ProductEditorBlockEditProps } from '../../../types';
import { SectionHeader } from '../../../components/section-header';
export function SubsectionBlockEdit( {
attributes,
@ -28,50 +25,23 @@ export function SubsectionBlockEdit( {
const innerBlockProps = useInnerBlocksProps(
{
className: classNames(
'wp-block-woocommerce-product-subsection__content',
`wp-block-woocommerce-product-subsection__content--block-gap-${ blockGap }`
'wp-block-woocommerce-product-section-header__content',
`wp-block-woocommerce-product-section-header__content--block-gap-${ blockGap }`
),
},
{ templateLock: 'all' }
);
const SubsectionTagName = title ? 'fieldset' : 'div';
const HeadingTagName = SubsectionTagName === 'fieldset' ? 'legend' : 'div';
const tooltipClassName = `wp-block-woocommerce-product-subsection__heading-tooltip`;
return (
<SubsectionTagName { ...blockProps }>
{ title && (
<HeadingTagName className="wp-block-woocommerce-product-subsection__heading">
<div className="wp-block-woocommerce-product-subsection__heading-title-wrapper">
<h2 className="wp-block-woocommerce-product-subsection__heading-title">
{ title }
{ description && (
<Tooltip
className={ tooltipClassName }
text={
<p
className="wp-block-woocommerce-product-subsection__heading-description"
dangerouslySetInnerHTML={ sanitizeHTML(
description
) }
/>
}
position={ 'bottom center' }
helperText={ __(
'View helper text',
'woocommerce'
) }
/>
) }
</h2>
<div className="wp-block-woocommerce-product-subsection__actions">
<BlockSlot name="subsection-actions" />
</div>
</div>
<BlockSlot name="subsection-description" />
</HeadingTagName>
<SectionHeader
description={ description }
sectionTagName={ SubsectionTagName }
title={ title }
type="subsection"
/>
) }
<div { ...innerBlockProps } />

3
packages/js/product-editor/src/blocks/product-fields/inventory-email/editor.scss
View File

@ -1,3 +0,0 @@
.wp-block-woocommerce-product-inventory-email-field {
margin-top: $gap-large;
}

2
packages/js/product-editor/src/blocks/style.scss
View File

@ -2,7 +2,6 @@
@import "product-fields/description/editor.scss";
@import "product-fields/downloads/editor.scss";
@import "product-fields/images/editor.scss";
@import "product-fields/inventory-email/editor.scss";
@import "product-fields/inventory-sku/editor.scss";
@import "product-fields/name/editor.scss";
@import "product-fields/notice-has-variations/editor.scss";
@ -12,7 +11,6 @@
@import "product-fields/sale-price/editor.scss";
@import "product-fields/schedule-sale/editor.scss";
@import "generic/section/editor.scss";
@import "generic/subsection/editor.scss";
@import "product-fields/shipping-dimensions/editor.scss";
@import "product-fields/summary/editor.scss";
@import "generic/tab/editor.scss";

2
packages/js/product-editor/src/components/section-header/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './section-header';
export * from './types';

55
packages/js/product-editor/src/components/section-header/section-header.tsx Normal file
View File

@ -0,0 +1,55 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { SectionHeaderProps } from './types';
import { sanitizeHTML } from '../../utils/sanitize-html';
import { BlockSlot } from '../block-slot-fill';
export function SectionHeader( {
description,
sectionTagName,
title,
type = 'section',
}: SectionHeaderProps ) {
const HeadingTagName = sectionTagName === 'fieldset' ? 'legend' : 'div';
return (
<HeadingTagName className="wp-block-woocommerce-product-section-header__heading">
<div className="wp-block-woocommerce-product-section-header__heading-title-wrapper">
<h2 className="wp-block-woocommerce-product-section-header__heading-title">
{ title }
{ description && (
<Tooltip
className="wp-block-woocommerce-product-section-header__heading-tooltip"
text={
<p
className="wp-block-woocommerce-product-section-header__heading-description"
dangerouslySetInnerHTML={ sanitizeHTML(
description
) }
/>
}
position={ 'bottom center' }
helperText={ __(
'View helper text',
'woocommerce'
) }
/>
) }
</h2>
<div className="wp-block-woocommerce-product-section-header__actions">
<BlockSlot name={ `${ type }-actions` } />
</div>
</div>
<BlockSlot name={ `${ type }-description` } />
</HeadingTagName>
);
}

40
packages/js/product-editor/src/blocks/generic/subsection/editor.scss → packages/js/product-editor/src/components/section-header/styles.scss
View File

@ -1,4 +1,18 @@
.wp-block-woocommerce-product-subsection {
.wp-block-woocommerce-product-section {
margin: calc(3 * $gap) 0 0;
padding: 0 0 calc(3 * $gap);
border-bottom: 1px solid #ddd;
&:first-child {
margin-top: calc(4 * $gap);
}
&:last-child {
border-bottom: none;
}
}
.wp-block-woocommerce-product-section-header {
&__heading {
padding: 0;
margin: 0 0 calc(2 * $gap) 0;
@ -39,12 +53,6 @@
&--block-gap-unit-40 > * + * {
margin-top: $grid-unit-40;
}
.wp-block-woocommerce-product-subsection {
margin-top: 0;
padding-bottom: 0;
border-bottom: none;
}
}
&__heading-description {
@ -59,18 +67,24 @@
gap: $grid-unit;
/*
* Core removes the "loading" animation styles
* from the button when it's disabled, so we
* let's add them back.
*/
* Core removes the "loading" animation styles
* from the button when it's disabled, so we
* let's add them back.
*/
.components-button.is-tertiary.is-busy:disabled {
background-image: linear-gradient( -45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0 );
background-image: linear-gradient(
-45deg,
#fafafa 33%,
#e0e0e0 0,
#e0e0e0 70%,
#fafafa 0
);
background-size: 100px 100%;
opacity: 1;
}
}
}
.woocommerce-tooltip > .wp-block-woocommerce-product-subsection__heading-tooltip {
.woocommerce-tooltip > .wp-block-woocommerce-product-section-header__heading-tooltip {
margin-left: $gap-small;
}

6
packages/js/product-editor/src/components/section-header/types.ts Normal file
View File

@ -0,0 +1,6 @@
export interface SectionHeaderProps {
description?: string | undefined;
sectionTagName: string;
title: string;
type: 'section' | 'subsection';
}

1
packages/js/product-editor/src/style.scss
View File

@ -9,6 +9,7 @@
@import "components/product-section-layout/style.scss";
@import "components/header/style.scss";
@import "components/add-new-shipping-class-modal/style.scss";
@import "components/section-header/styles.scss";
/* Components */