Refactored Gallery: Add custom gutter size feature

lib/experiments-page.php

@@ -62,6 +62,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-widgets-in-customizer',
 		)
 	);
+	add_settings_field(
+		'gutenberg-gallery-refactor',
+		__( 'Gallery Refactor', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable the refactored gallery block', 'gutenberg' ),
+			'id'    => 'gutenberg-gallery-refactor',
+		)
+	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
@@ -99,3 +110,19 @@ 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_exist    = get_option( 'gutenberg-experiments' );
+	$experiments_settings = array(
+		'__experimentalGalleryRefactor'          => $experiments_exist ? array_key_exists( 'gutenberg-gallery-refactor', get_option( 'gutenberg-experiments' ) ) : false,
+	);
+	return array_merge( $settings, $experiments_settings );
+}
+add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );

packages/block-editor/README.md

@@ -502,6 +502,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
+-   _\_\_experimentalGalleryRefactor_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks
 
 <a name="SkipToSelectedBlock" href="#SkipToSelectedBlock">#</a> **SkipToSelectedBlock**
 

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/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} __experimentalGalleryRefactor Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -151,6 +152,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
+	__experimentalGalleryRefactor: 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.

packages/block-library/src/gallery/block.json

@@ -54,6 +54,13 @@
 			},
 			"default": []
 		},
+		"shortCodeTransforms": {
+			"type": "array",
+			"default": [],
+			"items": {
+				"type": "object"
+			}
+		},
 		"columns": {
 			"type": "number",
 			"minimum": 1,
@@ -68,14 +75,36 @@
 			"type": "boolean",
 			"default": true
 		},
+		"linkTarget": {
+			"type": "string"
+		},
 		"linkTo": {
 			"type": "string"
 		},
 		"sizeSlug": {
 			"type": "string",
 			"default": "large"
+		},
+		"allowResize": {
+			"type": "boolean",
+			"default": false
+		},
+		"isGrouped": {
+			"type": "boolean",
+			"default": true
+		},
+		"imageCount": {
+			"type": "number",
+			"default": 0
+		},
+		"gutterSize": {
+			"type": "number"
 		}
 	},
