Plugin Rail Advanced Customization

[shanearcaro]

Quick Introduction

I'm building a page editor as a side / hobby project and have never explored page editors / CMS frameworks libraries before. When I searched on google I came across Graph.js, Raka.js, payloadcms, and Puck.

After checking out Puck I was immediately impressed by the plugin system, overrides, theming, and the amount of customization the could be made. Once I finished looking at all the libraries I chose Puck based on how impressive the extensions and features are.

Background

All my customizations were going perfectly until I hit the plugin bar. My goal is to keep the general layout and structure of the core Puck editor so I was trying to avoid composition and stick with overrides.

Immediately I noticed there is no override for the plugin rail. After looking into the Plugin Bar Theming I also saw you can change the font size along with background and text colors of multiple properties but you could not change the width of the bar.

I looked around on the docs and could not find anyway to override the size of the plugin rail. This is when I started looking at composition and the feasibility of recreating the layout but the sidebar and other components are not exposed here either.

During my search I noticed a legacySideBarPlugin too, but this was not what I was looking for.

This is about the time when I gave up searching the docs and starting looking through the Github

Github

After searching I found two files that had the styles I needed: Nav Styles and Layout Styles

The important sections are:

Layout/styles.module.css

.PuckLayout-inner {
  ...
  --puck-pluginbar-width: min-content;
  ...

and

Nav/styles.module.css

.Nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  gap: var(--puck-space-2);
}

I originally tried overriding these with normal css selectors but that didn't work because the generated component class names are transformed before being rendered:

What finally worked was a generous attribute selector:

[class*="PuckLayout-inner"] {
  --puck-pluginbar-width: 2.5rem !important;
}

[class*="Nav-list"] {
  padding-top: 0;
  gap: 2px;
}

[class*="NavItem"] {
  height: 2rem;
}

I placed this inside a /overrides/styles.css file and imported it after globals.css within the root layout and it worked perfectly!

Conclusion

It would be very nice if the plugin rail became an overridable property where a component could be passed in to easily modify its properties similar to the other overrides. My solution feels very out of alignment with the extensiveness and customizability of Puck and it took me much longer than it probably should have to finally get it working.