diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js index 99e097ba55eb25..c7b69cbeab9052 100644 --- a/blocks/library/gallery/block.js +++ b/blocks/library/gallery/block.js @@ -12,6 +12,7 @@ import { mediaUpload } from '@wordpress/utils'; import { IconButton, DropZone, + FormFileUpload, RangeControl, SelectControl, ToggleControl, @@ -51,7 +52,8 @@ class GalleryBlock extends Component { this.toggleImageCrop = this.toggleImageCrop.bind( this ); this.onRemoveImage = this.onRemoveImage.bind( this ); this.setImageAttributes = this.setImageAttributes.bind( this ); - this.dropFiles = this.dropFiles.bind( this ); + this.addFiles = this.addFiles.bind( this ); + this.uploadFromFiles = this.uploadFromFiles.bind( this ); this.state = { selectedImage: null, @@ -122,7 +124,11 @@ class GalleryBlock extends Component { } ); } - dropFiles( files ) { + uploadFromFiles( event ) { + this.addFiles( event.target.files ); + } + + addFiles( files ) { const currentImages = this.props.attributes.images || []; const { setAttributes } = this.props; mediaUpload( @@ -151,7 +157,7 @@ class GalleryBlock extends Component { const dropZone = ( ); @@ -239,6 +245,18 @@ class GalleryBlock extends Component { /> ) ) } + { isSelected && +
  • + +
  • + } , ]; } diff --git a/blocks/library/gallery/editor.scss b/blocks/library/gallery/editor.scss index 884ef61503edb4..cce7d973f285b5 100644 --- a/blocks/library/gallery/editor.scss +++ b/blocks/library/gallery/editor.scss @@ -28,6 +28,28 @@ margin-top: -4px; } + .components-form-file-upload, + .button.blocks-gallery-add-item-button { + width: 100%; + height: 100%; + } + + .button.blocks-gallery-add-item-button { + box-shadow: none; + border: none; + border-radius: 0; + min-height: 100px; + + & .dashicon { + margin-top: 10px; + } + + + &:hover, + &:focus { + border: 1px solid #999; + } + } } .blocks-gallery-item__inline-menu { diff --git a/components/form-file-upload/index.js b/components/form-file-upload/index.js index 81176cf5fa3757..c4cb139449b858 100644 --- a/components/form-file-upload/index.js +++ b/components/form-file-upload/index.js @@ -25,12 +25,12 @@ class FormFileUpload extends Component { } render() { - const { children, multiple = false, accept, onChange, ...props } = this.props; + const { children, multiple = false, accept, onChange, icon = 'upload', ...props } = this.props; return (