+	"providesContext": {
+		"allowResize": "allowResize",
+		"isGrouped": "isGrouped"
+	},
 	"supports": {
 		"anchor": true,
 		"align": true

packages/block-library/src/gallery/constants.js

@@ -1,3 +1,3 @@
 export const LINK_DESTINATION_NONE = 'none';
-export const LINK_DESTINATION_MEDIA = 'file';
-export const LINK_DESTINATION_ATTACHMENT = 'post';
+export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_ATTACHMENT = 'attachment';

packages/block-library/src/gallery/deprecated.js

@@ -10,9 +10,17 @@ import { map, some } from 'lodash';
 import { RichText } from '@wordpress/block-editor';
 
 /**
- * Internal dependencies
+ * Original function to determine default number of columns from a block's
+ * attributes.
+ *
+ * Used in deprecations: v1-6.
+ *
+ * @param  {Object} attributes Block attributes.
+ * @return {number}            Default number of columns for the gallery.
  */
-import { defaultColumnsNumber } from './shared';
+export function defaultColumnsNumberV1( attributes ) {
+	return Math.min( 3, attributes.images.length );
+}
 
 const deprecated = [
 	{
@@ -114,7 +122,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				caption,
 				linkTo,
@@ -270,7 +278,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				caption,
 				linkTo,
@@ -409,7 +417,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				linkTo,
 			} = attributes;
@@ -549,7 +557,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				imageCrop,
 				linkTo,
 			} = attributes;
@@ -655,7 +663,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const {
 				images,
-				columns = defaultColumnsNumber( attributes ),
+				columns = defaultColumnsNumberV1( attributes ),
 				align,
 				imageCrop,
 				linkTo,

packages/block-library/src/gallery/deprecated.scss

@@ -0,0 +1,141 @@
+// Deprecated gallery styles pre refactoring to use nested image blocks.
+// https://github.com/WordPress/gutenberg/pull/25940.
+.wp-block-gallery,
+.blocks-gallery-grid {
+	display: flex;
+	flex-wrap: wrap;
+	list-style-type: none;
+	padding: 0;
+	// Some themes give all <ul> default margin instead of padding.
+	margin: 0;
+
+	.blocks-gallery-image,
+	.blocks-gallery-item {
+		// Add space between thumbnails, and unset right most thumbnails later.
+		margin: 0 1em 1em 0;
+		display: flex;
+		flex-grow: 1;
+		flex-direction: column;
+		justify-content: center;
+		position: relative;
+
+		// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
+		width: calc(50% - 1em);
+
+		&:nth-of-type(even) {
+			margin-right: 0;
+		}
+
+		figure {
+			margin: 0;
+			height: 100%;
+
+			// IE doesn't support flex so omit that.
+			@supports (position: sticky) {
+				display: flex;
+				align-items: flex-end;
+				justify-content: flex-start;
+			}
+		}
+
+		img {
+			display: block;
+			max-width: 100%;
+			height: auto;
+
+			// IE doesn't handle cropping, so we need an explicit width here.
+			width: 100%;
+
+			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
+			@supports (position: sticky) {
+				width: auto;
+			}
+		}
+
+		figcaption {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			max-height: 100%;
+			overflow: auto;
+			padding: 3em 0.77em 0.7em;
+			color: $white;
+			text-align: center;
+			font-size: 0.8em;
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			box-sizing: border-box;
+			margin: 0;
+
+			img {
+				display: inline;
+			}
+		}
+	}
+
+	figcaption {
+		flex-grow: 1;
+	}
+
+	// Cropped
+	&.is-cropped .blocks-gallery-image,
+	&.is-cropped .blocks-gallery-item {
+		a,
+		img {
+			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
+			// The following rules are for all browsers.
+			width: 100%;
+
+			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
+			@supports (position: sticky) {
+				height: 100%;
+				flex: 1;
+				object-fit: cover;
+			}
+		}
+	}
+
+	&.columns-1 .blocks-gallery-image,
+	&.columns-1 .blocks-gallery-item {
+		width: 100%;
+		margin-right: 0;
+	}
+
+	// Beyond mobile viewports, we allow up to 8 columns.
+	@include break-small {
+		@for $i from 3 through 8 {
+			&.columns-#{ $i } .blocks-gallery-image,
+			&.columns-#{ $i } .blocks-gallery-item {
+				width: calc(#{ 100% / $i } - #{ 1em * ( $i - 1 ) / $i });
+				margin-right: 1em;
+			}
+		}
+
+		// Unset the right margin on every rightmost gallery item to ensure center balance.
+		@for $column-count from 1 through 8 {
+			&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
+			&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
+				margin-right: 0;
+			}
+		}
+	}
+
+	// Last item always needs margins reset.
+	.blocks-gallery-image:last-child,
+	.blocks-gallery-item:last-child {
+		margin-right: 0;
+	}
+
+	// Apply max-width to floated items that have no intrinsic width.
+	&.alignleft,
+	&.alignright {
+		max-width: $content-width / 2;
+		width: 100%;
+	}
+
+	// If the gallery is centered, center the content inside as well.
+	&.aligncenter {
+		.blocks-gallery-item figure {
+			justify-content: center;
+		}
+	}
+}

packages/block-library/src/gallery/edit-wrapper.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import GalleryEdit from './edit';
+import GalleryEditV1 from './v1/edit';
+
+/*
+ * Using a wrapper around the logic to load the edit for v1 of Gallery block
+ * or the refactored version with InnerBlocks. This is to prevent conditional
+ * use of hooks lint errors if adding this logic to the top of the edit component.
+ */
+export default function GalleryEditWrapper( props ) {
+	const { attributes } = props;
+
+	const __experimentalGalleryRefactor = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return settings.__experimentalGalleryRefactor;
+	}, [] );
+
+	if (
+		! __experimentalGalleryRefactor ||
+		attributes?.ids?.length > 0 ||
+		attributes?.images?.length > 0
+	) {
+		return <GalleryEditV1 { ...props } />;
+	}
+
+	return <GalleryEdit { ...props } />;
+}