Gallery: Refactor "Settings" panel of Gallery block to use `ToolsPanel` instead of `PanelBody` #67904

yogeshbhutkar · 2024-12-13T05:06:15Z

Fixes: #67893

What?

This PR introduces the usage of ToolsPanel instead of PanelBody inside the Settings panel of Gallery Block.

Why?

This PR is a part of #67813 which standardizes the usage of ToolsPanel inside Block Inspector Settings

How?

PanelBody is replaced with the corresponding ToolsPanel component.

Testing Instructions

Insert a Gallery Block.
Notice the presence of ToolsPanel component.
Try to reset the updated values to test the reset functions.

Screencast

Screen.Recording.2024-12-13.at.1.04.16.PM.mov

github-actions · 2024-12-13T08:55:40Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

yogeshbhutkar · 2024-12-13T09:03:55Z

This PR is now ready to be reviewed.

CC: @fabiankaegy

yogeshbhutkar · 2024-12-16T06:21:34Z

Fixed failing unit tests for mobile.

Credits: #67957 (review)
CC: @fabiankaegy

yogeshbhutkar · 2024-12-30T08:54:53Z

Hi @Mamaduka,
Would you mind taking a moment to review this PR when you have the chance? Thanks 🚀!

Mamaduka · 2025-05-28T13:03:26Z

Sorry, @yogeshbhutkar! Somehow, I missed the ping. Do you mind rebasing this branch on top of the latest trunk?

yogeshbhutkar · 2025-05-29T07:37:00Z

Thanks for taking a look, @Mamaduka.

I’ve rebased the branch on the latest trunk. If possible, could we also include @Mayank-Tripathi32 in the props list for the efforts that went into #67957?

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

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

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

yogeshbhutkar · 2025-06-12T07:15:44Z

@Mamaduka, the suggested changes have been implemented. When you have a moment, could you please review the PR again?

Mamaduka · 2025-07-02T09:58:09Z

@yogeshbhutkar, I've noticed that the Gallery resolution is sometimes resettable, even for a freshly inserted block. Could be related to our previous conversation - #67904 (review).

Besides that, everything looks good.

Screenshot

yogeshbhutkar · 2025-07-02T11:48:30Z

When I freshly inserted a block, I noticed, it's not the Resolution corresponding to Gallery that's resettable, but rather, the Resolution corresponding to the Image block nested within Gallery.

Ref:

ref.mov

I was able to reproduce this on the latest Trunk as well, when either an image or cover block is inserted, the resolution remains resettable, even on fresh insertions.

I see that in multiple places where we're handling images, we are defaulting the image sizes to full.

Ref:

gutenberg/packages/block-library/src/image/edit.js

Lines 241 to 243 in c503fa3

    
           // Try to use the previous selected image size if its available 
        
           // otherwise try the default image size or fallback to "full" 
        
           let newSize = DEFAULT_MEDIA_SIZE_SLUG;

However, the Image and Cover blocks use imageDefaultSize to set the initial sizeSlug post selection. Therefore, we might also need to update the following places accordingly if we decide to proceed with full as the default Image size:

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

Line 132 in c503fa3

imageDefaultSize: 'large',

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

Line 100 in c503fa3

"default": "large"

https://github.com/WordPress/wordpress-develop/blob/740006d500b0d0a68ccb240bc79a56efb6d03b41/src/wp-includes/block-editor.php#L221C42-L221C60

cc: @Mamaduka

Mamaduka · 2025-07-03T04:54:53Z

When I freshly inserted a block, I noticed, it's not the Resolution corresponding to Gallery that's resettable, but rather, the Resolution corresponding to the Image block nested within Gallery.

Try selecting an image that has no "Large" size; anything below 1000px should work.

The imageDefaultSize is retrieved from the server; it's a WordPress option that defaults to 'large'. We can't change that value without breaking backward compatibility in WP. The blocks that use that value treat DEFAULT_MEDIA_SIZE_SLUG as a final fallback when imageDefaultSize or the provided slug isn't available, which is logical to me.

I think we need to make sizeSlug fallback logic consistent across the media blocks, but it's out of the scope of this PR. Let's just resolve the final remaining issue.

…of PanelBody

…llery block

…size updates more effectively

… web and PanelBody for native

It's not required to check if sizeSlug exists within imageSizeOptions, as the user would make the selection from within imageSizeOptions itself.

Apart from setting the sizeSlug attribute, the inner blocks must be updated on "resetAll" as well

* When resetting all, don't reset linkTo as it's not controlled by ToolsPanel * Whenever inner blocks are also going to be updated, like for sizeSlug and linkTarget, use the dedicated function within resetAll instead of just setting them to undefined

* Resolution control and loading indicator are rendered in different places. * Resolution control loads instantly when the block is selected, even on slow networks.

yogeshbhutkar · 2025-07-03T08:06:37Z

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

@@ -4,3 +4,4 @@ export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';
+export const DEFAULT_MEDIA_SIZE_SLUG = 'large';


This should ideally be set to full to match the defaults corresponding to the Image block; currently, this is synced with the default provided within the block.json for the Gallery block.

I tried updating all such defaults, but, ideally, a deprecation object should be created, and certain fixtures/snapshots should be updated, which felt out of scope for this PR. I believe it's best implemented as a follow-up.

@Mamaduka, the reset bug mentioned here should now be fixed. Could you give this another test?

P.S. The failing test seems unrelated.

