Order of InspectorControls panels is non-deterministic

[swissspidy]

Describe the bug

The order of panels within InspectorControls is non-deterministic and changes depending on whether you are editing an existing block or a freshly inserted one.

To reproduce Steps to reproduce the behavior:

1. Copy and paste ES5 example from https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blockedit in the console
2. Insert a new video block and select a video right away
3. Notice the custom panel at the top of the block toolbar
4. De-select block and select it again
5. Notice that the custom panel now comes after the Video Settings panel

Expected behavior The order should always be the same so that it can be deterministic.

Otherwise this not only confuses users, it also makes it harder to target individual controls via CSS to hide them (because there is still no API for that)

Screenshots

Freshly inserted block:

After selecting the block again:

Desktop (please complete the following information): Chrome 74 on macOS Mojave

Additional context

Gutenberg 5.7 RC 1

[gziolo]

I was able to reproduce it. It's a bug and it needs to be fixed.

[mapk]

I've also experienced an issue where block toolbar icons move after transforming the content. It might be related? Here's a comment about that. A screencast of it is below.

[gziolo]

Related discussion on WordPress Slack (link requires registration):

https://wordpress.slack.com/archives/C02QB2JS7/p1559740950053700?thread_ts=1559740846.052700&cid=C02QB2JS7

It might regress after #15541.

[aduth]

In some initial testing, the issue can be reproduced as of 7320d0d, the commit immediately preceding (before) c38327d (#15541), which signals to me that this may not be a regression after all.

[swissspidy]

c38327df97fc250d9af5d340f2f68a5db7c76eaf was committed 6 days after I created this issue, so yeah that is unrelated 🙂

[obenland]

I've not been able to reproduce different behavior in GB 9.0, the custom control is available as soon as block is inserted. @swissspidy Any thing I'm missing? Can you still reproduce it?

[swissspidy]

@obenland The problem I was describing is not that the control is not available, but that the order of the controls is different.

[karjna]

is there any update to this issue?

[skorasaurus]

Still able to reproduce this in Gutenberg 10.5.4

[caseymilne]

Found this issue ticket still open in August 2021 after searching for "how to control order of the InspectorControls". Difficult to find any documentation on this topic, I did find some example in a resolved issue but it was involving a HOC (Higher Order Component) usage that differs from the standard usage. In my own experience when I use the "supports" options which create controls in the the inspector by default such as "Colors" and "Typography" then any added by my edit() function will be after the defaults. I don't see any way to reverse that order, I'd hoped there was a "position" attribute on the that would somehow reorder.

I've seen some suggestion that ordering could be controlled by when the block is registered, but I doubt that because default controls are part of the process of building the block?

[youknowriad]

I'm not able to reproduce the issue using the instructions in the description of the issue. It is possible that it's due to the redesign of the inspector (tabs) or that the issue is actually solved. Any testers to confirm here?

[Mamaduka]

I can still reproduce the issue. Using the code example from the handbook and an Image block.

Screencast

https://github.com/WordPress/gutenberg/assets/240569/e5f61ca5-0861-4dab-8715-c07245d140cf