vuchkov / latest-posts-block

Custom WordPress plugin registers Gutenberg block for latest posts in REST API & React

WordPress Plugin - Latest Posts Block

• Uses Gutenberg, Rest API and React JS

Requirements

• Wordpress 6+
• PHP 8.1+
• NodeJS v22+ (React npm build)

Installation

• Go to the WordPress plugins folder: cd wp-content/plugins
• Clone the plugin repogit clone [e-mail]:vuchkov/latest-posts-block.git
• Go to the plugin folder: cd latest-posts-block

Inside the plugin folder are the following files:

• latest-posts-block.php (main plugin file)
• build/index.js (ReactJS code for the Gutenberg block)
• build/index.asset.php (generated by WordPress build process)
• includes/rest-api.php (REST API endpoint)
• includes/block-registration.php (block registration logic)

Build the ReactJS Code:

• Go to the plugin folder: cd wp-content/plugins/latest-posts-block
• Install dependencies: npm init -y && npm install @wordpress/scripts --save-dev
• Check the package.json file about the following content:

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^24.0.0"
  }
}
...

• Run the build process: npm run build

Usage

Test the Plugin:

• Activate the plugin in the WordPress admin dashboard.
• Add the "Latest Posts Block" to a page or post.
• Configure the number of posts to display using the block settings.