From 1521f52276d294b9b5ad3734165204b7b5198dbc Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 26 Apr 2021 15:46:05 +1000 Subject: [PATCH 01/40] Move native v1 Gallery components to v1 directory --- .../block-library/src/gallery/{ => v1}/gallery-button.native.js | 0 .../src/gallery/{ => v1}/gallery-image-style.native.scss | 0 .../block-library/src/gallery/{ => v1}/gallery-image.native.js | 0 .../src/gallery/{ => v1}/gallery-styles.native.scss | 0 packages/block-library/src/gallery/{ => v1}/gallery.native.js | 2 +- .../block-library/src/gallery/{ => v1}/tiles-styles.native.scss | 0 packages/block-library/src/gallery/{ => v1}/tiles.native.js | 0 7 files changed, 1 insertion(+), 1 deletion(-) rename packages/block-library/src/gallery/{ => v1}/gallery-button.native.js (100%) rename packages/block-library/src/gallery/{ => v1}/gallery-image-style.native.scss (100%) rename packages/block-library/src/gallery/{ => v1}/gallery-image.native.js (100%) rename packages/block-library/src/gallery/{ => v1}/gallery-styles.native.scss (100%) rename packages/block-library/src/gallery/{ => v1}/gallery.native.js (98%) rename packages/block-library/src/gallery/{ => v1}/tiles-styles.native.scss (100%) rename packages/block-library/src/gallery/{ => v1}/tiles.native.js (100%) diff --git a/packages/block-library/src/gallery/gallery-button.native.js b/packages/block-library/src/gallery/v1/gallery-button.native.js similarity index 100% rename from packages/block-library/src/gallery/gallery-button.native.js rename to packages/block-library/src/gallery/v1/gallery-button.native.js diff --git a/packages/block-library/src/gallery/gallery-image-style.native.scss b/packages/block-library/src/gallery/v1/gallery-image-style.native.scss similarity index 100% rename from packages/block-library/src/gallery/gallery-image-style.native.scss rename to packages/block-library/src/gallery/v1/gallery-image-style.native.scss diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/v1/gallery-image.native.js similarity index 100% rename from packages/block-library/src/gallery/gallery-image.native.js rename to packages/block-library/src/gallery/v1/gallery-image.native.js diff --git a/packages/block-library/src/gallery/gallery-styles.native.scss b/packages/block-library/src/gallery/v1/gallery-styles.native.scss similarity index 100% rename from packages/block-library/src/gallery/gallery-styles.native.scss rename to packages/block-library/src/gallery/v1/gallery-styles.native.scss diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/v1/gallery.native.js similarity index 98% rename from packages/block-library/src/gallery/gallery.native.js rename to packages/block-library/src/gallery/v1/gallery.native.js index 32cb689f1a6336..623ebbaa11190f 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/v1/gallery.native.js @@ -8,7 +8,7 @@ import { isEmpty } from 'lodash'; * Internal dependencies */ import GalleryImage from './gallery-image'; -import { defaultColumnsNumber } from './shared'; +import { defaultColumnsNumber } from '../shared'; import styles from './gallery-styles.scss'; import Tiles from './tiles'; diff --git a/packages/block-library/src/gallery/tiles-styles.native.scss b/packages/block-library/src/gallery/v1/tiles-styles.native.scss similarity index 100% rename from packages/block-library/src/gallery/tiles-styles.native.scss rename to packages/block-library/src/gallery/v1/tiles-styles.native.scss diff --git a/packages/block-library/src/gallery/tiles.native.js b/packages/block-library/src/gallery/v1/tiles.native.js similarity index 100% rename from packages/block-library/src/gallery/tiles.native.js rename to packages/block-library/src/gallery/v1/tiles.native.js From 86398913746af5a8aa4cf5dff57106dfab8bc92e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 26 Apr 2021 18:18:05 +1000 Subject: [PATCH 02/40] Use v1 defaultColumnsNumber in native v1 gallery --- packages/block-library/src/gallery/v1/gallery.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/v1/gallery.native.js b/packages/block-library/src/gallery/v1/gallery.native.js index 623ebbaa11190f..a6c2b9c6f62d9b 100644 --- a/packages/block-library/src/gallery/v1/gallery.native.js +++ b/packages/block-library/src/gallery/v1/gallery.native.js @@ -8,7 +8,7 @@ import { isEmpty } from 'lodash'; * Internal dependencies */ import GalleryImage from './gallery-image'; -import { defaultColumnsNumber } from '../shared'; +import { defaultColumnsNumberV1 } from '../deprecated'; import styles from './gallery-styles.scss'; import Tiles from './tiles'; @@ -61,7 +61,7 @@ export const Gallery = ( props ) => { const { align, - columns = defaultColumnsNumber( attributes ), + columns = defaultColumnsNumberV1( attributes ), imageCrop, images, } = attributes; From 91c09b8cc2ac26d398ea6cd2ca96d78d659cf20a Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 27 Apr 2021 18:56:58 +1000 Subject: [PATCH 03/40] Make onFocus optional in MediaPlaceholder --- .../src/components/media-placeholder/index.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 1193b8a4122d4e..5b1c588c54e02b 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -38,6 +38,7 @@ function MediaPlaceholder( props ) { labels = {}, icon, onSelect, + onFocus, __experimentalOnlyMediaLibrary, isAppender, disableMediaButtons, @@ -171,7 +172,7 @@ function MediaPlaceholder( props ) { accessibilityRole={ 'button' } accessibilityHint={ accessibilityHint } onPress={ ( event ) => { - props.onFocus( event ); + onFocus?.( event ); open(); } } > From ffc22e7beef0ebf858ece6ad84742b7f51fb79b9 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 27 Apr 2021 18:57:39 +1000 Subject: [PATCH 04/40] Add useInnerBlocksProps hook --- .../src/components/index.native.js | 5 ++- .../components/inner-blocks/index.native.js | 41 +++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 29449bb0a0843d..099ee78bfee765 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -18,7 +18,10 @@ export * from './colors'; export * from './gradients'; export * from './font-sizes'; export { AlignmentControl, AlignmentToolbar } from './alignment-control'; -export { default as InnerBlocks } from './inner-blocks'; +export { + default as InnerBlocks, + useInnerBlocksProps as __experimentalUseInnerBlocksProps, +} from './inner-blocks'; export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; export { default as InspectorControls } from './inspector-controls'; export { diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 0b9401425e8640..50297a561853a9 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -3,6 +3,7 @@ */ import { useSelect } from '@wordpress/data'; import { getBlockType, withBlockContentContext } from '@wordpress/blocks'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies @@ -23,6 +24,44 @@ import { BlockContextProvider } from '../block-context'; import { defaultLayout, LayoutProvider } from '../block-list/layout'; import { store as blockEditorStore } from '../../store'; +/** + * This hook is used to lightly mark an element as an inner blocks wrapper + * element. Call this hook and pass the returned props to the element to mark as + * an inner blocks wrapper, automatically rendering inner blocks as children. If + * you define a ref for the element, it is important to pass the ref to this + * hook, which the hook in turn will pass to the component through the props it + * returns. Optionally, you can also pass any other props through this hook, and + * they will be merged and returned. + * + * @param {Object} props Optional. Props to pass to the element. Must contain + * the ref if one is defined. + * @param {Object} options Optional. Inner blocks options. + * + * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md + */ +export function useInnerBlocksProps( props = {}, options = {} ) { + const fallbackRef = useRef(); + const { clientId } = useBlockEditContext(); + + const ref = props.ref || fallbackRef; + const InnerBlocks = + options.value && options.onChange + ? ControlledInnerBlocks + : UncontrolledInnerBlocks; + + return { + ...props, + ref, + children: ( + + ), + }; +} + /** * InnerBlocks is a component which allows a single block to have multiple blocks * as children. The UncontrolledInnerBlocks component is used whenever the inner @@ -53,6 +92,7 @@ function UncontrolledInnerBlocks( props ) { filterInnerBlocks, blockWidth, __experimentalLayout: layout = defaultLayout, + numColumns, } = props; const block = useSelect( @@ -87,6 +127,7 @@ function UncontrolledInnerBlocks( props ) { onDeleteBlock={ onDeleteBlock } filterInnerBlocks={ filterInnerBlocks } blockWidth={ blockWidth } + numColumns={ numColumns } /> ); From e688131085c6fada20c79281a6bc5ab8d3cc7c66 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 29 Apr 2021 11:50:17 +1000 Subject: [PATCH 05/40] Enable __experimentalGalleryRefactor flag under __DEV__ This is only temporary, for testing purposes. This will be replaced with an actual implementation (which will need to access the flag remotely). --- packages/block-editor/src/store/defaults.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js index 125ee6c85c1f42..bbafc0f71ac7da 100644 --- a/packages/block-editor/src/store/defaults.native.js +++ b/packages/block-editor/src/store/defaults.native.js @@ -8,6 +8,8 @@ import { const SETTINGS_DEFAULTS = { ...SETTINGS, + // eslint-disable-next-line no-undef + __experimentalGalleryRefactor: __DEV__, alignWide: true, }; From c8fbc3500d8022ea899a4fdccc373cfbdf90125b Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 29 Apr 2021 11:51:58 +1000 Subject: [PATCH 06/40] Add WIP v2 gallery --- .../src/gallery/gallery.native.js | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 packages/block-library/src/gallery/gallery.native.js diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js new file mode 100644 index 00000000000000..75986f80f9221e --- /dev/null +++ b/packages/block-library/src/gallery/gallery.native.js @@ -0,0 +1,79 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +import { isEmpty } from 'lodash'; + +/** + * Internal dependencies + */ +import { defaultColumnsNumber } from './shared'; +import styles from './v1/gallery-styles.scss'; + +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + BlockCaption, + __experimentalUseInnerBlocksProps as useInnerBlocksProps, +} from '@wordpress/block-editor'; +import { useState, useEffect } from '@wordpress/element'; +import { mediaUploadSync } from '@wordpress/react-native-bridge'; +import { useSelect } from '@wordpress/data'; +import { WIDE_ALIGNMENTS } from '@wordpress/components'; + +const TILE_SPACING = 15; + +// we must limit displayed columns since readable content max-width is 580px +const MAX_DISPLAYED_COLUMNS = 4; +const MAX_DISPLAYED_COLUMNS_NARROW = 2; + +export const Gallery = ( props ) => { + const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); + useEffect( mediaUploadSync, [] ); + + const isRTL = useSelect( ( select ) => { + return !! select( 'core/block-editor' ).getSettings().isRTL; + }, [] ); + + const { mediaPlaceholder, attributes, isNarrow } = props; + + const { + imageCount, + align, + columns = defaultColumnsNumber( imageCount ), + imageCrop, + } = attributes; + + const displayedColumns = Math.min( + columns, + isNarrow ? MAX_DISPLAYED_COLUMNS_NARROW : MAX_DISPLAYED_COLUMNS + ); + + const innerBlocksProps = useInnerBlocksProps( + { + className: 'blocks-gallery-grid', + }, + { + contentResizeMode: 'stretch', + allowedBlocks: [ 'core/image' ], + orientation: 'horizontal', + renderAppender: false, + numColumns: displayedColumns, + } + ); + + const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full; + + return ( + + + + { mediaPlaceholder } + + + ); +}; + +export default Gallery; From 2f44f58072cf32890836484da208f982685df2d9 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 29 Apr 2021 11:53:57 +1000 Subject: [PATCH 07/40] Add numColumns to block-list flat list --- .../src/components/block-list/index.native.js | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index c60163cf9a3bee..d71177abb7ee51 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -35,9 +35,10 @@ const stylesMemo = {}; const getStyles = ( isRootList, isStackedHorizontally, - horizontalAlignment + horizontalAlignment, + numColumns ) => { - if ( isRootList ) { + if ( isRootList || numColumns ) { return; } const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`; @@ -207,6 +208,7 @@ export class BlockList extends Component { horizontalAlignment, contentResizeMode, blockWidth, + numColumns, } = this.props; const { parentScrollRef } = extraProps; @@ -267,14 +269,19 @@ export class BlockList extends Component { ? styles.horizontalContentContainerStretch : styles.horizontalContentContainerCenter ), ] } - style={ getStyles( - isRootList, - isStackedHorizontally, - horizontalAlignment - ) } + style={ [ + getStyles( + isRootList, + isStackedHorizontally, + horizontalAlignment, + numColumns + ), + ] } data={ blockClientIds } keyExtractor={ identity } renderItem={ this.renderItem } + numColumns={ numColumns } + key={ numColumns } shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll } From 9fd5897b1245388d34b56da2f3379996aecad5c2 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 29 Apr 2021 11:54:29 +1000 Subject: [PATCH 08/40] Temporarily comment out spinner for pending imagesize option This will need to be addressed (since we can't have unwrapped text on mobile). For now, I'm commenting this out to proceed with cherry-picking the changes from the original mobile refactor branch. --- 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 83c9a1970dcbaf..e70201d1d776c0 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -490,7 +490,7 @@ function GalleryEdit( props ) { hideCancelButton={ true } /> ) } - { ! imageSizeOptions && ( + {/* { ! imageSizeOptions && ( { __( 'Image size' ) } @@ -500,7 +500,7 @@ function GalleryEdit( props ) { { __( 'Loading options…' ) } - ) } + ) } */} { noticeUI } From d646d59bde4b18aed5f33ab8214b27c09ea3eb9c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 29 Apr 2021 17:41:56 +1000 Subject: [PATCH 09/40] Fix spacing --- .../src/components/block-list/index.native.js | 34 ++++++++++--------- .../src/gallery/gallery.native.js | 12 +++---- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index d71177abb7ee51..287d63df06acf6 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -323,22 +323,24 @@ export class BlockList extends Component { } = this.props; const { blockWidth } = this.state; return ( - + + + ); } diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 75986f80f9221e..e614f4ea9bd127 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -23,7 +23,7 @@ import { mediaUploadSync } from '@wordpress/react-native-bridge'; import { useSelect } from '@wordpress/data'; import { WIDE_ALIGNMENTS } from '@wordpress/components'; -const TILE_SPACING = 15; +const TILE_SPACING = 8; // we must limit displayed columns since readable content max-width is 580px const MAX_DISPLAYED_COLUMNS = 4; @@ -61,17 +61,17 @@ export const Gallery = ( props ) => { orientation: 'horizontal', renderAppender: false, numColumns: displayedColumns, + marginHorizontal: TILE_SPACING, + marginVertical: TILE_SPACING, } ); const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full; return ( - - - - { mediaPlaceholder } - + + + { mediaPlaceholder } ); }; From 59ea0829ecc37e266a328cab33c454f945052a33 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 30 Apr 2021 16:58:40 +1000 Subject: [PATCH 10/40] Adjust styles to avoid appender overlap --- .../src/gallery/gallery-styles.native.scss | 5 +++++ packages/block-library/src/gallery/gallery.native.js | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 packages/block-library/src/gallery/gallery-styles.native.scss diff --git a/packages/block-library/src/gallery/gallery-styles.native.scss b/packages/block-library/src/gallery/gallery-styles.native.scss new file mode 100644 index 00000000000000..4263b6f5002403 --- /dev/null +++ b/packages/block-library/src/gallery/gallery-styles.native.scss @@ -0,0 +1,5 @@ +@import './v1/gallery-styles.native.scss'; + +.galleryAppender { + padding-top: 16px; +} \ No newline at end of file diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index e614f4ea9bd127..7eec45e42ae9d3 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -8,7 +8,7 @@ import { isEmpty } from 'lodash'; * Internal dependencies */ import { defaultColumnsNumber } from './shared'; -import styles from './v1/gallery-styles.scss'; +import styles from './gallery-styles.native.scss'; /** * WordPress dependencies @@ -71,7 +71,14 @@ export const Gallery = ( props ) => { return ( - { mediaPlaceholder } + + { mediaPlaceholder } + ); }; From 683af043de98b89b8f7cd9bf44be4d73d6d0e3f2 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 30 Apr 2021 17:17:42 +1000 Subject: [PATCH 11/40] Add gallery caption --- .../src/components/block-list/index.native.js | 24 ++++------ .../src/gallery/gallery.native.js | 47 ++++++++++++++----- 2 files changed, 45 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 287d63df06acf6..fd22446f413983 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -262,21 +262,15 @@ export class BlockList extends Component { horizontal={ horizontal } extraData={ this.getExtraData() } scrollEnabled={ isRootList } - contentContainerStyle={ [ - horizontal && styles.horizontalContentContainer, - isWider( blockWidth, 'medium' ) && - ( isContentStretch && isMultiBlocks - ? styles.horizontalContentContainerStretch - : styles.horizontalContentContainerCenter ), - ] } - style={ [ - getStyles( - isRootList, - isStackedHorizontally, - horizontalAlignment, - numColumns - ), - ] } + contentContainerStyle={ + horizontal && styles.horizontalContentContainer + } + style={ getStyles( + isRootList, + isStackedHorizontally, + horizontalAlignment, + numColumns + ) } data={ blockClientIds } keyExtractor={ identity } renderItem={ this.renderItem } diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 7eec45e42ae9d3..63dcaa5d52b143 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -8,7 +8,7 @@ import { isEmpty } from 'lodash'; * Internal dependencies */ import { defaultColumnsNumber } from './shared'; -import styles from './gallery-styles.native.scss'; +import styles from './gallery-styles.scss'; /** * WordPress dependencies @@ -20,7 +20,6 @@ import { } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; import { mediaUploadSync } from '@wordpress/react-native-bridge'; -import { useSelect } from '@wordpress/data'; import { WIDE_ALIGNMENTS } from '@wordpress/components'; const TILE_SPACING = 8; @@ -33,11 +32,14 @@ export const Gallery = ( props ) => { const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); useEffect( mediaUploadSync, [] ); - const isRTL = useSelect( ( select ) => { - return !! select( 'core/block-editor' ).getSettings().isRTL; - }, [] ); - - const { mediaPlaceholder, attributes, isNarrow } = props; + const { + mediaPlaceholder, + attributes, + isNarrow, + onBlur, + insertBlocksAfter, + clientId, + } = props; const { imageCount, @@ -52,9 +54,7 @@ export const Gallery = ( props ) => { ); const innerBlocksProps = useInnerBlocksProps( - { - className: 'blocks-gallery-grid', - }, + {}, { contentResizeMode: 'stretch', allowedBlocks: [ 'core/image' ], @@ -66,10 +66,16 @@ export const Gallery = ( props ) => { } ); + const focusGalleryCaption = () => { + if ( ! isCaptionSelected ) { + setIsCaptionSelected( true ); + } + }; + const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full; return ( - + { > { mediaPlaceholder } + + isEmpty( caption ) + ? /* translators: accessibility text. Empty gallery caption. */ + + 'Gallery caption. Empty' + : sprintf( + /* translators: accessibility text. %s: gallery caption. */ + __( 'Gallery caption. %s' ), + caption + ) + } + onFocus={ focusGalleryCaption } + onBlur={ onBlur } // always assign onBlur as props + insertBlocksAfter={ insertBlocksAfter } + /> ); }; From a52001874d854191b3343ac3302cf7edd69997ab Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 4 May 2021 12:12:10 +1000 Subject: [PATCH 12/40] Fix lint Some of these "fixes" are simply disabling lint for the offending lines. These currently unused variables may be used in a later PR, so I'm leaving them in, for now, to help simplify reconciling the changes from the former refactor PR. --- .../block-editor/src/components/block-list/index.native.js | 4 ++++ packages/block-library/src/gallery/edit.js | 6 ++++-- packages/block-library/src/gallery/gallery.native.js | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index fd22446f413983..71bdf217f1b50a 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -207,6 +207,7 @@ export class BlockList extends Component { isStackedHorizontally, horizontalAlignment, contentResizeMode, + // eslint-disable-next-line no-unused-vars blockWidth, numColumns, } = this.props; @@ -226,8 +227,11 @@ export class BlockList extends Component { marginHorizontal: isRootList ? 0 : -marginHorizontal, }; + // eslint-disable-next-line no-unused-vars const isContentStretch = contentResizeMode === 'stretch'; + // eslint-disable-next-line no-unused-vars const isMultiBlocks = blockClientIds.length > 1; + // eslint-disable-next-line no-unused-vars const { isWider } = alignmentHelpers; return ( diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e70201d1d776c0..2e0e82f767f285 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -9,12 +9,14 @@ import { concat, find } from 'lodash'; */ import { compose } from '@wordpress/compose'; import { + // eslint-disable-next-line no-unused-vars BaseControl, PanelBody, SelectControl, ToggleControl, withNotices, RangeControl, + // eslint-disable-next-line no-unused-vars Spinner, } from '@wordpress/components'; import { @@ -490,7 +492,7 @@ function GalleryEdit( props ) { hideCancelButton={ true } /> ) } - {/* { ! imageSizeOptions && ( + { /* { ! imageSizeOptions && ( { __( 'Image size' ) } @@ -500,7 +502,7 @@ function GalleryEdit( props ) { { __( 'Loading options…' ) } - ) } */} + ) } */ } { noticeUI } diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 63dcaa5d52b143..092308b0e18ccd 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -45,6 +45,7 @@ export const Gallery = ( props ) => { imageCount, align, columns = defaultColumnsNumber( imageCount ), + // eslint-disable-next-line no-unused-vars imageCrop, } = attributes; From 1f0073d29bc6f6ec39a38bb13ae4900ff850293c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 4 May 2021 15:12:42 +1000 Subject: [PATCH 13/40] Fix sass lint --- .../block-library/src/gallery/gallery-styles.native.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-styles.native.scss b/packages/block-library/src/gallery/gallery-styles.native.scss index 4263b6f5002403..ea986c8a573ccf 100644 --- a/packages/block-library/src/gallery/gallery-styles.native.scss +++ b/packages/block-library/src/gallery/gallery-styles.native.scss @@ -1,5 +1,5 @@ -@import './v1/gallery-styles.native.scss'; +@import "./v1/gallery-styles.native.scss"; .galleryAppender { - padding-top: 16px; -} \ No newline at end of file + padding-top: 16px; +} From 2c6e31770a9b36e5f2d5d8b724c28b040fee62b1 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 20 May 2021 13:01:03 +1000 Subject: [PATCH 14/40] [Mobile] - Refactor gallery - cherry pick image edit native (#31826) * WIP-commit bring image changes from final state of original mobile PR This has unresolved / unmarked conflicts which will be resolve in subsequent commits. I am separating the commit to make the resolution process more transparent. * Remove duplicate / conflicting methods from performance refactor * Use context for imageCrop and isGrouped instead of isGallery * Remove non-existent inheritedAttributes attribute * Remove dead code from non-existent context attributes * Remove unused attributes prop from link settings --- packages/block-library/src/gallery/block.json | 3 +- packages/block-library/src/image/block.json | 2 +- .../block-library/src/image/edit.native.js | 104 ++++++++++++------ .../src/image/styles.native.scss | 5 + 4 files changed, 78 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index fc22672c05ca0a..17ba42f95a2261 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -104,7 +104,8 @@ }, "providesContext": { "allowResize": "allowResize", - "isGrouped": "isGrouped" + "isGrouped": "isGrouped", + "imageCrop": "imageCrop", }, "supports": { "anchor": true, diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index b45588aa09cda4..7dbe7a328fe0bc 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -3,7 +3,7 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ "allowResize", "isGrouped" ], + "usesContext": [ "allowResize", "isGrouped", "imageCrop" ], "description": "Insert an image to make a visual statement.", "keywords": [ "img", "photo", "picture" ], "textdomain": "default", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index f8d3e96d67a9b4..56e428fdbac3ad 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -59,7 +59,11 @@ import { store as coreStore } from '@wordpress/core-data'; import styles from './styles.scss'; import { getUpdatedLinkTargetSettings } from './utils'; -import { LINK_DESTINATION_CUSTOM } from './constants'; +import { + LINK_DESTINATION_CUSTOM, + LINK_DESTINATION_ATTACHMENT, + LINK_DESTINATION_MEDIA, +} from './constants'; const getUrlForSlug = ( image, { sizeSlug } ) => { return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ); @@ -167,10 +171,10 @@ export class ImageEdit extends Component { } componentDidUpdate( previousProps ) { - if ( ! previousProps.image && this.props.image ) { - const { image, attributes } = this.props; + const { image, attributes, setAttributes } = this.props; + if ( ! previousProps.image && image ) { const url = getUrlForSlug( image, attributes ) || image.source_url; - this.props.setAttributes( { url } ); + setAttributes( { url } ); } } @@ -283,14 +287,13 @@ export class ImageEdit extends Component { } onSetSizeSlug( sizeSlug ) { - const { image } = this.props; + const { image, setAttributes } = this.props; const url = getUrlForSlug( image, { sizeSlug } ); if ( ! url ) { return null; } - - this.props.setAttributes( { + setAttributes( { url, width: undefined, height: undefined, @@ -299,11 +302,8 @@ export class ImageEdit extends Component { } onSelectMediaUploadOption( media ) { - const { - attributes: { id, url }, - imageDefaultSize, - } = this.props; - + const { imageDefaultSize } = this.props; + const { id, url, destination } = this.props.attributes; const mediaAttributes = { id: media.id, url: media.url, @@ -323,6 +323,17 @@ export class ImageEdit extends Component { additionalAttributes = { url }; } + let href; + switch ( destination ) { + case LINK_DESTINATION_MEDIA: + href = media.url; + break; + case LINK_DESTINATION_ATTACHMENT: + href = media.link; + break; + } + mediaAttributes.href = href; + this.props.setAttributes( { ...mediaAttributes, ...additionalAttributes, @@ -363,9 +374,17 @@ export class ImageEdit extends Component { setMappedAttributes( { url: href, ...restAttributes } ) { const { setAttributes } = this.props; + return href === undefined - ? setAttributes( restAttributes ) - : setAttributes( { ...restAttributes, href } ); + ? setAttributes( { + ...restAttributes, + linkDestination: LINK_DESTINATION_CUSTOM, + } ) + : setAttributes( { + ...restAttributes, + href, + linkDestination: LINK_DESTINATION_CUSTOM, + } ); } getLinkSettings() { @@ -373,7 +392,6 @@ export class ImageEdit extends Component { const { attributes: { href: url, ...unMappedAttributes }, } = this.props; - const mappedAttributes = { ...unMappedAttributes, url }; return ( @@ -438,6 +456,7 @@ export class ImageEdit extends Component { image, clientId, imageDefaultSize, + context: { isGrouped = false, imageCrop = false }, featuredImageId, wasBlockJustInserted, } = this.props; @@ -516,6 +535,13 @@ export class ImageEdit extends Component { wide: 'center', }; + const additionalImageProps = isGrouped + ? { + height: '100%', + resizeMode: imageCrop ? 'cover' : 'contain', + } + : {}; + const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( { return ( - { + + { + ); } } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 008a3500effbae..06445c1050366b 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -30,3 +30,8 @@ padding-right: 0; padding-bottom: $grid-unit; } + +.isGallery { + height: 150; + overflow: visible; +} From 3221e23e8568c95d3acac6fbbd4416838b5c0d3a Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 17:48:57 +1000 Subject: [PATCH 15/40] Cherry-pick BlockListItem changes Note: Since render was changed to renderContent, we should return early from render too, when blockWidth is falsey. --- .../block-list/block-list-item.native.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js index 206ac48892a99e..7eb14663371d89 100644 --- a/packages/block-editor/src/components/block-list/block-list-item.native.js +++ b/packages/block-editor/src/components/block-list/block-list-item.native.js @@ -16,6 +16,8 @@ import { ReadableContentView, alignmentHelpers } from '@wordpress/components'; */ import BlockListBlock from './block'; import BlockInsertionPoint from './insertion-point'; +import Grid from './grid-item'; + import styles from './block-list-item.native.scss'; import { store as blockEditorStore } from '../../store'; @@ -104,7 +106,7 @@ export class BlockListItem extends Component { ]; } - render() { + renderContent() { const { blockAlignment, clientId, @@ -162,6 +164,23 @@ export class BlockListItem extends Component { ); } + + render() { + const { gridProperties, clientId, parentWidth, items } = this.props; + if ( gridProperties ) { + return ( + + { this.renderContent() } + + ); + } + return this.renderContent(); + } } export default compose( [ From 7616231ca0ddacb05772f3219ade9786a0b74661 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 17:54:01 +1000 Subject: [PATCH 16/40] Return early from render instead of renderContent --- .../block-list/block-list-item.native.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js index 7eb14663371d89..b62d03a5f1fa16 100644 --- a/packages/block-editor/src/components/block-list/block-list-item.native.js +++ b/packages/block-editor/src/components/block-list/block-list-item.native.js @@ -125,10 +125,6 @@ export class BlockListItem extends Component { contentResizeMode === 'stretch' && stretchStyle; const { isContainerRelated } = alignmentHelpers; - if ( ! blockWidth ) { - return null; - } - return ( Date: Mon, 24 May 2021 18:07:40 +1000 Subject: [PATCH 17/40] Cherry-pick plumb blockProps through BlockListBlock I'm not sure yet whether it still makes sense to use blockProps in this way. I'm going to cherry-pick the commits by file, and sort out the need for this mechanism afterwards. --- packages/block-editor/src/components/block-list/block.native.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 6c576ebe95957a..8e15ea13dbae1f 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -48,6 +48,7 @@ function BlockForType( { parentWidth, wrapperProps, blockWidth, + blockProps, } ) { const defaultColors = useSetting( 'color.palette' ) || emptyArray; const globalStyle = useGlobalStyles(); @@ -89,6 +90,7 @@ function BlockForType( { contentStyle={ contentStyle } onDeleteBlock={ onDeleteBlock } blockWidth={ blockWidth } + { ...( blockProps || {} ) } /> From df286d8ecdce2e56edfc9cf956154ad7da4d048d Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 18:13:31 +1000 Subject: [PATCH 18/40] Cherry-pick add GridItem Since this is duplicated from the original mobile gallery code (Tiles component), it might make sense to export it for re-use. Previously, it was only moved, but now that we will maintain both versions, it has become a duplicate implementation. I will defer this to a later commit. --- .../block-list/block-list-item.native.scss | 4 ++ .../components/block-list/grid-item.native.js | 58 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 packages/block-editor/src/components/block-list/grid-item.native.js diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.scss b/packages/block-editor/src/components/block-list/block-list-item.native.scss index 8e2eca61430341..82baa74a07111a 100644 --- a/packages/block-editor/src/components/block-list/block-list-item.native.scss +++ b/packages/block-editor/src/components/block-list/block-list-item.native.scss @@ -10,3 +10,7 @@ .fullAlignmentPadding { padding: $block-edge-to-content; } + +.gridItem { + overflow: visible; +} diff --git a/packages/block-editor/src/components/block-list/grid-item.native.js b/packages/block-editor/src/components/block-list/grid-item.native.js new file mode 100644 index 00000000000000..053b3ecfe90d5d --- /dev/null +++ b/packages/block-editor/src/components/block-list/grid-item.native.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './block-list-item.scss'; + +function Grid( props ) { + /** + * Since we don't have `calc()`, we must calculate our spacings here in + * order to preserve even spacing between tiles and equal width for tiles + * in a given row. + * + * In order to ensure equal sizing of tile contents, we distribute the + * spacing such that each tile has an equal "share" of the fixed spacing. To + * keep the tiles properly aligned within their rows, we calculate the left + * and right paddings based on the tile's relative position within the row. + * + * Note: we use padding instead of margins so that the fixed spacing is + * included within the relative spacing (i.e. width percentage), and + * wrapping behavior is preserved. + * + * - The left most tile in a row must have left padding of zero. + * - The right most tile in a row must have a right padding of zero. + * + * The values of these left and right paddings are interpolated for tiles in + * between. The right padding is complementary with the left padding of the + * next tile (i.e. the right padding of [tile n] + the left padding of + * [tile n + 1] will be equal for all tiles except the last one in a given + * row). + * + */ + const { numOfColumns, children, tileCount, index, maxWidth } = props; + const lastTile = tileCount - 1; + const lastRow = Math.floor( lastTile / numOfColumns ); + + const row = Math.floor( index / numOfColumns ); + const rowLength = + row === lastRow ? ( lastTile % numOfColumns ) + 1 : numOfColumns; + + return ( + + { children } + + ); +} + +export default Grid; From f5ff38d9ae8d2905e0c996e7029b79466ec44814 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 18:45:22 +1000 Subject: [PATCH 19/40] Cherry-pick BlockList Similar to blockProps mentioned earlier, gridProperties will be evaluated after cherry-picking the relevant changes, to see if there is another mechanism that may be more appropriate. --- .../src/components/block-list/index.native.js | 49 ++++++++++++------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 71bdf217f1b50a..8c1c30c67f5f33 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -48,6 +48,7 @@ const getStyles = ( const computedStyles = [ isStackedHorizontally && styles.horizontal, horizontalAlignment && styles[ `is-aligned-${ horizontalAlignment }` ], + styles.overflowVisible, ]; stylesMemo[ styleName ] = computedStyles; return computedStyles; @@ -129,6 +130,8 @@ export class BlockList extends Component { onDeleteBlock, contentStyle, renderAppender, + blockProps, + gridProperties, } = this.props; const { blockWidth } = this.state; if ( @@ -137,7 +140,9 @@ export class BlockList extends Component { this.extraData.onDeleteBlock !== onDeleteBlock || this.extraData.contentStyle !== contentStyle || this.extraData.renderAppender !== renderAppender || - this.extraData.blockWidth !== blockWidth + this.extraData.blockWidth !== blockWidth || + this.extraData.blockProps !== blockProps || + this.extraData.gridProperties !== gridProperties ) { this.extraData = { parentWidth, @@ -146,6 +151,8 @@ export class BlockList extends Component { contentStyle, renderAppender, blockWidth, + blockProps, + gridProperties, }; } return this.extraData; @@ -315,30 +322,34 @@ export class BlockList extends Component { onDeleteBlock, rootClientId, isStackedHorizontally, + blockClientIds, parentWidth, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, + blockProps, + gridProperties, } = this.props; const { blockWidth } = this.state; return ( - - - + ); } From 0e777c6674d501b05ddde1e63191dd3f4a14ecf7 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 18:48:55 +1000 Subject: [PATCH 20/40] Cherry-pick StylePreview key change --- .../block-editor/src/components/block-styles/preview.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-styles/preview.native.js b/packages/block-editor/src/components/block-styles/preview.native.js index c5461bf330acb9..c017331ad38a32 100644 --- a/packages/block-editor/src/components/block-styles/preview.native.js +++ b/packages/block-editor/src/components/block-styles/preview.native.js @@ -71,7 +71,7 @@ function StylePreview( { onPress, isActive, style, url } ) { return ( ); } ); From acfcb7fbb90b983f55e017c4b22b8458538481ac Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 18:52:44 +1000 Subject: [PATCH 21/40] Cherry-pick blockProps and gridProperties in InnerBlocks --- .../block-editor/src/components/inner-blocks/index.native.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 50297a561853a9..fc0df9d70416b0 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -93,6 +93,8 @@ function UncontrolledInnerBlocks( props ) { blockWidth, __experimentalLayout: layout = defaultLayout, numColumns, + gridProperties, + blockProps, } = props; const block = useSelect( @@ -126,6 +128,8 @@ function UncontrolledInnerBlocks( props ) { onAddBlock={ onAddBlock } onDeleteBlock={ onDeleteBlock } filterInnerBlocks={ filterInnerBlocks } + gridProperties={ gridProperties } + blockProps={ blockProps } blockWidth={ blockWidth } numColumns={ numColumns } /> From 30d20b1eb807f401b518c91d9c5ad1a0e095013e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 19:02:13 +1000 Subject: [PATCH 22/40] Use sass var for galleryAppender padding Note: This also re-adds fullWidth style, which is still being used in both v1 and v2 mobile implementations. If this is superceded by a recent refactor of the block width styles, it may be worth revisiting this and removing / changing the implementation. --- .../block-library/src/gallery/gallery-styles.native.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery-styles.native.scss b/packages/block-library/src/gallery/gallery-styles.native.scss index ea986c8a573ccf..a3073592291b93 100644 --- a/packages/block-library/src/gallery/gallery-styles.native.scss +++ b/packages/block-library/src/gallery/gallery-styles.native.scss @@ -1,5 +1,10 @@ @import "./v1/gallery-styles.native.scss"; .galleryAppender { - padding-top: 16px; + padding-top: $grid-unit-20; +} + +.fullWidth { + margin-left: $block-edge-to-content; + margin-right: $block-edge-to-content; } From 8e89a844d50689432eab0f0179ddb980bd57824c Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 24 May 2021 20:09:12 +1000 Subject: [PATCH 23/40] Cherry-pick remaining gallery changes Note: as before, blockProps and gridProperties should be re-evaluated in subsequent commits, if necessary. E.g. `imageCrop` is already recieved via context, and `isGroup` may be sufficient, eliminating the need for `isGallery`. --- .../src/gallery/gallery.native.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 092308b0e18ccd..5b7099b75a46ed 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -21,6 +21,7 @@ import { import { useState, useEffect } from '@wordpress/element'; import { mediaUploadSync } from '@wordpress/react-native-bridge'; import { WIDE_ALIGNMENTS } from '@wordpress/components'; +import { useResizeObserver } from '@wordpress/compose'; const TILE_SPACING = 8; @@ -30,6 +31,8 @@ const MAX_DISPLAYED_COLUMNS_NARROW = 2; export const Gallery = ( props ) => { const [ isCaptionSelected, setIsCaptionSelected ] = useState( false ); + const [ resizeObserver, sizes ] = useResizeObserver(); + const [ maxWidth, setMaxWidth ] = useState( 0 ); useEffect( mediaUploadSync, [] ); const { @@ -41,11 +44,17 @@ export const Gallery = ( props ) => { clientId, } = props; + useEffect( () => { + const { width } = sizes || {}; + if ( width ) { + setMaxWidth( width ); + } + }, [ sizes ] ); + const { imageCount, align, columns = defaultColumnsNumber( imageCount ), - // eslint-disable-next-line no-unused-vars imageCrop, } = attributes; @@ -64,6 +73,15 @@ export const Gallery = ( props ) => { numColumns: displayedColumns, marginHorizontal: TILE_SPACING, marginVertical: TILE_SPACING, + __experimentalLayout: { type: 'default', alignments: [] }, + blockProps: { + imageCrop, + isGallery: true, + }, + gridProperties: { + numColumns: displayedColumns, + }, + parentWidth: maxWidth + 2 * TILE_SPACING, } ); @@ -77,6 +95,7 @@ export const Gallery = ( props ) => { return ( + { resizeObserver } Date: Wed, 26 May 2021 17:28:45 +1000 Subject: [PATCH 24/40] Remove numColumns Going back over the older commits, it seems there were a two strategies used to render the gallery images as a grid. One used the numColumns (same as used in the Columns block), and the other using the Grid component. This commit cleans up the unused parts of the former approach. --- .../src/components/block-list/index.native.js | 11 +++-------- .../src/components/inner-blocks/index.native.js | 2 -- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 8c1c30c67f5f33..1693ba2a02c477 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -35,10 +35,9 @@ const stylesMemo = {}; const getStyles = ( isRootList, isStackedHorizontally, - horizontalAlignment, - numColumns + horizontalAlignment ) => { - if ( isRootList || numColumns ) { + if ( isRootList ) { return; } const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`; @@ -216,7 +215,6 @@ export class BlockList extends Component { contentResizeMode, // eslint-disable-next-line no-unused-vars blockWidth, - numColumns, } = this.props; const { parentScrollRef } = extraProps; @@ -279,14 +277,11 @@ export class BlockList extends Component { style={ getStyles( isRootList, isStackedHorizontally, - horizontalAlignment, - numColumns + horizontalAlignment ) } data={ blockClientIds } keyExtractor={ identity } renderItem={ this.renderItem } - numColumns={ numColumns } - key={ numColumns } shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll } diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index fc0df9d70416b0..c7926685b37dfe 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -92,7 +92,6 @@ function UncontrolledInnerBlocks( props ) { filterInnerBlocks, blockWidth, __experimentalLayout: layout = defaultLayout, - numColumns, gridProperties, blockProps, } = props; @@ -131,7 +130,6 @@ function UncontrolledInnerBlocks( props ) { gridProperties={ gridProperties } blockProps={ blockProps } blockWidth={ blockWidth } - numColumns={ numColumns } /> ); From 931184a9f44b9e273d37e69ef1fcbfd6a4ad29a1 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Wed, 26 May 2021 17:42:22 +1000 Subject: [PATCH 25/40] Remove blockProps This is no longer necessary, since we are using context to pass gallery-level attributes to the image blocks' rendering. --- .../block-editor/src/components/block-list/block.native.js | 2 -- .../block-editor/src/components/block-list/index.native.js | 5 ----- .../block-editor/src/components/inner-blocks/index.native.js | 2 -- packages/block-library/src/gallery/gallery.native.js | 4 ---- 4 files changed, 13 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 8e15ea13dbae1f..6c576ebe95957a 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -48,7 +48,6 @@ function BlockForType( { parentWidth, wrapperProps, blockWidth, - blockProps, } ) { const defaultColors = useSetting( 'color.palette' ) || emptyArray; const globalStyle = useGlobalStyles(); @@ -90,7 +89,6 @@ function BlockForType( { contentStyle={ contentStyle } onDeleteBlock={ onDeleteBlock } blockWidth={ blockWidth } - { ...( blockProps || {} ) } /> diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 1693ba2a02c477..ebf875b390d691 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -129,7 +129,6 @@ export class BlockList extends Component { onDeleteBlock, contentStyle, renderAppender, - blockProps, gridProperties, } = this.props; const { blockWidth } = this.state; @@ -140,7 +139,6 @@ export class BlockList extends Component { this.extraData.contentStyle !== contentStyle || this.extraData.renderAppender !== renderAppender || this.extraData.blockWidth !== blockWidth || - this.extraData.blockProps !== blockProps || this.extraData.gridProperties !== gridProperties ) { this.extraData = { @@ -150,7 +148,6 @@ export class BlockList extends Component { contentStyle, renderAppender, blockWidth, - blockProps, gridProperties, }; } @@ -321,7 +318,6 @@ export class BlockList extends Component { parentWidth, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, - blockProps, gridProperties, } = this.props; const { blockWidth } = this.state; @@ -341,7 +337,6 @@ export class BlockList extends Component { this.shouldShowInnerBlockAppender } blockWidth={ blockWidth } - blockProps={ blockProps } gridProperties={ gridProperties } items={ blockClientIds } /> diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index c7926685b37dfe..e1b87087fcbebb 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -93,7 +93,6 @@ function UncontrolledInnerBlocks( props ) { blockWidth, __experimentalLayout: layout = defaultLayout, gridProperties, - blockProps, } = props; const block = useSelect( @@ -128,7 +127,6 @@ function UncontrolledInnerBlocks( props ) { onDeleteBlock={ onDeleteBlock } filterInnerBlocks={ filterInnerBlocks } gridProperties={ gridProperties } - blockProps={ blockProps } blockWidth={ blockWidth } /> ); diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 5b7099b75a46ed..094c96464b061e 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -74,10 +74,6 @@ export const Gallery = ( props ) => { marginHorizontal: TILE_SPACING, marginVertical: TILE_SPACING, __experimentalLayout: { type: 'default', alignments: [] }, - blockProps: { - imageCrop, - isGallery: true, - }, gridProperties: { numColumns: displayedColumns, }, From e96cd3e773369aa9077bae6d5933b7717375fa13 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 27 May 2021 16:35:13 +1000 Subject: [PATCH 26/40] Fix gallery block.json (delete extra comma) --- packages/block-library/src/gallery/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index 17ba42f95a2261..962e5225eef319 100644 --- a/packages/block-library/src/gallery/block.json +++ b/packages/block-library/src/gallery/block.json @@ -105,7 +105,7 @@ "providesContext": { "allowResize": "allowResize", "isGrouped": "isGrouped", - "imageCrop": "imageCrop", + "imageCrop": "imageCrop" }, "supports": { "anchor": true, From 5c782702e7241c0d74ef50a1b29460f4dfad7d8e Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Thu, 27 May 2021 18:30:19 +1000 Subject: [PATCH 27/40] Remove unused imageCrop --- packages/block-library/src/gallery/gallery.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 094c96464b061e..6675048d2f56fe 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -55,7 +55,6 @@ export const Gallery = ( props ) => { imageCount, align, columns = defaultColumnsNumber( imageCount ), - imageCrop, } = attributes; const displayedColumns = Math.min( From 0527d39bca0f60e9d7540396f9818aabe07e45b8 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 31 May 2021 18:56:22 +1000 Subject: [PATCH 28/40] Add back blockWidth contentContainerStyles in block list I believe this was inadvertantly removed in some earlier commits, so this commit adds it back. --- .../src/components/block-list/index.native.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 538dd7861ede1c..17b7bcec58cb75 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -210,7 +210,6 @@ export class BlockList extends Component { isStackedHorizontally, horizontalAlignment, contentResizeMode, - // eslint-disable-next-line no-unused-vars blockWidth, } = this.props; const { parentScrollRef } = extraProps; @@ -229,11 +228,8 @@ export class BlockList extends Component { marginHorizontal: isRootList ? 0 : -marginHorizontal, }; - // eslint-disable-next-line no-unused-vars const isContentStretch = contentResizeMode === 'stretch'; - // eslint-disable-next-line no-unused-vars const isMultiBlocks = blockClientIds.length > 1; - // eslint-disable-next-line no-unused-vars const { isWider } = alignmentHelpers; return ( @@ -269,9 +265,13 @@ export class BlockList extends Component { horizontal={ horizontal } extraData={ this.getExtraData() } scrollEnabled={ isRootList } - contentContainerStyle={ - horizontal && styles.horizontalContentContainer - } + contentContainerStyle={ [ + horizontal && styles.horizontalContentContainer, + isWider( blockWidth, 'medium' ) && + ( isContentStretch && isMultiBlocks + ? styles.horizontalContentContainerStretch + : styles.horizontalContentContainerCenter ), + ] } style={ getStyles( isRootList, isStackedHorizontally, From a8c1f0e410b270ed363ec3802e5ad71295c6e5bd Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 31 May 2021 19:51:20 +1000 Subject: [PATCH 29/40] Use boolean flags for variants in Platform module These flags allow for a slightly more flexible, performant, and terse way of branching by platform. For more details, see: https://github.com/WordPress/gutenberg/pull/18058#issuecomment-586118076 --- packages/element/src/platform.android.js | 2 ++ packages/element/src/platform.ios.js | 2 ++ packages/element/src/platform.js | 1 + 3 files changed, 5 insertions(+) diff --git a/packages/element/src/platform.android.js b/packages/element/src/platform.android.js index 9f9bd4c0d9e4c9..e6be5eb051e0b2 100644 --- a/packages/element/src/platform.android.js +++ b/packages/element/src/platform.android.js @@ -14,6 +14,8 @@ const Platform = { } return spec.default; }, + isNative: true, + isAndroid: true, }; export default Platform; diff --git a/packages/element/src/platform.ios.js b/packages/element/src/platform.ios.js index f5833141e33028..c29a4006143d47 100644 --- a/packages/element/src/platform.ios.js +++ b/packages/element/src/platform.ios.js @@ -14,6 +14,8 @@ const Platform = { } return spec.default; }, + isNative: true, + isIOS: true, }; export default Platform; diff --git a/packages/element/src/platform.js b/packages/element/src/platform.js index 328f5523b6f95f..c646b6c86d51a2 100644 --- a/packages/element/src/platform.js +++ b/packages/element/src/platform.js @@ -9,6 +9,7 @@ const Platform = { OS: 'web', select: ( spec ) => ( 'web' in spec ? spec.web : spec.default ), + isWeb: true, }; /** * Component used to detect the current Platform being used. From 1c1dc9d485f54433b1345bd376d21968462a70d7 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 31 May 2021 20:09:39 +1000 Subject: [PATCH 30/40] Use boolean Platform flags --- packages/block-library/src/gallery/edit.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ca861ecc436df2..ed4b3d3e4456bf 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -63,17 +63,13 @@ 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' ), -} ); - -const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( { - web: {}, - native: { type: 'stepper' }, -} ); +const PLACEHOLDER_TEXT = Platform.isNative + ? __( 'ADD MEDIA' ) + : __( 'Drag images, upload new ones or select files from your library.' ); + +const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative + ? { type: 'stepper' } + : {}; function GalleryEdit( props ) { const { From 5f35c4cb6c4c5ba0162bfb1742610febc5c77cb6 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 31 May 2021 20:10:01 +1000 Subject: [PATCH 31/40] Only render imageSizeOptions loading spinner on web --- packages/block-library/src/gallery/edit.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ed4b3d3e4456bf..37a6304773097d 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -9,14 +9,12 @@ import { concat, find } from 'lodash'; */ import { compose } from '@wordpress/compose'; import { - // eslint-disable-next-line no-unused-vars BaseControl, PanelBody, SelectControl, ToggleControl, withNotices, RangeControl, - // eslint-disable-next-line no-unused-vars Spinner, } from '@wordpress/components'; import { @@ -497,7 +495,7 @@ function GalleryEdit( props ) { hideCancelButton={ true } /> ) } - { /* { ! imageSizeOptions && ( + { Platform.isWeb && ! imageSizeOptions && ( { __( 'Image size' ) } @@ -507,7 +505,7 @@ function GalleryEdit( props ) { { __( 'Loading options…' ) } - ) } */ } + ) } { noticeUI } From 57a01f73145a056964270372a4040c0cb9394e2a Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Tue, 1 Jun 2021 12:47:08 +1000 Subject: [PATCH 32/40] Add default for destructured context in image edit This is necessary for unit tests, because they instantiate the block's edit component directly, and so the default context is not provided. --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index c57ce03d775df1..99df9a3bf98f4c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -505,7 +505,7 @@ export class ImageEdit extends Component { image, clientId, imageDefaultSize, - context: { isGrouped = false, imageCrop = false }, + context: { isGrouped = false, imageCrop = false } = {}, featuredImageId, wasBlockJustInserted, } = this.props; From 0052b113dda370c06b3576dcd6705403d4b9b3c2 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Fri, 4 Jun 2021 14:59:01 +1000 Subject: [PATCH 33/40] Temporarily hard-code experimenal gallery refactor flag to true This will be reverted once the block settings are fetched from the REST API. This is enabled for now for testing purposes. --- packages/block-editor/src/store/defaults.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js index bbafc0f71ac7da..d35e857fe9752d 100644 --- a/packages/block-editor/src/store/defaults.native.js +++ b/packages/block-editor/src/store/defaults.native.js @@ -8,8 +8,8 @@ import { const SETTINGS_DEFAULTS = { ...SETTINGS, - // eslint-disable-next-line no-undef - __experimentalGalleryRefactor: __DEV__, + // FOR TESTING ONLY - Later, this will come from a REST API + __experimentalGalleryRefactor: true, alignWide: true, }; From 0d5fb18fad7e81955837198a7c8bc2584af792e9 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 5 Jul 2021 10:27:08 +1000 Subject: [PATCH 34/40] Revert "Temporarily hard-code experimenal gallery refactor flag to true" This reverts commit 6fbaed9ec11de7b3a4bb511da561f7e8d4a76cad. --- packages/block-editor/src/store/defaults.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js index d35e857fe9752d..b530c283cfc23d 100644 --- a/packages/block-editor/src/store/defaults.native.js +++ b/packages/block-editor/src/store/defaults.native.js @@ -9,7 +9,8 @@ import { const SETTINGS_DEFAULTS = { ...SETTINGS, // FOR TESTING ONLY - Later, this will come from a REST API - __experimentalGalleryRefactor: true, + // eslint-disable-next-line no-undef + __experimentalGalleryRefactor: __DEV__, alignWide: true, }; From 03d730bfb4ae529a82e5127278a32ba806807060 Mon Sep 17 00:00:00 2001 From: Matthew Kevins Date: Mon, 5 Jul 2021 12:12:36 +1000 Subject: [PATCH 35/40] Update experiments page with warning about the mobile app version --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index c58bad6c1376ec..57417160d94426 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -58,7 +58,7 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Enable the refactored gallery block', 'gutenberg' ), + 'label' => __( 'Enable the refactored gallery block (Warning: The refactored gallery is not compatible with WordPress mobile apps prior to version 17.8. If you use the mobile app, please update to the latest version to avoid content loss.)', 'gutenberg' ), 'id' => 'gutenberg-gallery-refactor', ) ); From 475f976c96ffd024c5426962b96efb468916ee56 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 2 Aug 2021 13:02:31 +0300 Subject: [PATCH 36/40] Changes new gallery flag name --- packages/block-editor/src/store/defaults.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js index b530c283cfc23d..7bacdee31ef5e8 100644 --- a/packages/block-editor/src/store/defaults.native.js +++ b/packages/block-editor/src/store/defaults.native.js @@ -10,7 +10,7 @@ const SETTINGS_DEFAULTS = { ...SETTINGS, // FOR TESTING ONLY - Later, this will come from a REST API // eslint-disable-next-line no-undef - __experimentalGalleryRefactor: __DEV__, + __unstableGalleryWithImageBlocks: __DEV__, alignWide: true, }; From 5387ca0896f7e8c661b356b7c149bb71cf5c68f1 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 2 Aug 2021 13:25:10 +0300 Subject: [PATCH 37/40] Updates mobile warning --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 8604c80ab7d2b7..224f058edaddfe 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -58,7 +58,7 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test a new gallery block that uses nested image blocks', 'gutenberg' ), + 'label' => __( 'Test a new gallery block that uses nested image blocks (Warning: The new gallery is not compatible with WordPress mobile apps prior to version 18.1. If you use the mobile app, please update to the latest version to avoid content loss.)', 'gutenberg' ), 'id' => 'gutenberg-gallery-refactor', ) ); From ec158f79f635a01c1cb6d314f85c47ff51c34802 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 2 Aug 2021 13:38:50 +0300 Subject: [PATCH 38/40] Removes the imageCount attribute --- packages/block-library/src/gallery/gallery.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 6675048d2f56fe..6dc9399747aae4 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -52,9 +52,9 @@ export const Gallery = ( props ) => { }, [ sizes ] ); const { - imageCount, + images, align, - columns = defaultColumnsNumber( imageCount ), + columns = defaultColumnsNumber( images.length ), } = attributes; const displayedColumns = Math.min( From 53ba37601587a28583cd96046344e8398a869688 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 2 Aug 2021 13:58:01 +0300 Subject: [PATCH 39/40] Remove the isGrouped context --- packages/block-library/src/image/edit.native.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 7b8c8269dff68e..340d14b999fdd2 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -507,7 +507,7 @@ export class ImageEdit extends Component { image, clientId, imageDefaultSize, - context: { isGrouped = false, imageCrop = false } = {}, + context: { imageCrop = false } = {}, featuredImageId, wasBlockJustInserted, } = this.props; @@ -611,12 +611,10 @@ export class ImageEdit extends Component { wide: 'center', }; - const additionalImageProps = isGrouped - ? { - height: '100%', - resizeMode: imageCrop ? 'cover' : 'contain', - } - : {}; + const additionalImageProps = { + height: '100%', + resizeMode: imageCrop ? 'cover' : 'contain', + }; const getImageComponent = ( openMediaOptions, getMediaOptions ) => ( @@ -651,7 +649,7 @@ export class ImageEdit extends Component { } ) => { return ( Date: Mon, 2 Aug 2021 14:14:01 +0300 Subject: [PATCH 40/40] Fixes lint issue --- packages/block-library/src/image/edit.native.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 340d14b999fdd2..5c7740374fc88e 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -648,9 +648,7 @@ export class ImageEdit extends Component { retryMessage, } ) => { return ( - +