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?