Make the customer account icon bigger to match the mini-cart one (https://github.com/woocommerce/woocommerce-blocks/pull/8594)
* Make the customer account icon bigger to match the mini-cart one * Add variation to increase the icon size for new blocks * Improve class name * Add variation explanation * Add default attributes
This commit is contained in:
Alba Rincón
GitHub
parent
5d0237a22d
commit
b3db625215
|
|
@ -23,6 +23,10 @@
|
|||
"iconStyle": {
|
||||
"type": "string",
|
||||
"default": "default"
|
||||
},
|
||||
"iconClass": {
|
||||
"type": "string",
|
||||
"default": "icon"
|
||||
}
|
||||
},
|
||||
"textdomain": "woo-gutenberg-products-block",
|
||||
|
|
|
|||
|
|
@ -17,9 +17,11 @@ import { Attributes, DisplayStyle, IconStyle } from './types';
|
|||
const AccountIcon = ( {
|
||||
iconStyle,
|
||||
displayStyle,
|
||||
iconClass,
|
||||
}: {
|
||||
iconStyle: IconStyle;
|
||||
displayStyle: DisplayStyle;
|
||||
iconClass: string;
|
||||
} ) => {
|
||||
const icon =
|
||||
iconStyle === IconStyle.ALT
|
||||
|
|
@ -27,7 +29,7 @@ const AccountIcon = ( {
|
|||
: customerAccountStyle;
|
||||
|
||||
return displayStyle === DisplayStyle.TEXT_ONLY ? null : (
|
||||
<Icon className="icon" icon={ icon } size={ 18 } />
|
||||
<Icon className={ iconClass } icon={ icon } size={ 18 } />
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -52,7 +54,7 @@ export const CustomerAccountBlock = ( {
|
|||
}: {
|
||||
attributes: Attributes;
|
||||
} ): JSX.Element => {
|
||||
const { displayStyle, iconStyle } = attributes;
|
||||
const { displayStyle, iconStyle, iconClass } = attributes;
|
||||
|
||||
return (
|
||||
<a
|
||||
|
|
@ -64,6 +66,7 @@ export const CustomerAccountBlock = ( {
|
|||
<AccountIcon
|
||||
iconStyle={ iconStyle }
|
||||
displayStyle={ displayStyle }
|
||||
iconClass={ iconClass }
|
||||
/>
|
||||
<Label displayStyle={ displayStyle } />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { registerBlockType, registerBlockVariation } from '@wordpress/blocks';
|
||||
import { Icon } from '@wordpress/icons';
|
||||
import { customerAccount } from '@woocommerce/icons';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -28,3 +29,20 @@ registerBlockType( metadata, {
|
|||
return null;
|
||||
},
|
||||
} );
|
||||
|
||||
// We needed to change the size of the icon without affecting already existing blocks.
|
||||
// This is why we are registering a new variation with a different icon class instead of changing directly the icon
|
||||
// size in the css. By giving it the same name and making it default we are making sure that new blocks will use the
|
||||
// new icon size and existing blocks will keep using the old one after updating the plugin.
|
||||
// For more context, see https://github.com/woocommerce/woocommerce-blocks/pull/8594
|
||||
registerBlockVariation( 'woocommerce/customer-account', {
|
||||
name: 'woocommerce/customer-account',
|
||||
title: __( 'Customer account', 'woo-gutenberg-products-block' ),
|
||||
isDefault: true,
|
||||
attributes: {
|
||||
...metadata.attributes,
|
||||
displayStyle: 'icon_and_text',
|
||||
iconStyle: 'default',
|
||||
iconClass: 'wc-block-customer-account__account-icon',
|
||||
},
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.icon + .label {
|
||||
.icon + .label,
|
||||
.wc-block-customer-account__account-icon + .label {
|
||||
margin-left: $gap-smaller;
|
||||
}
|
||||
|
||||
|
|
@ -17,5 +18,10 @@
|
|||
height: em(16px);
|
||||
width: em(16px);
|
||||
}
|
||||
|
||||
.wc-block-customer-account__account-icon {
|
||||
height: em(23px);
|
||||
width: em(23px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ export interface Attributes {
|
|||
className?: string;
|
||||
displayStyle: DisplayStyle;
|
||||
iconStyle: IconStyle;
|
||||
iconClass: string;
|
||||
}
|
||||
|
||||
export enum DisplayStyle {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ class CustomerAccount extends AbstractBlock {
|
|||
}
|
||||
|
||||
if ( self::DISPLAY_ALT === $attributes['iconStyle'] ) {
|
||||
return '<svg class="icon" 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 0 18 18" 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
|
||||
|
|
@ -79,7 +79,7 @@ class CustomerAccount extends AbstractBlock {
|
|||
</svg>';
|
||||
}
|
||||
|
||||
return '<svg class="icon" 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 0 16 16" 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