{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/jetpack/issues/9848","repository_url":"https://api.github.com/repos/Automattic/jetpack","labels_url":"https://api.github.com/repos/Automattic/jetpack/issues/9848/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/jetpack/issues/9848/comments","events_url":"https://api.github.com/repos/Automattic/jetpack/issues/9848/events","html_url":"https://github.com/Automattic/jetpack/pull/9848","id":337890091,"node_id":"MDExOlB1bGxSZXF1ZXN0MTk4OTU2MzM5","number":9848,"title":"Widgets: Fix the Simple Payments widget in the widgets.php page","user":{"login":"Copons","id":2070010,"node_id":"MDQ6VXNlcjIwNzAwMTA=","avatar_url":"https://avatars2.githubusercontent.com/u/2070010?v=4","gravatar_id":"","url":"https://api.github.com/users/Copons","html_url":"https://github.com/Copons","followers_url":"https://api.github.com/users/Copons/followers","following_url":"https://api.github.com/users/Copons/following{/other_user}","gists_url":"https://api.github.com/users/Copons/gists{/gist_id}","starred_url":"https://api.github.com/users/Copons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Copons/subscriptions","organizations_url":"https://api.github.com/users/Copons/orgs","repos_url":"https://api.github.com/users/Copons/repos","events_url":"https://api.github.com/users/Copons/events{/privacy}","received_events_url":"https://api.github.com/users/Copons/received_events","type":"User","site_admin":false},"labels":[{"id":70993307,"node_id":"MDU6TGFiZWw3MDk5MzMwNw==","url":"https://api.github.com/repos/Automattic/jetpack/labels/Extra%20Sidebar%20Widgets","name":"Extra Sidebar Widgets","color":"006b75","default":false},{"id":666799304,"node_id":"MDU6TGFiZWw2NjY3OTkzMDQ=","url":"https://api.github.com/repos/Automattic/jetpack/labels/Simple%20Payments","name":"Simple Payments","color":"006b75","default":false},{"id":199076921,"node_id":"MDU6TGFiZWwxOTkwNzY5MjE=","url":"https://api.github.com/repos/Automattic/jetpack/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04","default":false},{"id":70896532,"node_id":"MDU6TGFiZWw3MDg5NjUzMg==","url":"https://api.github.com/repos/Automattic/jetpack/labels/[Type]%20Bug","name":"[Type] Bug","color":"fc2929","default":false}],"state":"open","locked":false,"assignee":{"login":"Copons","id":2070010,"node_id":"MDQ6VXNlcjIwNzAwMTA=","avatar_url":"https://avatars2.githubusercontent.com/u/2070010?v=4","gravatar_id":"","url":"https://api.github.com/users/Copons","html_url":"https://github.com/Copons","followers_url":"https://api.github.com/users/Copons/followers","following_url":"https://api.github.com/users/Copons/following{/other_user}","gists_url":"https://api.github.com/users/Copons/gists{/gist_id}","starred_url":"https://api.github.com/users/Copons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Copons/subscriptions","organizations_url":"https://api.github.com/users/Copons/orgs","repos_url":"https://api.github.com/users/Copons/repos","events_url":"https://api.github.com/users/Copons/events{/privacy}","received_events_url":"https://api.github.com/users/Copons/received_events","type":"User","site_admin":false},"assignees":[{"login":"Copons","id":2070010,"node_id":"MDQ6VXNlcjIwNzAwMTA=","avatar_url":"https://avatars2.githubusercontent.com/u/2070010?v=4","gravatar_id":"","url":"https://api.github.com/users/Copons","html_url":"https://github.com/Copons","followers_url":"https://api.github.com/users/Copons/followers","following_url":"https://api.github.com/users/Copons/following{/other_user}","gists_url":"https://api.github.com/users/Copons/gists{/gist_id}","starred_url":"https://api.github.com/users/Copons/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Copons/subscriptions","organizations_url":"https://api.github.com/users/Copons/orgs","repos_url":"https://api.github.com/users/Copons/repos","events_url":"https://api.github.com/users/Copons/events{/privacy}","received_events_url":"https://api.github.com/users/Copons/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2018-07-03T13:04:07Z","updated_at":"2018-07-05T17:40:57Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/Automattic/jetpack/pulls/9848","html_url":"https://github.com/Automattic/jetpack/pull/9848","diff_url":"https://github.com/Automattic/jetpack/pull/9848.diff","patch_url":"https://github.com/Automattic/jetpack/pull/9848.patch"},"body":"Fixes https://github.com/Automattic/wp-calypso/issues/25576\r\n\r\nThe newly introduced Simple Payments widget heavily relies on the Customizer JS API and therefore it doesn't work in the Widgets (`widgets.php`) page.\r\n\r\nThis PR is an attempt to make it work in both pages flawlessly.\r\n\r\nMy initial attempt consisted in revers engineer the Customizer itself, to figure out when and why all widget events are triggered, in order to emulate them in the Widgets page.\r\nThis was sort of possible, but required an amount of hacks and workarounds several orders of magnitude larger than what I'm comfortable with.\r\n\r\nThis is the second attempt, and it's completely independent from the Customizer JS API.\r\nIt relies entirely on the event delegation, which is easy and performant enough to pull off with jQuery.\r\nI haven't modified the existing `form.php` and `customizer.js` files, but instead opted to write two new files from scratch in order to keep both version always open side by side, trying to stay as true to the original code as possible, while also rewriting it and learning from it.\r\n\r\nThe idea behind this attempt is that we observe the widgets container, and only react when one of the buttons in a Simple Payments widget is clicked. From there, that widget becomes the context where everything happens.\r\n\r\nClicking on \"Add New\" will simply open an empty form.\r\nClicking on \"Edit Selected\" will fetch via AJAX the details of the selected product to populate the form.\r\nSaving will simply save via AJAX whatever is in the form, and update the products selector accordingly.\r\nDeleting will delete the product and update the products selector.\r\nClosing the form will simply hide and clear it.\r\n\r\nBar corner cases and polish, this works fine in both the Widgets page and the Customizer.\r\n\r\nThere is one gotcha that I haven't got the time to study because I caught it too late before my AFK time.\r\nWhen adding a new product or editing an existing one, the Customizer does not refresh accordingly until the product is saved.\r\nThis happens because the selective refresh relies on the values returned by the `WP_Widget::update()` method. In this case, the only values actually needed for the widget are the title and a product ID.\r\nAll the product details (name, price, image, etc.) are saved via AJAX and stored in their own posts of CPT `jp_pay_product`.\r\nI know for a fact that @rodrigoi solved this issue, but for my poor understanding of the selective refresh magic, I can't seem to figure out exactly how.\r\n\r\nSince my AFK is near, I'm leaving this PR here hoping it will be of some inspiration to fix that nasty issue.\r\n\r\n#### Changes proposed in this Pull Request:\r\n\r\n* WIP\r\n\r\n#### Testing instructions:\r\n\r\n* On a Pro JP site, open both the Widgets page and the Customizer.\r\n* Add multiple Simple Payments widgets to a sidebar.\r\n* Try to add new products, and edit and deleting existing ones.\r\n* Make sure all the operations work as expected.\r\n* Make sure the Customizer preview updates accordingly to the edit (note: as of now, products are only updated when saving them)."},"comment":{"url":"https://api.github.com/repos/Automattic/jetpack/issues/comments/402799826","html_url":"https://github.com/Automattic/jetpack/pull/9848#issuecomment-402799826","issue_url":"https://api.github.com/repos/Automattic/jetpack/issues/9848","id":402799826,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMjc5OTgyNg==","user":{"login":"oskosk","id":746152,"node_id":"MDQ6VXNlcjc0NjE1Mg==","avatar_url":"https://avatars2.githubusercontent.com/u/746152?v=4","gravatar_id":"","url":"https://api.github.com/users/oskosk","html_url":"https://github.com/oskosk","followers_url":"https://api.github.com/users/oskosk/followers","following_url":"https://api.github.com/users/oskosk/following{/other_user}","gists_url":"https://api.github.com/users/oskosk/gists{/gist_id}","starred_url":"https://api.github.com/users/oskosk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oskosk/subscriptions","organizations_url":"https://api.github.com/users/oskosk/orgs","repos_url":"https://api.github.com/users/oskosk/repos","events_url":"https://api.github.com/users/oskosk/events{/privacy}","received_events_url":"https://api.github.com/users/oskosk/received_events","type":"User","site_admin":false},"created_at":"2018-07-05T17:40:57Z","updated_at":"2018-07-05T17:40:57Z","author_association":"CONTRIBUTOR","body":"All good as it is now @gwwar. Thanks for the heads-up"}}
{"actor":{"display_login":"oskosk"}}