Additional CSS field is no longer full-height in Site Editor

[annezazu]

In WordPress 6.7, the following is shown for the additional CSS field:

In WordPress 6.7 with GB 20.0, the following is shown which results in a much smaller field:

Reporting as it's unclear to me if it's intentional or a regression :)

[Rishit30G]

Thanks for sharing this,

I can confirm that the issue is present,

WP 6.7 and with Gutenberg Plugin ( 20.1.0 ) enabled:

WP 6.7 and Gutenberg Plugin ( 20.1.0 ) disabled:

Edit: A quick fix to this is by removing the flex: 1 1 auto as it's making the textarea occupy the remaining space

Screen.Recording.2025-01-29.at.9.21.19.AM.mov

[t-hamano]

As I recall, this has to do with refactoring the Navigator component.

Adding some CSS like below should solve the issue, but there may be a more ideal approach. cc @WordPress/gutenberg-components

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 99b1c8c92b..dae6a9df73 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -228,9 +228,14 @@
        }
 }
 
+.edit-site-global-styles-sidebar__navigator-provider {
+       height: 100%;
+}
+
 .edit-site-global-styles-sidebar__navigator-screen {
        display: flex;
        flex-direction: column;
+       height: 100%;
 }
 
 .edit-site-global-styles-sidebar__navigator-screen .single-column {

Either way, I'll be adding this to the 6.8 project board.

[ciampo]

@t-hamano 's suggestion seems correct in principle, although I recommend testing the sidebar thoroughly , especially paying attention to the in and out animations of each screen (and potential scrollbar flickers).

Apart from that, I noticed two potential additional bugs:

It looks like the "additional CSS" navigator screen can't be triggered a second time, suggesting that there may be a bug in how the global styles sidebar is navigating away from the screen:

Kapture.2025-01-29.at.10.54.49.mp4

Also, the generated classname for the navigator components seem weird, as if the same classnames is being concatenated more than once

I didn't open a separate issue in case folks can't repro

[Rishit30G]

@t-hamano Thank you for your suggestions! After implementing the changes you shared, I noticed that the style of the input extends to full height when the Gutenberg plugin is enabled, would that be the intended behaviour ?

@ciampo I did try reproducing the "Additional CSS" button issue ( with Gutenberg Plugin disabled ), but for me it seems to be working fine
Please let me know if I'm missing something 🙇🏻

Screen.Recording.2025-01-29.at.4.46.34.PM.mov

[t-hamano]

It looks like the "additional CSS" navigator screen can't be triggered a second time, suggesting that there may be a bug in how the global styles sidebar is navigating away from the screen:

I was able to reproduce this issue when the Gutenberg plugin was enabled. See #68949

[t-hamano]

After further investigation, I found that this issue was caused by #65522. However, #65522 is a necessary change for the Navigator component's exit animation, so it cannot be reverted.

The approach I suggested in this comment should not affect the animation, since it simply changes the height.

@Rishit30G Want to try this approach?

[Rishit30G]

Thanks for sharing the references @t-hamano

I'm curious to know would we want to reduce the size of the "Additional CSS" box or make it take up the remaining space
The implementation share in the comment will help the box take up the remaining space and keep the animations intact 👍🏻
I can see a PR with the implementation #68993

[t-hamano]

I'm curious to know would we want to reduce the size of the "Additional CSS" box or make it take up the remaining space

I think the current small size is an unintended regression caused by #65522, so let's move forward with #68993.