{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/7721","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7721/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7721/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7721/events","html_url":"https://github.com/WordPress/gutenberg/pull/7721","id":338514389,"node_id":"MDExOlB1bGxSZXF1ZXN0MTk5NDI0NjA2","number":7721,"title":"Revisit image 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":637003880,"node_id":"MDU6TGFiZWw2MzcwMDM4ODA=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Media","name":"Media","color":"00aa99","default":false}],"state":"open","locked":false,"assignee":{"login":"tofumatt","id":90871,"node_id":"MDQ6VXNlcjkwODcx","avatar_url":"https://avatars2.githubusercontent.com/u/90871?v=4","gravatar_id":"","url":"https://api.github.com/users/tofumatt","html_url":"https://github.com/tofumatt","followers_url":"https://api.github.com/users/tofumatt/followers","following_url":"https://api.github.com/users/tofumatt/following{/other_user}","gists_url":"https://api.github.com/users/tofumatt/gists{/gist_id}","starred_url":"https://api.github.com/users/tofumatt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tofumatt/subscriptions","organizations_url":"https://api.github.com/users/tofumatt/orgs","repos_url":"https://api.github.com/users/tofumatt/repos","events_url":"https://api.github.com/users/tofumatt/events{/privacy}","received_events_url":"https://api.github.com/users/tofumatt/received_events","type":"User","site_admin":false},"assignees":[{"login":"tofumatt","id":90871,"node_id":"MDQ6VXNlcjkwODcx","avatar_url":"https://avatars2.githubusercontent.com/u/90871?v=4","gravatar_id":"","url":"https://api.github.com/users/tofumatt","html_url":"https://github.com/tofumatt","followers_url":"https://api.github.com/users/tofumatt/followers","following_url":"https://api.github.com/users/tofumatt/following{/other_user}","gists_url":"https://api.github.com/users/tofumatt/gists{/gist_id}","starred_url":"https://api.github.com/users/tofumatt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tofumatt/subscriptions","organizations_url":"https://api.github.com/users/tofumatt/orgs","repos_url":"https://api.github.com/users/tofumatt/repos","events_url":"https://api.github.com/users/tofumatt/events{/privacy}","received_events_url":"https://api.github.com/users/tofumatt/received_events","type":"User","site_admin":false},{"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/62","html_url":"https://github.com/WordPress/gutenberg/milestone/62","labels_url":"https://api.github.com/repos/WordPress/gutenberg/milestones/62/labels","id":3572512,"node_id":"MDk6TWlsZXN0b25lMzU3MjUxMg==","number":62,"title":"3.7","description":null,"creator":{"login":"youknowriad","id":272444,"node_id":"MDQ6VXNlcjI3MjQ0NA==","avatar_url":"https://avatars3.githubusercontent.com/u/272444?v=4","gravatar_id":"","url":"https://api.github.com/users/youknowriad","html_url":"https://github.com/youknowriad","followers_url":"https://api.github.com/users/youknowriad/followers","following_url":"https://api.github.com/users/youknowriad/following{/other_user}","gists_url":"https://api.github.com/users/youknowriad/gists{/gist_id}","starred_url":"https://api.github.com/users/youknowriad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/youknowriad/subscriptions","organizations_url":"https://api.github.com/users/youknowriad/orgs","repos_url":"https://api.github.com/users/youknowriad/repos","events_url":"https://api.github.com/users/youknowriad/events{/privacy}","received_events_url":"https://api.github.com/users/youknowriad/received_events","type":"User","site_admin":false},"open_issues":29,"closed_issues":1,"state":"open","created_at":"2018-08-15T13:05:08Z","updated_at":"2018-08-17T12:03:42Z","due_on":null,"closed_at":null},"comments":34,"created_at":"2018-07-05T10:22:14Z","updated_at":"2018-08-17T12:11:00Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/7721","html_url":"https://github.com/WordPress/gutenberg/pull/7721","diff_url":"https://github.com/WordPress/gutenberg/pull/7721.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/7721.patch"},"body":"<strike>This adds a wrapping `aside` element to any image block that's floated left or right. From the spec, https://www.w3.org/TR/html52/grouping-content.html#the-figure-element:\r\n\r\n> For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a pull quote that repeats content from an article would be more appropriate in an aside than in a figure, because it isn’t part of the content, it’s a repetition of the content for the purposes of enticing readers or highlighting key topics.\r\n\r\nThe above is the reasoning for using the `aside` element to wrap the `figure`. </strike> Per [subsequent discussion](https://github.com/WordPress/gutenberg/pull/7721#issuecomment-408772694), we're going with a div.\r\n\r\nBut why wrap the `figure` at all?\r\n\r\nBecause due to issues surfaced in https://github.com/WordPress/gutenberg/pull/7624#issuecomment-402114247, it seems our current implementation isn't responsive.\r\n\r\nThe challenge is — what if you float a very small image to the left, and write a giant caption. Even if we apply `width: fit-content;` on the `figure`, the caption will expand the `figure` to accommodate as much text as the parent wrapping element will allow. `min-content` doesn't work either, because this will make the `figure` only as wide as the smallest word.\r\n\r\nWhat we have in master works in most cases, through dark magic, but it also only works because we remove the `max-width` from the nested image. This means the image won't resize with the viewport, and is therefore not responsive.\r\n\r\nI have explored so many many options for fixing this, and after all this time, what it boils down to is this:\r\n\r\n- We can either set a fixed size on floated captions, say 33%, and hope it works for the image that's floated. Not ideal, and you can see the end result here: https://codepen.io/joen/pen/wXbqwN\r\n- We can add a wrapping element around the `figure`, so that it and the `figcaption` can be sized using table rules, as in this PR. See also https://codepen.io/joen/pen/qKGYwy?editors=1100\r\n\r\nWhy not just set the width on the figure element and float that? Because then we can't accommodate wide images, which rely on an unbounded main column.\r\n\r\nIt's not ideal that we have to add an extra wrapping element, but it can be semantic, and it feels like the simplest to work with for themers implementing wide images coexisting with floats.\r\n\r\n![screen shot 2018-07-05 at 12 09 25](https://user-images.githubusercontent.com/1204802/42317963-f87cbacc-804d-11e8-8849-c5c7a0f8ee28.png)\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/413845909","html_url":"https://github.com/WordPress/gutenberg/pull/7721#issuecomment-413845909","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/7721","id":413845909,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMzg0NTkwOQ==","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-08-17T12:11:00Z","updated_at":"2018-08-17T12:11:00Z","author_association":"CONTRIBUTOR","body":"Thanks for all the reviews. Once the dust settles from 3.6, I'd like to get this in. "}}
{"actor":{"display_login":"jasmussen"}}