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

Jump to bottom

File Block: Remove i18n from save function #43050

Merged
merged 8 commits into from
Sep 12, 2022
Merged

File Block: Remove i18n from save function #43050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb2302c
Remove i18n in file block's save function and update imports
petitphp Aug 7, 2022
b0cdf4a
Create new deprecation to handle removing of i18n in save function
petitphp Aug 7, 2022
a9188fa
Handle i18n of aria-label in PHP render callback
petitphp Aug 7, 2022
beb5585
Save file's name in aria-label when outputing html in post content an…
petitphp Aug 8, 2022
09411e5
Update file block fixtures
petitphp Aug 8, 2022
009e15f
Add PR number in deprecated version comment
petitphp Aug 16, 2022
3b0456f
Output default string in aria-label for empty filename
petitphp Aug 18, 2022
c9f4951
Add unit tests for File block render
petitphp Aug 18, 2022
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
361 changes: 249 additions & 112 deletions packages/block-library/src/file/deprecated.js
View file
Open in desktop
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;
Loading