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. It can also make it hard to know exactly what settings work well together.
This guide of Dos and Don’ts is meant to help highlight things we recommend doing when working in the block editor and Newspack theme options, and things we would advise against.
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 feeling on larger tablet-sized screens.
Do be careful about where ads are placed — for example, full-width spaces are better suited to wider, shorter ads.
Don’t make your logo too large. The range of sizes allowed by the Newspack Theme’s logo resizer is intended to accommodate a range of possible aspect ratios in different logos, so the highest and lowest ends of the slider are not the recommended maximum and minimum sizes.
Do use the ‘Image behind’ option for the homepage posts sparingly. The ‘image behind’ options are also best suited for decorative images, and can easily obscure and crop important images in a way that removes their impact/confused their meaning.
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.
Don’t use the ‘image behind’ image placement when important parts of the image can be cropped, or if the image contains text. If unsure, it’s best to go with one of the other image options (above, or aligned to the left or right) for blocks that will pull in stories automatically, and reserve the behind placement for hand picked stories.
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 make everything the same scale. Rather than making all elements seem important, it can make everything run together visually.
Do create a visual hierarchy as you work down the homepage. Generally, elements should get smaller as you work down the page, though that can vary from section to section.
Don’t overload the top of the page with calls-to-action and ads. Although ‘above the fold’ is an important space on your homepage, the reasons have changed. The thinking used to be that you had to place all of your important content above the fold, because visitors wouldn’t scroll; with changes in technology like mobile devices, visitors are much more likely to scroll — sometimes before the page finishes loading! It’s more important to make the ‘above the fold’ space compelling to encourage visitors to continue, rather than placing all of your content there.
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.
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.
Do use spacer blocks to add vertical spacing, to help make different sections more distinct and avoid crowding. Group blocks with subtle background colours can also help create visually distinct sections.
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 the full width of the header on desktop. They may appear to fit, but will wrap to two lines, even 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.
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 build a sidebar that stretches past the length of most of your posts. It will look unbalanced, and it’s unlikely site visitors will make it to the bottom.
Do limit stock photography. Used sparingly, it 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.
Do use the small or large featured image options as the default. Unlike the behind or beside featured image options, they will not crop images on single posts. 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.
Do limit the behind and beside featured image options to cases where the image doesn’t contain text, and will still work well when parts are cropped off. Photos that work best have the focus in the middle of the photograph, or photos like landscapes or crowds, where no one point is necessary to understand what the picture is of.
Similar to the above, do pick images that can stand up to being cropped when using the Cover block, which is intended for decorative images. If an image will be negatively impacted by being cropped, use an Image block.
Don’t use the featured image behind placement when your featured image is smaller than 1200px wide. The behind placement will stretch the image to fill the space, and if the original image is too small, it will appear noticeably blurry on some screen sizes.
Gutenberg offers gradients options on a number of blocks, including Group, Button, Cover block overlays.
Do use gradients sparingly — 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.
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.