{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/14241","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/14241/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/14241/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/14241/events","html_url":"https://github.com/WordPress/gutenberg/pull/14241","id":417383652,"node_id":"MDExOlB1bGxSZXF1ZXN0MjU4MzkyMTg3","number":14241,"title":"Adds Block Appender as placeholder to empty InnerBlocks","user":{"login":"getdave","id":444434,"node_id":"MDQ6VXNlcjQ0NDQzNA==","avatar_url":"https://avatars2.githubusercontent.com/u/444434?v=4","gravatar_id":"","url":"https://api.github.com/users/getdave","html_url":"https://github.com/getdave","followers_url":"https://api.github.com/users/getdave/followers","following_url":"https://api.github.com/users/getdave/following{/other_user}","gists_url":"https://api.github.com/users/getdave/gists{/gist_id}","starred_url":"https://api.github.com/users/getdave/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/getdave/subscriptions","organizations_url":"https://api.github.com/users/getdave/orgs","repos_url":"https://api.github.com/users/getdave/repos","events_url":"https://api.github.com/users/getdave/events{/privacy}","received_events_url":"https://api.github.com/users/getdave/received_events","type":"User","site_admin":false},"labels":[{"id":961551509,"node_id":"MDU6TGFiZWw5NjE1NTE1MDk=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Feedback","name":"Feedback","color":"89f9db","default":false},{"id":1086171268,"node_id":"MDU6TGFiZWwxMDg2MTcxMjY4","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback","name":"Needs Accessibility Feedback","color":"b60205","default":false},{"id":1020812022,"node_id":"MDU6TGFiZWwxMDIwODEyMDIy","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Technical%20Feedback","name":"Needs Technical Feedback","color":"67dff7","default":false},{"id":596962434,"node_id":"MDU6TGFiZWw1OTY5NjI0MzQ=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Component]%20Inserter","name":"[Component] Inserter","color":"fbca04","default":false},{"id":896884785,"node_id":"MDU6TGFiZWw4OTY4ODQ3ODU=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Component]%20Nested%20/%20Inner%20Blocks","name":"[Component] Nested / Inner Blocks","color":"fbca04","default":false},{"id":587343997,"node_id":"MDU6TGFiZWw1ODczNDM5OTc=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Status]%20In%20Progress","name":"[Status] In Progress","color":"0052cc","default":false}],"state":"open","locked":false,"assignee":{"login":"getdave","id":444434,"node_id":"MDQ6VXNlcjQ0NDQzNA==","avatar_url":"https://avatars2.githubusercontent.com/u/444434?v=4","gravatar_id":"","url":"https://api.github.com/users/getdave","html_url":"https://github.com/getdave","followers_url":"https://api.github.com/users/getdave/followers","following_url":"https://api.github.com/users/getdave/following{/other_user}","gists_url":"https://api.github.com/users/getdave/gists{/gist_id}","starred_url":"https://api.github.com/users/getdave/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/getdave/subscriptions","organizations_url":"https://api.github.com/users/getdave/orgs","repos_url":"https://api.github.com/users/getdave/repos","events_url":"https://api.github.com/users/getdave/events{/privacy}","received_events_url":"https://api.github.com/users/getdave/received_events","type":"User","site_admin":false},"assignees":[{"login":"getdave","id":444434,"node_id":"MDQ6VXNlcjQ0NDQzNA==","avatar_url":"https://avatars2.githubusercontent.com/u/444434?v=4","gravatar_id":"","url":"https://api.github.com/users/getdave","html_url":"https://github.com/getdave","followers_url":"https://api.github.com/users/getdave/followers","following_url":"https://api.github.com/users/getdave/following{/other_user}","gists_url":"https://api.github.com/users/getdave/gists{/gist_id}","starred_url":"https://api.github.com/users/getdave/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/getdave/subscriptions","organizations_url":"https://api.github.com/users/getdave/orgs","repos_url":"https://api.github.com/users/getdave/repos","events_url":"https://api.github.com/users/getdave/events{/privacy}","received_events_url":"https://api.github.com/users/getdave/received_events","type":"User","site_admin":false},{"login":"talldan","id":677833,"node_id":"MDQ6VXNlcjY3NzgzMw==","avatar_url":"https://avatars1.githubusercontent.com/u/677833?v=4","gravatar_id":"","url":"https://api.github.com/users/talldan","html_url":"https://github.com/talldan","followers_url":"https://api.github.com/users/talldan/followers","following_url":"https://api.github.com/users/talldan/following{/other_user}","gists_url":"https://api.github.com/users/talldan/gists{/gist_id}","starred_url":"https://api.github.com/users/talldan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/talldan/subscriptions","organizations_url":"https://api.github.com/users/talldan/orgs","repos_url":"https://api.github.com/users/talldan/repos","events_url":"https://api.github.com/users/talldan/events{/privacy}","received_events_url":"https://api.github.com/users/talldan/received_events","type":"User","site_admin":false}],"milestone":null,"comments":76,"created_at":"2019-03-05T16:24:45Z","updated_at":"2019-04-11T17:06:00Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/14241","html_url":"https://github.com/WordPress/gutenberg/pull/14241","diff_url":"https://github.com/WordPress/gutenberg/pull/14241.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/14241.patch"},"body":"When inserting a Block that makes use of `InnerBlocks`(eg: Columns) there are two issues:\r\n\r\n1. It isn't always clear that the Block had been inserted (few visual cues)\r\n2. By default an empty paragraph Block is inserted - typically with high level Blocks this isn't what you want and it hides the controls on the parent Block and shows those of the paragraph Block.\r\n\r\nThis change aims to address this by replacing the default behaviour and instead showing the Block Appender as a placeholder:\r\n\r\n![screen shot 2019-03-05 at 16 16 24](https://user-images.githubusercontent.com/444434/53819568-139e5800-3f62-11e9-810a-ce6909577416.png)\r\n\r\nThis works by checking whether the parent Block has 1 or more innerBlocks. If there are none then it displays the Block Appender as a placeholder thereby clearly indicating the Block has been inserted and providing an opportunity for the user to manually select the appropriate child Block to insert. \r\n\r\nOnce a child Block is inserted then the placeholder is removed.\r\n\r\nThis is closely tied to the current work on the Container Block which requires exactly the functionality described above to be perceivable to users. Please see https://github.com/WordPress/gutenberg/pull/13964#issuecomment-469700424\r\n\r\n## Todos / Outstanding Tasks\r\n- [x] Adjust appender to use `100` version of the gray.\r\n- [x] Fix to ensure [appender is not larger than column content](https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470536786). Attempt to match up with [this](https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470057746).\r\n- [x] Fix e2e tests that broke as a result of the UI / UX change\r\n- [x] Write new e2e tests to cover the new UI/UX\r\n- [ ] Write e2e tests to verify \r\n  - it works with a custom appender \r\n  - it works with the exposed components\r\n- [ ] Address final feedback points\r\n\r\n## How has this been tested?\r\nFor testing purposes apply the following patch to enable the `ButtonBlockAppender` on `core/seciton` and `core/column`\r\n\r\n```patch\r\ndiff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js\r\nindex a13779e54..3224f2df0 100644\r\n--- a/packages/block-library/src/columns/column.js\r\n+++ b/packages/block-library/src/columns/column.js\r\n@@ -33,6 +33,9 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {\r\n \t\t\t</BlockControls>\r\n \t\t\t<InnerBlocks\r\n \t\t\t\ttemplateLock={ false }\r\n+\t\t\t\trenderAppender={ () => (\r\n+\t\t\t\t\t<InnerBlocks.ButtonBlockAppender />\r\n+\t\t\t\t) }\r\n \t\t\t/>\r\n \t\t</div>\r\n \t);\r\ndiff --git a/packages/block-library/src/section/edit.js b/packages/block-library/src/section/edit.js\r\nindex fcf17c40c..bbbd5adfc 100644\r\n--- a/packages/block-library/src/section/edit.js\r\n+++ b/packages/block-library/src/section/edit.js\r\n@@ -39,7 +39,11 @@ function SectionEdit( { className, setBackgroundColor, backgroundColor } ) {\r\n \t\t\t\t/>\r\n \t\t\t</InspectorControls>\r\n \t\t\t<div className={ classes } style={ styles }>\r\n-\t\t\t\t<InnerBlocks />\r\n+\t\t\t\t<InnerBlocks\r\n+\t\t\t\t\trenderAppender={ () => (\r\n+\t\t\t\t\t\t<InnerBlocks.ButtonBlockAppender />\r\n+\t\t\t\t\t) }\r\n+\t\t\t\t/>\r\n \t\t\t</div>\r\n \t\t</Fragment>\r\n \t);\r\n\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n\r\n\r\n## Types of changes\r\n* New feature (non-breaking change which adds functionality\r\n* (Possible) Breaking change (fix or feature that would cause existing functionality to not work as expected)\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://wordpress.org/gutenberg/handbook/designers-developers/ -->\r\n"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/482203474","html_url":"https://github.com/WordPress/gutenberg/pull/14241#issuecomment-482203474","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/14241","id":482203474,"node_id":"MDEyOklzc3VlQ29tbWVudDQ4MjIwMzQ3NA==","user":{"login":"getdave","id":444434,"node_id":"MDQ6VXNlcjQ0NDQzNA==","avatar_url":"https://avatars2.githubusercontent.com/u/444434?v=4","gravatar_id":"","url":"https://api.github.com/users/getdave","html_url":"https://github.com/getdave","followers_url":"https://api.github.com/users/getdave/followers","following_url":"https://api.github.com/users/getdave/following{/other_user}","gists_url":"https://api.github.com/users/getdave/gists{/gist_id}","starred_url":"https://api.github.com/users/getdave/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/getdave/subscriptions","organizations_url":"https://api.github.com/users/getdave/orgs","repos_url":"https://api.github.com/users/getdave/repos","events_url":"https://api.github.com/users/getdave/events{/privacy}","received_events_url":"https://api.github.com/users/getdave/received_events","type":"User","site_admin":false},"created_at":"2019-04-11T17:06:00Z","updated_at":"2019-04-11T17:06:00Z","author_association":"CONTRIBUTOR","body":"@aduth Thanks for much for your review! Most points have now been addressed.\r\n\r\n@jorgefilipecosta Thank you for additional points. One point outstanding which I didn't follow (my fault!).\r\n\r\n@youknowriad Thanks for raising your concerns and for confirming the direction on the basis of the responses."}}
{"actor":{"display_login":"getdave"}}