diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 07abd2b81221b..8b2a631518de5 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -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 diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md index bde6c7598042b..11f451a3ad629 100644 --- a/packages/block-editor/src/components/media-placeholder/README.md +++ b/packages/block-editor/src/components/media-placeholder/README.md @@ -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 diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index efad860f586e7..2f49660026903 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -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 @@ -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 ( { this.renderDropZone() } diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index d2b1bd0d3bf23..a9a7d50fce11f 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -7,8 +7,12 @@ 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 @@ -16,7 +20,15 @@ import { withTheme } from '@wordpress/components'; 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 ); @@ -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 ( + <> + + { icon } + + + { placeholderTitle } + + + { instructions } + + + ); + } else if ( isAppender && ! disableMediaButtons ) { + return ( + + ); + } + }; + + if ( isAppender && disableMediaButtons ) { + return null; + } + return ( - { - return ( - { - props.onFocus( event ); - open(); - } } - > - - { getMediaOptions() } - - { icon } + + { + return ( + { + props.onFocus( event ); + open(); + } }> + + { getMediaOptions() } + { renderContent() } - - { placeholderTitle } - - - { instructions } - - - - ); - } } /> + + ); + } } + /> + ); } diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index 7a192f078e209..83f201579a2ab 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -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; +} diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 129fc2343224a..13040d1f95008 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -244,7 +244,7 @@ class GalleryEdit extends Component { addToGallery={ hasImages } isAppender={ hasImages } className={ className } - dropZoneUIOnly={ hasImages && ! isSelected } + disableMediaButtons={ hasImages && ! isSelected } icon={ ! hasImages && } labels={ { title: ! hasImages && __( 'Gallery' ), diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index e0cc5e751fdaa..8f34fa1be7b29 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -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 ) {