Skip to content

Commit

Permalink
Audio block: don't render empty audio tag. (#18850)
Browse files Browse the repository at this point in the history
ZebulanStanphill authored Dec 16, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 36f8a9d commit cca3dde
Showing 7 changed files with 97 additions and 1 deletion.
56 changes: 56 additions & 0 deletions packages/block-library/src/audio/deprecated.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* WordPress dependencies
*/
import { RichText } from '@wordpress/block-editor';

export default [
{
attributes: {
src: {
type: 'string',
source: 'attribute',
selector: 'audio',
attribute: 'src',
},
caption: {
type: 'string',
source: 'html',
selector: 'figcaption',
},
id: {
type: 'number',
},
autoplay: {
type: 'boolean',
source: 'attribute',
selector: 'audio',
attribute: 'autoplay',
},
loop: {
type: 'boolean',
source: 'attribute',
selector: 'audio',
attribute: 'loop',
},
preload: {
type: 'string',
source: 'attribute',
selector: 'audio',
attribute: 'preload',
},
},
supports: {
align: true,
},
save( { attributes } ) {
const { autoplay, caption, loop, preload, src } = attributes;

return (
<figure>
<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
</figure>
);
},
},
];
2 changes: 2 additions & 0 deletions packages/block-library/src/audio/index.js
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import deprecated from './deprecated';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
@@ -22,6 +23,7 @@ export const settings = {
keywords: [ __( 'music' ), __( 'sound' ), __( 'podcast' ), __( 'recording' ) ],
icon,
transforms,
deprecated,
supports: {
align: true,
},
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/save.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import { RichText } from '@wordpress/block-editor';
export default function save( { attributes } ) {
const { autoplay, caption, loop, preload, src } = attributes;

return (
return src && (
<figure>
<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:audio -->
<figure class="wp-block-audio"><audio controls></audio></figure>
<!-- /wp:audio -->
14 changes: 14 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__audio__deprecated-1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
[
{
"clientId": "_clientId_0",
"name": "core/audio",
"isValid": true,
"attributes": {
"caption": "",
"autoplay": false,
"loop": false
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-audio\"><audio controls></audio></figure>"
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
[
{
"blockName": "core/audio",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-audio\"><audio controls></audio></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-audio\"><audio controls></audio></figure>\n"
]
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:audio /-->

0 comments on commit cca3dde

Please sign in to comment.