rebase from live enviornment

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/block.json

@@ -0,0 +1,38 @@
+{
+	"name": "woocommerce/customer-account",
+	"version": "1.0.0",
+	"title": "Customer account",
+	"description": "A block that allows your customers to log in and out of their accounts in your store.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce", "My Account" ],
+	"supports": {
+		"align": true,
+		"color": {
+			"text": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
+		"spacing": {
+			"margin": true
+		}
+	},
+	"attributes": {
+		"displayStyle": {
+			"type": "string",
+			"default": "icon_and_text"
+		},
+		"iconStyle": {
+			"type": "string",
+			"default": "default"
+		},
+		"iconClass": {
+			"type": "string",
+			"default": "icon"
+		}
+	},
+	"textdomain": "woocommerce",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/block.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/icons';
+import {
+	customerAccountStyle,
+	customerAccountStyleAlt,
+} from '@woocommerce/icons';
+import { getSetting } from '@woocommerce/settings';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Attributes, DisplayStyle, IconStyle } from './types';
+
+const AccountIcon = ( {
+	iconStyle,
+	displayStyle,
+	iconClass,
+}: {
+	iconStyle: IconStyle;
+	displayStyle: DisplayStyle;
+	iconClass: string;
+} ) => {
+	const icon =
+		iconStyle === IconStyle.ALT
+			? customerAccountStyleAlt
+			: customerAccountStyle;
+
+	return displayStyle === DisplayStyle.TEXT_ONLY ? null : (
+		<Icon className={ iconClass } icon={ icon } size={ 18 } />
+	);
+};
+
+const Label = ( { displayStyle }: { displayStyle: DisplayStyle } ) => {
+	if ( displayStyle === DisplayStyle.ICON_ONLY ) {
+		return null;
+	}
+
+	const currentUserId = getSetting( 'currentUserId', null );
+
+	return (
+		<span className="label">
+			{ currentUserId
+				? __( 'My Account', 'woo-gutenberg-products-block' )
+				: __( 'Log in', 'woo-gutenberg-products-block' ) }
+		</span>
+	);
+};
+
+export const CustomerAccountBlock = ( {
+	attributes,
+}: {
+	attributes: Attributes;
+} ): JSX.Element => {
+	const { displayStyle, iconStyle, iconClass } = attributes;
+
+	return (
+		<a
+			href={ getSetting(
+				'dashboardUrl',
+				getSetting( 'wpLoginUrl', '/wp-login.php' )
+			) }
+		>
+			<AccountIcon
+				iconStyle={ iconStyle }
+				displayStyle={ displayStyle }
+				iconClass={ iconClass }
+			/>
+			<Label displayStyle={ displayStyle } />
+		</a>
+	);
+};
+
+export default CustomerAccountBlock;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/edit.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import type { BlockEditProps } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import { Attributes } from './types';
+import { BlockSettings } from './sidebar-settings';
+import './editor.scss';
+
+const Edit = ( {
+	attributes,
+	setAttributes,
+}: BlockEditProps< Attributes > ) => {
+	const { className } = attributes;
+	const blockProps = useBlockProps( {
+		className: classNames( 'wc-block-editor-customer-account', className ),
+	} );
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<InspectorControls>
+					<BlockSettings
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+					/>
+				</InspectorControls>
+				<Disabled>
+					<Block attributes={ attributes } />
+				</Disabled>
+			</div>
+		</>
+	);
+};
+
+export default Edit;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/editor.scss

@@ -0,0 +1,27 @@
+@import "./style";
+
+.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.alignright {
+	@include flex-justify-content(flex-end);
+}
+
+.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.alignleft {
+	@include flex-justify-content(flex-start);
+}
+
+.editor-styles-wrapper .is-layout-constrained > .wc-block-editor-customer-account.aligncenter {
+	@include flex-justify-content(center);
+}
+
+.wc-block-editor-customer-account {
+	display: flex;
+	padding: em($gap-smaller);
+}
+
+.wc-block-editor-customer-account__icon-style-toggle {
+	width: 100%;
+}
+
+/* In sidebar without tabs (WP <=6.1) */
+.block-editor-block-card + div > .wc-block-editor-customer-account__link {
+	padding: 0 $gap $gap 52px;
+}

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/index.tsx

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType, registerBlockVariation } from '@wordpress/blocks';
+import { Icon } from '@wordpress/icons';
+import { customerAccount } from '@woocommerce/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customerAccount }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	edit,
+	save() {
+		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',
+	},
+} );

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/sidebar-settings.tsx

