-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
File Block: Remove i18n from save function (#43050)
* Remove i18n in file block's save function and update imports * Create new deprecation to handle removing of i18n in save function * Handle i18n of aria-label in PHP render callback * Save file's name in aria-label when outputing html in post content and handle translation in PHP. * Update file block fixtures * Add PR number in deprecated version comment * Output default string in aria-label for empty filename * Add unit tests for File block render
- Loading branch information
Showing
8 changed files
with
346 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,260 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { RichText, useBlockProps } from '@wordpress/block-editor'; | ||
| import { | ||
| __experimentalGetElementClassName, | ||
| RichText, | ||
| useBlockProps, | ||
| } from '@wordpress/block-editor'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
|
|
||
| // Version of the file block without PR#28062 accessibility fix. | ||
| const deprecated = [ | ||
| { | ||
| attributes: { | ||
| id: { | ||
| type: 'number', | ||
| }, | ||
| href: { | ||
| type: 'string', | ||
| }, | ||
| fileName: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a:not([download])', | ||
| }, | ||
| textLinkHref: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'href', | ||
| }, | ||
| textLinkTarget: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'target', | ||
| }, | ||
| showDownloadButton: { | ||
| type: 'boolean', | ||
| default: true, | ||
| }, | ||
| downloadButtonText: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a[download]', | ||
| }, | ||
| displayPreview: { | ||
| type: 'boolean', | ||
| }, | ||
| previewHeight: { | ||
| type: 'number', | ||
| default: 600, | ||
| }, | ||
| }, | ||
| supports: { | ||
| anchor: true, | ||
| align: true, | ||
| }, | ||
| save( { attributes } ) { | ||
| const { | ||
| href, | ||
| fileName, | ||
| textLinkHref, | ||
| textLinkTarget, | ||
| showDownloadButton, | ||
| downloadButtonText, | ||
| displayPreview, | ||
| previewHeight, | ||
| } = attributes; | ||
| // Version of the file block without PR#43050 removing the translated aria-label. | ||
| const v2 = { | ||
| attributes: { | ||
| id: { | ||
| type: 'number', | ||
| }, | ||
| href: { | ||
| type: 'string', | ||
| }, | ||
| fileId: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'id', | ||
| }, | ||
| fileName: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a:not([download])', | ||
| }, | ||
| textLinkHref: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'href', | ||
| }, | ||
| textLinkTarget: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'target', | ||
| }, | ||
| showDownloadButton: { | ||
| type: 'boolean', | ||
| default: true, | ||
| }, | ||
| downloadButtonText: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a[download]', | ||
| }, | ||
| displayPreview: { | ||
| type: 'boolean', | ||
| }, | ||
| previewHeight: { | ||
| type: 'number', | ||
| default: 600, | ||
| }, | ||
| }, | ||
| supports: { | ||
| anchor: true, | ||
| align: true, | ||
| }, | ||
| save( { attributes } ) { | ||
| const { | ||
| href, | ||
| fileId, | ||
| fileName, | ||
| textLinkHref, | ||
| textLinkTarget, | ||
| showDownloadButton, | ||
| downloadButtonText, | ||
| displayPreview, | ||
| previewHeight, | ||
| } = attributes; | ||
|
|
||
| const pdfEmbedLabel = RichText.isEmpty( fileName ) | ||
| ? __( 'PDF embed' ) | ||
| : sprintf( | ||
| /* translators: %s: filename. */ | ||
| __( 'Embed of %s.' ), | ||
| fileName | ||
| ); | ||
|
|
||
| const pdfEmbedLabel = RichText.isEmpty( fileName ) | ||
| ? __( 'PDF embed' ) | ||
| : sprintf( | ||
| /* translators: %s: filename. */ | ||
| __( 'Embed of %s.' ), | ||
| fileName | ||
| ); | ||
| const hasFilename = ! RichText.isEmpty( fileName ); | ||
|
|
||
| return ( | ||
| href && ( | ||
| <div { ...useBlockProps.save() }> | ||
| { displayPreview && ( | ||
| <> | ||
| <object | ||
| className="wp-block-file__embed" | ||
| data={ href } | ||
| type="application/pdf" | ||
| style={ { | ||
| width: '100%', | ||
| height: `${ previewHeight }px`, | ||
| } } | ||
| aria-label={ pdfEmbedLabel } | ||
| /> | ||
| </> | ||
| ) } | ||
| { ! RichText.isEmpty( fileName ) && ( | ||
| <a | ||
| href={ textLinkHref } | ||
| target={ textLinkTarget } | ||
| rel={ | ||
| textLinkTarget | ||
| ? 'noreferrer noopener' | ||
| : undefined | ||
| } | ||
| > | ||
| <RichText.Content value={ fileName } /> | ||
| </a> | ||
| ) } | ||
| { showDownloadButton && ( | ||
| <a | ||
| href={ href } | ||
| className="wp-block-file__button" | ||
| download={ true } | ||
| > | ||
| <RichText.Content | ||
| value={ downloadButtonText } | ||
| /> | ||
| </a> | ||
| ) } | ||
| </div> | ||
| ) | ||
| ); | ||
| // Only output an `aria-describedby` when the element it's referring to is | ||
| // actually rendered. | ||
| const describedById = hasFilename ? fileId : undefined; | ||
|
|
||
| return ( | ||
| href && ( | ||
| <div { ...useBlockProps.save() }> | ||
| { displayPreview && ( | ||
| <> | ||
| <object | ||
| className="wp-block-file__embed" | ||
| data={ href } | ||
| type="application/pdf" | ||
| style={ { | ||
| width: '100%', | ||
| height: `${ previewHeight }px`, | ||
| } } | ||
| aria-label={ pdfEmbedLabel } | ||
| /> | ||
| </> | ||
| ) } | ||
| { hasFilename && ( | ||
| <a | ||
| id={ describedById } | ||
| href={ textLinkHref } | ||
| target={ textLinkTarget } | ||
| rel={ | ||
| textLinkTarget | ||
| ? 'noreferrer noopener' | ||
| : undefined | ||
| } | ||
| > | ||
| <RichText.Content value={ fileName } /> | ||
| </a> | ||
| ) } | ||
| { showDownloadButton && ( | ||
| <a | ||
| href={ href } | ||
| className={ classnames( | ||
| 'wp-block-file__button', | ||
| __experimentalGetElementClassName( 'button' ) | ||
| ) } | ||
| download={ true } | ||
| aria-describedby={ describedById } | ||
| > | ||
| <RichText.Content value={ downloadButtonText } /> | ||
| </a> | ||
| ) } | ||
| </div> | ||
| ) | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| // Version of the file block without PR#28062 accessibility fix. | ||
| const v1 = { | ||
| attributes: { | ||
| id: { | ||
| type: 'number', | ||
| }, | ||
| href: { | ||
| type: 'string', | ||
| }, | ||
| fileName: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a:not([download])', | ||
| }, | ||
| textLinkHref: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'href', | ||
| }, | ||
| textLinkTarget: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'a:not([download])', | ||
| attribute: 'target', | ||
| }, | ||
| showDownloadButton: { | ||
| type: 'boolean', | ||
| default: true, | ||
| }, | ||
| downloadButtonText: { | ||
| type: 'string', | ||
| source: 'html', | ||
| selector: 'a[download]', | ||
| }, | ||
| displayPreview: { | ||
| type: 'boolean', | ||
| }, | ||
| previewHeight: { | ||
| type: 'number', | ||
| default: 600, | ||
| }, | ||
| }, | ||
| supports: { | ||
| anchor: true, | ||
| align: true, | ||
| }, | ||
| ]; | ||
| save( { attributes } ) { | ||
| const { | ||
| href, | ||
| fileName, | ||
| textLinkHref, | ||
| textLinkTarget, | ||
| showDownloadButton, | ||
| downloadButtonText, | ||
| displayPreview, | ||
| previewHeight, | ||
| } = attributes; | ||
|
|
||
| const pdfEmbedLabel = RichText.isEmpty( fileName ) | ||
| ? __( 'PDF embed' ) | ||
| : sprintf( | ||
| /* translators: %s: filename. */ | ||
| __( 'Embed of %s.' ), | ||
| fileName | ||
| ); | ||
|
|
||
| return ( | ||
| href && ( | ||
| <div { ...useBlockProps.save() }> | ||
| { displayPreview && ( | ||
| <> | ||
| <object | ||
| className="wp-block-file__embed" | ||
| data={ href } | ||
| type="application/pdf" | ||
| style={ { | ||
| width: '100%', | ||
| height: `${ previewHeight }px`, | ||
| } } | ||
| aria-label={ pdfEmbedLabel } | ||
| /> | ||
| </> | ||
| ) } | ||
| { ! RichText.isEmpty( fileName ) && ( | ||
| <a | ||
| href={ textLinkHref } | ||
| target={ textLinkTarget } | ||
| rel={ | ||
| textLinkTarget | ||
| ? 'noreferrer noopener' | ||
| : undefined | ||
| } | ||
| > | ||
| <RichText.Content value={ fileName } /> | ||
| </a> | ||
| ) } | ||
| { showDownloadButton && ( | ||
| <a | ||
| href={ href } | ||
| className="wp-block-file__button" | ||
| download={ true } | ||
| > | ||
| <RichText.Content value={ downloadButtonText } /> | ||
| </a> | ||
| ) } | ||
| </div> | ||
| ) | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| const deprecated = [ v2, v1 ]; | ||
|
|
||
| export default deprecated; |
Oops, something went wrong.