Sample styles

gutenberg-single-blog.scss

// Import some colors and other global variables (no styles included here)
@import 'global';

// Make sure that we only target things on single blog posts in the editor
body.post-type-post {

    // Only affect things inside the editor-styles-wrapper
    .editor-styles-wrapper {

        // Force a nondefault maximum width, since this is the width of our blog on the frontend
        .wp-block {
            max-width: 1080px;
        }

        h2 {
            font-size: 30px;
            font-weight: bold;
        }

        h3 {
            text-transform: uppercase;
            font-weight: 300;
            letter-spacing: 0.1em;
            font-weight: bold;
            font-size: 20px;
            color: $tan;
        }

        // This is a wrapper around headings. For backend preview purposes only, we're going to add that margin here instead of on the heading itself.
        .wp-block-heading {
            margin-top: 50px;
        }
    }
}