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

Core blocks: Extract edit to their own file - part 1 #6637

Merged
merged 2 commits into from
May 8, 2018
+620 −568
Merged

Core blocks: Extract edit to their own file - part 1 #6637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5a9b16
Core blocks: Extract edit to their own file - part 1
gziolo May 8, 2018
b25ba3d
Own file for heading block's edit function
hypest May 8, 2018
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
134 changes: 134 additions & 0 deletions core-blocks/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
Button,
FormFileUpload,
IconButton,
Placeholder,
Toolbar,
} from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { editorMediaUpload } from '@wordpress/blocks';
import {
MediaUpload,
RichText,
BlockControls,
} from '@wordpress/editor';

/**
* Internal dependencies
*/
import './editor.scss';

export default class AudioEdit extends Component {
constructor() {
super( ...arguments );
// edit component has its own src in the state so it can be edited
// without setting the actual value outside of the edit UI
this.state = {
editing: ! this.props.attributes.src,
src: this.props.attributes.src,
};
}

render() {
const { caption, id } = this.props.attributes;
const { setAttributes, isSelected, className } = this.props;
const { editing, src } = this.state;
const switchToEditing = () => {
this.setState( { editing: true } );
};
const onSelectAudio = ( media ) => {
if ( media && media.url ) {
// sets the block's attribute and updates the edit component from the
// selected media, then switches off the editing UI
setAttributes( { src: media.url, id: media.id } );
this.setState( { src: media.url, editing: false } );
}
};
const onSelectUrl = ( event ) => {
event.preventDefault();
if ( src ) {
// set the block's src from the edit component's state, and switch off the editing UI
setAttributes( { src } );
this.setState( { editing: false } );
}
return false;
};
const setAudio = ( [ audio ] ) => onSelectAudio( audio );
const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setAudio, 'audio' );

if ( editing ) {
return (
<Placeholder
icon="media-audio"
label={ __( 'Audio' ) }
instructions={ __( 'Select an audio file from your library, or upload a new one' ) }
className={ className }>
<form onSubmit={ onSelectUrl }>
<input
type="url"
className="components-placeholder__input"
placeholder={ __( 'Enter URL of audio file here…' ) }
onChange={ ( event ) => this.setState( { src: event.target.value } ) }
value={ src || '' } />
<Button
isLarge
type="submit">
{ __( 'Use URL' ) }
</Button>
</form>
<FormFileUpload
isLarge
className="wp-block-audio__upload-button"
onChange={ uploadFromFiles }
accept="audio/*"
>
{ __( 'Upload' ) }
</FormFileUpload>
<MediaUpload
onSelect={ onSelectAudio }
type="audio"
value={ id }
render={ ( { open } ) => (
<Button isLarge onClick={ open }>
{ __( 'Media Library' ) }
</Button>
) }
/>
</Placeholder>
);
}

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return (
<Fragment>
<BlockControls>
<Toolbar>
<IconButton
className="components-icon-button components-toolbar__control"
label={ __( 'Edit audio' ) }
onClick={ switchToEditing }
icon="edit"
/>
</Toolbar>
</BlockControls>
<figure className={ className }>
<audio controls="controls" src={ src } />
{ ( ( caption && caption.length ) || !! isSelected ) && (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ ( value ) => setAttributes( { caption: value } ) }
inlineToolbar
/>
) }
</figure>
</Fragment>
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
}
128 changes: 3 additions & 125 deletions core-blocks/audio/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,13 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
Button,
FormFileUpload,
IconButton,
Placeholder,
Toolbar,
} from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { editorMediaUpload } from '@wordpress/blocks';
import {
MediaUpload,
RichText,
BlockControls,
} from '@wordpress/editor';
import { RichText } from '@wordpress/editor';

/**
* Internal dependencies
*/
import './style.scss';
import './editor.scss';
import edit from './edit';

export const name = 'core/audio';

Expand Down Expand Up @@ -55,116 +42,7 @@ export const settings = {
align: true,
},

edit: class extends Component {
constructor() {
super( ...arguments );
// edit component has its own src in the state so it can be edited
// without setting the actual value outside of the edit UI
this.state = {
editing: ! this.props.attributes.src,
src: this.props.attributes.src,
};
}

render() {
const { caption, id } = this.props.attributes;
const { setAttributes, isSelected, className } = this.props;
const { editing, src } = this.state;
const switchToEditing = () => {
this.setState( { editing: true } );
};
const onSelectAudio = ( media ) => {
if ( media && media.url ) {
// sets the block's attribute and updates the edit component from the
// selected media, then switches off the editing UI
setAttributes( { src: media.url, id: media.id } );
this.setState( { src: media.url, editing: false } );
}
};
const onSelectUrl = ( event ) => {
event.preventDefault();
if ( src ) {
// set the block's src from the edit component's state, and switch off the editing UI
setAttributes( { src } );
this.setState( { editing: false } );
}
return false;
};
const setAudio = ( [ audio ] ) => onSelectAudio( audio );
const uploadFromFiles = ( event ) => editorMediaUpload( event.target.files, setAudio, 'audio' );

if ( editing ) {
return (
<Placeholder
icon="media-audio"
label={ __( 'Audio' ) }
instructions={ __( 'Select an audio file from your library, or upload a new one' ) }
className={ className }>
<form onSubmit={ onSelectUrl }>
<input
type="url"
className="components-placeholder__input"
placeholder={ __( 'Enter URL of audio file here…' ) }
onChange={ ( event ) => this.setState( { src: event.target.value } ) }
value={ src || '' } />
<Button
isLarge
type="submit">
{ __( 'Use URL' ) }
</Button>
</form>
<FormFileUpload
isLarge
className="wp-block-audio__upload-button"
onChange={ uploadFromFiles }
accept="audio/*"
>
{ __( 'Upload' ) }
</FormFileUpload>
<MediaUpload
onSelect={ onSelectAudio }
type="audio"
value={ id }
render={ ( { open } ) => (
<Button isLarge onClick={ open }>
{ __( 'Media Library' ) }
</Button>
) }
/>
</Placeholder>
);
}

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return (
<Fragment>
<BlockControls>
<Toolbar>
<IconButton
className="components-icon-button components-toolbar__control"
label={ __( 'Edit audio' ) }
onClick={ switchToEditing }
icon="edit"
/>
</Toolbar>
</BlockControls>
<figure className={ className }>
<audio controls="controls" src={ src } />
{ ( ( caption && caption.length ) || !! isSelected ) && (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ ( value ) => setAttributes( { caption: value } ) }
inlineToolbar
/>
) }
</figure>
</Fragment>
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
},
edit,

save( { attributes } ) {
const { src, caption } = attributes;
Expand Down
Loading