[Feature Request]: customizable sidebars

[jonwaldstein]

Details

Hello! 👋

The team at GiveWP is working on a new donation form builder that utilizes the Gutenberg block editor - along with our custom blocks for building the form. Up to this point, we have rolled our own version of the block editor for our specific use case. We recently discovered this project and thought it would be great to use but have run into a few issues during implementation. The most important one is the customizability of the sidebars.

You see, in our block editor - we have have an additional tab in the sidebar called "Design" that enables both a live preview of the form they are editing with options for selecting different form designs (something similar to themes) with additional design settings.

Visuals

Screenshots for context (using our own block editor):

This is our "Form" tab which is just the document tab:

Here is our custom "Design" tab

Suggestions

The ideal feature for us, would be to have a new prop(s) on the <IsolatedBlockEditor> component that let's us add our own sidebar. Considering under the hood this is just assigning props to the <InterfaceSkeleton> it would give folks greater flexibility for what gets rendered there.

I'll default to the maintainer's suggestion but I think this could be achieved with either a new prop or settings:

<IsolatedBlockEditor
 sidebar={<SettingsSidebar />}
 secondarySidebar={<SecondarySidebar />}
>

Another options is keeping this intact:

<InterfaceSkeleton
  sidebar={
  ( !isMobileViewport || sidebarIsOpened ) &&
      inspectorInSidebar && <ComplementaryArea.Slot scope="isolated/editor" />
  }
/>

and giving control over this somehow:

<SettingsSidebar documentInspector={ settings?.iso?.toolbar?.documentInspector ?? false } />

Closing remarks

Thank you for reading and considering this. We have spent over a year on this project and are getting closer to releasing this to our customers every day. At this point, we are investing in Gutenberg heavily and have been carefully weighing our options for development as the WordPress can be quite volatile. We are just now getting into creating a system for loading external custom blocks which means we needed to pivot slightly for better dependency management.

Our custom Gutenberg editor is not drastically different from what your team has built here, but we have noticed a lot more features already included that we would love to take advantage of (and contribute back!). Please let me know if this is something you would be interested in exploring for us and/or you would like some help with a PR.

Thank you 🙌

[johngodley]

Sure, it sounds like a good feature. It's currently limited due to not needing any more sidebars and it saved coding. Making it work more like core Gutenberg is probably the way to go here. I will look into what's involved.

[jonwaldstein]

@johngodley awesome, thank you!

[johngodley]

2.25.0 has a customComponent setting for the sidebar. You will need to provide all the sidebar functionality

[jonwaldstein]

@johngodley thank you!!!