{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/5142","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5142/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5142/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5142/events","html_url":"https://github.com/WordPress/gutenberg/pull/5142","id":298247766,"number":5142,"title":"Try refactoring floats","user":{"login":"jasmussen","id":1204802,"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":816933178,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Testing","name":"Needs Testing","color":"67dff7","default":false}],"state":"open","locked":false,"assignee":{"login":"jasmussen","id":1204802,"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,"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":null,"comments":8,"created_at":"2018-02-19T11:48:36Z","updated_at":"2018-02-21T12:31:02Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/5142","html_url":"https://github.com/WordPress/gutenberg/pull/5142","diff_url":"https://github.com/WordPress/gutenberg/pull/5142.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/5142.patch"},"body":"It uses the same approach as in [this codepen](https://codepen.io/joen/pen/oEYVXB) to refactor floats, so they don't have weird margin hacks that fall apart as soon as you stack multiple floats.\r\n\r\nIt works in this branch for images, and depending on how we like this approach, it should be possible to extend this to all other blocks as well. \r\n\r\nAlso important to note, the work done here will benefit nested UI as well, and should let us do a negative margin hack to show side UI in nested contexts. \r\n\r\nGIF:\r\n\r\n![newfloats](https://user-images.githubusercontent.com/1204802/36376117-3ee01c76-1572-11e8-891a-d71b8d923f9a.gif)\r\n\r\nOn a high level, this works by embracing the max-width that the image block has, and keeping this unchanged. That makes it the same width as the main column. We then float the image inside, instead, allowing the block itself to collapse to a zero height element. This let's text and subsequent blocks wrap around the float as intended.\r\n\r\nAs far as I can tell, the only weak point in this approach, right now, is that it includes a hack to disable _collapsing margins_. [Here are all the gory details on collapsing margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/), but the short of it is this: most themes _use_ collapsing margins. In this PR they are disabled because it allows us to simplify the block boundary code and the fixed toolbar. The benefit to this is that the code is lean for the UI, and just works. The downside is that the image float hack pretty much relies on margins collapsing, and to mitigate this we actually have to add some extra top margin to a floated image, to make sure it aligns with surrounding text. This can become a pain point when themers start to load their `style.css` file directly into Gutenberg, and suddenly the margins that space their content appear to be doubled, and floated images appearing vertically offset.\r\n\r\nBut for now, and before I go too far in one direction, this PR currently represents the simplest approach to refactoring floats. \r\n\r\nWould love your thoughts. "},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/367311344","html_url":"https://github.com/WordPress/gutenberg/pull/5142#issuecomment-367311344","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5142","id":367311344,"user":{"login":"jasmussen","id":1204802,"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-02-21T12:31:02Z","updated_at":"2018-02-21T12:31:02Z","author_association":"CONTRIBUTOR","body":"Here's what I'd like to do with the side-UI for floated items:\r\n\r\n![screen shot 2018-02-21 at 13 29 46](https://user-images.githubusercontent.com/1204802/36480102-5b2918a2-170b-11e8-98a4-b03f28a88d97.png)\r\n\r\nEssentially, as soon as an item gets floated, it gets the mobile UI, and no side inserters. This solves the stacking issue, and keeps the context too. \r\n\r\nI can do that as part of this branch, but I'd like to do it separately just because this is a lot of red code. "}}
{"actor":{"display_login":"jasmussen"}}