Skip to content

Commit

Permalink
Add isAppender functionality on mobile (#17195)
Browse files Browse the repository at this point in the history
* Add isAppender functionality on mobile

* refactor isAppender conditions

* Replace dropZoneUIOnly in favour of showMediaSelectionUI

* deprecate dropZoneUIOnly and add disableMediaSelection prop

* Update test

* Refactor tests and change prop name

* Remove redundant empty lines

* Refactor conditions inside MediaPlaceholder

* Update block-editor CHANGELOG

* Update packages/block-editor/CHANGELOG.md

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>
  • Loading branch information
lukewalczak and gziolo committed Sep 25, 2019
1 parent 648a1b9 commit e99d365
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 39 deletions.
6 changes: 6 additions & 0 deletions packages/block-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## Master

### Deprecation

- `dropZoneUIOnly` prop in `MediaPlaceholder` component has been deprecated in favor of `disableMediaButtons` prop.

## 3.0.0 (2019-08-05)

### New Features
Expand Down
11 changes: 10 additions & 1 deletion packages/block-editor/src/components/media-placeholder/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,16 @@ If false the default placeholder style is used.
- Type: `Boolean`
- Required: No
- Default: `false`
- Platform: Web
- Platform: Web | Mobile

### disableMediaButtons

If true, only the Drop Zone will be rendered. No UI controls to upload the media will be shown

- Type: `Boolean`
- Required: No
- Default: `false`
- Platform: Web | Mobile

### labels

Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/media-placeholder/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand Down Expand Up @@ -387,10 +388,17 @@ export class MediaPlaceholder extends Component {

render() {
const {
disableMediaButtons,
dropZoneUIOnly,
} = this.props;

if ( dropZoneUIOnly ) {
if ( dropZoneUIOnly || disableMediaButtons ) {
if ( dropZoneUIOnly ) {
deprecated( 'wp.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
alternative: 'disableMediaButtons',
} );
}

return (
<MediaUploadCheck>
{ this.renderDropZone() }
Expand Down
111 changes: 76 additions & 35 deletions packages/block-editor/src/components/media-placeholder/index.native.js
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 } from '@wordpress/components';
import {
MediaUpload,
MEDIA_TYPE_IMAGE,
MEDIA_TYPE_VIDEO,
} from '@wordpress/block-editor';
import { Dashicon, withTheme } from '@wordpress/components';

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

function MediaPlaceholder( props ) {
const { allowedTypes = [], labels = {}, icon, onSelect, useStyle } = props;
const {
allowedTypes = [],
labels = {},
icon,
onSelect,
isAppender,
disableMediaButtons,
useStyle,
} = 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 );
const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark );

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 && ! disableMediaButtons ) {
return (
<Dashicon
icon="plus-alt"
style={ styles.addBlockButton }
color={ styles.addBlockButton.color }
size={ styles.addBlockButton.size }
/>
);
}
};

if ( isAppender && disableMediaButtons ) {
return null;
}

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
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
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 }
disableMediaButtons={ 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
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 }
disableMediaButtons={ ! isEditing && url }
/>
);
if ( isEditing || ! url ) {
Expand Down

0 comments on commit e99d365

Please sign in to comment.