I am still looking for the best block to show a grid/list/slider/carousel of posts, including Custom Post Types. I am going to take a shot at this one today:
First impression: I really like having the choice between grid, list and slides right there on top of the block:
Let’s take a look at the block’s sidebar settings. These are not too complex, but they seem to cover al basic needs. It would be nice if it was possible to choose more than 3 columns/posts in the carousel, but outside that I think it strikes a good balance between simplicity and complex/advanced features.
This is what the “slider” version of the block looks like, using products:
Skin 1:
Patient Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Ship Your Idea
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Flying Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Premium Quality
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Woo Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Skin 2
Patient Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Ship Your Idea
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Flying Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Premium Quality
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Woo Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Skin 3
Patient Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Ship Your Idea
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Flying Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Premium Quality
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Woo Ninja
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
This would be the “grid” version, using posts of the “Dummy Post” category, “skin 1”.
This would be the “grid” version, using posts of the “Dummy Post” category, “skin 2”.
This would be the “grid” version, using posts of the “Dummy Post” category, “skin 3”.
Dolores harum magni voluptatum iste ipsum perferendis
Ad nostrum sunt eum in quae quod. Sint vel quas inventore qui natus libero aliquam quia. Totam molestiae minus et maiores Praesentium sit sed nemo velit nemo voluptas itaque Et esse ut consequuntur quaerat Delectus ipsam molestiae in totam est Ut nobis nam odio ut Dolorem excepturi et modi nemo Rerum aperiam unde accusamus ipsum […]
Est voluptas et quo
Velit illum ut sapiente labore cum quia aspernatur asperiores. Soluta quo tenetur exercitationem. Mollitia vero velit non laboriosam. Omnis nihil optio ipsa Quia iusto quasi ut unde accusantium Ut sunt est natus dignissimos. Quos accusamus dolorem dolor sed Molestiae voluptatem nobis iure sit velit Et dolorem aut cum eaque Sed doloremque omnis doloribus minus voluptas. […]
Sint vero ipsa minus consequatur quod ipsa autem
Et sed eos est rerum qui iusto magnam eum autem impedit nostrum repellat tempore eligendi a est sit mollitia rem et maxime quaerat et nihil est non qui quod magnam est dolorum omnis tenetur iusto laborum necessitatibus id ut iste officiis rem eaque molestiae. Enim itaque vel omnis provident dolor saepe voluptatem ut laboriosam in temporibus reiciendis sed aut voluptatibus doloremque tempora sed nesciunt molestias laborum eum ipsa fugit consequuntur quidem nostrum voluptatem sapiente quibusdam pariatur sequi itaque dolor perspiciatis dolorem illo ducimus tempora beatae quis fugit placeat et aspernatur quo neque ipsa autem ex qui cupiditate sapiente voluptate unde.
And this would be the “list” version of the block.
Dolores harum magni voluptatum iste ipsum perferendis
Ad nostrum sunt eum in quae quod. Sint vel quas inventore qui natus libero aliquam quia. Totam molestiae minus et maiores Praesentium sit sed nemo velit nemo voluptas itaque Et esse ut consequuntur quaerat Delectus ipsam molestiae in totam est Ut nobis nam odio ut Dolorem excepturi et modi nemo Rerum aperiam unde accusamus ipsum […]
Est voluptas et quo
Velit illum ut sapiente labore cum quia aspernatur asperiores. Soluta quo tenetur exercitationem. Mollitia vero velit non laboriosam. Omnis nihil optio ipsa Quia iusto quasi ut unde accusantium Ut sunt est natus dignissimos. Quos accusamus dolorem dolor sed Molestiae voluptatem nobis iure sit velit Et dolorem aut cum eaque Sed doloremque omnis doloribus minus voluptas. […]
Sint vero ipsa minus consequatur quod ipsa autem
Et sed eos est rerum qui iusto magnam eum autem impedit nostrum repellat tempore eligendi a est sit mollitia rem et maxime quaerat et nihil est non qui quod magnam est dolorum omnis tenetur iusto laborum necessitatibus id ut iste officiis rem eaque molestiae. Enim itaque vel omnis provident dolor saepe voluptatem ut laboriosam in temporibus reiciendis sed aut voluptatibus doloremque tempora sed nesciunt molestias laborum eum ipsa fugit consequuntur quidem nostrum voluptatem sapiente quibusdam pariatur sequi itaque dolor perspiciatis dolorem illo ducimus tempora beatae quis fugit placeat et aspernatur quo neque ipsa autem ex qui cupiditate sapiente voluptate unde.
Quia ipsum dolorem ullam
Aspernatur unde tempora fuga corporis omnis facere beatae laborum mollitia est perspiciatis ducimus dolore labore quia voluptatem eligendi quia quia quos aut voluptates odio quas cupiditate architecto tempore aut qui iure aperiam et quos numquam blanditiis dolorum deleniti necessitatibus maxime distinctio rerum eligendi repudiandae est eos soluta iure tempora veniam labore velit maxime a quia impedit ut molestias ea et laborum deleniti aut ut qui impedit delectus sed saepe error cumque porro et omnis laborum. Rerum debitis accusantium culpa natus non velit nemo accusamus error molestias dolorem voluptatem nisi ut velit voluptas recusandae omnis fuga quis qui voluptatum cum totam consectetur quibusdam quod odio fuga quo possimus molestiae culpa quidem voluptatem ut quasi vero ut officiis autem sit hic molestiae laboriosam neque nisi nam odio molestias quos quia.
Ea maxime tempora accusantium
Est aliquam optio quasi aut et quas quis harum sit ut explicabo earum adipisci deleniti dolorem nostrum beatae dignissimos rerum impedit labore voluptas numquam nisi natus quia ipsum sequi qui eum quis sed nemo quibusdam qui minus assumenda enim illo harum nihil rerum nostrum eveniet qui voluptatem unde sunt quo explicabo cumque nemo cupiditate minus odio provident accusantium reiciendis commodi magni autem sapiente ducimus iste ut et dignissimos quia architecto nulla qui qui sint.
2 replies on “Guten Post Layout – Gutenberg Post Layout Collection”
[…] until today my go-to plugins for CPT listing were Custom Post Types Block and Guten Post Layout but they did not offer too many options in the way of query complexity or layout […]
[…] my previous post on how to get a decent WooCommerce Product carousel, this block works a lot […]