JS lint

bin/fonts/get-google-fonts.js

@@ -1,17 +1,21 @@
+/**
+ * External dependencies
+ */
 const fs = require( 'fs' );
 const crypto = require( 'crypto' );
 
 const API_URL = 'https://www.googleapis.com/webfonts/v1/webfonts?key=';
 const API_KEY = process.env.GOOGLE_FONTS_API_KEY;
-const GOOGLE_FONTS_FILE_PATH = '../../lib/experimental/fonts-api/google-fonts.json';
+const GOOGLE_FONTS_FILE_PATH =
+	'../../lib/experimental/fonts-api/google-fonts.json';
 
-function getCategories ( fonts ) {
-    const categories = new Set();
-    fonts.forEach( ( font ) => {
-        categories.add( font.category );
-    } );
-    // Returs an array of categories
-    return [ ...categories ];
+function getCategories( fonts ) {
+	const categories = new Set();
+	fonts.forEach( ( font ) => {
+		categories.add( font.category );
+	} );
+	// Returs an array of categories
+	return [ ...categories ];
 }
 
 function calculateHash( somestring ) {
@@ -24,11 +28,11 @@ function calculateHash( somestring ) {
 
 // Google Fonts API categories mappping to fallback system fonts
 const GOOGLE_FONT_FALLBACKS = {
-    'display': 'system-ui',
-    'sans-serif': 'sans-serif',
-    'serif': 'serif',
-    'handwriting': 'cursive',
-    'monospace': 'monospace',
+	display: 'system-ui',
+	'sans-serif': 'sans-serif',
+	serif: 'serif',
+	handwriting: 'cursive',
+	monospace: 'monospace',
 };
 
 function getStyleFromGoogleVariant( variant ) {
@@ -41,39 +45,38 @@ function getWeightFromGoogleVariant( variant ) {
 		: variant.replace( 'italic', '' );
 }
 
-function getFallbackForGoogleFont ( googleFontCategory ) {
-    return GOOGLE_FONT_FALLBACKS[ googleFontCategory ] || "system-ui";
+function getFallbackForGoogleFont( googleFontCategory ) {
+	return GOOGLE_FONT_FALLBACKS[ googleFontCategory ] || 'system-ui';
 }
 
-function getFontFamilyFromGoogleFont ( font ) {
-    return {
-        name: font.family,
-        fontFamily: `${font.family}, ${ getFallbackForGoogleFont( font.category ) }`,
-        slug: font.family.replace( /\s+/g, '-' ).toLowerCase(),
+function getFontFamilyFromGoogleFont( font ) {
+	return {
+		name: font.family,
+		fontFamily: `${ font.family }, ${ getFallbackForGoogleFont(
+			font.category
+		) }`,
+		slug: font.family.replace( /\s+/g, '-' ).toLowerCase(),
 		category: font.category,
-        fontFace: font.variants.map( variant => (
-            {
-                src: font.files?.[ variant ],
-                fontWeight: getWeightFromGoogleVariant( variant ),
-                fontStyle: getStyleFromGoogleVariant( variant ),
-				fontFamily: font.family,
-            }
-        ) ),
-    };
+		fontFace: font.variants.map( ( variant ) => ( {
+			src: font.files?.[ variant ],
+			fontWeight: getWeightFromGoogleVariant( variant ),
+			fontStyle: getStyleFromGoogleVariant( variant ),
+			fontFamily: font.family,
+		} ) ),
+	};
 }
 
 async function updateFiles() {
 	let newApiData;
 	let newData;
-    let response;
+	let response;
 
 	try {
 		newApiData = await fetch( `${ API_URL }${ API_KEY }` );
 		response = await newApiData.json();
-        const fontFamilies = response.items.map( getFontFamilyFromGoogleFont );
-        const categories = getCategories( response.items );
-        newData = { fontFamilies, categories };
-
+		const fontFamilies = response.items.map( getFontFamilyFromGoogleFont );
+		const categories = getCategories( response.items );
+		newData = { fontFamilies, categories };
 	} catch ( error ) {
 		// TODO: show in UI and remove console statement
 		// eslint-disable-next-line
@@ -84,20 +87,14 @@ async function updateFiles() {
 	if ( response.items ) {
 		const newDataString = JSON.stringify( newData, null, 2 );
 
-		const oldFileData = fs.readFileSync(
-			GOOGLE_FONTS_FILE_PATH,
-			'utf8'
-		);
+		const oldFileData = fs.readFileSync( GOOGLE_FONTS_FILE_PATH, 'utf8' );
 		const oldData = JSON.parse( oldFileData );
 		const oldDataString = JSON.stringify( oldData, null, 2 );
 
 		if (
 			calculateHash( newDataString ) !== calculateHash( oldDataString )
 		) {
-			fs.writeFileSync(
-				GOOGLE_FONTS_FILE_PATH,
-				newDataString
-			);
+			fs.writeFileSync( GOOGLE_FONTS_FILE_PATH, newDataString );
 			// TODO: show in UI and remove console statement
 			// eslint-disable-next-line
 			console.info( '✅  Google Fonts JSON file updated' );

packages/edit-site/src/components/global-styles/font-families.js

@@ -26,71 +26,84 @@ import Subtitle from './subtitle';
 import { unlock } from '../../private-apis';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
-function FontFamiliesMenu ({ onToggle, toggleFontLibrary }) {
-
-    const displayFontLibrary = ( tabName ) => {
-        onToggle(); // Close the dropdown
-        toggleFontLibrary( tabName ); // Open the modal
-    };
+function FontFamiliesMenu( { onToggle, toggleFontLibrary } ) {
+	const displayFontLibrary = ( tabName ) => {
+		onToggle(); // Close the dropdown
+		toggleFontLibrary( tabName ); // Open the modal
+	};
 
 	return (
 		<MenuGroup>
-			<MenuItem onClick={ () => displayFontLibrary( 'installed-fonts' ) }>{ __( 'Manage Font Library' ) }</MenuItem>
-			<MenuItem onClick={ () => displayFontLibrary( 'google-fonts' ) }>{ __( 'Install Google Fonts' ) }</MenuItem>
-            <MenuItem onClick={ () => displayFontLibrary( 'local-fonts' ) }>{ __( 'Install Local Fonts' ) }</MenuItem>
+			<MenuItem onClick={ () => displayFontLibrary( 'installed-fonts' ) }>
+				{ __( 'Manage Font Library' ) }
+			</MenuItem>
+			<MenuItem onClick={ () => displayFontLibrary( 'google-fonts' ) }>
+				{ __( 'Install Google Fonts' ) }
+			</MenuItem>
+			<MenuItem onClick={ () => displayFontLibrary( 'local-fonts' ) }>
+				{ __( 'Install Local Fonts' ) }
+			</MenuItem>
 		</MenuGroup>
-	)	
+	);
 }
 
 function FontFamilies() {
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
 
-    const fonts  = Array.isArray( fontFamilies?.custom )
-        ? fontFamilies?.custom
-        : fontFamilies?.theme || [];
+	const fonts = Array.isArray( fontFamilies?.custom )
+		? fontFamilies?.custom
+		: fontFamilies?.theme || [];
 
-    const [ tabOpen, setTabOpen ] = useState( null );
+	const [ tabOpen, setTabOpen ] = useState( null );
 
-    const toggleFontLibrary = ( tabName ) => {
-        setTabOpen( !!tabOpen ? null : tabName );
-    };
+	const toggleFontLibrary = ( tabName ) => {
+		setTabOpen( !! tabOpen ? null : tabName );
+	};
 
 	return (
-        <>
-            { !!tabOpen && (
-                <FontLibraryModal
-                    onRequestClose={ toggleFontLibrary }
-                    initialTabName={ tabOpen }
-                />
-            )}
-
+		<>
+			{ !! tabOpen && (
+				<FontLibraryModal
+					onRequestClose={ toggleFontLibrary }
+					initialTabName={ tabOpen }
+				/>
+			) }
 
-            <VStack spacing={ 3 }>
-                <HStack justify='space-between' >
-                    <Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-                    <Dropdown
-                        renderContent={ ({ onToggle }) => (
-                            <FontFamiliesMenu
-                                onToggle={ onToggle }
-                                toggleFontLibrary={ toggleFontLibrary }
-                            />
-                        )}
-                        renderToggle={ ( { isOpen, onToggle } ) => (
-                            <Button onClick={ onToggle } aria-expanded={ isOpen } icon={ moreVertical } isSmall />
-                        ) }
-                    />
-                </HStack>
-                <ItemGroup isBordered isSeparated>
-                    {fonts.map( family => (
-                        <Item key={family.slug}>
-                            <HStack justify="flex-start">
-                                <FlexItem style={{ fontFamily: family.fontFamily }}>{ family.name || family.fontFamily }</FlexItem>
-                            </HStack>
-                        </Item>
-                    ))}
-                </ItemGroup>
-            </VStack>
-        </>
+			<VStack spacing={ 3 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Dropdown
+						renderContent={ ( { onToggle } ) => (
+							<FontFamiliesMenu
+								onToggle={ onToggle }
+								toggleFontLibrary={ toggleFontLibrary }
+							/>
+						) }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<Button
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+								icon={ moreVertical }
+								isSmall
+							/>
+						) }
+					/>
+				</HStack>
+				<ItemGroup isBordered isSeparated>
+					{ fonts.map( ( family ) => (
+						<Item key={ family.slug }>
+							<HStack justify="flex-start">
+								<FlexItem
+									style={ { fontFamily: family.fontFamily } }
+								>
+									{ family.name || family.fontFamily }
+								</FlexItem>
+							</HStack>
+						</Item>
+					) ) }
+				</ItemGroup>
+			</VStack>
+		</>
 	);
 }
 

packages/edit-site/src/components/global-styles/font-library-modal/constants.js

@@ -1,39 +1,43 @@
 /**
  * WordPress dependencies
-*/
+ */
+/**
+ * WordPress dependencies
+ */
 import { __ } from '@wordpress/i18n';
 
-
 export const MODAL_TABS = [
-    {
-        name: 'installed-fonts',
-        title: __('Installed Fonts'),
-        className: 'installed-fonts',
-    },
-    {
-        name: 'google-fonts',
-        title: __('Google Fonts'),
-        className: 'google-fonts',
-    },
-    {
-        name: 'local-fonts',
-        title: __('Local Fonts'),
-        className: 'local-fonts',
-    },
+	{
+		name: 'installed-fonts',
+		title: __( 'Installed Fonts' ),
+		className: 'installed-fonts',
+	},
+	{
+		name: 'google-fonts',
+		title: __( 'Google Fonts' ),
+		className: 'google-fonts',
+	},
+	{
+		name: 'local-fonts',
+		title: __( 'Local Fonts' ),
+		className: 'local-fonts',
+	},
 ];
 
-export const DEMO_TEXT = __( "Incredible as it may seem, I believe that the Aleph of Garay Street was a false Aleph" );
+export const DEMO_TEXT = __(
+	'Incredible as it may seem, I believe that the Aleph of Garay Street was a false Aleph'
+);
 
 // Google Fonts API categories mappping to fallback system fonts
 export const GOOGLE_FONT_FALLBACKS = {
-    'display': 'system-ui',
-    'sans-serif': 'sans-serif',
-    'serif': 'serif',
-    'handwriting': 'cursive',
-    'monospace': 'monospace',
+	display: 'system-ui',
+	'sans-serif': 'sans-serif',
+	serif: 'serif',
+	handwriting: 'cursive',
+	monospace: 'monospace',
 };
 
 export const DEFAULT_DEMO_CONFIG = {
-    text: '',
-    fontSize: 24,
-};
+	text: '',
+	fontSize: 24,
+};