Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gallery Block: Add random order setting #57477

Merged
merged 5 commits into from
Jan 4, 2024
Merged

Gallery Block: Add random order setting #57477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
adb9d0e
Gallery Block: Add random order setting
t-hamano Dec 31, 2023
33a64a3
Regenerate fixtures
t-hamano Jan 2, 2024
39cd25e
Update variable name
t-hamano Jan 2, 2024
3afc3af
Merge branch 'trunk' into gallery/add-random-order
t-hamano Jan 4, 2024
b954e6d
Update packages/block-library/src/gallery/index.php
t-hamano Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/gallery/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,10 @@
"type": "boolean",
"default": true
},
"randomOrder": {
"type": "boolean",
"default": false
},
"fixedHeight": {
"type": "boolean",
"default": true
Expand Down
13 changes: 12 additions & 1 deletion packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 } );
Expand Down Expand Up @@ -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' ) }
Expand Down
18 changes: 18 additions & 0 deletions packages/block-library/src/gallery/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/gallery/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
);
Expand All @@ -190,6 +190,7 @@ const transforms = {
{
columns: parseInt( columns, 10 ),
linkTo,
randomOrder: orderby === 'rand',
},
imageIds.map( ( imageId ) =>
createBlock( 'core/image', { id: imageId } )
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__gallery-with-caption.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"shortCodeTransforms": [],
"caption": "Gallery Caption",
"imageCrop": true,
"randomOrder": false,
"fixedHeight": true,
"linkTo": "none",
"sizeSlug": "large",
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__gallery.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"shortCodeTransforms": [],
"caption": "",
"imageCrop": true,
"randomOrder": false,
"fixedHeight": true,
"linkTo": "none",
"sizeSlug": "large",
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__gallery__columns.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"columns": 1,
"caption": "",
"imageCrop": true,
"randomOrder": false,
"fixedHeight": true,
"linkTo": "none",
"sizeSlug": "large",
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/blocks/core__gallery__deprecated-7.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"shortCodeTransforms": [],
"caption": "",
"imageCrop": true,
"randomOrder": false,
"fixedHeight": true,
"linkTo": "media",
"sizeSlug": "large",
Expand Down
Loading