@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { Icon } from '@wordpress/icons';
+import {
+	customerAccountStyle,
+	customerAccountStyleAlt,
+} from '@woocommerce/icons';
+import { InspectorControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import type { BlockAttributes } from '@wordpress/blocks';
+import { getSetting } from '@woocommerce/settings';
+import { createInterpolateElement } from '@wordpress/element';
+import {
+	PanelBody,
+	SelectControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	ExternalLink,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { DisplayStyle, IconStyle } from './types';
+
+interface BlockSettingsProps {
+	attributes: BlockAttributes;
+	setAttributes: ( attrs: BlockAttributes ) => void;
+}
+
+const AccountSettingsLink = () => {
+	const accountSettingsUrl = `${ getSetting(
+		'adminUrl'
+	) }admin.php?page=wc-settings&tab=account`;
+
+	const linkText = createInterpolateElement(
+		`<a>${ __(
+			'Manage account settings',
+			'woo-gutenberg-products-block'
+		) }</a>`,
+		{
+			a: <ExternalLink href={ accountSettingsUrl } />,
+		}
+	);
+
+	return (
+		<div className="wc-block-editor-customer-account__link">
+			{ linkText }
+		</div>
+	);
+};
+
+export const BlockSettings = ( {
+	attributes,
+	setAttributes,
+}: BlockSettingsProps ) => {
+	const { displayStyle, iconStyle } = attributes;
+	const displayIconStyleSelector = [
+		DisplayStyle.ICON_ONLY,
+		DisplayStyle.ICON_AND_TEXT,
+	].includes( displayStyle );
+
+	return (
+		<InspectorControls key="inspector">
+			<PanelBody>
+				<AccountSettingsLink />
+			</PanelBody>
+			<PanelBody
+				title={ __(
+					'Display settings',
+					'woo-gutenberg-products-block'
+				) }
+			>
+				<SelectControl
+					className="customer-account-display-style"
+					label={ __(
+						'Icon options',
+						'woo-gutenberg-products-block'
+					) }
+					value={ displayStyle }
+					onChange={ ( value: DisplayStyle ) => {
+						setAttributes( { displayStyle: value } );
+					} }
+					help={ __(
+						'Choose if you want to include an icon with the customer account link.',
+						'woo-gutenberg-products-block'
+					) }
+					options={ [
+						{
+							value: DisplayStyle.ICON_AND_TEXT,
+							label: __(
+								'Icon and text',
+								'woo-gutenberg-products-block'
+							),
+						},
+						{
+							value: DisplayStyle.TEXT_ONLY,
+							label: __(
+								'Text-only',
+								'woo-gutenberg-products-block'
+							),
+						},
+						{
+							value: DisplayStyle.ICON_ONLY,
+							label: __(
+								'Icon-only',
+								'woo-gutenberg-products-block'
+							),
+						},
+					] }
+				/>
+				{ displayIconStyleSelector ? (
+					<ToggleGroupControl
+						label={ __(
+							'Display Style',
+							'woo-gutenberg-products-block'
+						) }
+						value={ iconStyle }
+						onChange={ ( value: IconStyle ) =>
+							setAttributes( {
+								iconStyle: value,
+							} )
+						}
+						className="wc-block-editor-customer-account__icon-style-toggle"
+					>
+						<ToggleGroupControlOption
+							value={ IconStyle.DEFAULT }
+							label={
+								<Icon
+									icon={ customerAccountStyle }
+									size={ 16 }
+									className={ classNames(
+										'wc-block-editor-customer-account__icon-option',
+										{
+											active:
+												iconStyle === IconStyle.DEFAULT,
+										}
+									) }
+								/>
+							}
+						/>
+						<ToggleGroupControlOption
+							value={ IconStyle.ALT }
+							label={
+								<Icon
+									icon={ customerAccountStyleAlt }
+									size={ 20 }
+									className={ classNames(
+										'wc-block-editor-customer-account__icon-option',
+										{
+											active: iconStyle === IconStyle.ALT,
+										}
+									) }
+								/>
+							}
+						/>
+					</ToggleGroupControl>
+				) : null }
+			</PanelBody>
+		</InspectorControls>
+	);
+};

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/style.scss

@@ -0,0 +1,44 @@
+@mixin flex-justify-content($justification) {
+	float: none;
+	justify-content: $justification;
+}
+
+.is-layout-constrained > .wp-block-woocommerce-customer-account.alignright {
+	@include flex-justify-content(flex-end);
+}
+
+.is-layout-constrained > .wp-block-woocommerce-customer-account.alignleft {
+	@include flex-justify-content(flex-start);
+}
+
+.is-layout-constrained > .wp-block-woocommerce-customer-account.aligncenter {
+	@include flex-justify-content(center);
+}
+
+.wp-block-woocommerce-customer-account {
+	display: flex;
+	padding: em($gap-smaller);
+
+	a {
+		text-decoration: none !important;
+		align-items: center;
+		display: flex;
+		color: currentColor !important;
+
+		&:hover {
+			text-decoration: underline !important;
+		}
+
+		.icon {
+			height: em(16px);
+			width: em(16px);
+		}
+
+		.wc-block-customer-account__account-icon {
+			box-sizing: content-box !important;
+			height: em(23px);
+			width: em(23px);
+			padding: em($gap-smaller);
+		}
+	}
+}

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/blocks/customer-account/types.ts

@@ -0,0 +1,17 @@
+export interface Attributes {
+	className?: string;
+	displayStyle: DisplayStyle;
+	iconStyle: IconStyle;
+	iconClass: string;
+}
+
+export enum DisplayStyle {
+	ICON_AND_TEXT = 'icon_and_text',
+	TEXT_ONLY = 'text_only',
+	ICON_ONLY = 'icon_only',
+}
+
+export enum IconStyle {
+	DEFAULT = 'default',
+	ALT = 'alt',
+}