https://github.com/vuchkov/latest-posts-block
Custom WordPress plugin registers Gutenberg block for latest posts in REST API & React
https://github.com/vuchkov/latest-posts-block
gutenberg-blocks react reactjs rest-api restapi wordpress-development wordpress-plugin
Last synced: about 2 months ago
JSON representation
Custom WordPress plugin registers Gutenberg block for latest posts in REST API & React
- Host: GitHub
- URL: https://github.com/vuchkov/latest-posts-block
- Owner: vuchkov
- Created: 2025-01-29T13:20:22.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-29T13:49:13.000Z (over 1 year ago)
- Last Synced: 2025-01-29T14:33:55.313Z (over 1 year ago)
- Topics: gutenberg-blocks, react, reactjs, rest-api, restapi, wordpress-development, wordpress-plugin
- Language: PHP
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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 repo`git clone git@github.com: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.