WordPress’s new block-based editor, and the blocks that come with Newspack, introduce a ton of flexibility and options when you’re building your site. But it can also make it hard to know exactly what settings work well together.

This list of Dos and Don’ts is meant to help highlight things we recommend doing when working in the block editor and Newspack theme, and things we would advise against.

General

Building pages

Do view pages outside of the editor before publishing. Although the editor and front-end of the site are intended to look the same, there are some differences you may want to fix before publishing. If your site is using Custom CSS, it is also not used in the editor preview.

Do use the Block Navigation to help you visualize the page structure when working on more complex pages. Nested blocks can get complicated quickly if you don’t have a good overview of what’s happening on a page. You can get a better idea of where a block lives by clicking on the block in the editor, then opening the Block Navigation in the top-left corner:

Do test your layouts with different browser widths, to make sure they look the way you expect. Some blocks, like Columns blocks, may look great on desktop sized screens but get a bit crowded on larger tablet-sized screens.

Using gradients

Gutenberg offers gradients options on a number of blocks, including Group, Button, Cover block overlays.

Don’t use too many gradients — having more than one element with a gradient background per page can lessen their impact, and make the page feel busy.

Do use gradients based on your site’s colors, or neutral colors. Due to the range of options available, gradients can clash pretty easily with your site’s palette.

Do: Keep gradients subtle, and based off your sites colors, or even photo colors when appropriate. Above, a gradient on a Cover block can be a great way to make your text legible, without darkening/obscuring the whole photo.

Don’t pick wildly different colors for your gradients, like the button on the left. While it’s true that they’ll be eye catching, they may not be so for the reasons you intend. Try including a highlight color in your color palette instead, like the button on the right, and use sparingly in cases you’d like something to stand out — that will help it pop and still look like it fits in with your overall design:

Don’t use a gradient behind larger amounts of text (including the Homepage Posts block). Unless very subtle, gradients can negatively impact readability and be distracting.

Don’t: A gradient background on lots of text can negatively affect readability, especially if the contrast between the different colors is significant. It can also be a distraction from your written content.

Do pick a header settings that fits with your header needs the best. If your site has a longer navigation, the ‘short’ header option will probably not work. For example, if your logo’s design is visually centered, centering it the header will probably look best.

Branding

Don’t make your logo too large. The range of sizes allowed by the Newspack Theme’s logo resizer is intended to accommodate a variety of different logo shapes, so the highest and lowest ends of the slider are not the recommended maximum and minimum sizes.

Do build your menu based on where you want visitors to focus. Links that are the most important should be on the top level, and less important links (like less-trafficked categories), can be placed in dropdowns or in the slide-out sidebar.

Don’t make your menus fill the full width of the header on desktop. They may appear to fit, but will wrap to two lines on slightly smaller browser windows (and sometimes, on different computers — fonts can be rendered a bit differently, making them wider). 

Do plan out your site structure ahead of time, and use that as a guide to help you determine what should appear in the menus. Look to high traffic sections as other things to spotlight, and topics and coverage that differentiate your publication and draw readership.

Homepage

Hierarchy is important to keep in mind when designing your homepage. It helps inform visitors what is the most important content, and the visual variety will automatically guide their eye around the page.

The important parts of hierarchy include:

  • Create a visual flow and focus by highlighting a main story at the top of the page, and creating visual variety as you work down the page.
  • Avoid monotony with how stories and sections are styled.
  • Allow some elements to ‘fall back’ — not everything can be perceived as ‘important’, but if everything is highlighted equally, it can all seem evenly unimportant.

Here are some general dos and don’ts to follow to help achieve this:

Do vary the type scale of homepage elements. This helps draw focus to the larger, more important content, but also draws the eye around the page (the interest from different sized elements is more compelling to look at).

  • Don’t use the same font scale for all blocks.
  • Do vary the font scale, emphasizing the most important stories.
Simply varying the type scale of the different blocks can create more visual interest, helping your leading stories stand out more, while creating interest to drive the eye around the page.

Do create a visual hierarchy as you work down the homepage. Generally, elements should get smaller as you work down the page, though you can have a single story that stands out

Do vary the image placement and sizing — similar to the font size, this can help enforce your visual hierarchy, and help specific stories stand out.

Don’t overload the the page with calls-to-action and ads. Although ‘above the fold’ is an important space on your homepage, it’s no longer because visitors don’t scroll — on mobile, visitors often start scrolling before the page finishes loading. It’s more important to make the ‘above the fold’ space compelling to encourage visitors to continue, rather than treating it as the only space visitors will see.

And some general tips and tricks for block settings:

Do adjust the block settings when aligning the featured image left or right, including hiding some elements, or changing the font scale. This can help make sure the images and text are roughly balanced.

  • Don’t leave blocks unbalanced.
  • Do try to balance text and photos.
While they will never be exactly the same height, adjusting things like type scale and image size, or even hiding some elements of the stories (like the excerpt, date or author), can help stories look more balanced when the images are floated left or right.

Do use the Homepage Posts border styles to separate individual stories. Don’t use this style to create a border under single stories that are side-by-side in a Columns block — instead, use a separator block.

