gasatrya/gutenberg-recent-posts

Gutenberg Recent Posts Block for custom post types

Gutenberg Recent Posts

Plugin URL

Recent Posts block

Description

This plugin adds a custom Gutenberg block named recent posts in the Gutenberg editor of your WordPress dashboard using which you can display recent posts including custom post types.

Installation 🔧

1. Download the zip file from Github. Unzip the plugin.

2. Navigate to the Plugins > Add new screen in your WordPress dashboard.

3. Click on Add New button at the top of the page.

4. Click on Upload Plugin button at the top of the page.

5. Click Choose File button, then find and Upload the downloaded zip file.

6. After the plugin finishes installing, click Activate.

OR

1. Navigate to the Plugins > Add new in your WordPress dashboard.

2. Open terminal and Clone this repo in wp-content/plugins directory by running following command git clone https://github.com/BRdhanani/gutenberg-recent-posts.git.

OR

1. Go to your plugin directory.

2. Search for recent posts block.

3. Navigate to the Plugins screen in your WordPress dashboard.

4. Activate it.

That's it! You have successfully added gutenberg recent posts plugin.

Features.

1. Get recent posts of your favourite custom post type.

2. Manage ordering like ascending or descending.

3. Image size options.

4. Post meta settings like post date, post excerpt etc.

Directory Structure

Scripts

1. npm start : will use the src/blocks.js as entry point and output it to build/blocks.js for development
2. npm run build : will use the src/blocks.js as entry point and output it to dist/blocks.build.js for production

How to use ?

1. Go to WordPress Dashboard > Posts/Pages > Add New > Add block (+ icon) > widgets > Recent Posts
2. Select a post type from dropdown to which you wish to add Recent Posts block.
3. You can manage ordering, image size, post meta, etc. from the sidebar parameter settings.
4. That's it!! publish the page and view the same from the front end.

Useful Blogs:

1. Create Single Page Application With React js and WordPress REST API
2. How to create custom Gutenberg block as a begginer
3. Create custom Gutenberg block using ACF

credit

🙌 Ankita Tanti