3 Comments

  1. Sam

    Can I ask a silly question only loosely connected to this post? In the gif, the editor looks like it’s bringing in nearly all of the front-end styles and like it’s this close to being a front-end editor. Can someone tell me how this is being achieved? (Like, I assume it’s set to Fullscreen Mode, but what else is going on here? Is that just Twenty Nineteen and how it has editor styles setup? How is it not looking like the generic Gutenberg UI?) Thanks in advance!

    Report

    • Martin

      Are there specific elements you’re talking about?

      To me, this looks like a full screen mode with default blocks. Make sure to have the “Gutenberg” plugin installed, so you get the latest features (it takes precedence over the version shipped in WP core).

      We’re currently in the process of developing a large theme with Gutenberg. In our theme setup, most styles are shared between the editor and the frontend, where the editor receives some extra CSS rules (since nesting etc. is different there). With this we’re trying to achieve exactly that: Make the backend look as close as possible as the frontend will look – without code duplication.

      Report

      • Sam

        @Martin TBH, maybe just the Twenty Nineteen-looking header typography threw me – I’m so used to seeing “Noto Serif” and almost only “Noto Serif” in my block editor and not seeing representative type when I’m editing vs. what appears on my front-end in the themes I’m used to working in. Is this just simply a matter of how themes share styles with the editor and that some do it more accurately than others?

        Report

Comments are closed.

%d bloggers like this: