Components: FontSizePicker: Stop displaying font-size-picker when the…

…re are no fonts. (#13782)
WordPress · Feb 11, 2019 · 0c30ee3 · 0c30ee3
1 parent 285875a
commit 0c30ee3
Showing 1 changed file with 42 additions and 40 deletions.
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
@@ -41,47 +41,49 @@ function FontSizePicker( {
 	return (
 		<BaseControl label={ __( 'Font Size' ) }>
 			<div className="components-font-size-picker__buttons">
-				<Dropdown
-					className="components-font-size-picker__dropdown"
-					contentClassName="components-font-size-picker__dropdown-content"
-					position="bottom"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="components-font-size-picker__selector"
-							isLarge
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-							aria-label={ sprintf(
-								/* translators: %s: font size name */
-								__( 'Font size: %s' ), currentFontSizeName
-							) }
-						>
-							{ currentFontSizeName }
-						</Button>
-					) }
-					renderContent={ () => (
-						<NavigableMenu>
-							{ map( fontSizes, ( { name, size, slug } ) => {
-								const isSelected = ( value === size || ( ! value && slug === 'normal' ) );
+				{ ( fontSizes.length > 0 ) &&
+					<Dropdown
+						className="components-font-size-picker__dropdown"
+						contentClassName="components-font-size-picker__dropdown-content"
+						position="bottom"
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<Button
+								className="components-font-size-picker__selector"
+								isLarge
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+								aria-label={ sprintf(
+									/* translators: %s: font size name */
+									__( 'Font size: %s' ), currentFontSizeName
+								) }
+							>
+								{ currentFontSizeName }
+							</Button>
+						) }
+						renderContent={ () => (
+							<NavigableMenu>
+								{ map( fontSizes, ( { name, size, slug } ) => {
+									const isSelected = ( value === size || ( ! value && slug === 'normal' ) );
 
-								return (
-									<Button
-										key={ slug }
-										onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
-										className={ `is-font-${ slug }` }
-										role="menuitemradio"
-										aria-checked={ isSelected }
-									>
-										{ isSelected && <Dashicon icon="saved" /> }
-										<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
-											{ name }
-										</span>
-									</Button>
-								);
-							} ) }
-						</NavigableMenu>
-					) }
-				/>
+									return (
+										<Button
+											key={ slug }
+											onClick={ () => onChange( slug === 'normal' ? undefined : size ) }
+											className={ `is-font-${ slug }` }
+											role="menuitemradio"
+											aria-checked={ isSelected }
+										>
+											{ isSelected && <Dashicon icon="saved" /> }
+											<span className="components-font-size-picker__dropdown-text-size" style={ { fontSize: size } }>
+												{ name }
+											</span>
+										</Button>
+									);
+								} ) }
+							</NavigableMenu>
+						) }
+					/>
+				}
 				{ ( ! withSlider && ! disableCustomFontSizes ) &&
 					<input
 						className="components-range-control__number"