Unify DataViews Header Title & Subtitle #62429
Merged
Conversation
This file contains 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
t-hamano
added
Needs Design Feedback
t-hamano
commented
Jun 8, 2024
Comment on lines
102
to
105
| .components-heading { | ||
| flex-grow: 1; | ||
| flex-basis: 0; | ||
| } |
There was a problem hiding this comment.
Without this style, the add button would be pushed out.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +400 B (+0.02%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
|
Good one, thank you for sweating these details. Question, how does the
Is that because truncation is handled differently, or did I do something wrong in my testing? |
|
@jasmussen Thanks for the testing. This PR only works on the Patterns page. Because in the Pages and the Templates views, the DataView title is very short and cannot be changed by the user. |
|
I'm still doing something wrong, because I see the following in the patterns page:
I appreciate the PR happy to give it a green check. But my main pushback remains: is there a way we can code this so it applies to all headings? The less custom CSS and custom classes we can get away with, the better. It might never be relevant on Page and Template sections, but in future tags and categories sections (#55083) it might again be. |
t-hamano
changed the title
Sorry, I was wrong. It seems it wasn't working properly if the text contained spaces. Now it should work for any text.
Additionally, I've applied the same styles to the Templates and the Pages. To test this, you'll need to change the text in your browser developer tools.
In the future, we may be able to standardize headers across Patterns, Pages, and Templates to reduce the amount of CSS. |
jasmussen
approved these changes
Jun 12, 2024
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* Unify DataViews Patterns Header Title & Subtitle * Don't wrap text * Apply same logic to Pages, Templates Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
This PR achieves the following two things in the header of the Patterns page:
Truncate the title when it is extremely long
Before
After
Add a 4px gap between the title and subtitle, which makes the add button and subtitle less cramped
Before
After
Testing Instructions