-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pasting links in Gutenberg #21789
Comments
Related: #20442 Where the title from target page is created as the link text — like Google Docs. |
I'm going to dive into this and see how we can move it along a little. I am going to try and see if I understand the proposal first, to make sure. If I have got that wrong there are a lot of issues linked here, so I can course-correct with feedback.
I agree with the idea that a link should auto-link by default, that just makes sense. The key raised here is choice, having the ability to choose either I think is where we can refine the flow. There seem 2 options here:
I haven't included this option, but can explore if desired:
My feeling was to embed all links could end up feeling very distracting. Offering a step in betweenThis is a rough mockup just as a visual to get feedback on. In this, it would only do this if could embed, a link that was just a text-link wouldn't offer this. Offering option to convert to text link onlyHere you could have 2 optional locations, one in the toolbar (icon would need work) and one in the ellipsis menu. RecommendationMy own feeling is avoiding the extra step probably is sensible in this case, but giving an option to change is good. Having it load then offering a modal or 'splash' that says 'continue or make as link' could also be another option, again though I wonder if it's adding a hurdle. Ultimately, that is a decision we need to take as to what is the default, but being able to adjust feels right. Additional steps forwardThe above is just one soothing of the experience. Let's do more by bringing in some additional tickets linked here.
Wrapping up into next stepsWhat would be great would be to get feedback on the above and then move the linked issues into development along with this one. I'm going to put the feedback label on so we can start that journey. |
In Gutenberg 8.1 one can choose to transform any embed into a Paragraph Block. See this comment in the merged PR: #17413 (comment) |
I agree with this. Just as #17413 provides an option after the embed happens, a similar option can also work here as you've mocked up above. Of the options, the most clearly understandable is the ellipses dropdown that you have with a "Convert to link" option. I'd suggest keeping it Sentence case and then converting the other options to Sentence case in another PR. |
@paaljoachim that's one option, for me though transforming feels a bit hidden, I don't know I guess you could argue that it's just as hidden in the ellipsis. I wonder though if you would associate paragraph with changing to a link? |
Hey Mark and Tammie. As I see it any URL which wants to create a WordPress embed link should show a placeholder that asks the user if she/he wants to create an embed link or a text link. Similar to what I mention in the 21029 issue. If the user decides later to change from a WordPress embed then they can click the pencil and choose to convert to text link instead (as clicking the pencil the same placeholder screen will show up). |
@karmatosed |
@desaiuditd I wouldn't suggest both, I would suggest just one and it's about deciding which one. |
I made an Embed prototype: It uses a placeholder and the 3 dot ellipsis menu. |
I think it would be a good idea to focus in on the problem we're trying to solve and recapping where we are today. I appreciate the mocks, but I do think it's a good spot to check in on objective here. From there, absolutely it can move into iterations. Currently, we have the option to transform as shown in #17413. Next steps based on revising this flow would be to bring in the following:
Now let's try and focus on each of those. PlaceholderThis would appear only if you paste a link which could embed. I think a simpler approach as I outlined here would be a good start for moving to code. As far as embeds I think if identified as an embed we could go a step further and show what I outlined in #18653, however that I feel is an extra step. Including here to merge the issues: Option to convertThere are a few proposed spots for this:
I would suggest the ellipsis for me works best here and would like to see that over the transforms, which I am not totally convinced someone will think about. I could be persuaded for a transform and ellipsis, but I really am not sure this would be something you'd go there to discover. Again, happy to discuss that though. Next stepsWhilst I appreciate the mocks I do think we can scale this back and see what the effect is on people. We don't need to dive right into a full scale dual button within editing or other options right now. My feeling is we can based on the following move into development, but I would appreciate some feedback before as I am making some decisions here.
I am closing #8653 so we can focus on this issue and get a solution. After that, it can be iterated. Let's see this as a step and then get feedback. Of course, if other mocks are wanted based on mine above that is totally ok, I do think we need to simplify though and see what this feels like first. |
As you mentioned we have one way that is already merged which is to transform an embed from inside the standard Transform menu to a paragraph block (is not easy to be aware of but uses an existing method).
I think the easiest way would be to add a general placeholder box for all embeds. Creating an embed box for each embed will likely be a lot of work making it too complex.
|
Just to be clear my note is to add a link and copy change for existing embeds, not to change the boxes for each placeholder, that then allows us to avoid a placeholder before the embed one. The placeholder would happen if you just pasted a link. |
I agree it's frustrating if I just want to paste in a link without an embed. But I feel this way because the option to convert it doesn't exist. I'd like to provide the user a decisive solution and then offer options if they wish to change it. This means that if we have an embed option, we just embed it. BUT we allow the user to convert it to a link using the ellipses menu as @karmatosed mocked up. Ultimately, I'd also like to see us allow the ability to paste without formatting, @ellatrix. Like maybe a What do y'all think if we started here? If you feel the placeholder is necessary when pasting a link that can be an embed, I'm open to that direction. |
Thanks for sharing Mark @mapk ! I am open for the various ideas. Having the Convert to text link option show up in the ellipsis menu when an embed is selected is very helpful. As the ellipsis menu will likely show relevant options depending on which block is selected. So the option would not be there on clicking blocks that are not embeds. Sounds like a good move forward to add the option into the ellipsis menu. |
@karmatosed |
@desaiuditd that's fine, but please also remove the one for transforms, so we don't have both. |
Hey Tammie. In regards to two methods of transforming an embed. One in the Transform to panel next to Group. I see no harm in keeping the already merged transform to Paragraph in the Transform to panel. As it gives the user two different methods to convert an embed. Users will choose different ways. The Transfom to panel is meant as a place to transform the selected block to some other block. Transforming the Embed to a Paragraph block also belongs in the specific panel. Having the "Convert to text link" in the Ellipsis menu. Might be easier to find for some. In general lets add blocks to the Transform to panel. Giving the option for users to in general use this panel to transform any kind of block. |
Initially when I read about using the Transform tool to transform the embed to a link, I wasn't sure how that would happen. A "link" isn't really a block. But a Paragraph is! Thanks for the visual, @paaljoachim. This makes a bit more sense to me (but I know Gutenberg), does it make sense to a user? Maybe? Either way, it's probably okay allowing the block to be transformed to a Paragraph regardless because it's utilizing an existing Gutenberg ability. |
Cool. I'll try to work on this in this week. Will raise a PR. |
Thanks @desaiuditd that would be great. Let's remove transforms and take it from there as far as direction. If it does feel we need more methods then we absolutely can iterate. We need to distil back first though. |
I started working on this and I saw that Embed block code is written in good ol' React Class based component. And I'm like ... no, I'm not touching that. 😉 On serious note, I need to be able to use certain React hooks e.g., But then I remembered @mcsf 's comment on #17413 that
So I thought this could be a good opportunity to refactor the Embed block code. At least, converting the edit component into a function component to start with. So that React Hooks can be used within. gutenberg/packages/block-library/src/embed/edit.js Lines 24 to 29 in 4857ad5
But before I do that, can I get consent from someone senior from the dev community? Any thoughts/opinions? Of course, I can do that in separate PR, to maintain separation of concerns. One, just for the refactor and second, to actually add the Update: I've got a branch ready which refactors the Embed edit component. Let me know if that's cool and I can raise a PR. Thanks. 🙂 |
Hey Udit @desaiuditd This would be something we can bring up during the Core Editor meeting on Wednesday. As it is a good place to create some discussions around refactoring the Embed block code. |
Our coding guidelines recommend the usage of function components, so I'd say this is a perfect opportunity to refactor the Embed block to use hooks.
|
Great! I’ll open PR soon! |
#27915 has some valuable additions to this issue, worth a look. |
**Feature Request:**It would be cool if users had the option to select if pasting in a link is just a link vs. a link with some kind of preview. Here is a screen recording of how the twitter link pasting works on WP.com vs. link pasting.
Solution options:
I think the middle option makes the most sense, and the first should happen regardless. I could see some value in making it a separate block if we wanted the experience to be 3)
https://d.pr/v/Xa2qSg
The text was updated successfully, but these errors were encountered: