Block Styles - Newspack

The Newspack Blocks plugin not only includes custom blocks, but unique styles for some of Gutenberg’s existing Core blocks.

Columns block

The Newspack Blocks plugin includes two styles for Gutenberg’s Columns block.

Borders

The Columns Block Border style adds a thin border between each column in the block. When viewed on mobile — when each column is stacked vertically — the borders appear horizontally between each one.

Here is a screenshot of the same block as above on mobile, showing the border between where the first and second columns meet:

You can apply this style to a Columns block by following these steps:

In the editor, add a Columns block to a post or page:

Add some content to each column – in the example below, each column has a Homepage Posts block.

Select the main Columns block in the editor. You can do this by clicking on the contents of one of the columns and using your keyboard’s ‘up’ arrow to navigate up to the column, then to the Columns block. Another option is to click the contents of one of the columns, then using the Block Navigation in the top-left corner of the editor to select the parent Columns block:

Once the Columns block is selected, you should see a Block Toolbar above it that looks similar to this:

Click on the first button, the Columns icon, will open the Block Styles menu. From there, select Borders:

Click Publish or Update to save your changes.

Reorder on Desktop

The Newspack Blocks also include styles to help you reorder the columns in the Columns block on desktop.

The purpose of this style is to allow you to have your main story in the center column on desktop, and still have it appear first on mobile devices.

The following steps will help you set up this block style:

In the editor, add a Columns block to a post or page:

Add some content to each column. In the below example, each column has a Homepage Posts block, set up so that the most important posts are displaying in the first column.

Select the main Columns block in the editor. You can do this by clicking on the contents of one of the columns and using your keyboard’s ‘up’ arrow to navigate up to the column, then to the Columns block. Another option is to click the contents of one of the columns, then using the Block Navigation in the top-left corner of the editor to select the parent Columns block:

Once the Columns block is selected, you should see a Block Toolbar above it that looks similar to this:

Click on the first button, the Columns icon, will open the Block Styles menu. From there, select Move first column to second. There is also an option to move to Move first column to third:

Now your first column should appear in the middle:

At this point, it’s a good time to make further adjustments to help your main story stand out. This could include the larger font size, or making the column its in wider:

Click Publish or Update to save your changes.
Viewing the post on desktop will show your main story in the second column:

Viewing the post on mobile will show your main story at the very top:

Because the columns were reordered with styles alone, the first column is still the first in the source code — this means it will be read first by screen readers. This makes sense as long as the first column contains the most important content on the screen — otherwise, it may not make sense to visitors why their screen readers are jumping from the middle column to the left column.

Group Block

The Newspack Blocks plugin includes two new alignment options for the Group block.

Align left/right

By default, the Core Group block has three alignment options: none, full, and wide.

The addition of the left and right alignment lets you nest different blocks inside of a Group block and use those alignments, even if the nested blocks don’t typically support those alignments.

Follow these steps to use these new Group block alignments:

In the editor, add a Group block to a post or page:

Add some content to the Group block. In the screenshot below, a Header, Paragraph, and List block have been added. The Group block has also had a background color set:

Select the Group block in the editor. You can do this by clicking on the contents of the block and using your keyboard’s ‘up’ arrow to navigate up to the Group block. Another option is to click the contents of the Group block, then using the Block Navigation in the top-left corner of the editor to select the Group block: