Gallery Block: Add random order setting (#57477)

* Gallery Block: Add random order setting * Regenerate fixtures * Update variable name * Update packages/block-library/src/gallery/index.php Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
WordPress · Jan 4, 2024 · 1729dd9 · 1729dd9
1 parent 596b0d8
commit 1729dd9
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 3 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -333,7 +333,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
 -	**Name:** core/gallery
 -	**Category:** media
 -	**Supports:** align, anchor, color (background, gradients, ~~text~~), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
--	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug
+-	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, randomOrder, shortCodeTransforms, sizeSlug
 
 ## Group
 

diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -80,6 +80,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"randomOrder": {
+			"type": "boolean",
+			"default": false
+		},
 		"fixedHeight": {
 			"type": "boolean",
 			"default": true

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -88,7 +88,8 @@ function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
+	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
+		attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -388,6 +389,10 @@ function GalleryEdit( props ) {
 			: __( 'Thumbnails are not cropped.' );
 	}
 
+	function toggleRandomOrder() {
+		setAttributes( { randomOrder: ! randomOrder } );
+	}
+
 	function toggleOpenInNewTab( openInNewTab ) {
 		const newLinkTarget = openInNewTab ? '_blank' : undefined;
 		setAttributes( { linkTarget: newLinkTarget } );
@@ -552,6 +557,12 @@ function GalleryEdit( props ) {
 						onChange={ toggleImageCrop }
 						help={ getImageCropHelp }
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Random order' ) }
+						checked={ !! randomOrder }
+						onChange={ toggleRandomOrder }
+					/>
 					<SelectControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
@@ -32,6 +32,24 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
+/**
+ * Filter to randomize the order of image blocks.
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return array The block object with randomized order of image blocks.
+ */
+function block_core_gallery_random_order( $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] && ! empty( $parsed_block['attrs']['randomOrder'] ) ) {
+		shuffle( $parsed_block['innerBlocks'] );
+	}
+
+	return $parsed_block;
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_gallery_random_order' );
+
 /**
  * Adds a style tag for the --wp--style--unstable-gallery-gap var.
  *

diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js
@@ -173,7 +173,7 @@ const transforms = {
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-			transform( { named: { ids, columns = 3, link } } ) {
+			transform( { named: { ids, columns = 3, link, orderby } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )
 				);
@@ -190,6 +190,7 @@ const transforms = {
 					{
 						columns: parseInt( columns, 10 ),
 						linkTo,
+						randomOrder: orderby === 'rand',
 					},
 					imageIds.map( ( imageId ) =>
 						createBlock( 'core/image', { id: imageId } )

diff --git a/test/integration/fixtures/blocks/core__gallery-with-caption.json b/test/integration/fixtures/blocks/core__gallery-with-caption.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "Gallery Caption",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",

diff --git a/test/integration/fixtures/blocks/core__gallery.json b/test/integration/fixtures/blocks/core__gallery.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",

diff --git a/test/integration/fixtures/blocks/core__gallery__columns.json b/test/integration/fixtures/blocks/core__gallery__columns.json
@@ -9,6 +9,7 @@
 			"columns": 1,
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",

diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "media",
 			"sizeSlug": "large",