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

Add isAppender functionality on mobile #17195

Merged
merged 12 commits into from
Sep 25, 2019
Merged

Add isAppender functionality on mobile #17195

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
302c905
Add isAppender functionality on mobile
lukewalczak Aug 26, 2019
5a38e78
refactor isAppender conditions
lukewalczak Aug 27, 2019
d75fdb6
Merge branch 'rnmobile/master' into rnmobile/is-appender
lukewalczak Aug 30, 2019
24355ca
Replace dropZoneUIOnly in favour of showMediaSelectionUI
lukewalczak Sep 2, 2019
204be46
deprecate dropZoneUIOnly and add disableMediaSelection prop
lukewalczak Sep 9, 2019
873357c
Merge branch 'rnmobile/master' into rnmobile/is-appender
lukewalczak Sep 9, 2019
b0013fc
Update test
lukewalczak Sep 9, 2019
ceaff07
Refactor tests and change prop name
lukewalczak Sep 23, 2019
a4a0ec6
Remove redundant empty lines
lukewalczak Sep 23, 2019
8ac70ad
Refactor conditions inside MediaPlaceholder
lukewalczak Sep 24, 2019
84973dc
Update block-editor CHANGELOG
lukewalczak Sep 25, 2019
22425ee
Update packages/block-editor/CHANGELOG.md
lukewalczak Sep 25, 2019
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
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/media-placeholder/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,15 @@ If false the default placeholder style is used.
- Type: `Boolean`
- Required: No
- Default: `false`
- Platform: Web
- Platform: Web | Mobile

### showMediaSelectionUI

Whether render a dropzone/placholder without any other additional UI.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this flag if enabled will render a drop zone but not a placeholder we can update the text to: "Whether render a dropzone without any other additional UI".


- Type: `Boolean`
- Required: No
- Platform: Web | Mobile
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we specify the default value (false) as part of the docs?


