Global Styles: Make css input fill remainder of screen by default#47437
Merged
glendaviesnz merged 2 commits intotrunkfrom Jan 29, 2023
Merged
Global Styles: Make css input fill remainder of screen by default#47437glendaviesnz merged 2 commits intotrunkfrom
glendaviesnz merged 2 commits intotrunkfrom
Conversation
glendaviesnz
added
the
Global Styles
|
Size Change: -23.4 kB (-2%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 52daf7e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4012237228
|
Contributor
|
The height of the field works well. I think there is extra left and right padding on the panel, and that there is room to make it wider to align with the header? |
Contributor
|
I definitely understand this was a challenge: that's a lot of gnarly flex CSS. Nevertheless, it feels like a stronger starting point, simply due to the fact that CSS really requires as much CSS as possible. And since it's a new component entirely, this seems worth it. I won't have time to dive in and debug today, unfortunately, but behaviorally this feels good to me 👍 👍 |
Contributor
Author
Thanks @carolinan this was caused by putting the custom CSS in a collapsable panel - which on thinking about it was a waste of time as you are never likely to want to collapse this. Have switched back to a VStack and the extra padding is gone. |
carolinan
approved these changes
Jan 27, 2023
Contributor
carolinan
left a comment
carolinan
left a comment
There was a problem hiding this comment.
Works well for me, thank you.
34 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Increases the size of the custom CSS input box by making if fill the remaining space in the column
Why?
The existing input only has 15 rows by default which makes it hard to view/edit larger chunks of CSS
How?
Rearranges the CSS input panel so that the additional CSS is the last element so it can fill the remaining space.
Testing Instructions
styles.cssproperty and make sure theOriginal theme CSSpanel displays correctly when custom CSS is added via global styles input.edit-site-global-styles-sidebar__navigator-screenachieve this.Screenshots or screencast
Before:
resize-css-before.mov
After:
Screen.Recording.2023-01-26.at.5.06.27.PM.mov