{"id":12815,"date":"2019-04-01T10:00:59","date_gmt":"2019-04-01T10:00:59","guid":{"rendered":"https:\/\/wpvivid.com\/?p=2369"},"modified":"2020-02-02T04:57:45","modified_gmt":"2020-02-02T04:57:45","slug":"extend-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html","title":{"rendered":"How to Extend Gutenberg Editor to Display A Grid or List of Posts"},"content":{"rendered":"

Learn how to extend Gutenberg editor without touching any line of code<\/a>; specifically, we shall look at how to display a grid or a list of posts<\/a>.<\/p>\n

Over the years, WordPress has evolved and has continued to push the realms of possibilities to live true to its promise of democratizing publishing<\/a>\u00a0and the freedoms<\/a>\u00a0that come with open source software.<\/p>\n

If you pay attention and understand the current trends of web development, then you know that there is a shift towards front-end design as can seen by the rise and dominance of page builders like Divi, Elementor builder<\/a>, WPBakery, Beaver, Visual composer among many others.<\/p>\n

WordPress\u2019s answer to that is the Gutenberg block editor<\/a>.<\/p>\n

With the release of WordPress 5.0, Gutenberg became the default editor for WordPress<\/a>.<\/p>\n

This new editor changed everything we knew about creating content with WordPress<\/a>. Literary.<\/p>\n

Gutenberg editor seeks to enable easy creation of media-rich content without the dependence of WordPress plugins<\/a> using blocks, that provide all the tools to achieve this.<\/p>\n

At the time of writing this article, the Gutenberg editor has several layout options and features used to build a full website<\/a> with no need of installing a theme or page builder.<\/p>\n

Of course, it is not as powerful as the standalone themes<\/a> or page builders, but as the Gutenberg editor continues to evolve and mature, this is a certain possibility.<\/p>\n

In the mean-time developers have kicked in to extend Gutenberg editor covering areas its short in with great Gutenberg block plugins and tools<\/a>.<\/p>\n

Stag Blocks<\/a>\u00a0is one such plugin that extends Gutenberg editor by adding several blocks that provide you an author, writer or designer a few more ways to display your content.<\/p>\n

The major blocks<\/a>\u00a0it adds to extend the Gutenberg editor are; Accordion, Alert, Container, Hero, Posts Grid, Pricing table<\/a>, Profile, Stats, Customer testimonial<\/a> and, Website card blocks.<\/p>\n

\n

Step by step: How to extend Gutenberg editor to display a grid or list of posts with Stag Blocks<\/h2>\n<\/blockquote>\n

Step 1. Install Stag Blocks plugin<\/b><\/strong><\/h4>\n

Install and activate Stag Blocks. The plugin files can be downloaded from its WordPress plugin page.<\/u><\/a><\/p>\n

Step 2. Start creating content as usual<\/b><\/strong><\/h4>\n

Create a new page or post, depending on what you want or edit an existing one.<\/p>\n

For a new page, you will notice two new icons added to the right; the accordion and alert blocks.<\/p>\n

But since we are looking for the post grid, click the Add Block + Icon<\/p>\n

\"postgrid<\/p>\n

Under Most Used or Common blocks choose Posts grid.<\/p>\n

\"postgrid\"<\/p>\n

When you add that block to your editor, all the posts are added to your page or post.<\/p>\n

\"postgrid<\/p>\n

From here you can play around with the Post Grid settings and layouts to display your content as you desire.<\/p>\n

On the right of the editor are the Posts Grid settings. Under the Block, You can sort how posts are displayed whether you want new posts or older posts to appear on top, then choose the category, set the number of items you need to display.<\/p>\n

Toggle what is displayed, Postdate, excerpt, Author, and or featured image.<\/p>\n

The other thing you would want to do is decide on what layout you would want the grid to take.<\/p>\n

\"postgrid<\/p>\n

List View<\/b><\/strong> \u2013 displays all the items in a list, if you added the featured image it would take the full width of the container of the page\/post.<\/p>\n

\"postgrid<\/p>\n

The Grid View \u2013 displays your posts in a grid.<\/p>\n

\"postgrid<\/p>\n

Here is the layout of your posts with the Side View<\/p>\n

\"postgrid<\/p>\n

The front end will take the same display you see in the editor. For instance with the Grid View enabled, my page looks like that, note, this has the Featured image added.<\/p>\n

\"postgrid<\/p>\n

Well, that is how you extend Gutenberg editor, in our case we were able to display a list of posts or post grid with Stag Blocks.<\/p>\n

You can do a lot more with Stag blocks beside displaying posts in a grid layout. We mentioned at the beginning the different features or blocks it adds to extend Gutenberg editor; Accordion, Alert, Container, Hero, Posts Grid, Pricing table, Profile, Stats, Testimonial and, Website card blocks..<\/p>\n

Besides, these blocks, Stag Blocks also adds some pretty cool functionality where you can configure what blocks your Gutenberg editor can display.<\/p>\n

This gives you the power to fully customize the editor with only the tools you need.<\/p>\n

To do that, go to settings, and then click Stag Blocks.<\/p>\n

\"postgrid<\/p>\n

Now Click the settings tab.<\/p>\n

\"postgrid<\/p>\n

In the settings page, choose the block type \u2013 the Stag Blocks are displayed alongside all the default Gutenberg blocks.<\/p>\n

Select the Block group, then on the right of the particular block click to the toggle to hide or display that particular block in the editor. Of course don\u2019t forget to save.<\/p>\n

\"postgrid<\/p>\n

\n

Wrapping Up<\/h2>\n<\/blockquote>\n

One can accomplish a lot of things with WordPress<\/a> today.<\/p>\n

I think the tools to create and build on the web are at your fingertips; most of these tools do not require any coding skills thanks to the generosity of the WordPress community.<\/p>\n

You, therefore, shouldn\u2019t have any reason to not create for your audience a great experience<\/a>.<\/p>\n

Now you can experiment in varied ways how you want to showcase the content on your website.<\/p>\n

If you are looking for more options with various features, here is our hand-picked list of top 10 Gutenberg blocks plugins to extend Gutenberg blocks<\/a>.<\/p>\n

That\u2019s a wrap, have some fun with your pages and posts, and come back and share your feedback with us. <\/p>\n","protected":false},"excerpt":{"rendered":"

Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.<\/p>\n","protected":false},"author":3,"featured_media":2767,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":16},"categories":[80],"tags":[],"yoast_head":"\nHow to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid<\/title>\n<meta name=\"description\" content=\"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid\" \/>\n<meta property=\"og:description\" content=\"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html\" \/>\n<meta property=\"og:site_name\" content=\"WPvivid\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-01T10:00:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-02T04:57:45+00:00\" \/>\n<meta name=\"author\" content=\"TonyRobins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TonyRobins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html\",\"url\":\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html\",\"name\":\"How to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid\",\"isPartOf\":{\"@id\":\"https:\/\/wpvivid.com\/#website\"},\"datePublished\":\"2019-04-01T10:00:59+00:00\",\"dateModified\":\"2020-02-02T04:57:45+00:00\",\"author\":{\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\"},\"description\":\"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpvivid.com\/extend-gutenberg-editor.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpvivid.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Extend Gutenberg Editor to Display A Grid or List of Posts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpvivid.com\/#website\",\"url\":\"https:\/\/wpvivid.com\/\",\"name\":\"WPvivid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpvivid.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\",\"name\":\"TonyRobins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"contentUrl\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"caption\":\"TonyRobins\"},\"url\":\"https:\/\/wpvivid.com\/author\/tonyrobins\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid","description":"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html","og_locale":"en_US","og_type":"article","og_title":"How to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid","og_description":"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.","og_url":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html","og_site_name":"WPvivid","article_published_time":"2019-04-01T10:00:59+00:00","article_modified_time":"2020-02-02T04:57:45+00:00","author":"TonyRobins","twitter_card":"summary_large_image","twitter_misc":{"Written by":"TonyRobins","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html","url":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html","name":"How to Extend Gutenberg Editor to Display A Grid or List of Posts - WPvivid","isPartOf":{"@id":"https:\/\/wpvivid.com\/#website"},"datePublished":"2019-04-01T10:00:59+00:00","dateModified":"2020-02-02T04:57:45+00:00","author":{"@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0"},"description":"Want to learn how to extend WordPress Gutenberg editor without coding? Follow this guide to extend Gutenberg editor and display a grid or a list of posts.","breadcrumb":{"@id":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpvivid.com\/extend-gutenberg-editor.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpvivid.com\/extend-gutenberg-editor.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpvivid.com\/"},{"@type":"ListItem","position":2,"name":"How to Extend Gutenberg Editor to Display A Grid or List of Posts"}]},{"@type":"WebSite","@id":"https:\/\/wpvivid.com\/#website","url":"https:\/\/wpvivid.com\/","name":"WPvivid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpvivid.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0","name":"TonyRobins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/image\/","url":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","contentUrl":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","caption":"TonyRobins"},"url":"https:\/\/wpvivid.com\/author\/tonyrobins"}]}},"_links":{"self":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/12815"}],"collection":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/comments?post=12815"}],"version-history":[{"count":0,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/12815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/media?parent=12815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/categories?post=12815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/tags?post=12815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}