Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

File block: Add typography block support #55693

Closed
wants to merge 15 commits into from
Closed

File block: Add typography block support #55693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7ed7ea0
File block: Add typography block supports
carolinan Oct 27, 2023
cb93b13
Remove the default font size.
carolinan Oct 30, 2023
81c94e8
Replace the faulty blockProps with the style property
carolinan Oct 30, 2023
28837a8
Merge branch 'trunk' into add/file-block-typography-support
carolinan Nov 17, 2023
8d993e0
Add typograhy to block-editor native hooks
carolinan Nov 20, 2023
081fc44
Merge branch 'trunk' into add/file-block-typography-support
carolinan Nov 24, 2023
62771da
Merge branch 'trunk' into add/file-block-typography-support
carolinan Jan 2, 2024
e17e2ef
Try to fix spacing CS issue in save.js
carolinan Jan 2, 2024
3d8bf85
Merge branch 'trunk' into add/file-block-typography-support
carolinan Jan 3, 2024
ab316c7
Merge branch 'trunk' into add/file-block-typography-support
carolinan Jan 25, 2024
0d8ec02
Merge branch 'trunk' into add/file-block-typography-support
carolinan Feb 14, 2024
c7d3185
Merge branch 'trunk' into add/file-block-typography-support
carolinan Mar 8, 2024
3facf4b
Merge branch 'trunk' into add/file-block-typography-support
carolinan Mar 14, 2024
bc0ecd6
Merge branch 'trunk' into add/file-block-typography-support
carolinan Apr 16, 2024
48b6740
Merge branch 'trunk' into add/file-block-typography-support
carolinan May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/hooks/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
15 changes: 14 additions & 1 deletion packages/block-library/src/file/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 5 additions & 2 deletions packages/block-library/src/file/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -82,7 +83,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
} ),
[ id ]
);

const typographyProps = useTypographyProps( attributes );
const { createErrorNotice } = useDispatch( noticesStore );
const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );
Expand Down Expand Up @@ -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…' ) }
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/file/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
RichText,
useBlockProps,
__experimentalGetElementClassName,
getTypographyClassesAndStyles as getTypographyClassesAndStyles,
} from '@wordpress/block-editor';

export default function save( { attributes } ) {
Expand All @@ -32,6 +33,7 @@ export default function save( { attributes } ) {
fileName.toString();

const hasFilename = ! RichText.isEmpty( fileName );
const typographyProps = getTypographyClassesAndStyles( attributes );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any particular reason for adding these manually. Isn't this something that the hook adds automatically?

Copy link
Contributor Author

@carolinan carolinan Mar 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is because I needed the typography class names and inline styles to be on both the wrapper, and the download button.
If I only use the save props on the wrapper, or if I try to use an experimental selector for the typography in block.json, then the button styles override the user settings from the controls in the block editor.


// Only output an `aria-describedby` when the element it's referring to is
// actually rendered.
Expand Down Expand Up @@ -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 }
>
Expand Down
4 changes: 0 additions & 4 deletions packages/block-library/src/file/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't this break back compat for themes that may be relying on this CSS?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but the style was not originally there: the addition of the style was a back compat break itself.
In 2022, it was moved from the button to the link text. That is the origin of the open issue.

&.aligncenter {
text-align: center;
}
Expand Down
Loading