I'm adding a new panel to a Gutenberg block through the editor.BlockEdit wp.block filter.

   <PanelBody title={ __( 'New Settings' ) } initialOpen={ false } >

The new panel appears on top of the default panels. Is there any way to change the order? To make it show below other panels? I did not find any documentation about this..

  • Have you found any solution to this? Commented Sep 13, 2021 at 7:41

2 Answers 2


       <PanelBody title={ __( 'Settings One' ) }>

       <PanelBody title={ __( 'Settings Two' ) }>

       <PanelBody title={ __( 'Settings Three' ) >


If you insert multiple Panelbody like I did in above code. You will have multiple inspector controls with first one being ope by default. Change the panelbody accordingly to match your desired order.

  • 1
    Is this really an answer to the question?
    – Christine Cooper
    Commented Nov 15, 2019 at 12:20
  • @ChristineCooper I do not think it does. If you have all your instances of Panelbody in one place, you can indeed manage their order like above. However, OP seems to want to insert an extra panel with the editor.BlockEdit filter. In this case, the above snippet will not be useful imo.
    – jeherve
    Commented Mar 9, 2023 at 18:35

Again very late for such a question, but since there is no answer YET..

There is undocumented attribute __experimentalGroup which can be used on InspectorControls like this:

<InspectorControls __experimentalGroup="typography">
// panels inside

You can find list of groups by inspecting with React developer tools, some common are color and typography. By applying above attribute, setting is applied on the end of group. Some css tweaking may be needed, as default panels have a little different css classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.