Gallery Block: Add Media Library buttons to the upload new image area…

…; Media Upload: Allow galleries to open in the library frame.
WordPress · Feb 16, 2019 · e4b97f5 · e4b97f5
1 parent 0f18024
commit e4b97f5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 26 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -298,17 +298,38 @@ class GalleryEdit extends Component {
  );
  } ) }
  { isSelected &&
- <li className="blocks-gallery-item has-add-item-button">
+ <li className={ classnames(
+ 'blocks-gallery-item',
+ 'block-library-gallery-add-item'
+ ) }>
  <FormFileUpload
  multiple
  isLarge
- className="block-library-gallery-add-item-button"
  onChange={ this.uploadFromFiles }
  accept="image/*"
  icon="insert"
+ className="block-library-gallery-add-item__upload-button"
  >
  { __( 'Upload an image' ) }
  </FormFileUpload>
+ <MediaUpload
+ onSelect={ this.onSelectImages }
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ addToGallery
+ multiple
+ gallery
+ value={ images.map( ( img ) => img.id ) }
+ render={ ( { open } ) => (
+ <IconButton
+ icon="admin-media"
+ isTertiary
+ onClick={ open }
+ className="block-library-gallery-add-item__media-library-button"
+ >
+ { __( 'Media Library' ) }
+ </IconButton>
+ ) }
+ />
  </li>
  }
  </ul>

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -53,28 +53,45 @@ ul.wp-block-gallery li {
  }
  }
 
- .components-form-file-upload,
- .components-button.block-library-gallery-add-item-button {
+ &.block-library-gallery-add-item.block-library-gallery-add-item {
  width: 100%;
- height: 100%;
+ min-height: 100px;
+ border: dotted;
+ border-color: $light-gray-800;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ .dashicon {
+ margin-right: 6px;
+ }
  }
 
- .components-button.block-library-gallery-add-item-button {
- display: flex;
- flex-direction: column;
- justify-content: center;
+ .block-library-gallery-add-item__upload-button,
+ .block-library-gallery-add-item__media-library-button {
  box-shadow: none;
+ &.components-button:hover,
+ &.components-button:focus {
+ box-shadow: none;
+ border: $border-width solid $dark-gray-500;
+ }
+ }
+
+ .block-library-gallery-add-item__upload-button {
  border: none;
- border-radius: 0;
- min-height: 100px;
+ background: none;
+ box-shadow: none;
+ margin-right: 25px;
+ border: $border-width solid transparent;
+ }
 
-  & .dashicon {
-  margin-top: 10px;
- }
+ .block-library-gallery-add-item__media-library-button {
+ background-color: $light-gray-100;
+ border: $border-width solid $light-gray-500;
 
- &:hover,
- &:focus {
- border: $border-width solid $dark-gray-500;
+
+ .dashicon {
+ color: $light-gray-900;
  }
  }
 

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
@@ -126,14 +126,6 @@
  margin-right: 0;
  }
 
- // Make the "Add new Gallery item" button full-width (so it always appears
- // below other items).
- .blocks-gallery-item {
- &.has-add-item-button {
- width: 100%;
- }
- }
-
  // Apply max-width to floated items that have no intrinsic width.
  &.alignleft,
  &.alignright {

diff --git a/packages/edit-post/src/hooks/components/media-upload/index.js b/packages/edit-post/src/hooks/components/media-upload/index.js
@@ -80,6 +80,7 @@ class MediaUpload extends Component {
  allowedTypes,
  multiple = false,
  gallery = false,
+ addToGallery = false,
  title = __( 'Select or Upload Media' ),
  modalClass,
  value,
@@ -92,7 +93,12 @@ class MediaUpload extends Component {
  this.onClose = this.onClose.bind( this );
 
  if ( gallery ) {
- const currentState = value ? 'gallery-edit' : 'gallery';
+ let currentState;
+ if ( addToGallery ) {
+ currentState = 'gallery-library';
+ } else {
+ currentState = value ? 'gallery-edit' : 'gallery';
+ }
  const GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
  const attachments = getAttachmentsCollection( value );
  const selection = new wp.media.model.Selection( attachments.models, {

diff --git a/packages/editor/src/components/media-upload/README.md b/packages/editor/src/components/media-upload/README.md
@@ -101,6 +101,17 @@ CSS class added to the media modal frame.
 - Type: `String`
 - Required: No
 
+
+### addToGallery
+
+If true the gallery media modal will open in directly in the media library where additional images can be added.
+If false the gallery media modal will open in the edit mode where existing images can be edited.
+Only applies if gallery = true.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 ## render
 
 A callback invoked to render the Button opening the media library.