File block: Add typography block supports

docs/reference-guides/core-blocks.md

@@ -265,7 +265,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-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
+			}
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

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 typgraphyProps = useTypographyProps( attributes );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -289,13 +290,15 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						>
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
+								{ ...blockProps }
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
 								className={ classnames(
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'
-									)
+									),
+									typgraphyProps.className
 								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting

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 } ) {
@@ -26,8 +27,8 @@ export default function save( { attributes } ) {
 	} = attributes;
 
 	const pdfEmbedLabel = RichText.isEmpty( fileName ) ? 'PDF embed' : fileName;
-
 	const hasFilename = ! RichText.isEmpty( fileName );
+	const typographyProps = getTypographyClassesAndStyles( attributes );
 
 	// Only output an `aria-describedby` when the element it's referring to is
 	// actually rendered.
@@ -64,10 +65,12 @@ export default function save( { attributes } ) {
 				) }
 				{ showDownloadButton && (
 					<a
+						{ ...useBlockProps.save() }
 						href={ href }
 						className={ classnames(
 							'wp-block-file__button',
-							__experimentalGetElementClassName( 'button' )
+							__experimentalGetElementClassName( 'button' ),
+							typographyProps.className
 						) }
 						download={ true }
 						aria-describedby={ describedById }