{"id":4544,"date":"2018-03-17T14:22:50","date_gmt":"2018-03-17T13:22:50","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4544"},"modified":"2020-02-09T11:26:03","modified_gmt":"2020-02-09T10:26:03","slug":"editor-styles-gutenberg","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/editor-styles-gutenberg-4544\/","title":{"rendered":"Creating theme editor styles for Gutenberg"},"content":{"rendered":"

WordPress 5 will come with a new editor called \u00bbGutenberg<\/a>\u00ab, which is completely different from the current TinyMCE. That does not only mean change for the users, but also for theme developers, who want to modify editor styles, so it looks like in the frontend. This post shows you how that works for the new editor.<\/p>\n\n\n\n\n\n\n\n

The previous procedure with TinyMCE: quite pleasant<\/h2>\n\n\n\n

The post content in the TinyMCE editor lives inside an iFrame, that means theme specific styles can be written similar to the frontend CSS. There is a normal website\u2019s markup in the DOM just for the content, the visible content is inside a body element, and inside the body, there are the content elements directly, like paragraphs, headings, et cetera. That is how the DOM looks like:<\/p>\n\n\n\n