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

Add title to image and video selection sheets #23083

Merged
merged 9 commits into from
Jul 10, 2020
Merged

Add title to image and video selection sheets #23083

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8c5e0c3
Add description/title to Image selection sheets
guarani Jun 10, 2020
9bb5ac8
Add description/title to other media blocks
guarani Jun 10, 2020
863d1ac
Merge branch 'master' into rnmobile/image-picker-title
guarani Jul 7, 2020
ce632cf
Use sentence case in media bottom sheet titles
guarani Jul 7, 2020
b8b9321
Show media sheet titles when replacing media
guarani Jul 8, 2020
ba3c05b
Use section title in media selection bottom sheets
guarani Jul 8, 2020
d63b72a
Revert unnecessary changes to bottom sheet
guarani Jul 8, 2020
151d9d2
Resolved merge conflict with master
guarani Jul 9, 2020
2bc4b8c
Tweak media selection sheet title copy
guarani Jul 10, 2020
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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/media-placeholder/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ function MediaPlaceholder( props ) {
__experimentalOnlyMediaLibrary
}
multiple={ multiple }
isReplacingMedia={ false }
render={ ( { open, getMediaOptions } ) => {
return (
<TouchableWithoutFeedback
Expand Down
31 changes: 31 additions & 0 deletions packages/block-editor/src/components/media-upload/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,39 @@ export class MediaUpload extends React.Component {
}

render() {
const { allowedTypes = [], isReplacingMedia } = this.props;
const isOneType = allowedTypes.length === 1;
const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
const isVideo = isOneType && allowedTypes.includes( MEDIA_TYPE_VIDEO );
const isImageOrVideo =
allowedTypes.length === 2 &&
allowedTypes.includes( MEDIA_TYPE_IMAGE ) &&
allowedTypes.includes( MEDIA_TYPE_VIDEO );

let pickerTitle;
if ( isImage ) {
if ( isReplacingMedia ) {
pickerTitle = __( 'Replace image from' );
} else {
pickerTitle = __( 'Choose image from' );
}
} else if ( isVideo ) {
if ( isReplacingMedia ) {
pickerTitle = __( 'Replace video from' );
} else {
pickerTitle = __( 'Choose video from' );
}
} else if ( isImageOrVideo ) {
if ( isReplacingMedia ) {
pickerTitle = __( 'Replace image or video from' );
} else {
pickerTitle = __( 'Choose image or video from' );
}
}

const getMediaOptions = () => (
<Picker
title={ pickerTitle }
hideCancelButton
ref={ ( instance ) => ( this.picker = instance ) }
options={ this.getMediaOptionsItems() }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/cover/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ const Cover = ( {

<MediaUpload
allowedTypes={ ALLOWED_MEDIA_TYPES }
isReplacingMedia={ true }
onSelect={ onSelectMedia }
render={ renderBackground }
/>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -631,6 +631,7 @@ export class ImageEdit extends React.Component {
return (
<MediaUpload
allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
isReplacingMedia={ true }
onSelect={ this.onSelectMediaUploadOption }
render={ ( { open, getMediaOptions } ) => {
return getImageComponent( open, getMediaOptions );
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/media-text/media-container.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ class MediaContainer extends Component {
<MediaUpload
onSelect={ this.onSelectMediaUploadOption }
allowedTypes={ ALLOWED_MEDIA_TYPES }
isReplacingMedia={ true }
value={ mediaId }
render={ ( { open, getMediaOptions } ) => {
return (
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/video/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ class VideoEdit extends React.Component {
const toolbarEditButton = (
<MediaUpload
allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
isReplacingMedia={ true }
onSelect={ this.onSelectMediaUploadOption }
render={ ( { open, getMediaOptions } ) => {
return (
Expand Down