{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/newspack-theme/issues/243","repository_url":"https://api.github.com/repos/Automattic/newspack-theme","labels_url":"https://api.github.com/repos/Automattic/newspack-theme/issues/243/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/newspack-theme/issues/243/comments","events_url":"https://api.github.com/repos/Automattic/newspack-theme/issues/243/events","html_url":"https://github.com/Automattic/newspack-theme/pull/243","id":480440455,"node_id":"MDExOlB1bGxSZXF1ZXN0MzA3MTM3MTI1","number":243,"title":"Block Styles: Add style to columns block to reorder columns","user":{"login":"laurelfulford","id":177561,"node_id":"MDQ6VXNlcjE3NzU2MQ==","avatar_url":"https://avatars3.githubusercontent.com/u/177561?v=4","gravatar_id":"","url":"https://api.github.com/users/laurelfulford","html_url":"https://github.com/laurelfulford","followers_url":"https://api.github.com/users/laurelfulford/followers","following_url":"https://api.github.com/users/laurelfulford/following{/other_user}","gists_url":"https://api.github.com/users/laurelfulford/gists{/gist_id}","starred_url":"https://api.github.com/users/laurelfulford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/laurelfulford/subscriptions","organizations_url":"https://api.github.com/users/laurelfulford/orgs","repos_url":"https://api.github.com/users/laurelfulford/repos","events_url":"https://api.github.com/users/laurelfulford/events{/privacy}","received_events_url":"https://api.github.com/users/laurelfulford/received_events","type":"User","site_admin":false},"labels":[{"id":1394269624,"node_id":"MDU6TGFiZWwxMzk0MjY5NjI0","url":"https://api.github.com/repos/Automattic/newspack-theme/labels/[Status]%20Needs%20Discussion","name":"[Status] Needs Discussion","color":"90d8f4","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-08-14T01:34:01Z","updated_at":"2019-08-14T16:10:52Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/Automattic/newspack-theme/pulls/243","html_url":"https://github.com/Automattic/newspack-theme/pull/243","diff_url":"https://github.com/Automattic/newspack-theme/pull/243.diff","patch_url":"https://github.com/Automattic/newspack-theme/pull/243.patch"},"body":"### All Submissions:\r\n\r\n* [x] Have you followed the [Newspack Contributing guideline](https://github.com/Automattic/newspack-theme/blob/master/.github/CONTRIBUTING.md)?\r\n* [x] Does your code follow the [WordPress' coding standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/) and [VIP Go coding standards](https://vip.wordpress.com/documentation/vip-go/code-review-blockers-warnings-notices/)?\r\n* [x] Have you checked to ensure there aren't other open [Pull Requests](../../pulls) for the same update/change?\r\n\r\n### Changes proposed in this Pull Request:\r\n\r\nThis PR is for [this issue](https://github.com/Automattic/newspack-blocks/issues/40) in the Newspack Block repository -- I think it makes more sense to have in the theme, or its own plugin; I've started with it in the theme for now, but would appreciate a second opinion on this!\r\n\r\nSomething that came up a few times during the design feedback was how the articles would be ordered on mobile. By default, the columns would stack left to right, meaning the most important story (in theory) would be on the left.\r\n\r\nThis isn't always the case, though -- there are layouts where the most prominent, important story would actually be placed in the middle on desktop, but should be at the top on mobile/to screenreaders.\r\n\r\nI got into it in more detail, along with accessibility considerations, in the original ticket: https://github.com/Automattic/newspack-blocks/issues/40 But the short of it is, the styles this PR adds reorders the columns on desktop sized screens only, so you technically place your most important stories in the first column, but can style that column to appear as the second or third column, to centre it on larger screens.\r\n\r\n### How to test the changes in this Pull Request:\r\n\r\n1. Apply the patch and run `npm run build`.\r\n2. Copy paste[ this test content](https://cloudup.com/cUZLDreQrup) into the code view of the editor. It has a columns block with three columns, each with an article block.\r\n\r\n![image](https://user-images.githubusercontent.com/177561/62988124-07170900-bdf8-11e9-8734-957bae09183e.png)\r\n\r\n3. Click the 'Change Block Style or Type' button in the editor for the Columns block; you should now see three options for styles: Default, and the horribly named 'Move first column to second' and 'Move first column to third'; the previews are also not great.\r\n\r\n![image](https://user-images.githubusercontent.com/177561/62988173-3594e400-bdf8-11e9-928a-0f8a26d9e4eb.png)\r\n\r\n4. Apply 'Move first column to second' -- the larger first column should now appear in the middle:\r\n\r\n![image](https://user-images.githubusercontent.com/177561/62988202-50675880-bdf8-11e9-831a-3840719a8446.png)\r\n\r\n(Though in the source it's still first; if you shrink down the browser window, it will still be at the top:\r\n\r\n![image](https://user-images.githubusercontent.com/177561/62988220-68d77300-bdf8-11e9-98ac-71ab84c0d220.png)\r\n)\r\n\r\n5. 'Move first column to third' will move it to the end -- though this would be more realistically used in cases where you have more than three columns:\r\n\r\n![image](https://user-images.githubusercontent.com/177561/62988262-90c6d680-bdf8-11e9-83be-e26b74d4162c.png)\r\n\r\n### Other information:\r\n\r\n* [x] Have you added an explanation of what your changes do and why you'd like us to include them?\r\n"},"comment":{"url":"https://api.github.com/repos/Automattic/newspack-theme/issues/comments/521312675","html_url":"https://github.com/Automattic/newspack-theme/pull/243#issuecomment-521312675","issue_url":"https://api.github.com/repos/Automattic/newspack-theme/issues/243","id":521312675,"node_id":"MDEyOklzc3VlQ29tbWVudDUyMTMxMjY3NQ==","user":{"login":"laurelfulford","id":177561,"node_id":"MDQ6VXNlcjE3NzU2MQ==","avatar_url":"https://avatars3.githubusercontent.com/u/177561?v=4","gravatar_id":"","url":"https://api.github.com/users/laurelfulford","html_url":"https://github.com/laurelfulford","followers_url":"https://api.github.com/users/laurelfulford/followers","following_url":"https://api.github.com/users/laurelfulford/following{/other_user}","gists_url":"https://api.github.com/users/laurelfulford/gists{/gist_id}","starred_url":"https://api.github.com/users/laurelfulford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/laurelfulford/subscriptions","organizations_url":"https://api.github.com/users/laurelfulford/orgs","repos_url":"https://api.github.com/users/laurelfulford/repos","events_url":"https://api.github.com/users/laurelfulford/events{/privacy}","received_events_url":"https://api.github.com/users/laurelfulford/received_events","type":"User","site_admin":false},"created_at":"2019-08-14T16:10:52Z","updated_at":"2019-08-14T16:10:52Z","author_association":"CONTRIBUTOR","body":"> I suspect this belongs in the Newspack Blocks plugin, but we should dig in to the pros and cons.\r\n\r\nI was thinking it could also just be a stand-alone plugin because it doesn't require the other elements of Newspack to work... though it probably doesn't have a ton of use cases outside of that.\r\n\r\nI spent too much time waffling about this myself, it's why it ended up dumped in the theme for the short-term :) "}}
{"actor":{"display_login":"laurelfulford"}}