Iterations to link interface #26551
Iterations to link interface #26551
Conversation
|
Size Change: -932 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Simple and sweet, we need more PRs like these. It seems a good improvement. Before:
After:
I left a comment in case you'd like to do a few more tweaks while you're in there, some of those properties feel a bit arbitrary. Like in the following, the margin below the highlighted item doesn't feel "griddy" (12px grid ideally but 8px in absence of that):
Also, this "recently updated" feels weird. I'd make it 13px semibold font to serve as a subheading, and then be flusn on the left side with the input field:
Those are all totally fine to consider separately if you prefer.
| @@ -211,7 +211,6 @@ $block-editor-link-control-number-of-actions: 1; | |||
|
|
|||
| // Separate Create button when following other suggestions. | |||
| .components-button + .block-editor-link-control__search-create { | |||
| margin-top: 20px; | |||
| overflow: visible; | |||
| padding: 12px 15px; | |||
There was a problem hiding this comment.
While you're here, it might be cool to update these to use variables, such as $grid-unit-15 and $grid-unit-20.
Love that idea! I am going to push each one to break them apart. Then I will collect them all in the issue so there's a record of the changes. I have made a variable as there wasn't one for the font size, I think having one could be useful. I could just set it to 13px though if not. Here is the result:
|
karmatosed
changed the title
|
@jasmussen I just made a commit to this PR that I would love feedback on, that is regarding the removal of gradients on search results. Here is a before and after: Before:
After:
I can see what use they are for longer results, but as they interfer with the hover, I am wondering if we could remove them? Or perhaps remove them on hover? I am interested in feedback on this. |
|
From #26551 (comment), yeah I think we should set that to 13px. Also looking at it, removing the left indentation did not work as well as I'd hoped. I think the indentation of the page items below are probably the source of that problem, but in order to keep this PR small we should probably just add back that subheading indentation and look at the indentation overall as a separate task. |
Sure, that's something I'm happy to explore later on as think a few areas could benefit from analysis over whether they indent or not and having some tightening up around that. I just added a commit that brings in some more grid variables - great to align a few more while there. It also reverts the indent. Here is what this now looks like:
|
|
Yep, that's good. Also good to remove that new variable from the stylesheet, they are worth adding occasionally but we should be careful adding too many, as they are meant to be used widely. |
|
@jasmussen thanks, did a clean up. I have a few more things to add to this PR before merging too. I'll work on the icon in next pass as have that file now 🙌🏻 |
|
I have added the updates icon. Props to @jameskoster for help finding the location there. Before
After
|
|
One more additional icon change is to bring in the '+' with updated styling. Before
After
Further clean-upThis does open up more cleanup potential where the url icon isn't aligning with the +. Here you can see that quite clearly:
FeedbackI didn't bring in the background as the adding blocks have, however this does help visually. There could be an argument for that here, so I am going to put on the feedback label again for some thoughts before moving to commit. Here is what that looks like:
Next stepsThis PR is ready once these icons have feedback to move to code review and potentially commit. |
|
When trying to compile this I'm getting a "Error: Undefined variable. ... font-size: $helptext-font-size;` |
jasmussen
force-pushed
the
try/link-iterations
branch
from
0ba79d0 to
23c244e
Compare
|
I am just trying to get tests to pass but the variable has been updated and some iterations done to icon placement. After that as this had a code review, I will look to head to commit. Thanks everyone for the help in getting here. |
| @@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives'; | |||
|
|
|||
| const keyboardReturn = ( | |||
| <SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24"> | |||
| <Path d="M16 4h2v9H7v3l-5-4 5-4v3h9V4z" /> | |||
| <Path d="M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z"/> | |||
There was a problem hiding this comment.
| <Path d="M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z"/> | |
| <Path d="M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z" /> |
This should fix a lint error.
There was a problem hiding this comment.
Thanks @ellatrix just pushed a hopeful resolution for that and also ran snapshot.
|
Looks like tests have passed so going to commit this one. Thank you everyone. |
These few changes bring some of the visual iterations explored in #26351 into experimentation. You can see this currently on navigation block for example by adding a link.
Before:
After:
What changes:
[ edit of additional changes ]
This doesn't address the icon, as that needs to be confirmed. I am creating it so people can explore what this feels like in an actual pull request.