From 711f64eae65197c0167f76bbf3d7ccc1835b5e85 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 10 Oct 2019 17:52:47 +0300 Subject: [PATCH 01/35] Extract gallery.js --- packages/block-library/src/gallery/edit.js | 74 +++--------- packages/block-library/src/gallery/gallery.js | 105 ++++++++++++++++++ 2 files changed, 119 insertions(+), 60 deletions(-) create mode 100644 packages/block-library/src/gallery/gallery.js diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index d4f51b1565cffe..958a6733e80f4e 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import classnames from 'classnames'; import { every, filter, @@ -26,19 +25,18 @@ import { BlockIcon, MediaPlaceholder, InspectorControls, - RichText, } from '@wordpress/block-editor'; import { Component } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { withSelect } from '@wordpress/data'; /** * Internal dependencies */ -import GalleryImage from './gallery-image'; import { icon } from './icons'; import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared'; +import Gallery from './gallery'; const MAX_COLUMNS = 8; const linkOptions = [ @@ -254,12 +252,9 @@ class GalleryEdit extends Component { className, isSelected, noticeUI, - setAttributes, } = this.props; const { - align, columns = defaultColumnsNumber( attributes ), - caption, imageCrop, images, linkTo, @@ -286,19 +281,13 @@ class GalleryEdit extends Component { value={ hasImagesWithId ? images : undefined } onError={ this.onUploadError } notices={ hasImages ? undefined : noticeUI } + onFocus={ this.props.onFocus } /> ); if ( ! hasImages ) { return mediaPlaceholder; } - - const captionClassNames = classnames( - 'blocks-gallery-caption', - { - 'screen-reader-text': ! isSelected && RichText.isEmpty( caption ), - } - ); return ( <> @@ -326,52 +315,17 @@ class GalleryEdit extends Component { { noticeUI } -
- - { mediaPlaceholder } - setAttributes( { caption: value } ) } - inlineToolbar - /> -
+ ); } diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js new file mode 100644 index 00000000000000..13784ee18897ab --- /dev/null +++ b/packages/block-library/src/gallery/gallery.js @@ -0,0 +1,105 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + RichText, +} from '@wordpress/block-editor'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import GalleryImage from './gallery-image'; +import { defaultColumnsNumber } from './shared'; + +export const Gallery = ( props ) => { + const { + galleryProps, + selectedImage, + mediaPlaceholder, + onMoveBackward, + onMoveForward, + onRemoveImage, + onSelectImage, + onSetImageAttributes, + onFocusGalleryCaption, + } = props; + + const { + attributes, + className, + isSelected, + setAttributes, + } = galleryProps; + + const { + align, + columns = defaultColumnsNumber( attributes ), + caption, + imageCrop, + images, + } = attributes; + + const captionClassNames = classnames( + 'blocks-gallery-caption', + { + 'screen-reader-text': ! isSelected && RichText.isEmpty( caption ), + } + ); + + return ( +
+
    + { images.map( ( img, index ) => { + /* translators: %1$d is the order number of the image, %2$d is the total number of images. */ + const ariaLabel = sprintf( __( 'image %1$d of %2$d in gallery' ), ( index + 1 ), images.length ); + + return ( +
  • + onSetImageAttributes( index, attrs ) } + caption={ img.caption } + aria-label={ ariaLabel } + /> +
    • + ); + } ) } +
+ { mediaPlaceholder } + setAttributes( { caption: value } ) } + inlineToolbar + /> +
+ ); +}; + +export default Gallery; From 22f558f5091a8f8dbebf53b06b248b143a3cb83b Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 16 Oct 2019 14:26:39 +1000 Subject: [PATCH 02/35] Refactor gallery to accept props more directly --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 958a6733e80f4e..fadc9a11808cd1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -316,7 +316,7 @@ class GalleryEdit extends Component { { noticeUI } Date: Fri, 25 Oct 2019 22:02:03 +1000 Subject: [PATCH 03/35] Use viewport HOC in gallery edit --- packages/block-library/src/gallery/edit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index fadc9a11808cd1..30b4f5a805342f 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -30,6 +30,7 @@ import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { withSelect } from '@wordpress/data'; +import { withViewportMatch } from '@wordpress/viewport'; /** * Internal dependencies @@ -337,4 +338,5 @@ export default compose( [ return { mediaUpload }; } ), withNotices, + withViewportMatch( { isMobile: '< small' } ), ] )( GalleryEdit ); From 1bded517eabd69ba247374c697225584287733a2 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 25 Oct 2019 22:02:31 +1000 Subject: [PATCH 04/35] Use cross-platform Platform module in gallery edit --- packages/block-library/src/gallery/edit.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 30b4f5a805342f..2c1d2df2ab59c3 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -26,7 +26,7 @@ import { MediaPlaceholder, InspectorControls, } from '@wordpress/block-editor'; -import { Component } from '@wordpress/element'; +import { Component, Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; import { withSelect } from '@wordpress/data'; @@ -264,6 +264,11 @@ class GalleryEdit extends Component { const hasImages = !! images.length; const hasImagesWithId = hasImages && some( images, ( { id } ) => id ); + const instructions = Platform.select( { + web: __( 'Drag images, upload new ones or select files from your library.' ), + native: __( 'Add media' ) + } ); + const mediaPlaceholder = ( } labels={ { title: ! hasImages && __( 'Gallery' ), - instructions: ! hasImages && __( 'Drag images, upload new ones or select files from your library.' ), + instructions: ! hasImages && instructions, } } onSelect={ this.onSelectImages } accept="image/*" From f8d06dd42be3b305a819eeac115c6527cf663cb0 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 29 Oct 2019 10:26:45 +1000 Subject: [PATCH 05/35] WIP - gallery edit - use icon prop with RangeControl --- packages/block-library/src/gallery/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 2c1d2df2ab59c3..33d92f1621b6a0 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -300,6 +300,7 @@ class GalleryEdit extends Component { { images.length > 1 && Date: Tue, 29 Oct 2019 11:45:21 +1000 Subject: [PATCH 06/35] Fix lint errors --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 33d92f1621b6a0..117c6af01be110 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -266,7 +266,7 @@ class GalleryEdit extends Component { const instructions = Platform.select( { web: __( 'Drag images, upload new ones or select files from your library.' ), - native: __( 'Add media' ) + native: __( 'Add media' ), } ); const mediaPlaceholder = ( From 76d8da6ba1baf6e94d16b5c58658f42e15939a8f Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 6 Nov 2019 15:03:03 +1000 Subject: [PATCH 07/35] Refactor gallery to accept props more directly --- packages/block-library/src/gallery/gallery.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js index 13784ee18897ab..2f1a53156c522f 100644 --- a/packages/block-library/src/gallery/gallery.js +++ b/packages/block-library/src/gallery/gallery.js @@ -19,7 +19,10 @@ import { defaultColumnsNumber } from './shared'; export const Gallery = ( props ) => { const { - galleryProps, + attributes, + className, + isSelected, + setAttributes, selectedImage, mediaPlaceholder, onMoveBackward, @@ -30,13 +33,6 @@ export const Gallery = ( props ) => { onFocusGalleryCaption, } = props; - const { - attributes, - className, - isSelected, - setAttributes, - } = galleryProps; - const { align, columns = defaultColumnsNumber( attributes ), From ae22614725aab10526b47b5049ca4b584e9896d0 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Thu, 10 Oct 2019 19:10:31 +0300 Subject: [PATCH 08/35] Add empty upload function for mobile gallery --- packages/editor/src/utils/index.native.js | 6 ++++++ packages/editor/src/utils/media-upload/index.native.js | 1 + 2 files changed, 7 insertions(+) create mode 100644 packages/editor/src/utils/media-upload/index.native.js diff --git a/packages/editor/src/utils/index.native.js b/packages/editor/src/utils/index.native.js index e69de29bb2d1d6..3a49f66b86c902 100644 --- a/packages/editor/src/utils/index.native.js +++ b/packages/editor/src/utils/index.native.js @@ -0,0 +1,6 @@ +/** + * Internal dependencies + */ +import mediaUpload from './media-upload'; + +export { mediaUpload }; diff --git a/packages/editor/src/utils/media-upload/index.native.js b/packages/editor/src/utils/media-upload/index.native.js new file mode 100644 index 00000000000000..9b7a53d3376d55 --- /dev/null +++ b/packages/editor/src/utils/media-upload/index.native.js @@ -0,0 +1 @@ +export default function() { } From abd295d3ac1d358fef055664c93d00baf34a8d72 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 12:59:26 +1000 Subject: [PATCH 09/35] Use all caps for gallery placeholder text on mobile --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 117c6af01be110..aab1d871958a0a 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -266,7 +266,7 @@ class GalleryEdit extends Component { const instructions = Platform.select( { web: __( 'Drag images, upload new ones or select files from your library.' ), - native: __( 'Add media' ), + native: __( 'ADD MEDIA' ), } ); const mediaPlaceholder = ( From a351eaa72a2d3178227c99bb19d34954c3f4e18a Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 13:00:36 +1000 Subject: [PATCH 10/35] Rename gallery instructions to placeholder text --- packages/block-library/src/gallery/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index aab1d871958a0a..1c227c54ccc1bc 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -264,7 +264,7 @@ class GalleryEdit extends Component { const hasImages = !! images.length; const hasImagesWithId = hasImages && some( images, ( { id } ) => id ); - const instructions = Platform.select( { + const placeholderText = Platform.select( { web: __( 'Drag images, upload new ones or select files from your library.' ), native: __( 'ADD MEDIA' ), } ); @@ -278,7 +278,7 @@ class GalleryEdit extends Component { icon={ ! hasImages && } labels={ { title: ! hasImages && __( 'Gallery' ), - instructions: ! hasImages && instructions, + instructions: ! hasImages && placeholderText, } } onSelect={ this.onSelectImages } accept="image/*" From 2b8c4ab0acfa465351dfdb0efa796c1def873d19 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 13:01:56 +1000 Subject: [PATCH 11/35] Extract BlockIcon to ./icon in gallery block --- packages/block-library/src/gallery/edit.js | 3 +-- packages/block-library/src/gallery/icons.js | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 1c227c54ccc1bc..2cd9381e95a222 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -22,7 +22,6 @@ import { withNotices, } from '@wordpress/components'; import { - BlockIcon, MediaPlaceholder, InspectorControls, } from '@wordpress/block-editor'; @@ -275,7 +274,7 @@ class GalleryEdit extends Component { isAppender={ hasImages } className={ className } disableMediaButtons={ hasImages && ! isSelected } - icon={ ! hasImages && } + icon={ ! hasImages && icon } labels={ { title: ! hasImages && __( 'Gallery' ), instructions: ! hasImages && placeholderText, diff --git a/packages/block-library/src/gallery/icons.js b/packages/block-library/src/gallery/icons.js index 3847732258b786..29dcfc63ef96f7 100644 --- a/packages/block-library/src/gallery/icons.js +++ b/packages/block-library/src/gallery/icons.js @@ -2,13 +2,15 @@ * WordPress dependencies */ import { G, Path, SVG } from '@wordpress/components'; +import { BlockIcon } from '@wordpress/block-editor'; -export const icon = ( +const svgIcon = ( ); +export const icon = ; export const leftArrow = ( From e89d33d2b379ca41880e788592902c39daf2bf7c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 13:07:02 +1000 Subject: [PATCH 12/35] Use withPreferredColorScheme HOC for mobile gallery icon --- .../block-library/src/gallery/icons.native.js | 24 +++++++++++++++++++ .../src/gallery/styles.native.scss | 7 ++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/block-library/src/gallery/icons.native.js create mode 100644 packages/block-library/src/gallery/styles.native.scss diff --git a/packages/block-library/src/gallery/icons.native.js b/packages/block-library/src/gallery/icons.native.js new file mode 100644 index 00000000000000..1e17c8758c8c04 --- /dev/null +++ b/packages/block-library/src/gallery/icons.native.js @@ -0,0 +1,24 @@ +/** + * WordPress dependencies + */ +import { Icon, G, Path, SVG } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import styles from './styles'; + +const svgIcon = ( + + + + +); + +const IconWithColorScheme = withPreferredColorScheme( ( { getStylesFromColorScheme } ) => { + const colorSchemeStyles = getStylesFromColorScheme( styles.icon, styles.iconDark ); + return ; +} ); + +export const icon = ; diff --git a/packages/block-library/src/gallery/styles.native.scss b/packages/block-library/src/gallery/styles.native.scss new file mode 100644 index 00000000000000..f5c00393677262 --- /dev/null +++ b/packages/block-library/src/gallery/styles.native.scss @@ -0,0 +1,7 @@ +.icon { + fill: $gray-dark; +} + +.iconDark { + fill: $white; +} From 55170b952b816b3fa2623c90b186501089471904 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 13:16:43 +1000 Subject: [PATCH 13/35] Fix js lint --- packages/block-library/src/gallery/edit.js | 2 +- packages/block-library/src/gallery/icons.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 2cd9381e95a222..7a31268567403b 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -274,7 +274,7 @@ class GalleryEdit extends Component { isAppender={ hasImages } className={ className } disableMediaButtons={ hasImages && ! isSelected } - icon={ ! hasImages && icon } + icon={ ! hasImages && icon } labels={ { title: ! hasImages && __( 'Gallery' ), instructions: ! hasImages && placeholderText, diff --git a/packages/block-library/src/gallery/icons.native.js b/packages/block-library/src/gallery/icons.native.js index 1e17c8758c8c04..ce12c49c5ec37d 100644 --- a/packages/block-library/src/gallery/icons.native.js +++ b/packages/block-library/src/gallery/icons.native.js @@ -3,7 +3,7 @@ */ import { Icon, G, Path, SVG } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; - + /** * Internal dependencies */ From 4c6d65c8921245f7d8d48dbe035bd33a33ec95d6 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 12 Nov 2019 15:11:19 +1000 Subject: [PATCH 14/35] Add isNarrow flag below large breakpoint in gallery --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 7a31268567403b..34df9ebafaa418 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -343,5 +343,5 @@ export default compose( [ return { mediaUpload }; } ), withNotices, - withViewportMatch( { isMobile: '< small' } ), + withViewportMatch( { isMobile: '< small', isNarrow: '< large' } ), ] )( GalleryEdit ); From 67023083bbcbc2d89a5d43dd1143dcfe24ad44ba Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 13 Nov 2019 14:07:25 +1000 Subject: [PATCH 15/35] Fix shared icon extraction for web --- packages/block-library/src/gallery/edit.js | 4 ++-- packages/block-library/src/gallery/icons.js | 4 +--- .../block-library/src/gallery/icons.native.js | 24 ------------------- .../block-library/src/gallery/shared-icon.js | 11 +++++++++ .../src/gallery/shared-icon.native.js | 18 ++++++++++++++ 5 files changed, 32 insertions(+), 29 deletions(-) delete mode 100644 packages/block-library/src/gallery/icons.native.js create mode 100644 packages/block-library/src/gallery/shared-icon.js create mode 100644 packages/block-library/src/gallery/shared-icon.native.js diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 34df9ebafaa418..27a985edd63932 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -34,7 +34,7 @@ import { withViewportMatch } from '@wordpress/viewport'; /** * Internal dependencies */ -import { icon } from './icons'; +import { sharedIcon } from './shared-icon'; import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared'; import Gallery from './gallery'; @@ -274,7 +274,7 @@ class GalleryEdit extends Component { isAppender={ hasImages } className={ className } disableMediaButtons={ hasImages && ! isSelected } - icon={ ! hasImages && icon } + icon={ ! hasImages && sharedIcon } labels={ { title: ! hasImages && __( 'Gallery' ), instructions: ! hasImages && placeholderText, diff --git a/packages/block-library/src/gallery/icons.js b/packages/block-library/src/gallery/icons.js index 29dcfc63ef96f7..3847732258b786 100644 --- a/packages/block-library/src/gallery/icons.js +++ b/packages/block-library/src/gallery/icons.js @@ -2,15 +2,13 @@ * WordPress dependencies */ import { G, Path, SVG } from '@wordpress/components'; -import { BlockIcon } from '@wordpress/block-editor'; -const svgIcon = ( +export const icon = ( ); -export const icon = ; export const leftArrow = ( diff --git a/packages/block-library/src/gallery/icons.native.js b/packages/block-library/src/gallery/icons.native.js deleted file mode 100644 index ce12c49c5ec37d..00000000000000 --- a/packages/block-library/src/gallery/icons.native.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { Icon, G, Path, SVG } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import styles from './styles'; - -const svgIcon = ( - - - - -); - -const IconWithColorScheme = withPreferredColorScheme( ( { getStylesFromColorScheme } ) => { - const colorSchemeStyles = getStylesFromColorScheme( styles.icon, styles.iconDark ); - return ; -} ); - -export const icon = ; diff --git a/packages/block-library/src/gallery/shared-icon.js b/packages/block-library/src/gallery/shared-icon.js new file mode 100644 index 00000000000000..68ec4aa0f75dda --- /dev/null +++ b/packages/block-library/src/gallery/shared-icon.js @@ -0,0 +1,11 @@ +/** + * WordPress dependencies + */ +import { BlockIcon } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { icon } from './icons.js'; + +export const sharedIcon = ; diff --git a/packages/block-library/src/gallery/shared-icon.native.js b/packages/block-library/src/gallery/shared-icon.native.js new file mode 100644 index 00000000000000..2e4d8cb20ed252 --- /dev/null +++ b/packages/block-library/src/gallery/shared-icon.native.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { Icon } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { icon } from './icons.js'; +import styles from './styles'; + +const IconWithColorScheme = withPreferredColorScheme( ( { getStylesFromColorScheme } ) => { + const colorSchemeStyles = getStylesFromColorScheme( styles.icon, styles.iconDark ); + return ; +} ); + +export const sharedIcon = ; From a8100e1e937e75abd2ad5b9fa2369033dfa8cfd1 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 15 Nov 2019 16:30:04 +1000 Subject: [PATCH 16/35] Remove RangeControl icon from gallery edit --- packages/block-library/src/gallery/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 27a985edd63932..3a3aa6c7fee2d2 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -299,7 +299,6 @@ class GalleryEdit extends Component { { images.length > 1 && Date: Fri, 15 Nov 2019 16:30:27 +1000 Subject: [PATCH 17/35] WIP - use fullWidth separatorType for gallery controls --- packages/block-library/src/gallery/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 3a3aa6c7fee2d2..ff32c5034316d1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -299,6 +299,7 @@ class GalleryEdit extends Component { { images.length > 1 && } Date: Tue, 19 Nov 2019 21:55:25 +1000 Subject: [PATCH 18/35] Add experimental force blur on unmount prop to RichText wrapper --- packages/block-editor/src/components/rich-text/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 7a73ef6427e7ac..9a71fd1f09e60e 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -345,6 +345,8 @@ class RichTextWrapper extends Component { identifier, // eslint-disable-next-line no-unused-vars instanceId, + // eslint-disable-next-line no-unused-vars + __experimentalForceBlurOnUnmount, // To do: find a better way to implicitly inherit props. start, reversed, @@ -466,6 +468,7 @@ const RichTextContainer = compose( [ instanceId, identifier = instanceId, isSelected, + __experimentalForceBlurOnUnmount, } ) => { const { isCaretWithinFormattedText, @@ -496,7 +499,8 @@ const RichTextContainer = compose( [ // In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case. // This apparently assumes functionality the BlockHlder actually const block = clientId && __unstableGetBlockWithoutInnerBlocks( clientId ); - const shouldBlurOnUnmount = block && isSelected && isUnmodifiedDefaultBlock( block ); + const isBeingReplaced = block && isSelected && isUnmodifiedDefaultBlock( block ); + const shouldBlurOnUnmount = __experimentalForceBlurOnUnmount || isBeingReplaced; extraProps = { shouldBlurOnUnmount, }; From c142269cdbfbfeae3fed1c93cfe5b2534287a3cb Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 21 Nov 2019 15:17:17 +1000 Subject: [PATCH 19/35] Revert "Add experimental force blur on unmount prop to RichText wrapper" This reverts commit 2eac8cb0ff22bf170c8df9c648093ea9776096b9. --- packages/block-editor/src/components/rich-text/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 9a71fd1f09e60e..7a73ef6427e7ac 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -345,8 +345,6 @@ class RichTextWrapper extends Component { identifier, // eslint-disable-next-line no-unused-vars instanceId, - // eslint-disable-next-line no-unused-vars - __experimentalForceBlurOnUnmount, // To do: find a better way to implicitly inherit props. start, reversed, @@ -468,7 +466,6 @@ const RichTextContainer = compose( [ instanceId, identifier = instanceId, isSelected, - __experimentalForceBlurOnUnmount, } ) => { const { isCaretWithinFormattedText, @@ -499,8 +496,7 @@ const RichTextContainer = compose( [ // In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case. // This apparently assumes functionality the BlockHlder actually const block = clientId && __unstableGetBlockWithoutInnerBlocks( clientId ); - const isBeingReplaced = block && isSelected && isUnmodifiedDefaultBlock( block ); - const shouldBlurOnUnmount = __experimentalForceBlurOnUnmount || isBeingReplaced; + const shouldBlurOnUnmount = block && isSelected && isUnmodifiedDefaultBlock( block ); extraProps = { shouldBlurOnUnmount, }; From b7c5dbb844dea9579e1d2fa16f0e2dded88f4376 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 21 Nov 2019 15:55:52 +1000 Subject: [PATCH 20/35] Put upload media options behind __DEV__ flag for multiple=true --- .../src/components/media-upload/index.native.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index e25885c73503bb..19d8780824b23d 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -86,7 +86,14 @@ export class MediaUpload extends React.Component { } getMediaOptionsItems() { - const { allowedTypes = [] } = this.props; + const { allowedTypes = [], multiple = false } = this.props; + + // disable upload sources for now when multiple flag is set + if ( ! __DEV__ ) { + if ( allowedTypes.includes( MEDIA_TYPE_IMAGE ) && multiple ) { + return [ siteLibrarySource ]; + } + } return this.getAllSources().filter( ( source ) => { return allowedTypes.filter( ( allowedType ) => source.types.includes( allowedType ) ).length > 0; From c7864e78494957314533febb94c04030dd7f0661 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 21 Nov 2019 16:06:30 +1000 Subject: [PATCH 21/35] Fix lint --- .../block-editor/src/components/media-upload/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js index 19d8780824b23d..72a337cc921bd1 100644 --- a/packages/block-editor/src/components/media-upload/index.native.js +++ b/packages/block-editor/src/components/media-upload/index.native.js @@ -89,6 +89,7 @@ export class MediaUpload extends React.Component { const { allowedTypes = [], multiple = false } = this.props; // disable upload sources for now when multiple flag is set + // eslint-disable-next-line no-undef if ( ! __DEV__ ) { if ( allowedTypes.includes( MEDIA_TYPE_IMAGE ) && multiple ) { return [ siteLibrarySource ]; From 971f725d4ae53702bec0c240ede6b9452fb5517e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 25 Nov 2019 22:11:28 +1000 Subject: [PATCH 22/35] Limit mediaUpload in blobURL check to web --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ff32c5034316d1..b2598ae1e38d88 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -225,7 +225,7 @@ class GalleryEdit extends Component { componentDidMount() { const { attributes, mediaUpload } = this.props; const { images } = attributes; - if ( every( images, ( { url } ) => isBlobURL( url ) ) ) { + if ( Platform.OS === 'web' && every( images, ( { url } ) => isBlobURL( url ) ) ) { const filesList = map( images, ( { url } ) => getBlobByURL( url ) ); forEach( images, ( { url } ) => revokeBlobURL( url ) ); mediaUpload( { From a9f3651ee36224dff638d6f2fbd31272a860bdac Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 28 Nov 2019 15:31:53 +1000 Subject: [PATCH 23/35] Fix scss imports for jest --- packages/block-library/src/gallery/shared-icon.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/shared-icon.native.js b/packages/block-library/src/gallery/shared-icon.native.js index 2e4d8cb20ed252..30ccbf2929dc5e 100644 --- a/packages/block-library/src/gallery/shared-icon.native.js +++ b/packages/block-library/src/gallery/shared-icon.native.js @@ -8,7 +8,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; * Internal dependencies */ import { icon } from './icons.js'; -import styles from './styles'; +import styles from './styles.scss'; const IconWithColorScheme = withPreferredColorScheme( ( { getStylesFromColorScheme } ) => { const colorSchemeStyles = getStylesFromColorScheme( styles.icon, styles.iconDark ); From 25cf16d5ab2bd48f3e215b554935c7636b9ca351 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 28 Nov 2019 15:52:57 +1000 Subject: [PATCH 24/35] Temporarily enable travis for this branch --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 6c45e2f36b27b6..cb2148a260ae35 100644 --- a/.travis.yml +++ b/.travis.yml @@ -22,6 +22,7 @@ branches: - master - rnmobile/master - rnmobile/releases + - try/gallery-draft-extract-gallery - /wp\/.*/ env: From 39af5ad1f847abbaee361857f1dc4ac2818cb2f4 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 29 Nov 2019 10:23:18 +1000 Subject: [PATCH 25/35] Extract placeholderText to static constant at top of gallery edit --- packages/block-library/src/gallery/edit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index b2598ae1e38d88..386d73096808e6 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -46,6 +46,11 @@ const linkOptions = [ ]; const ALLOWED_MEDIA_TYPES = [ 'image' ]; +const PLACEHOLDER_TEXT = Platform.select( { + web: __( 'Drag images, upload new ones or select files from your library.' ), + native: __( 'ADD MEDIA' ), +} ); + class GalleryEdit extends Component { constructor() { super( ...arguments ); @@ -263,11 +268,6 @@ class GalleryEdit extends Component { const hasImages = !! images.length; const hasImagesWithId = hasImages && some( images, ( { id } ) => id ); - const placeholderText = Platform.select( { - web: __( 'Drag images, upload new ones or select files from your library.' ), - native: __( 'ADD MEDIA' ), - } ); - const mediaPlaceholder = ( Date: Fri, 29 Nov 2019 10:27:46 +1000 Subject: [PATCH 26/35] Extract separatorType to static constant at top of gallery edit --- packages/block-library/src/gallery/edit.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 386d73096808e6..9224c2a01cf2d1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -51,6 +51,12 @@ const PLACEHOLDER_TEXT = Platform.select( { native: __( 'ADD MEDIA' ), } ); +const SEPARATOR_TYPE = Platform.select( { + web: undefined, + native: 'fullWidth', +} ); + + class GalleryEdit extends Component { constructor() { super( ...arguments ); @@ -299,7 +305,7 @@ class GalleryEdit extends Component { { images.length > 1 && } Date: Fri, 29 Nov 2019 10:49:04 +1000 Subject: [PATCH 27/35] Remove separatorType prop from web gallery controls --- packages/block-library/src/gallery/edit.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 9224c2a01cf2d1..f88ad2e950b91b 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -51,12 +51,13 @@ const PLACEHOLDER_TEXT = Platform.select( { native: __( 'ADD MEDIA' ), } ); -const SEPARATOR_TYPE = Platform.select( { - web: undefined, - native: 'fullWidth', +// currently this is needed for consistent controls UI on mobile +// this can be removed after control components settle on consistent defaults +const MOBILE_CONTROL_PROPS = Platform.select( { + web: {}, + native: { separatorType: 'fullWidth' }, } ); - class GalleryEdit extends Component { constructor() { super( ...arguments ); @@ -305,7 +306,7 @@ class GalleryEdit extends Component { { images.length > 1 && } Date: Tue, 3 Dec 2019 15:38:29 +1000 Subject: [PATCH 28/35] Use isNarrow flag in withViewportMatch HOC for gallery edit --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index f88ad2e950b91b..2a5767b71be071 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -352,5 +352,5 @@ export default compose( [ return { mediaUpload }; } ), withNotices, - withViewportMatch( { isMobile: '< small', isNarrow: '< large' } ), + withViewportMatch( { isNarrow: '< small' } ), ] )( GalleryEdit ); From c6d502685743081634036437d700c070ef2a6edb Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 5 Dec 2019 11:13:37 +1000 Subject: [PATCH 29/35] Enable mobile gallery behind __DEV__ flag --- packages/block-library/src/index.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 22e534fb2669e5..8fa2cf849bb66b 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -151,6 +151,8 @@ export const registerCoreBlocks = () => { // eslint-disable-next-line no-undef !! __DEV__ ? group : null, spacer, + // eslint-disable-next-line no-undef + !! __DEV__ ? gallery : null, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); From 6f7d35f36902b8a0ea972056e68be5e4b23b4b14 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 5 Dec 2019 11:58:57 +1000 Subject: [PATCH 30/35] Skip blob url handling in gallery when images array is empty --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 2a5767b71be071..86d96a82d427a4 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -237,7 +237,7 @@ class GalleryEdit extends Component { componentDidMount() { const { attributes, mediaUpload } = this.props; const { images } = attributes; - if ( Platform.OS === 'web' && every( images, ( { url } ) => isBlobURL( url ) ) ) { + if ( images.length && every( images, ( { url } ) => isBlobURL( url ) ) ) { const filesList = map( images, ( { url } ) => getBlobByURL( url ) ); forEach( images, ( { url } ) => revokeBlobURL( url ) ); mediaUpload( { From 870dac34b27e342ba92523b384b938df5fb17d00 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 5 Dec 2019 15:49:18 +1000 Subject: [PATCH 31/35] Remove top-level mobile gallery PR from Travis branches --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index cb2148a260ae35..6c45e2f36b27b6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -22,7 +22,6 @@ branches: - master - rnmobile/master - rnmobile/releases - - try/gallery-draft-extract-gallery - /wp\/.*/ env: From 6ac5b184536cbf17de6743091bd8869900bb3729 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Wed, 4 Dec 2019 13:05:40 +0300 Subject: [PATCH 32/35] Fix accessibility on gallery --- .../src/gallery/gallery-image.native.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js index 38623d565e3391..60d6138521c5fd 100644 --- a/packages/block-library/src/gallery/gallery-image.native.js +++ b/packages/block-library/src/gallery/gallery-image.native.js @@ -6,13 +6,14 @@ import { requestImageFailedRetryDialog, requestImageUploadCancelDialog, } from 'react-native-gutenberg-bridge'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies */ import { Component } from '@wordpress/element'; import { Icon } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { RichText, MediaUploadProgress } from '@wordpress/block-editor'; import { isURL } from '@wordpress/url'; import { withPreferredColorScheme } from '@wordpress/compose'; @@ -258,7 +259,7 @@ class GalleryImage extends Component { } render() { - const { id, onRemove, getStylesFromColorScheme } = this.props; + const { id, onRemove, getStylesFromColorScheme, isSelected } = this.props; const containerStyle = getStylesFromColorScheme( style.galleryImageContainer, style.galleryImageContainerDark ); @@ -266,6 +267,9 @@ class GalleryImage extends Component { return ( ); } + + accessibilityLabelImageContainer() { + const { caption, 'aria-label': ariaLabel } = this.props; + + return isEmpty( caption ) ? ariaLabel : ( ariaLabel + '. ' + sprintf( + /* translators: accessibility text. %s: image caption. */ + __( 'Image caption. %s' ), caption + ) ); + } } export default withPreferredColorScheme( GalleryImage ); From 70e9e640a219fed294603d285f9972ecf897cf41 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 6 Dec 2019 11:42:40 +1000 Subject: [PATCH 33/35] Revert "Skip blob url handling in gallery when images array is empty" This reverts commit 6f7d35f36902b8a0ea972056e68be5e4b23b4b14. --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 86d96a82d427a4..2a5767b71be071 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -237,7 +237,7 @@ class GalleryEdit extends Component { componentDidMount() { const { attributes, mediaUpload } = this.props; const { images } = attributes; - if ( images.length && every( images, ( { url } ) => isBlobURL( url ) ) ) { + if ( Platform.OS === 'web' && every( images, ( { url } ) => isBlobURL( url ) ) ) { const filesList = map( images, ( { url } ) => getBlobByURL( url ) ); forEach( images, ( { url } ) => revokeBlobURL( url ) ); mediaUpload( { From 9024c49ed57b29e38a2a3fddb27014b02c49a320 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 6 Dec 2019 11:45:14 +1000 Subject: [PATCH 34/35] Enable mobile gallery block in production --- packages/block-library/src/index.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 8fa2cf849bb66b..bdfc5cbb0fabf6 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -146,13 +146,12 @@ export const registerCoreBlocks = () => { list, quote, mediaText, + gallery, // eslint-disable-next-line no-undef ( ( Platform.OS === 'ios' ) || ( !! __DEV__ ) ) ? preformatted : null, // eslint-disable-next-line no-undef !! __DEV__ ? group : null, spacer, - // eslint-disable-next-line no-undef - !! __DEV__ ? gallery : null, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); From 853f4dd1a69bc3d33752253ae73ca46449aa0863 Mon Sep 17 00:00:00 2001 From: Pinar Olguc Date: Fri, 6 Dec 2019 13:59:42 +0300 Subject: [PATCH 35/35] Avoid adding duplicate images --- .../src/components/media-placeholder/index.native.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 2e375ec1684833..e120c53daf2c01 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { View, Text, TouchableWithoutFeedback } from 'react-native'; -import { uniqBy } from 'lodash'; +import { uniqWith } from 'lodash'; /** * WordPress dependencies @@ -36,7 +36,9 @@ function MediaPlaceholder( props ) { } = props; const setMedia = multiple && addToGallery ? - ( selected ) => onSelect( uniqBy( [ ...value, ...selected ], 'id' ) ) : + ( selected ) => onSelect( uniqWith( [ ...value, ...selected ], ( media1, media2 ) => { + return media1.id === media2.id || media1.url === media2.url; + } ) ) : onSelect; const isOneType = allowedTypes.length === 1;