Add a new icon style to the Customer Account block (#48979)
* Add a new icon style to the Customer Account block * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix lint errors * Improve svg margins --------- Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alba Rincón
GitHub
parent
fbbf452243
commit
4dcaca793f
|
|
@ -5,6 +5,7 @@ import { Icon } from '@wordpress/icons';
|
|||
import {
|
||||
customerAccountStyle,
|
||||
customerAccountStyleAlt,
|
||||
customerAccountStyleLine,
|
||||
} from '@woocommerce/icons';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
|
@ -14,6 +15,12 @@ import { __ } from '@wordpress/i18n';
|
|||
*/
|
||||
import { Attributes, DisplayStyle, IconStyle } from './types';
|
||||
|
||||
const icons = {
|
||||
default: customerAccountStyle,
|
||||
alt: customerAccountStyleAlt,
|
||||
line: customerAccountStyleLine,
|
||||
};
|
||||
|
||||
const AccountIcon = ( {
|
||||
iconStyle,
|
||||
displayStyle,
|
||||
|
|
@ -23,13 +30,8 @@ const AccountIcon = ( {
|
|||
displayStyle: DisplayStyle;
|
||||
iconClass: string;
|
||||
} ) => {
|
||||
const icon =
|
||||
iconStyle === IconStyle.ALT
|
||||
? customerAccountStyleAlt
|
||||
: customerAccountStyle;
|
||||
|
||||
return displayStyle === DisplayStyle.TEXT_ONLY ? null : (
|
||||
<Icon className={ iconClass } icon={ icon } size={ 18 } />
|
||||
<Icon className={ iconClass } icon={ icons[ iconStyle ] } size={ 18 } />
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Icon } from '@wordpress/icons';
|
|||
import {
|
||||
customerAccountStyle,
|
||||
customerAccountStyleAlt,
|
||||
customerAccountStyleLine,
|
||||
} from '@woocommerce/icons';
|
||||
import { InspectorControls } from '@wordpress/block-editor';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
|
@ -104,6 +105,22 @@ export const BlockSettings = ( {
|
|||
}
|
||||
className="wc-block-editor-customer-account__icon-style-toggle"
|
||||
>
|
||||
<ToggleGroupControlOption
|
||||
value={ IconStyle.LINE }
|
||||
label={
|
||||
<Icon
|
||||
icon={ customerAccountStyleLine }
|
||||
size={ 16 }
|
||||
className={ clsx(
|
||||
'wc-block-editor-customer-account__icon-option',
|
||||
{
|
||||
active:
|
||||
iconStyle === IconStyle.LINE,
|
||||
}
|
||||
) }
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ToggleGroupControlOption
|
||||
value={ IconStyle.DEFAULT }
|
||||
label={
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ export enum DisplayStyle {
|
|||
export enum IconStyle {
|
||||
DEFAULT = 'default',
|
||||
ALT = 'alt',
|
||||
LINE = 'line',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export { default as checkPayment } from './library/check-payment';
|
|||
export { default as customerAccount } from './library/customer-account';
|
||||
export { default as customerAccountStyle } from './library/customer-account-style';
|
||||
export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';
|
||||
export { default as customerAccountStyleLine } from './library/customer-account-style-line';
|
||||
export { default as eye } from './library/eye';
|
||||
export { default as fields } from './library/fields';
|
||||
export { default as filledCart } from './library/filled-cart';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { SVG } from '@wordpress/primitives';
|
||||
|
||||
const customerAccountStyleLine = (
|
||||
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.1919 3.69231C10.1919 4.90309 9.21039 5.88462 7.99961 5.88462C6.78884 5.88462 5.80731 4.90309 5.80731 3.69231C5.80731 2.48153 6.78884 1.5 7.99961 1.5C9.21039 1.5 10.1919 2.48153 10.1919 3.69231ZM11.6919 3.69231C11.6919 5.73151 10.0388 7.38462 7.99961 7.38462C5.96041 7.38462 4.30731 5.73151 4.30731 3.69231C4.30731 1.6531 5.96041 0 7.99961 0C10.0388 0 11.6919 1.6531 11.6919 3.69231ZM11.6919 10.4615H4.30731C3.2877 10.4615 2.46115 11.2881 2.46115 12.3077V16H0.614998V12.3077C0.614998 10.2685 2.2681 8.61539 4.30731 8.61539H11.6919C13.7311 8.61539 15.3842 10.2685 15.3842 12.3077V16H13.5381V12.3077C13.5381 11.2881 12.7115 10.4615 11.6919 10.4615Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</SVG>
|
||||
);
|
||||
|
||||
export default customerAccountStyleLine;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Add a new icon style to the "Customer Account" block.
|
||||
|
|
@ -11,9 +11,10 @@ use Automattic\WooCommerce\Blocks\Utils\BlockHooksTrait;
|
|||
class CustomerAccount extends AbstractBlock {
|
||||
use BlockHooksTrait;
|
||||
|
||||
const TEXT_ONLY = 'text_only';
|
||||
const ICON_ONLY = 'icon_only';
|
||||
const DISPLAY_ALT = 'alt';
|
||||
const TEXT_ONLY = 'text_only';
|
||||
const ICON_ONLY = 'icon_only';
|
||||
const DISPLAY_ALT = 'alt';
|
||||
const DISPLAY_LINE = 'line';
|
||||
|
||||
/**
|
||||
* Block name.
|
||||
|
|
@ -124,8 +125,10 @@ class CustomerAccount extends AbstractBlock {
|
|||
'viewbox' => true,
|
||||
),
|
||||
'path' => array(
|
||||
'd' => true,
|
||||
'fill' => true,
|
||||
'd' => true,
|
||||
'fill' => true,
|
||||
'fill-rule' => true,
|
||||
'clip-rule' => true,
|
||||
),
|
||||
);
|
||||
|
||||
|
|
@ -153,8 +156,20 @@ class CustomerAccount extends AbstractBlock {
|
|||
return '';
|
||||
}
|
||||
|
||||
if ( self::DISPLAY_LINE === $attributes['iconStyle'] ) {
|
||||
return '<svg class="' . $attributes['iconClass'] . '" xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 16 16" width="16" height="16">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1919 3.69231C10.1919 4.90309 9.21039 5.88462 7.99961
|
||||
5.88462C6.78884 5.88462 5.80731 4.90309 5.80731 3.69231C5.80731 2.48153 6.78884 1.5 7.99961 1.5C9.21039
|
||||
1.5 10.1919 2.48153 10.1919 3.69231ZM11.6919 3.69231C11.6919 5.73151 10.0388 7.38462 7.99961 7.38462C5.96041
|
||||
7.38462 4.30731 5.73151 4.30731 3.69231C4.30731 1.6531 5.96041 0 7.99961 0C10.0388 0 11.6919 1.6531 11.6919
|
||||
3.69231ZM11.6919 10.4615H4.30731C3.2877 10.4615 2.46115 11.2881 2.46115 12.3077V16H0.614998V12.3077C0.614998
|
||||
10.2685 2.2681 8.61539 4.30731 8.61539H11.6919C13.7311 8.61539 15.3842 10.2685 15.3842 12.3077V16H13.5381V12.3077C13.5381
|
||||
11.2881 12.7115 10.4615 11.6919 10.4615Z" fill="currentColor"/>
|
||||
</svg>';
|
||||
}
|
||||
|
||||
if ( self::DISPLAY_ALT === $attributes['iconStyle'] ) {
|
||||
return '<svg class="' . $attributes['iconClass'] . '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18">
|
||||
return '<svg class="' . $attributes['iconClass'] . '" xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 19 19" width="18" height="18">
|
||||
<path
|
||||
d="M9 0C4.03579 0 0 4.03579 0 9C0 13.9642 4.03579 18 9 18C13.9642 18 18 13.9642 18 9C18 4.03579 13.9642 0 9
|
||||
0ZM9 4.32C10.5347 4.32 11.7664 5.57056 11.7664 7.08638C11.7664 8.62109 10.5158 9.85277 9 9.85277C7.4653
|
||||
|
|
@ -166,7 +181,7 @@ class CustomerAccount extends AbstractBlock {
|
|||
</svg>';
|
||||
}
|
||||
|
||||
return '<svg class="' . $attributes['iconClass'] . '" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
return '<svg class="' . $attributes['iconClass'] . '" xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 17 17" width="16" height="16">
|
||||
<path
|
||||
d="M8.00009 8.34785C10.3096 8.34785 12.1819 6.47909 12.1819 4.17393C12.1819 1.86876 10.3096 0 8.00009 0C5.69055
|
||||
0 3.81824 1.86876 3.81824 4.17393C3.81824 6.47909 5.69055 8.34785 8.00009 8.34785ZM0.333496 15.6522C0.333496
|
||||
|
|
|
|||
Loading…
Reference in New Issue