I tried updating all such defaults, but, ideally, a deprecation object should be created, and certain fixtures/snapshots should be updated, which felt out of scope for this PR. I believe it's best implemented as a follow-up.

I don't think it's worth yet another block deprecation. Additionally, defaulting to the full-size images in the Gallery block can have a negative impact on performance. Let's keep large as the default here.

Mamaduka

Thanks for bringing this over the finish line, @yogeshbhutkar!

yogeshbhutkar marked this pull request as ready for review December 13, 2024 08:55

yogeshbhutkar requested a review from geriux as a code owner December 13, 2024 08:55

fabiankaegy mentioned this pull request Dec 13, 2024

Gallery block: Refactor "Settings" panel to use Toolspanel #67957

Closed

fabiankaegy added [Type] Enhancement A suggestion for improvement. [Block] Gallery Affects the Gallery Block - used to display groups of images labels Dec 13, 2024

yogeshbhutkar force-pushed the 67893-gallery-block-refactor branch from 2e92776 to c4eafe5 Compare May 29, 2025 03:44

Mamaduka reviewed May 29, 2025

View reviewed changes

packages/block-library/src/gallery/edit.js Outdated Show resolved Hide resolved

Mamaduka reviewed May 29, 2025

View reviewed changes

packages/block-library/src/gallery/editor.scss Outdated Show resolved Hide resolved

Mamaduka reviewed May 29, 2025

View reviewed changes

packages/block-library/src/gallery/edit.js Outdated Show resolved Hide resolved

yogeshbhutkar requested a review from Mamaduka June 2, 2025 03:19

yogeshbhutkar force-pushed the 67893-gallery-block-refactor branch 2 times, most recently from e9b4558 to 5ef39b9 Compare July 2, 2025 04:26

This comment was marked as outdated.

Sign in to view

yogeshbhutkar added 7 commits July 3, 2025 13:08

Refactor "Settings" panel of Gallery block to use ToolsPanel instead …

add46d8

…of PanelBody

Refactored logic to determine defaults

914031c

Remove DEFAULT_COLUMNS constant and update columns number logic in Ga…

e46253b

…llery block

Enhance reset logic in Gallery block's ToolsPanel to handle link and …

631d1c4

…size updates more effectively

Refactor: Create edit.native.js to render native specific components

b576b93

Refactor: Update Gallery block's settings panel to use ToolsPanel for…

8ee9312

… web and PanelBody for native

chore: add dropdownMenuProps to ToolsPanel

8f548a7

yogeshbhutkar added 8 commits July 3, 2025 13:08

fix: remove unnecessary check

48b43fb

It's not required to check if sizeSlug exists within imageSizeOptions, as the user would make the selection from within imageSizeOptions itself.

fix: set columns undefined when reset

684a9cd

fix: reset linkTarget to undefined

be44304

fix: update inner blocks when resolution is reset

cc618d3

Apart from setting the sizeSlug attribute, the inner blocks must be updated on "resetAll" as well

fix: minor improvements

562ebac

* When resetting all, don't reset linkTo as it's not controlled by ToolsPanel * Whenever inner blocks are also going to be updated, like for sizeSlug and linkTarget, use the dedicated function within resetAll instead of just setting them to undefined

fix: remove resolution loading indicator

f1540ff

* Resolution control and loading indicator are rendered in different places. * Resolution control loads instantly when the block is selected, even on slow networks.

fix: make the default sizeSlug full

2122772

fix: revert the default sizeSlug to large

92ae92d

yogeshbhutkar force-pushed the 67893-gallery-block-refactor branch from 25fe5e6 to 92ae92d Compare July 3, 2025 07:39

yogeshbhutkar commented Jul 3, 2025

View reviewed changes

Mamaduka approved these changes Jul 3, 2025

View reviewed changes

Mamaduka merged commit 8a5a63a into WordPress:trunk Jul 3, 2025
94 of 96 checks passed

github-actions bot added this to the Gutenberg 21.2 milestone Jul 3, 2025

Gallery: Refactor "Settings" panel of Gallery block to use ToolsPanel instead of PanelBody #67904

Gallery: Refactor "Settings" panel of Gallery block to use ToolsPanel instead of PanelBody #67904

Uh oh!

Conversation

yogeshbhutkar commented Dec 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screencast

Uh oh!

github-actions bot commented Dec 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yogeshbhutkar commented Dec 13, 2024

Uh oh!

yogeshbhutkar commented Dec 16, 2024

Uh oh!

yogeshbhutkar commented Dec 30, 2024

Uh oh!

Mamaduka commented May 28, 2025

Uh oh!

yogeshbhutkar commented May 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yogeshbhutkar commented Jun 12, 2025

Uh oh!

This comment was marked as outdated.

Mamaduka commented Jul 2, 2025

Screenshot

Uh oh!

yogeshbhutkar commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mamaduka commented Jul 3, 2025

Uh oh!

yogeshbhutkar Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mamaduka Jul 3, 2025

Choose a reason for hiding this comment

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Gallery: Refactor "Settings" panel of Gallery block to use `ToolsPanel` instead of `PanelBody` #67904

Gallery: Refactor "Settings" panel of Gallery block to use `ToolsPanel` instead of `PanelBody` #67904

yogeshbhutkar commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

yogeshbhutkar commented Jul 2, 2025 •

edited

Loading

yogeshbhutkar Jul 3, 2025 •

edited

Loading