From 9a9455272f6bc0d57003d13b8f94a356dde99d0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Thu, 1 Jun 2023 14:54:22 -0300 Subject: [PATCH 01/11] Theme SSR: Add a loading trigger to guarantee the same initial state for components --- client/my-sites/theme/main.jsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx index b34a8e3553d79..d226c82b9c525 100644 --- a/client/my-sites/theme/main.jsx +++ b/client/my-sites/theme/main.jsx @@ -152,7 +152,13 @@ class ThemeSheet extends Component { section: '', }; + /** + * ssrLoadingTrigger is a flag to guarantee the isLoading method always starts with true + * It allows the initial state to always be the same to make SSR work properly + * It starts with true but is right way updated to false on componentDidMount + */ state = { + ssrLoadingTrigger: true, showUnlockStyleUpgradeModal: false, }; @@ -167,6 +173,10 @@ class ThemeSheet extends Component { if ( syncActiveTheme ) { themeStartActivationSync( siteId, themeId ); } + + // Actual value for the trigger, to not interfere with the loading check + // eslint-disable-next-line react/no-did-mount-set-state + this.setState( { ssrLoadingTrigger: false } ); } componentDidUpdate( prevProps ) { @@ -188,8 +198,12 @@ class ThemeSheet extends Component { isLoading = () => { const { isLoading, isThemeActivationSyncStarted } = this.props; - const { isAtomicTransferCompleted } = this.state; - return isLoading || ( isThemeActivationSyncStarted && ! isAtomicTransferCompleted ); + const { isAtomicTransferCompleted, ssrLoadingTrigger } = this.state; + return ( + isLoading || + ( isThemeActivationSyncStarted && ! isAtomicTransferCompleted ) || + ssrLoadingTrigger + ); }; // If a theme has been removed by a theme shop, then the theme will still exist and a8c will take over any support responsibilities. From 4003926564c1f23458c04278dd25a23234f50707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Fri, 9 Jun 2023 11:45:43 -0300 Subject: [PATCH 02/11] Revert "Theme SSR: Add a loading trigger to guarantee the same initial state for components" This reverts commit 9a9455272f6bc0d57003d13b8f94a356dde99d0e. --- client/my-sites/theme/main.jsx | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx index d226c82b9c525..b34a8e3553d79 100644 --- a/client/my-sites/theme/main.jsx +++ b/client/my-sites/theme/main.jsx @@ -152,13 +152,7 @@ class ThemeSheet extends Component { section: '', }; - /** - * ssrLoadingTrigger is a flag to guarantee the isLoading method always starts with true - * It allows the initial state to always be the same to make SSR work properly - * It starts with true but is right way updated to false on componentDidMount - */ state = { - ssrLoadingTrigger: true, showUnlockStyleUpgradeModal: false, }; @@ -173,10 +167,6 @@ class ThemeSheet extends Component { if ( syncActiveTheme ) { themeStartActivationSync( siteId, themeId ); } - - // Actual value for the trigger, to not interfere with the loading check - // eslint-disable-next-line react/no-did-mount-set-state - this.setState( { ssrLoadingTrigger: false } ); } componentDidUpdate( prevProps ) { @@ -198,12 +188,8 @@ class ThemeSheet extends Component { isLoading = () => { const { isLoading, isThemeActivationSyncStarted } = this.props; - const { isAtomicTransferCompleted, ssrLoadingTrigger } = this.state; - return ( - isLoading || - ( isThemeActivationSyncStarted && ! isAtomicTransferCompleted ) || - ssrLoadingTrigger - ); + const { isAtomicTransferCompleted } = this.state; + return isLoading || ( isThemeActivationSyncStarted && ! isAtomicTransferCompleted ); }; // If a theme has been removed by a theme shop, then the theme will still exist and a8c will take over any support responsibilities. From d5079f5093e7c2be1b2829169769493f82ecc6e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Fri, 9 Jun 2023 11:49:03 -0300 Subject: [PATCH 03/11] Check the if the button should be disabled with a state variable --- client/my-sites/theme/main.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx index b34a8e3553d79..6f5e6d5bdc8b3 100644 --- a/client/my-sites/theme/main.jsx +++ b/client/my-sites/theme/main.jsx @@ -152,7 +152,12 @@ class ThemeSheet extends Component { section: '', }; + /** + * Disabled button checks `isLoading` to determine if a the buttons should be disabled + * Its assigned to state to guarantee the initial state will be the same for SSR + */ state = { + disabledButton: true, showUnlockStyleUpgradeModal: false, }; @@ -173,6 +178,11 @@ class ThemeSheet extends Component { if ( this.props.themeId !== prevProps.themeId ) { this.scrollToTop(); } + + if ( this.state.disabledButton !== this.isLoading() ) { + // eslint-disable-next-line react/no-did-update-set-state + this.setState( { disabledButton: this.isLoading() } ); + } } isLoaded = () => { @@ -945,7 +955,7 @@ class ThemeSheet extends Component { this.onButtonClick(); } } primary - disabled={ this.isLoading() } + disabled={ this.state.disabledButton } target={ isActive ? '_blank' : null } > { this.isLoaded() ? label : placeholder } @@ -1218,7 +1228,7 @@ class ThemeSheet extends Component { } const upsellNudgeClasses = classNames( 'theme__page-upsell-banner', { - 'theme__page-upsell-disabled': this.isLoading(), + 'theme__page-upsell-disabled': this.state.disabledButton, } ); if ( hasWpComThemeUpsellBanner ) { From fbc8b591ecf3cbd16bacb82e9c21232608ea640c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Wed, 7 Jun 2023 15:50:03 -0300 Subject: [PATCH 04/11] Use an empty state for Automattic branding before set the fianl value --- .../src/universal-footer-navigation/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 60d058410c03a..8d3cabee4ed45 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -7,6 +7,7 @@ import { useLocalizeUrl, } from '@automattic/i18n-utils'; import { __ } from '@wordpress/i18n'; +import { useLayoutEffect, useState } from 'react'; import SocialLogo from 'social-logos'; import useAutomatticBrandingNoun from '../hooks/use-automattic-branding-noun'; import type { FooterProps, PureFooterProps, LanguageOptions } from '../types'; @@ -474,7 +475,14 @@ const UniversalNavbarFooter = ( { const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); - const automatticBranding = useAutomatticBrandingNoun(); + const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } ); + const currentAutomatticBranding = useAutomatticBrandingNoun(); + + useLayoutEffect( () => { + setAutomatticBranding( currentAutomatticBranding ); + // Automattic Branding should be set only once after the page load + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); return ( Date: Fri, 9 Jun 2023 14:55:06 -0300 Subject: [PATCH 05/11] Update the XautomatticBrandingNoun from a hook to a normal method --- packages/wpcom-template-parts/src/types.ts | 4 ++-- .../src/universal-footer-navigation/index.tsx | 11 +++++------ .../use-automattic-branding-noun.ts => utils.ts} | 7 ++----- 3 files changed, 9 insertions(+), 13 deletions(-) rename packages/wpcom-template-parts/src/{hooks/use-automattic-branding-noun.ts => utils.ts} (80%) diff --git a/packages/wpcom-template-parts/src/types.ts b/packages/wpcom-template-parts/src/types.ts index dd1e0bc72251e..193ba0777e161 100644 --- a/packages/wpcom-template-parts/src/types.ts +++ b/packages/wpcom-template-parts/src/types.ts @@ -1,4 +1,4 @@ -import type useAutomatticBrandingNoun from './hooks/use-automattic-branding-noun'; +import type { getAutomatticBrandingNoun } from './utils'; import type { useLocalizeUrl } from '@automattic/i18n-utils'; export interface HeaderProps { @@ -19,7 +19,7 @@ export interface PureFooterProps extends FooterProps { localizeUrl?: ReturnType< typeof useLocalizeUrl >; locale?: string; isEnglishLocale?: boolean; - automatticBranding?: ReturnType< typeof useAutomatticBrandingNoun >; + automatticBranding?: ReturnType< typeof getAutomatticBrandingNoun >; languageOptions?: LanguageOptions; } diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 8d3cabee4ed45..9e8cbc44cc8d8 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -7,9 +7,10 @@ import { useLocalizeUrl, } from '@automattic/i18n-utils'; import { __ } from '@wordpress/i18n'; +import { useTranslate } from 'i18n-calypso'; import { useLayoutEffect, useState } from 'react'; import SocialLogo from 'social-logos'; -import useAutomatticBrandingNoun from '../hooks/use-automattic-branding-noun'; +import { getAutomatticBrandingNoun } from '../utils'; import type { FooterProps, PureFooterProps, LanguageOptions } from '../types'; import './style.scss'; @@ -472,17 +473,15 @@ const UniversalNavbarFooter = ( { }: FooterProps ) => { const localizeUrl = useLocalizeUrl(); const locale = useLocale(); + const translate = useTranslate(); const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } ); - const currentAutomatticBranding = useAutomatticBrandingNoun(); useLayoutEffect( () => { - setAutomatticBranding( currentAutomatticBranding ); - // Automattic Branding should be set only once after the page load - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); + setAutomatticBranding( getAutomatticBrandingNoun( translate ) ); + }, [ translate ] ); return ( { - const translate = useTranslate(); +export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { const automatticRoger = [ translate( 'An Automattic brainchild' ), translate( 'An Automattic contraption' ), @@ -23,5 +22,3 @@ const useAutomatticBrandingNoun = () => { noun: branding.split( 'Automattic' )[ 1 ], }; }; - -export default useAutomatticBrandingNoun; From b58f085cc9b050d89da21a4a59a92194e6baff0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Fri, 9 Jun 2023 15:08:59 -0300 Subject: [PATCH 06/11] Use preffix and suffix instead of article and noun --- .../src/universal-footer-navigation/index.tsx | 10 +++++----- packages/wpcom-template-parts/src/utils.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 9e8cbc44cc8d8..02297473c340a 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -60,8 +60,8 @@ export const PureUniversalNavbarFooter = ( { onLanguageChange = defaultOnLanguageChange, localizeUrl = pureLocalizeUrl, automatticBranding = { - article: __( 'An', __i18n_text_domain__ ), - noun: __( 'thingamajig', __i18n_text_domain__ ), + prefix: __( 'An', __i18n_text_domain__ ), + suffix: __( 'thingamajig', __i18n_text_domain__ ), }, locale, languageOptions = allLanguageOptions, @@ -436,7 +436,7 @@ export const PureUniversalNavbarFooter = ( {
- { automatticBranding.article } + { automatticBranding.prefix } Automattic - { automatticBranding.noun } + { automatticBranding.suffix }
@@ -477,7 +477,7 @@ const UniversalNavbarFooter = ( { const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); - const [ automatticBranding, setAutomatticBranding ] = useState( { article: '', noun: '' } ); + const [ automatticBranding, setAutomatticBranding ] = useState( { prefix: '', suffix: '' } ); useLayoutEffect( () => { setAutomatticBranding( getAutomatticBrandingNoun( translate ) ); diff --git a/packages/wpcom-template-parts/src/utils.ts b/packages/wpcom-template-parts/src/utils.ts index d893e4bae91c3..2d6bea750471d 100644 --- a/packages/wpcom-template-parts/src/utils.ts +++ b/packages/wpcom-template-parts/src/utils.ts @@ -18,7 +18,7 @@ export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) = const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; return { - article: branding.split( 'Automattic' )[ 0 ], - noun: branding.split( 'Automattic' )[ 1 ], + prefix: branding.split( 'Automattic' )[ 0 ], + suffix: branding.split( 'Automattic' )[ 1 ], }; }; From 3968c133b3d8611f4e82451dec20e08f1106378c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Fri, 9 Jun 2023 15:41:16 -0300 Subject: [PATCH 07/11] Replace Automattic's name from the translate string to a variable containing Automattic --- packages/wpcom-template-parts/src/utils.ts | 30 +++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/wpcom-template-parts/src/utils.ts b/packages/wpcom-template-parts/src/utils.ts index 2d6bea750471d..af505737ef95b 100644 --- a/packages/wpcom-template-parts/src/utils.ts +++ b/packages/wpcom-template-parts/src/utils.ts @@ -1,21 +1,27 @@ import { translate as translateMethod } from 'i18n-calypso'; export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { + const AutomatticBrand = 'Automattic'; + const options = { + description: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + args: { Automattic: AutomatticBrand }, + }; const automatticRoger = [ - translate( 'An Automattic brainchild' ), - translate( 'An Automattic contraption' ), - translate( 'An Automattic creation' ), - translate( 'An Automattic experiment' ), - translate( 'An Automattic invention' ), - translate( 'An Automattic joint' ), - translate( 'An Automattic medley' ), - translate( 'An Automattic opus' ), - translate( 'An Automattic production' ), - translate( 'An Automattic ruckus' ), - translate( 'An Automattic thingamajig' ), + translate( 'An %(Automattic)s brainchild', options ), + translate( 'An %(Automattic)s contraption', options ), + translate( 'An %(Automattic)s creation', options ), + translate( 'An %(Automattic)s experiment', options ), + translate( 'An %(Automattic)s invention', options ), + translate( 'An %(Automattic)s joint', options ), + translate( 'An %(Automattic)s medley', options ), + translate( 'An %(Automattic)s opus', options ), + translate( 'An %(Automattic)s production', options ), + translate( 'An %(Automattic)s ruckus', options ), + translate( 'An %(Automattic)s thingamajig', options ), ]; - const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; + const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]?.toString(); return { prefix: branding.split( 'Automattic' )[ 0 ], From c9c94345dac6275b4d39bf5f1991fe01018c6a41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Mon, 12 Jun 2023 13:39:31 -0300 Subject: [PATCH 08/11] Add Automattic Brand during the translation retrival step --- .../src/universal-footer-navigation/index.tsx | 23 +++------- packages/wpcom-template-parts/src/utils.ts | 30 ------------- packages/wpcom-template-parts/src/utils.tsx | 42 +++++++++++++++++++ 3 files changed, 48 insertions(+), 47 deletions(-) delete mode 100644 packages/wpcom-template-parts/src/utils.ts create mode 100644 packages/wpcom-template-parts/src/utils.tsx diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 02297473c340a..d966cf938194a 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { useTranslate } from 'i18n-calypso'; import { useLayoutEffect, useState } from 'react'; import SocialLogo from 'social-logos'; -import { getAutomatticBrandingNoun } from '../utils'; +import { AutomatticBrand, getAutomatticBrandingNoun } from '../utils'; import type { FooterProps, PureFooterProps, LanguageOptions } from '../types'; import './style.scss'; @@ -59,10 +59,7 @@ export const PureUniversalNavbarFooter = ( { additionalCompanyLinks = null, onLanguageChange = defaultOnLanguageChange, localizeUrl = pureLocalizeUrl, - automatticBranding = { - prefix: __( 'An', __i18n_text_domain__ ), - suffix: __( 'thingamajig', __i18n_text_domain__ ), - }, + automatticBranding, locale, languageOptions = allLanguageOptions, }: PureFooterProps ) => { @@ -436,17 +433,7 @@ export const PureUniversalNavbarFooter = ( {
- { automatticBranding.prefix } - Automattic - - { automatticBranding.suffix } + { automatticBranding }
@@ -477,7 +464,9 @@ const UniversalNavbarFooter = ( { const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); - const [ automatticBranding, setAutomatticBranding ] = useState( { prefix: '', suffix: '' } ); + const [ automatticBranding, setAutomatticBranding ] = useState< React.ReactChild >( + + ); useLayoutEffect( () => { setAutomatticBranding( getAutomatticBrandingNoun( translate ) ); diff --git a/packages/wpcom-template-parts/src/utils.ts b/packages/wpcom-template-parts/src/utils.ts deleted file mode 100644 index af505737ef95b..0000000000000 --- a/packages/wpcom-template-parts/src/utils.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { translate as translateMethod } from 'i18n-calypso'; - -export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { - const AutomatticBrand = 'Automattic'; - const options = { - description: - 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', - args: { Automattic: AutomatticBrand }, - }; - const automatticRoger = [ - translate( 'An %(Automattic)s brainchild', options ), - translate( 'An %(Automattic)s contraption', options ), - translate( 'An %(Automattic)s creation', options ), - translate( 'An %(Automattic)s experiment', options ), - translate( 'An %(Automattic)s invention', options ), - translate( 'An %(Automattic)s joint', options ), - translate( 'An %(Automattic)s medley', options ), - translate( 'An %(Automattic)s opus', options ), - translate( 'An %(Automattic)s production', options ), - translate( 'An %(Automattic)s ruckus', options ), - translate( 'An %(Automattic)s thingamajig', options ), - ]; - - const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]?.toString(); - - return { - prefix: branding.split( 'Automattic' )[ 0 ], - suffix: branding.split( 'Automattic' )[ 1 ], - }; -}; diff --git a/packages/wpcom-template-parts/src/utils.tsx b/packages/wpcom-template-parts/src/utils.tsx new file mode 100644 index 0000000000000..8becc5fb549fd --- /dev/null +++ b/packages/wpcom-template-parts/src/utils.tsx @@ -0,0 +1,42 @@ +import { translate as translateMethod } from 'i18n-calypso'; + +export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { + const options = { + description: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + components: { Automattic: }, + }; + const automatticRoger = [ + translate( 'An {{Automattic/}} brainchild', options ), + translate( 'An {{Automattic/}} contraption', options ), + translate( 'An {{Automattic/}} creation', options ), + translate( 'An {{Automattic/}} experiment', options ), + translate( 'An {{Automattic/}} invention', options ), + translate( 'An {{Automattic/}} joint', options ), + translate( 'An {{Automattic/}} medley', options ), + translate( 'An {{Automattic/}} opus', options ), + translate( 'An {{Automattic/}} production', options ), + translate( 'An {{Automattic/}} ruckus', options ), + translate( 'An {{Automattic/}} thingamajig', options ), + ]; + + const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; + + return branding; +}; + +export function AutomatticBrand() { + return ( + <> + Automattic + + + ); +} From 5599cc736a7e53fa14f3b067405dfbf77554fcbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Mon, 12 Jun 2023 17:32:45 -0300 Subject: [PATCH 09/11] Fix property name to comment --- packages/wpcom-template-parts/src/utils.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/wpcom-template-parts/src/utils.tsx b/packages/wpcom-template-parts/src/utils.tsx index 8becc5fb549fd..1d294cbad813a 100644 --- a/packages/wpcom-template-parts/src/utils.tsx +++ b/packages/wpcom-template-parts/src/utils.tsx @@ -2,9 +2,9 @@ import { translate as translateMethod } from 'i18n-calypso'; export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { const options = { - description: + comment: 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', - components: { Automattic: }, + args: { Automattic: }, }; const automatticRoger = [ translate( 'An {{Automattic/}} brainchild', options ), From a811943e1bc6967d9a5309c413b4ef4d70cc78fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Mon, 12 Jun 2023 17:54:40 -0300 Subject: [PATCH 10/11] Add the options in each translate --- packages/wpcom-template-parts/src/utils.tsx | 71 ++++++++++++++++----- 1 file changed, 55 insertions(+), 16 deletions(-) diff --git a/packages/wpcom-template-parts/src/utils.tsx b/packages/wpcom-template-parts/src/utils.tsx index 1d294cbad813a..6c8993305b993 100644 --- a/packages/wpcom-template-parts/src/utils.tsx +++ b/packages/wpcom-template-parts/src/utils.tsx @@ -1,23 +1,62 @@ import { translate as translateMethod } from 'i18n-calypso'; export const getAutomatticBrandingNoun = ( translate: typeof translateMethod ) => { - const options = { - comment: - 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', - args: { Automattic: }, - }; const automatticRoger = [ - translate( 'An {{Automattic/}} brainchild', options ), - translate( 'An {{Automattic/}} contraption', options ), - translate( 'An {{Automattic/}} creation', options ), - translate( 'An {{Automattic/}} experiment', options ), - translate( 'An {{Automattic/}} invention', options ), - translate( 'An {{Automattic/}} joint', options ), - translate( 'An {{Automattic/}} medley', options ), - translate( 'An {{Automattic/}} opus', options ), - translate( 'An {{Automattic/}} production', options ), - translate( 'An {{Automattic/}} ruckus', options ), - translate( 'An {{Automattic/}} thingamajig', options ), + translate( 'An {{Automattic/}} brainchild', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} contraption', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} creation', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} experiment', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} invention', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} joint', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} medley', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} opus', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} production', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} ruckus', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), + translate( 'An {{Automattic/}} thingamajig', { + args: { Automattic: }, + comment: + 'Branding to be shown on the Footer of the page, Automattic\'s variable will always contains the word "Automattic"', + } ), ]; const branding = automatticRoger[ Math.floor( Math.random() * ( 10 - 0 + 1 ) + 0 ) ]; From 4223643a24cde5aeb4a1d5af402733866888c174 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wesley=20Berr=C3=AAdo?= Date: Thu, 29 Jun 2023 13:46:26 -0300 Subject: [PATCH 11/11] Fix lint errors --- .../src/universal-footer-navigation/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx index 3671b8a71b4ce..80e2ee0409b2e 100644 --- a/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx +++ b/packages/wpcom-template-parts/src/universal-footer-navigation/index.tsx @@ -272,7 +272,7 @@ export const PureUniversalNavbarFooter = ( {
  • - + { __( 'Privacy', __i18n_text_domain__ ) }{ ' ' } { __( 'Policy', __i18n_text_domain__ ) } @@ -466,9 +466,9 @@ const UniversalNavbarFooter = ( { const isEnglishLocale = useIsEnglishLocale(); const pathNameWithoutLocale = currentRoute && removeLocaleFromPathLocaleInFront( currentRoute ).slice( 1 ); - const [ automatticBranding, setAutomatticBranding ] = useState< React.ReactChild >( - - ); + const [ automatticBranding, setAutomatticBranding ] = useState< + React.ReactElement | string | number + >( ); // Since this component renders in SSR, effects don't run there. As a result, // the markup needs to look ok _before_ any effects run. Using the isomorphic