{"id":586,"date":"2020-05-30T09:27:27","date_gmt":"2020-05-30T09:27:27","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=586"},"modified":"2020-05-30T09:27:27","modified_gmt":"2020-05-30T09:27:27","slug":"match-editor-style-to-front-end","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/match-editor-style-to-front-end\/","title":{"rendered":"Match editor style to front-end"},"content":{"rendered":"\n<p>If you create a theme for WordPress, you will probably want the front-end and the back-end (the editor) look alike in most cases. It&#8217;s not that hard if you know how to do it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">wp_enqueue_style<\/h2>\n\n\n\n<p>You could use the <code>enqueue_block_editor_assets<\/code> hook to add styles, using <code>wp_enqueue_style<\/code>. This is how the twentytwenty theme does it. It loads the file <code>\/assets\/css\/editor-style-block.css<\/code>. The CSS rules in this stylesheet are already prefixed with <code>.editor-styles-wrapper<\/code>, so they applies to the editor, not the other panels and chrome of WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">add_editor_style<\/h2>\n\n\n\n<p>Better is to add theme support for editor styles and use the function <code>add_editor_style()<\/code> to load styles in the editor. In this case the styles will be automatically prefixed with <code>.editor-styles-wrapper<\/code>, and <code>body<\/code> will change into <code>.editor-styles-wrapper<\/code>. This is very usefull, because you can use the same style declarations used on the front-end.<\/p>\n\n\n\n<p>This code would go into <code>functions.php<\/code>.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-php\">\n      PHP    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1892929878\" \n    id=\"codemirror-1892929878\"\n  >add_theme_support(&#039;editor-styles&#039;);\nadd_editor_style(&#039;editor-style.css&#039;);<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1892929878'), {\n      mode: 'php',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p>The <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_editor_style\/\">WordPress code reference<\/a> seems to be out of date. The <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/themes\/theme-support\/#editor-styles\">block editor handbook explains it better.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using rems<\/h2>\n\n\n\n<p>One caveat is using rems. If you set a font-size on your root-element (the html element) to define the size of <code>1rem<\/code>, and set the size of a heading for example as<code> 2rem<\/code>, then in the back-end the size of your heading is relative to the root element of the admin page, which may differ from your intended size.<\/p>\n\n\n\n<p>This would mean you would have to change all sizes in your styles that use the rem unit. A solution would be to keep the rem its default size (<code>16px<\/code> in most browsers).<\/p>\n\n\n\n<p>For an elaborate account of how to tweak your front-end styling to look best in the Gutenberg editor, see <a href=\"https:\/\/richtabor.com\/add-wordpress-theme-styles-to-gutenberg\/\">this post <\/a>of Rich Tabor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you create a theme for WordPress, you will probably want the front-end and the back-end (the editor) look alike in most cases. It&#8217;s not that hard if you know how to do it. wp_enqueue_style You could use the enqueue_block_editor_assets hook to add styles, using wp_enqueue_style. This is how the twentytwenty theme does it. It [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-586","post","type-post","status-publish","format-standard","hentry","category-gutenberg","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":1,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/586\/revisions"}],"predecessor-version":[{"id":587,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/586\/revisions\/587"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}