{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/11357","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/11357/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/11357/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/11357/events","html_url":"https://github.com/WordPress/gutenberg/pull/11357","id":376351196,"node_id":"MDExOlB1bGxSZXF1ZXN0MjI3NTg2NTYx","number":11357,"title":"Try: Refactor contextual toolbar to work better with floats","user":{"login":"jasmussen","id":1204802,"node_id":"MDQ6VXNlcjEyMDQ4MDI=","avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false},"labels":[{"id":531680825,"node_id":"MDU6TGFiZWw1MzE2ODA4MjU=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement","name":"[Type] Enhancement","color":"c5def5","default":false}],"state":"closed","locked":false,"assignee":{"login":"jasmussen","id":1204802,"node_id":"MDQ6VXNlcjEyMDQ4MDI=","avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false},"assignees":[{"login":"jasmussen","id":1204802,"node_id":"MDQ6VXNlcjEyMDQ4MDI=","avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/WordPress/gutenberg/milestones/72","html_url":"https://github.com/WordPress/gutenberg/milestone/72","labels_url":"https://api.github.com/repos/WordPress/gutenberg/milestones/72/labels","id":3784280,"node_id":"MDk6TWlsZXN0b25lMzc4NDI4MA==","number":72,"title":"4.3","description":"","creator":{"login":"gziolo","id":699132,"node_id":"MDQ6VXNlcjY5OTEzMg==","avatar_url":"https://avatars2.githubusercontent.com/u/699132?v=4","gravatar_id":"","url":"https://api.github.com/users/gziolo","html_url":"https://github.com/gziolo","followers_url":"https://api.github.com/users/gziolo/followers","following_url":"https://api.github.com/users/gziolo/following{/other_user}","gists_url":"https://api.github.com/users/gziolo/gists{/gist_id}","starred_url":"https://api.github.com/users/gziolo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gziolo/subscriptions","organizations_url":"https://api.github.com/users/gziolo/orgs","repos_url":"https://api.github.com/users/gziolo/repos","events_url":"https://api.github.com/users/gziolo/events{/privacy}","received_events_url":"https://api.github.com/users/gziolo/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":130,"state":"closed","created_at":"2018-10-31T07:05:04Z","updated_at":"2018-11-12T16:37:38Z","due_on":null,"closed_at":"2018-11-12T15:11:41Z"},"comments":45,"created_at":"2018-11-01T11:17:14Z","updated_at":"2018-11-16T11:11:59Z","closed_at":"2018-11-09T15:51:09Z","author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/11357","html_url":"https://github.com/WordPress/gutenberg/pull/11357","diff_url":"https://github.com/WordPress/gutenberg/pull/11357.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/11357.patch"},"body":"This PR seeks to fix #4764.\r\n\r\nBut it is also a rather expansive refactor, and big surgery, this late in the phase. I believe it is a good refactor and relatively solid. But because it has the potential to cause breakage in many aspects, like editor styles and exotic combinations of blocks, RTL, probably other aspects too, not only will this need a lot of testing, but there may be enough dragons that it could be worth punting this to phase 2.\r\n\r\nThis PR does a number of things:\r\n\r\n- It moves the contextual toolbar into the block edit div, which is the one we float. This helps make it _connected_ to the content.\r\n- Add some complex clearing rules so we avoid many of the gnarly situations where a selected block after a floated block has a weirdly tall size.\r\n- Fixes so a paragraph block that follows a float does behave as it will on the frontend (i.e. won't clear), but also has a toolbar that is correctly positioned.\r\n\r\nThis moving around of things caused subsequent issues, which means this PR also:\r\n\r\n- Fixes the toolbar appearance on mobile.\r\n- Improves upon the appearance of the toolbar on floated items on mobile.\r\n- Fixes hover label positioning, not only so they work with floats, but are positioned correctly as a result of this refactor.\r\n- Fixes issues with wide and fullwide toolbar positioning.\r\n\r\n**Screenshots of what it fixes**. The hover label is now correctly positioned on floats:\r\n\r\n<img width=\"649\" alt=\"screenshot 2018-11-01 at 11 02 33\" src=\"https://user-images.githubusercontent.com/1204802/47848700-7ffc2580-ddcf-11e8-9387-c6144829e044.png\">\r\n\r\nThe toolbar of the 2nd floated block is now correctly positioned:\r\n\r\n<img width=\"677\" alt=\"screenshot 2018-11-01 at 10 54 51\" src=\"https://user-images.githubusercontent.com/1204802/47848712-88546080-ddcf-11e8-9a8f-4284051b3c4a.png\">\r\n\r\nThe boundaries and toolbar of a 3rd block that follows 2 floated blocks, is now correct:\r\n\r\n<img width=\"655\" alt=\"screenshot 2018-11-01 at 10 54 55\" src=\"https://user-images.githubusercontent.com/1204802/47848743-9609e600-ddcf-11e8-8726-e425adfd0ae5.png\">\r\n\r\nText following one or more floated blocks will now have correct boundaries and toolbar:\r\n\r\n<img width=\"732\" alt=\"screenshot 2018-11-01 at 12 02 51\" src=\"https://user-images.githubusercontent.com/1204802/47848824-d10c1980-ddcf-11e8-8a60-35f71c11ce7f.png\">\r\n\r\nHowever there is a new issue with multi-selection. It may be hard to fix for technical reasons, but it means the multi select indicator for floats is currently not super visible. This branch:\r\n\r\n<img width=\"690\" alt=\"screenshot 2018-11-01 at 12 12 43\" src=\"https://user-images.githubusercontent.com/1204802/47848865-f9941380-ddcf-11e8-8fb7-eea850d16806.png\">\r\n\r\nMaster:\r\n\r\n<img width=\"743\" alt=\"screenshot 2018-11-01 at 12 12 28\" src=\"https://user-images.githubusercontent.com/1204802/47848868-fc8f0400-ddcf-11e8-8a2c-4f4709ee6ae0.png\">\r\n\r\nHowever we can do something else for multiselected floats. But before I do that, I'd like feedback on this PR first. Please give it a thorough shake."},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/439361972","html_url":"https://github.com/WordPress/gutenberg/pull/11357#issuecomment-439361972","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/11357","id":439361972,"node_id":"MDEyOklzc3VlQ29tbWVudDQzOTM2MTk3Mg==","user":{"login":"jasmussen","id":1204802,"node_id":"MDQ6VXNlcjEyMDQ4MDI=","avatar_url":"https://avatars3.githubusercontent.com/u/1204802?v=4","gravatar_id":"","url":"https://api.github.com/users/jasmussen","html_url":"https://github.com/jasmussen","followers_url":"https://api.github.com/users/jasmussen/followers","following_url":"https://api.github.com/users/jasmussen/following{/other_user}","gists_url":"https://api.github.com/users/jasmussen/gists{/gist_id}","starred_url":"https://api.github.com/users/jasmussen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jasmussen/subscriptions","organizations_url":"https://api.github.com/users/jasmussen/orgs","repos_url":"https://api.github.com/users/jasmussen/repos","events_url":"https://api.github.com/users/jasmussen/events{/privacy}","received_events_url":"https://api.github.com/users/jasmussen/received_events","type":"User","site_admin":false},"created_at":"2018-11-16T11:11:59Z","updated_at":"2018-11-16T11:11:59Z","author_association":"CONTRIBUTOR","body":"I took a look at this today, and learned a few things from it. Take a look at this:\r\n\r\n![screenshot 2018-11-16 at 11 36 02](https://user-images.githubusercontent.com/1204802/48617726-88d82400-e997-11e8-9604-22a61ede3199.png)\r\n\r\nThe coral area is the content. The red area is the hoverable/clickable area. \r\n\r\nWe can, with seemingly no side effects, change the hoverable/clickable area to look like this:\r\n\r\n![screenshot 2018-11-16 at 11 38 03](https://user-images.githubusercontent.com/1204802/48617761-a1e0d500-e997-11e8-864f-b61c50307369.png)\r\n\r\nBut that doesn't benefit us a ton, because we have the sibling inserter between every block. The green area here is the hoverable area that reveals the clickable plus in the middle:\r\n\r\n![screenshot 2018-11-16 at 11 46 42](https://user-images.githubusercontent.com/1204802/48617788-b0c78780-e997-11e8-8f32-d41258c36305.png)\r\n\r\nThis green area incidentally enables the _hovering_ of a block, but not the clicking. And even if we expand the red clickable area, the sibling inserter blocks clicks between the blocks.\r\n\r\nThis leads us to three potential ways forward:\r\n\r\n1: Acknowledge that the sibling inserter can't coexist with a larger click area that lets you select a block even when clicking on its margins. \r\n2: Reduce the _width_ of the sibling inserter hover area, so you can't hover the full width. For example we could decide you have to hover the 60% area in the middle, which would leave 20% on each side where you could click block margins to select the underlying blocks. \r\n3: Find a way to propogate a _click_ on the sibling inserter hoverable area, down to the block below. This is a technical challenge, and there could be side-effects.\r\n\r\nTo expand on 3, it's important to remember that blocks need to be able to exist in a variety of contexts — mobile, desktop, in various editor styles, and with various margins before and after. We know from past experieces that people _really_ love the sibling inserter, so I'm both reluctant to make its hit area smaller, and worried about changing its behavior too much since usage of it seems to have stabilized.\r\n\r\nI'm curious of your thoughts on how best to approach this. "}}
{"actor":{"display_login":"jasmussen"}}