Categories
Tutorial WordCamp WordPress

Overriding Gutenberg’s default editor width and font

By default Gutenberg sets the editor width to 580px on the desktop unless the browser window is narrower. Since Kubrick’s post content area is 480px we’ll need to override the width so text wrapping occurs at the same width as the final post. for that we simply set new declarations for the wp-block class tag.

blocks.css

/* Block width override */
.wp-block {
        font-family: "Liberation Sans", sans-serif;
        line-height: 1.4em;
        max-width: 480px;
}

By Joseph Dickson

Joseph Dickson is a web developer in higher education and an avid proponent of using WordPress’ core features to create flexible and manageable design solutions.