File block: Add typography block support

docs/reference-guides/core-blocks.md

@@ -272,7 +272,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/file
 -	**Category:** media
--	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity, spacing (margin, padding)
+-	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity, spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
 ## Footnotes

packages/block-editor/src/hooks/index.native.js

@@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
+export { getTypographyClassesAndStyles } from './use-typography-props';

packages/block-library/src/file/block.json

@@ -70,7 +70,20 @@
 				"link": true
 			}
 		},
-		"interactivity": true
+		"interactivity": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"

packages/block-library/src/file/edit.js

@@ -22,6 +22,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
+	getTypographyClassesAndStyles as useTypographyProps,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -82,7 +83,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		} ),
 		[ id ]
 	);
-
+	const typographyProps = useTypographyProps( attributes );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
@@ -279,8 +280,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'
-									)
+									),
+									typographyProps.className
 								) }
+								style={ typographyProps.style }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }

packages/block-library/src/file/save.js

@@ -10,6 +10,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	getTypographyClassesAndStyles as getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -32,6 +33,7 @@ export default function save( { attributes } ) {
 		  fileName.toString();
 
 	const hasFilename = ! RichText.isEmpty( fileName );
+	const typographyProps = getTypographyClassesAndStyles( attributes );
 
 	// Only output an `aria-describedby` when the element it's referring to is
 	// actually rendered.
@@ -71,8 +73,10 @@ export default function save( { attributes } ) {
 						href={ href }
 						className={ classnames(
 							'wp-block-file__button',
-							__experimentalGetElementClassName( 'button' )
+							__experimentalGetElementClassName( 'button' ),
+							typographyProps.className
 						) }
+						style={ typographyProps.style }
 						download
 						aria-describedby={ describedById }
 					>

packages/block-library/src/file/style.scss

@@ -2,10 +2,6 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&:not(.wp-element-button) {
-		font-size: 0.8em;
-	}
-
 	&.aligncenter {
 		text-align: center;
 	}