I’m writing this post in the early summer of 2019, and in my opinion the Atomic Blocks Post and Page Grid block is still a work in progress.
Having said that, this is still a really useful block. It just needs a bit of refining which I’m sure will happen as the WordPress block editor matures.
An example page
First take a look at an example of the Atomic Blocks Post and Page Grid block in use
List view or grid view?
This is a screenshot of the Atomic Blocks Post and Page Grid block using the list view.
This is a screenshot of the Atomic Blocks Post and Page Grid block using the grid view.
As with all blocks there are two places to look for settings. The screenshot below shows the settings above the selected block.
A.) I chose Align Center width option. My theme has two other width options, wide width and full width.
B.) I chose the list layout. The other option is grid layout.
Most options are in the sidebar
I chopped the settings sidebar into pieces so I could explain more clearly what each setting does.
Post and Page Grid settings
1.) You can build your grid from posts or pages. I chose posts.
2.) List your posts from newest to oldest or from A to Z,
3.) I made, then used, a category that contained the specific posts I wanted to show in this grid.
4.) Number of items (posts) to display.
5.) Offset enables you to start your list with the 3, 4th or 5th post in the category etc. Useful if you’ve already displayed some posts from this category on this page already.
The settings above used drop down lists. The settings below use toggle switches to show or hide page elements such as the post title or featured image.
Post and Page Grid Content
6.) Don’t confuse the post title and the section title. The section title displays above the post grid.
7.) Show or hide the featured image in your post grid.
8.) If you display the featured image in your grid, you can choose from several image sizes. From thumbnail to full size.
9.) The featured image can be square or landscape.
10.) The post title displays below or to the side of the featured image in the post grid.
11.) Author’s name: show or hide the post author’s name.
12.) Post date: show or hide the day the post was published on.
13.) Post excerpt: show or hide the first few words in the first paragraph of the post.
14.) If you show the post excerpt you can control how many words are included here.
15.) Continue reading link: show or hide.
16.) Continue reading text: change this to “more info” or anything else that entices your readers to read more.
Grid markup and CSS
Grid markup lets you change the block’s HTML to match your own theme’s code.
Advanced CSS enables you to add CSS classes to this specific block.
Both of these options are beyond the scope of this tutorial.
Looking for a StudioPress theme or hosting?
Check out the two links below…
Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.
When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.