8 months ago

If you’re following this blog to learn a block development, you know we’ve covered so far https://artisansweb.net/how-to-build-repeater-block-in-gutenberg/ https://artisansweb.net/how-to-use-inner-blocks-in-gutenberg/ https://artisansweb.net/build-carousel-block-for-gutenberg/ https://artisansweb.net/multiple-images-using-mediaupload-component/ https://artisansweb.net/richtext-mediaupload-component-for-gutenberg/ If this is the first time you’re visiting this blog, I’d suggest reading the above articles to become familiar with block development. In this tutorial, we’ll study how to build a post grid using a custom block.

As you can see in a screenshot, we’re also going to provide settings for the post grid block.

"name": "artisansweb/post-grid", "title": "Artisans Web - Post Grid", "description": "This block will create a Post Grid.", "attributes": { "number_of_posts": { "type": "string", "default": "3"

Next, let’s define the component in edit.js: function PostsList({ hasResolved, posts, attributes }) { if ( !hasResolved ) return