[Mobile] Pass the Gallery v2 Flag over from the editor

lib/experiments-page.php

@@ -51,6 +51,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-navigation',
 		)
 	);
+	add_settings_field(
+		'gutenberg-gallery-refactor',
+		__( 'Gallery block experiment', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'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',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
@@ -88,3 +99,24 @@ function gutenberg_display_experiment_section() {
 
 	<?php
 }
+
+/**
+ * Extends default editor settings with experiments settings.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_experiments_editor_settings( $settings ) {
+	$experiments          = get_option( 'gutenberg-experiments' );
+	$experiments_settings = array(
+		'__unstableGalleryWithImageBlocks' => isset( $experiments['gutenberg-gallery-refactor'] ),
+	);
+	return array_merge( $settings, $experiments_settings );
+}
+// This can be removed when plugin support requires WordPress 5.8.0+.
+if ( function_exists( 'get_block_editor_settings' ) ) {
+	add_filter( 'block_editor_settings_all', 'gutenberg_experiments_editor_settings' );
+} else {
+	add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
+}

packages/block-editor/README.md

@@ -554,6 +554,7 @@ _Properties_
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
+-   _\_\_unstableGalleryWithImageBlocks_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks
 
 ### SkipToSelectedBlock
 

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,
@@ -123,10 +125,6 @@ export class BlockListItem extends Component {
 			contentResizeMode === 'stretch' && stretchStyle;
 		const { isContainerRelated } = alignmentHelpers;
 
-		if ( ! blockWidth ) {
-			return null;
-		}
-
 		return (
 			<ReadableContentView
 				align={ blockAlignment }
@@ -162,6 +160,34 @@ export class BlockListItem extends Component {
 			</ReadableContentView>
 		);
 	}
+
+	render() {
+		const {
+			gridProperties,
+			clientId,
+			parentWidth,
+			items,
+			blockWidth,
+		} = this.props;
+
+		if ( ! blockWidth ) {
+			return null;
+		}
+
+		if ( gridProperties ) {
+			return (
+				<Grid
+					numOfColumns={ gridProperties.numColumns }
+					tileCount={ items.length }
+					index={ items.indexOf( clientId ) }
+					maxWidth={ parentWidth }
+				>
+					{ this.renderContent() }
+				</Grid>
+			);
+		}
+		return this.renderContent();
+	}
 }
 
 export default compose( [

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;
+}

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 (
+		<View
+			style={ [
+				{
+					width: maxWidth / rowLength,
+				},
+				styles.gridItem,
+			] }
+		>
+			{ children }
+		</View>
+	);
+}
+
+export default Grid;

packages/block-editor/src/components/block-list/index.native.js

@@ -47,6 +47,7 @@ const getStyles = (
 	const computedStyles = [
 		isStackedHorizontally && styles.horizontal,
 		horizontalAlignment && styles[ `is-aligned-${ horizontalAlignment }` ],
+		styles.overflowVisible,
 	];
 	stylesMemo[ styleName ] = computedStyles;
 	return computedStyles;
@@ -128,6 +129,7 @@ export class BlockList extends Component {
 			onDeleteBlock,
 			contentStyle,
 			renderAppender,
+			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
 		if (
@@ -136,7 +138,8 @@ 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.gridProperties !== gridProperties
 		) {
 			this.extraData = {
 				parentWidth,
@@ -145,6 +148,7 @@ export class BlockList extends Component {
 				contentStyle,
 				renderAppender,
 				blockWidth,
+				gridProperties,
 			};
 		}
 		return this.extraData;
@@ -312,9 +316,11 @@ export class BlockList extends Component {
 			onDeleteBlock,
 			rootClientId,
 			isStackedHorizontally,
+			blockClientIds,
 			parentWidth,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			gridProperties,
 		} = this.props;
 		const { blockWidth } = this.state;
 		return (
@@ -333,6 +339,8 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
+				gridProperties={ gridProperties }
+				items={ blockClientIds }
 			/>
 		);
 	}

packages/block-editor/src/components/block-styles/preview.native.js

@@ -71,7 +71,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ outlineStyle.borderColor }
+					key={ JSON.stringify( outlineStyle ) }
 				/>
 			);
 		} );

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 {

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
+				{ ...options }
+				clientId={ clientId }
+				wrapperRef={ ref }
+			/>
+		),
+	};
+}
+
 /**
  * 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,
+		gridProperties,
 	} = props;
 
 	const block = useSelect(
@@ -86,6 +126,7 @@ function UncontrolledInnerBlocks( props ) {
 			onAddBlock={ onAddBlock }
 			onDeleteBlock={ onDeleteBlock }
 			filterInnerBlocks={ filterInnerBlocks }
+			gridProperties={ gridProperties }
 			blockWidth={ blockWidth }
 		/>
 	);

packages/block-editor/src/components/media-placeholder/README.md

@@ -188,6 +188,15 @@ Callback called when urls can be configured. No media insertion from url will be
 -   Required: No
 -   Platform: Web
 
+### handleUpload
+
+When set to false the handling of the upload is left to the calling component.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+-   Platform: Web
+
 ## Extend
 
 It includes a `wp.hooks` filter `editor.MediaPlaceholder` that enables developers to replace or extend it.

packages/block-editor/src/components/media-placeholder/index.js

@@ -64,6 +64,7 @@ export function MediaPlaceholder( {
 	accept,
 	addToGallery,
 	multiple = false,
+	handleUpload = true,
 	dropZoneUIOnly,
 	disableDropZone,
 	disableMediaButtons,
@@ -118,6 +119,9 @@ export function MediaPlaceholder( {
 	};
 
 	const onFilesUpload = ( files ) => {
+		if ( ! handleUpload ) {
+			return onSelect( files );
+		}
 		onFilesPreUpload( files );
 		let setMedia;
 		if ( multiple ) {

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -38,6 +38,7 @@ function MediaPlaceholder( props ) {
 		labels = {},
 		icon,
 		onSelect,
+		onFocus,
 		__experimentalOnlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
@@ -175,7 +176,7 @@ function MediaPlaceholder( props ) {
 							accessibilityRole={ 'button' }
 							accessibilityHint={ accessibilityHint }
 							onPress={ ( event ) => {
-								props.onFocus( event );
+								onFocus?.( event );
 								open();
 							} }
 						>

packages/block-editor/src/store/defaults.js

@@ -28,6 +28,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
+ * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -155,6 +156,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__unstableGalleryWithImageBlocks: false,
 
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.