{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/12520","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/12520/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/12520/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/12520/events","html_url":"https://github.com/WordPress/gutenberg/issues/12520","id":386554204,"node_id":"MDU6SXNzdWUzODY1NTQyMDQ=","number":12520,"title":"Preformatted block: theme.scss wrong selector","user":{"login":"afercia","id":1682452,"node_id":"MDQ6VXNlcjE2ODI0NTI=","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":[{"id":578175199,"node_id":"MDU6TGFiZWw1NzgxNzUxOTk=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/Good%20First%20Issue","name":"Good First Issue","color":"d4c5f9","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},{"id":531680823,"node_id":"MDU6TGFiZWw1MzE2ODA4MjM=","url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug","name":"[Type] Bug","color":"d93f0b","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-02T12:16:15Z","updated_at":"2018-12-06T18:10:25Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"While in the editor the Preformatted block is rendered in a container element with a CSS class `wp-block-preformatted` which wraps a `<pre>` element, in the front-end the `<pre>` element itself has the class `wp-block-preformatted`:\r\n\r\n`<pre class=\"wp-block-preformatted\">`\r\n\r\nHowever, the `theme.scss` file assumes the markup used in the editor:\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/68367b4b9c869900eca07b9a9b3750ee52915c46/packages/block-library/src/preformatted/theme.scss#L1-L7\r\n\r\nThis must be changed removing the nested `pre` element selector, pretty much like what is done for the Code block."},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/444972040","html_url":"https://github.com/WordPress/gutenberg/issues/12520#issuecomment-444972040","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/12520","id":444972040,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDk3MjA0MA==","user":{"login":"m-e-h","id":3585901,"node_id":"MDQ6VXNlcjM1ODU5MDE=","avatar_url":"https://avatars1.githubusercontent.com/u/3585901?v=4","gravatar_id":"","url":"https://api.github.com/users/m-e-h","html_url":"https://github.com/m-e-h","followers_url":"https://api.github.com/users/m-e-h/followers","following_url":"https://api.github.com/users/m-e-h/following{/other_user}","gists_url":"https://api.github.com/users/m-e-h/gists{/gist_id}","starred_url":"https://api.github.com/users/m-e-h/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/m-e-h/subscriptions","organizations_url":"https://api.github.com/users/m-e-h/orgs","repos_url":"https://api.github.com/users/m-e-h/repos","events_url":"https://api.github.com/users/m-e-h/events{/privacy}","received_events_url":"https://api.github.com/users/m-e-h/received_events","type":"User","site_admin":false},"created_at":"2018-12-06T18:10:25Z","updated_at":"2018-12-06T18:10:25Z","author_association":"CONTRIBUTOR","body":"I commented the PR for this but I'm going to put it here as a reminder cause it looks like the same approach should probably be taken for the Code Block as well. And probably in other blocks where the HTML structure of the editor doesn't match up with the front-end.\r\n\r\nThe editor.css should inherit the properties rather than rewriting them.\r\n```\r\n.wp-block-preformatted { \r\n\tfont-family: $editor-html-font; \r\n\tfont-size: $text-editor-font-size; \r\n\tcolor: $dark-gray-800; \r\n} \r\n\r\n// in editor.css \r\npre { \r\n\tfont-family: inherit; \r\n\tfont-size: inherit; \r\n\tcolor: inherit; \r\n}\r\n```\r\nand \r\n```\r\n.wp-block-code {\r\n\tfont-family: $editor-html-font;\r\n\tfont-size: $text-editor-font-size;\r\n\tcolor: $dark-gray-800;\r\n\tpadding: 0.8em 1em;\r\n\tborder: 1px solid $light-gray-500;\r\n\tborder-radius: 4px;\r\n}\r\n\r\n// in editor.css\r\n.editor-plain-text {\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tcolor: inherit;\r\n\r\n\t&:focus {\r\n\t\tbox-shadow: none;\r\n\t}\r\n}\r\n```"}}
{"actor":{"display_login":"m-e-h"}}