diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index c08869db34b48..cf3f5d7911053 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index c7f9df868f2bd..0e4c2aa276fd4 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/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'; diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json index fd5da67d284f4..399485da814a1 100644 --- a/packages/block-library/src/file/block.json +++ b/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" diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 415d3341939c4..a92b6827029bc 100644 --- a/packages/block-library/src/file/edit.js +++ b/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, __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); @@ -287,8 +288,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) { 'wp-block-file__button', __experimentalGetElementClassName( 'button' - ) + ), + typographyProps.className ) } + style={ typographyProps.style } value={ downloadButtonText } withoutInteractiveFormatting placeholder={ __( 'Add text…' ) } diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js index 34b1046d6d2bb..8f5d3ece0d17a 100644 --- a/packages/block-library/src/file/save.js +++ b/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={ clsx( 'wp-block-file__button', - __experimentalGetElementClassName( 'button' ) + __experimentalGetElementClassName( 'button' ), + typographyProps.className ) } + style={ typographyProps.style } download aria-describedby={ describedById } > diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss index 31c76ff2641fb..6f9ac83687c16 100644 --- a/packages/block-library/src/file/style.scss +++ b/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; }