WordPress makes it easy to apply really neat magazine-style features to our articles to create a very professional look. In this guide, we’re looking at pullquotes and box-out panels.
Before we go any further, though, we’ll look at how the style of WordPress posts is separated from the content.
The content of a post – like this text you are reading right now – is local. The style – the type font used, the font size, the colour, the background, the width of this page… All these aspects are defined in a global stylesheet.
When, in a post, we use a ‘pullquote’ block, we do not need to style its content. WordPress sees that ‘pullquote’ has been assigned to the content in it and then looks to the global stylesheet to see how to style it.
To place content with this styling, use the block ‘pullquote’. This is a ‘pullquote’ block
This system means that when creating a post, the author needs only to add their content and apply the ready-made styling via the blocks. The author does not need to know how to code for the red bar on the left, the quote mark graphic in the background, the font style and size of the type, etc.
Two blocks, similar names
WordPress has two blocks in its library with similar names and, kinda, similar intentions. There’s the ‘pullquote’ block but there is also a ‘quote’ block. Why? And what’s the difference?
Make yourself familiar with the block list display in the post admin page. It’s on the left and displayed by clicking on the three horizontal lines. The list view maps the structure of the blocks in your post as you are working on it
When you click on the ‘quote’ block, it creates a ‘group’. All the blocks which follow will be nested within the ‘quote’ block. In the list view, you can see that the blocks following the quote block are indented. This means that the styling set for the quote block is applied to all the nested blocks.
[screenshot of list view to go in here]
I’ve noticed that you have been using the quote block to place the transcripts of conversations which involved multiple paras. Hence, I’ve now styled the quote block for this purpose.
To get out of the quote block, simply hit return twice. The next block then picks up the base styling.
There is another way to apply a particular style to a specific block, or selected blocks. Again, the list view is very useful.
Thinking inside the box
The styling I’ve applied to the quote block creates a box-out story, in magazine jargon. Box-outs are really handy and make for great design. As well as the quote block, I have also created a style which produces the same effect but in a slightly different way
Creating and styling a ‘group’
We can select the block, or blocks, which we want to style. This box-out looks just the same as the quote one but is constructed differently. In this case, we’ve grouped the blocks and then placed the style name in the group’s Advanced CSS Class(es).
In the list view, select the blocks you want to apply the style to. Then select ‘group’ from the pop-out menu. Then you’ll see the blocks you selected have been nested inside a group. Now click on the group in the list menu and then navigate across to the Block > Advanced > Additional CSS Class(es) field and type in the name of the style you want to apply. In this case, it is ‘box-style1’.
Again, a double carriage return will take you out of the group and place your next block back in the base post style.
Unlimited options
Clearly, box-style1 is exactly the same as the quote block style. I’ve structured them this way because it is a box-out style used regularly in Searchlight and these two approaches help to avoid confusion.
But knowing how to apply styles to individual blocks is very useful. Within the regular layout of your posts, you might want a box-out panel with particular styling.
For example, this block has the style ‘production-note’ attached to it. That gives this block the standout look for something that needs to get attention.
The styling instructions for ‘production-note’ are contained with all the rest of the styling settings, in the global stylesheets.
