{"action":"opened","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/5356","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5356/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5356/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5356/events","html_url":"https://github.com/WordPress/gutenberg/issues/5356","id":301819445,"number":5356,"title":"CSS: review the padding for the meta boxes `inside` area","user":{"login":"afercia","id":1682452,"avatar_url":"https://avatars1.githubusercontent.com/u/1682452?v=4","gravatar_id":"","url":"https://api.github.com/users/afercia","html_url":"https://github.com/afercia","followers_url":"https://api.github.com/users/afercia/followers","following_url":"https://api.github.com/users/afercia/following{/other_user}","gists_url":"https://api.github.com/users/afercia/gists{/gist_id}","starred_url":"https://api.github.com/users/afercia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/afercia/subscriptions","organizations_url":"https://api.github.com/users/afercia/orgs","repos_url":"https://api.github.com/users/afercia/repos","events_url":"https://api.github.com/users/afercia/events{/privacy}","received_events_url":"https://api.github.com/users/afercia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-02T16:12:35Z","updated_at":"2018-03-02T16:12:35Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Plugins that render their meta boxes in the area below the post come with their CSS rules for their content. They deal with the core CSS rules since years and have adjusted their styles to render their content the way they want.\r\n\r\nIdeally, Gutenberg should maximize the effort to keep this unchanged to avoid to force plugin authors to refactor their CSS. Worth noting plugins have also to be compatible with WordPress with and without Gutenberg so trying to limit changes and maintenance nightmare would be highly desirable.\r\n\r\nWordPress core uses this rule for the `inside` padding:\r\n```\r\n.postbox .inside,\r\n.stuffbox .inside {\r\n\tpadding: 0 12px 12px;\r\n\tline-height: 1.4em;\r\n\tfont-size: 13px;\r\n}\r\n```\r\n\r\nGutenberg changes this and also adds some top padding:\r\n```\r\n.edit-post-meta-boxes-area .postbox>.inside {\r\n    border-bottom: 1px solid #e2e4e7;\r\n    color: #555d66;\r\n    padding: 15px;\r\n    margin: 0;\r\n}\r\n```\r\n\r\nWhile it's understandable that color, margin, and border are needed to integrate with the Gutenberg design, I think the padding relates to the content of the metabox and thus should stay unchanged. At least the top padding.\r\n\r\nPlugins expect a top padding equal to `0`. In some cases, this is very clear. For example. WooCommerce already enforces this with a custom rule for its Products meta box:\r\n```\r\n#woocommerce-product-data .inside,\r\n#woocommerce-product-type-options .inside {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n```\r\n\r\nother plugins just expect `0` and their layout breaks:\r\n\r\n<img width=\"728\" alt=\"screen shot 2018-03-02 at 15 02 59\" src=\"https://user-images.githubusercontent.com/1682452/36908345-3a5cf332-1e3b-11e8-90c0-d7c59ea7b6e9.png\">\r\n\r\nPlugins could certainly adapt but this seems an unnecessary effort since the expected value for the top padding is `0` and it has been `0` for years and years.\r\n\r\nI'd propose to make the top padding `0`. Also, seems to me the left and right padding should be `14px` not `15px`. PR incoming."}}
{"actor":{"display_login":"afercia"}}