### labels

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/media-placeholder/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,10 +387,10 @@ export class MediaPlaceholder extends Component {

render() {
const {
dropZoneUIOnly,
showMediaSelectionUI,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gziolo 👋 would changing the prop name here be a problem? Are there some steps we need to take before changing it?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be a breaking change as this prop is part of the public API.

The corresponding PR was merged in March (#12367) and WordPress 5.2 went out on May 7th (https://wordpress.org/news/2019/05/jaco/). I don't see it in wp/5.2 branch so it means it was merged during the beta phase and not included in the release cycle.

Anyway, it's been a few months since it was exposed as part of the public API so we would have to keep the old name as well to ensure we don't break any plugins which might be using it.

Copy link
Member

@gziolo gziolo Sep 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see it documented in the master branch but not here:

https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-placeholder#dropzoneuionly

If true, only the Drop Zone will be rendered. No UI controls to upload the media will be shown. The disableDropZone prop still takes precedence over dropZoneUIOnly – specifying both as true will result in nothing to be rendered.

@jorgefilipecosta - can you help here? As far as I can tell, this is something which on the web shows only a box where you can drop an image from your OS.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, as far as I understand we are not able to change that prop name.
Should we then share the dropZoneUIOnly prop (which sounds weird a bit on mobile) between platforms?

Copy link
Contributor

@pinarol pinarol Sep 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I look at the latest docs I see that disableDropZone and dropZoneUIOnly are also related: The disableDropZone prop still takes precedence over dropZoneUIOnly – specifying both as true will result in nothing to be rendered Thus, just renaming it as showMediaSelectionUI won't make sense unless we refactor it to work independently.
AFAIU, we'll either need to change the behavior of web implementation too or we'll keep the props same but we'll need to add to docs that drag & drop is not yet supported on mobile. I am aiming towards to the latter one since that's a nice feature to have on mobile too(in the future). wdyt @koke ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense. For consistency with the other prop I would suggest disableMediaSelection instead of “hide”

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

disableMediaSelection sounds good to me 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jorgefilipecosta let us know if you have concerns about this. Otherwise I think we can go ahead and deprecate dropZoneUIOnly and add disableMediaSelection?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pinarol I've updated, my PR according to the conversation above:

  • added disableMediaSelection prop
  • deprecatedropZoneUIOnly prop

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One test is failing block-transforms because of deprecated warning. I will be grateful if someone can look at it and help me with that.

} = this.props;

if ( dropZoneUIOnly ) {
if ( showMediaSelectionUI ) {
return (
<MediaUploadCheck>
{ this.renderDropZone() }
Expand Down
111 changes: 76 additions & 35 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 @@ -7,16 +7,28 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
import { withTheme, useStyle } from '@wordpress/components';
import {
MediaUpload,
MEDIA_TYPE_IMAGE,
MEDIA_TYPE_VIDEO,
} from '@wordpress/block-editor';
import { Dashicon, withTheme, useStyle } from '@wordpress/components';

/**
* Internal dependencies
*/
import styles from './styles.scss';

function MediaPlaceholder( props ) {
const { allowedTypes = [], labels = {}, icon, onSelect, theme } = props;
const {
allowedTypes = [],
labels = {},
icon,
onSelect,
isAppender,
showMediaSelectionUI,
theme,
} = props;

const isOneType = allowedTypes.length === 1;
const isImage = isOneType && allowedTypes.includes( MEDIA_TYPE_IMAGE );
Expand Down Expand Up @@ -51,40 +63,69 @@ function MediaPlaceholder( props ) {
const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark, theme );
const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark, theme );

const renderContent = () => {
if ( isAppender === undefined || ! isAppender ) {
return (
<>
<View style={ styles.modalIcon }>
{ icon }
</View>
<Text style={ emptyStateTitleStyle }>
{ placeholderTitle }
</Text>
<Text style={ styles.emptyStateDescription }>
{ instructions }
</Text>
</>
);
} else if ( isAppender && showMediaSelectionUI ) {
return (
<Dashicon
icon="plus-alt"
style={ styles.addBlockButton }
color={ styles.addBlockButton.color }
size={ styles.addBlockButton.size }
/>
);
}
};

if ( isAppender && ! showMediaSelectionUI ) {
return null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it looks like there's sth wrong here, it is returning null if disableMediaButtons is undefined or false.

}

return (
<MediaUpload
allowedTypes={ allowedTypes }
onSelect={ onSelect }
render={ ( { open, getMediaOptions } ) => {
return (
<TouchableWithoutFeedback
accessibilityLabel={ sprintf(
/* translators: accessibility text for the media block empty state. %s: media type */
__( '%s block. Empty' ),
placeholderTitle
) }
accessibilityRole={ 'button' }
accessibilityHint={ accessibilityHint }
onPress={ ( event ) => {
props.onFocus( event );
open();
} }
>
<View style={ emptyStateContainerStyle }>
{ getMediaOptions() }
<View style={ styles.modalIcon }>
{ icon }
<View style={ { flex: 1 } }>
<MediaUpload
allowedTypes={ allowedTypes }
onSelect={ onSelect }
render={ ( { open, getMediaOptions } ) => {
return (
<TouchableWithoutFeedback
accessibilityLabel={ sprintf(
/* translators: accessibility text for the media block empty state. %s: media type */
__( '%s block. Empty' ),
placeholderTitle
) }
accessibilityRole={ 'button' }
accessibilityHint={ accessibilityHint }
onPress={ ( event ) => {
props.onFocus( event );
open();
} }>
<View
style={ [
emptyStateContainerStyle,
isAppender && styles.isAppender,
] }>
{ getMediaOptions() }
{ renderContent() }
</View>
<Text style={ emptyStateTitleStyle }>
{ placeholderTitle }
</Text>
<Text style={ styles.emptyStateDescription }>
{ instructions }
</Text>
</View>
</TouchableWithoutFeedback>
);
} } />
</TouchableWithoutFeedback>
);
} }
/>
</View>
);
}

Expand Down
15 changes: 15 additions & 0 deletions packages/block-editor/src/components/media-placeholder/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,18 @@
align-items: center;
fill: $gray-dark;
}

.isAppender {
height: auto;
background-color: $white;
border: $border-width solid $light-gray-500;
border-radius: 4px;
}

.addBlockButton {
color: $white;
background-color: $dark-gray-500;
border-radius: $icon-button-size-small / 2;
overflow: hidden;
size: $icon-button-size-small;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ class GalleryEdit extends Component {
addToGallery={ hasImages }
isAppender={ hasImages }
className={ className }
dropZoneUIOnly={ hasImages && ! isSelected }
showMediaSelectionUI={ hasImages && ! isSelected }
icon={ ! hasImages && <BlockIcon icon={ icon } /> }
labels={ {
title: ! hasImages && __( 'Gallery' ),
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -673,7 +673,7 @@ export class ImageEdit extends Component {
allowedTypes={ ALLOWED_MEDIA_TYPES }
value={ { id, src } }
mediaPreview={ mediaPreview }
dropZoneUIOnly={ ! isEditing && url }
showMediaSelectionUI={ ! isEditing && url }
/>
);
if ( isEditing || ! url ) {
Expand Down