Don’t: single posts have an optional border style that can help separate them from content underneath them, but using that on posts that are side by side can create a jumpy line.
Do: The Separator block can help make different sections distinct, but in a consistent way.

Do use spacer blocks to add vertical spacing, to help make different sections more distinct and avoid crowding. Group blocks with subtle background colors can also help create visually distinct sections.

Single articles

The single-story view of your articles need to be easy to read.

The following dos and don’ts can help you make sure your single posts are comfortably legible, so readers can focus on the content:

Don’t use the one-column wide template for regular articles and pages. Long line lengths are very difficult to read. Using the default (two column) or one-column template will improve the reading experience of your site on larger screens. You can use wide and full-width blocks with the one-column template, to have bolder elements interspersed without sacrificing readability.

  • Don’t use the One Column Wide template for standard stories.
  • Do use the One Column template for standard stories.
Only use the one-column wide template for posts and pages that will be broken up by blocks like the Columns block — ones that have layouts similar to the homepage. Otherwise, stick with the default or one column template for posts and pages that are mostly text, and take advantage of the full and wide alignment options for blocks that should take up more space.

Don’t split your stories into two columns. A single column of text is much easier to read on electronic devices, especially when screen sizes can vary so wildly:

Don’t break stories into two columns — it forces visitors to scroll up and down the page to read all of the content, which is awkward.

Don’t build a sidebar that stretches past the length of most of your posts. It will look unbalanced, and it’s unlikely site visitors will scroll to the bottom of the sidebar.

Photography

General

Don’t overuse stock photos. Used sparingly, they can help add visual interest to stories that would otherwise be missing an image. But if used for a majority of stories, it can be noticeable, especially when viewed on the homepage or in the archives where you can see multiple featured images together.

Don’t use small images as your featured image — a minimum of 1200px wide is the recommended size; larger than 780px wide should work, though anything smaller could look odd in some cases.

Photo cropping

Some blocks and featured image settings will crop your photos in unexpected ways. This happens because the photo is being made to fit in a specific space — often determined by screen size — rather than letting the whole photo show. There is no control over the aspect ratio of the image, or what is cropped out.

A good example of this is the ‘featured image behind‘ placement on single posts, which places the featured image behind the post title. The image fills the height and width of the screen it is being viewed on — this is usually wider and shorter on desktop computers and laptops, and taller and narrower on mobile devices. Because the shape of the image is determined by the screen size rather than the image itself, and can vary depending on how you’re viewing the site, part of the image will always be cropped:

Above, the featured image works well on desktop — even with part of it cropped off — but the same image gets obscured on mobile.

In the editor, the following blocks will crop your images:

  • Cover – the Cover block will let you set a minimum height for the block and a focal point for the image, which can kind of help control what gets cropped, but not entirely. If you set the block to have a fixed background, the image will be sized to fill the entire screen size, so different parts of it can always be visible as you scroll down the page.
  • Media & Text with ‘Crop image to fill entire column’ checked – this will cause the image height to match the column next to it, usually cropping the sides.
  • Gallery with the ‘Crop images’ option checked – this will make the images fit in a perfect grid, but crop the edges off of some of the images to make each row the same height
  • Homepage Posts with the ‘image behind’ placement – the images are sized based on how much content is shown in the block, and the minimum height that is set in the block settings. Part of the image will always be cropped off.

In the theme, the following featured image settings on single posts will crop your images:

  • Featured image behind will display the image in a shape that matches the screen’s height and width — so it will be wider on desktop screens, and narrower on mobile screens.
  • Featured image beside will only show a narrow vertical part of the featured image on larger screen sizes (it will display in full and uncropped on mobile).

Based on the above, there are a few things to keep in mind when selecting photos for blocks and featured image placements that will crop them:

Don’t pick images that contain text.

Do pick images that can hold up to cropping — ones with multiple points of interest, for example, will work a lot better than ones with a single point of focus, like the images on the right below.

Photos with multiple points of focus — like on the left — will work better for the behind and beside featured image options on single posts. When there is a specific main point of focus — like on the right — you don’t want it to be accidentally cropped out. That’s when it’s best to use the large or small featured image options.

Homepage Posts image settings

Don’t use the ‘image behind’ placement in the Homepage Posts block in cases where you don’t know what the featured images will actually be (like sections of blocks that are automatically updated by date).

Do pick a minimum height when using the Image Behind placement, so more of your photo is visible. Otherwise, the photo will be sized only tall enough to include the post’s text.

Do use the image behind placement to highlight specific stories, after confirming their photos will work well, and have a minimum height set to ensure more of the photo is visible.

Don’t use the image behind placement everywhere — it works well for drawing attention to stories with images picked because they will work with this setting, but used on large blocks of stories, it can be monotonous, and unlikely all images will work equally well.

Don’t use the Image Behind placement for large sections of blocks, where you don’t know that all stories have images that can be cropped. On top of losing important parts of the image, it can also feel a bit monotonous, visually.

Single post image settings

Do use the small or large featured image options as the default for single posts. Unlike the behind or beside featured image options, they will not crop your images. Only use the behind or beside featured image options when you know what image is being used, and can test and verify that nothing important is being cropped out.

Support Home

Design Dos and Don’ts