Dedicated plugin UI

[chrisvxd]

Description

Provide plugins with a dedicated place to render UI.

Proposal

• Add a plugin toolbar down the left hand side, allowing the user to switch between plugins.
• Separate the components and outline UI into distinct plugins with their own UI
  • Need to consider how this impacts overrides

Functional mockup

[mkilpatrick]

Is this plugins toolbar really just a tabbed layout to separate components into different sections? If that's the case I personally find the term "plugins" confusing as it makes me think it's related to a custom Puck plugin someone could write that just shows up here.

[chrisvxd]

@mkilpatrick Not quite. The Plugin API is being extended to provide a dedicated home for UI related to the plugin:

import { Puck } from "@measured/puck";
 
const MyPlugin = {
  name: "plugin", // globally unique name
  label: "Plugin", // Side nav friendly name
  icon: <svg />, // Icon node. Best to use lucide.
  render: () => <div>Hello, world</div>
  overrides: {} // Optional overrides
};
 
export function Editor() {
  return (
    <Puck
      // ...
      plugins={[MyPlugin]}
    />
  );
}

Anyone can build a plugin that sits within the plugin bar. The Puck outline and component drawer will also be plugins.

Progress is coming along in #1112.

[mhan810]

@chrisvxd here are some thoughts on the UX: 1/ icons + text vs only text for the component names 2/ a search bar to help search for components (in https://github.com/puckeditor/puck/issues/186)

Goals: 1/ Make "layers" visible and not buried 2/ Provide more context about the component (icon and help text on hover?) 3/ Provide easy way to find components.

[chrisvxd]

Great suggestions, thanks @mhan810!

This particular ticket is for the plugin bar on the far left that lets you toggle between different plugins. Your suggestions are (somewhat) already captured in these discrete issues:

1. Component search: https://github.com/puckeditor/puck/issues/186
2. Component icons: https://github.com/puckeditor/puck/issues/1220
3. Layers discoverability: https://github.com/puckeditor/puck/issues/730

[mhan810]

Will take a look at those issues to add feedback if need.