Allow the sidebar to be a more flexible width

[Zealth57]

Description

This has been brought up a few times, first in #62599 and again in comments of #60561. The sidebar used to be easier to control the width of through CSS hacks. Now it's incredibly difficult, and suggested to use things like !important or client side javascript which isn't a feasible workaround as it's brittle and liable to break again. The sidebar is packed full of stuff, and getting more crowded by the day. Also, when using different languages, it creates poor usability and overflows. There needs to be some standard way to control the width of the sidebar that's currently hard coded.

Step-by-step reproduction instructions

Open the sidebar and note because of the animations and fixed width, there is no way to control the width of it being open in a standard and reliable way.

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[Sirjazzfeetz]

Work did begin on resizable panels #53452,
but was later postponed due to work around,
before being deprioritized indefinitely #60099

The ability to lock layout, perhaps by default, could ally some customization concerns.

[noisysocks]

Could you go into more detail on the extensibility aspect of this? Why is it difficult to adjust the width of the sidebar using CSS and what can Gutenberg contributors do to help with that?

I'd love to see both sidebars made adjustable but it's not the most pressing task. Making the right sidebar user-adjustable is a lot of work as all of the controls used in Global Styles etc. would need to be made responsive.

[Zealth57]

@noisysocks in the linked Github issues you can read through and see the challenges with using CSS. There is no reliable way to target the open state of the sidebar like there was prior to 6.6 when it was refactored. Now at best we can try to use a combination of !important, :empty, and make a bad jumpy state when it opens / closes. I don't want to resort to hacks that might break again in the future, this should be fixed to work properly. Gutenberg contributors can make the width not hard coded in the Javascript, and allow it to at minimum be filterable somehow so we can define the width as a developer. In PHP it's like $sidebar_width = apply_filters('wp_sidebar_width_when_opened', '260px');. I believe there are comparable JS filters that can be used in Gutenberg that would accomplish the same thing.

I understand making the sidebar user adjustable would be a lot of work, though I think that is the ultimate best solution. I still think a suitable interim solution would be to allow that hard coded number in JS to be filterable which seems like a pretty easy lift. A developer doing this would have to take on any challenge of something not being responsive so I think the risk of a bad experience is low. Also if anything isn't already responsive I think that's a big miss that should be fixed anyways. Everything should always be responsive as a best practice. Prior to 6.6 I never saw a problem when I increased the sidebar width to 40% using CSS anyways, so I don't think the responsive thing is a big risk either.

[noisysocks]

Thanks for the detail @Zealth57!

I'll put Needs Dev on this in the hope that someone can explore what's involved in making a fix. My preference is that we stop setting the width in style and give it a straightforward class so that it's easy to override using regular CSS.

I'm not so keen on a filter as they have a pretty heavy maintenance burden—you have to maintain backwards compatibility forever. An editor setting is probably my second preference if we truly can't make the sidebar styleable using CSS.

[ndiego]

Should this be labeled as a [Type] Bug or [Type] Enhancement? I am thinking [Type] Enhancement since this doesn't seem to be a bug in Core. Thoughts @noisysocks @kevin940726?

[noisysocks]

If we can do this then I think it's a bug since this is my expectation of how it should already work:

My preference is that we stop setting the width in style and give it a straightforward class so that it's easy to override using regular CSS.

But if we have to do anything more involved than that then I agree it's en enhancement.

[ndiego]

Given that Beta 2 is scheduled for today and there is no active PR to address this issue, I recommend we punt to 6.8 and remove from the 6.7 project board. Thoughts @kevin940726 and @colorful-tones?

[colorful-tones]

I recommend we punt to 6.8 and remove from the 6.7 project board.

@ndiego agree! 👍

[vitaliikaplia]

Hi everyone,

I’ve found a workaround that adjusts the width of the Gutenberg sidebar and toggles a class on the body based on the sidebar’s open or closed state. This method uses JavaScript to check the state and add a custom class to the , which we can then style with CSS (SCSS in this case) to set the desired width.

JS:

if (wp && wp.data) {
    const select = wp.data.select('core/edit-post');
    let previousState = null;

    const checkSidebarState = () => {
        const activePanel = select.getActiveGeneralSidebarName();
        const isOpened = Boolean(activePanel);

        // Update class only if the state has changed
        if (previousState !== isOpened) {
            document.body.classList.toggle('is-gutenberg-sidebar-opened', isOpened);
            previousState = isOpened;
        }
    };

    wp.data.subscribe(checkSidebarState);
    checkSidebarState(); // Check initial state
}

SCSS:

.is-gutenberg-sidebar-opened .interface-navigable-region.interface-interface-skeleton__sidebar {
    width: 500px !important;

    .interface-complementary-area__fill {
        width: 100% !important;

        .interface-complementary-area.editor-sidebar {
            width: 100% !important;
        }
    }
}

This solution has worked reliably for me, although it might need adjustments for future Gutenberg updates. I hope this helps others looking for a temporary fix!