https://github.com/mrottow/vite-wordpress-plugin-block-example
ViteJS WordPress plugin boilerplate using vite-wordpress to create a block.
https://github.com/mrottow/vite-wordpress-plugin-block-example
php vite vite-plugin vite-wordpress vitejs wordpress wordpress-development wordpress-plugin wp wp-plugin
Last synced: 5 months ago
JSON representation
ViteJS WordPress plugin boilerplate using vite-wordpress to create a block.
- Host: GitHub
- URL: https://github.com/mrottow/vite-wordpress-plugin-block-example
- Owner: mrOttoW
- Created: 2024-12-15T23:51:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-17T23:05:21.000Z (about 1 year ago)
- Last Synced: 2025-02-09T23:29:51.363Z (about 1 year ago)
- Topics: php, vite, vite-plugin, vite-wordpress, vitejs, wordpress, wordpress-development, wordpress-plugin, wp, wp-plugin
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚡️ create-vite-block
This repository demonstrates how the vite-wordpress node package and vite-wordpress-php composer package can be used within a WordPress plugin to create a block.
## Installation
1. Clone repo into a new plugin folder called `create-vite-block`
2. Install the composer package
```bash
composer install
```
3. In your local environment, install the node packages via npm or yarn:
```bash
npm install
# or
yarn install
```
4. Create an initial build from the uncompiled files.
```bash
npm run build
# or
yarn build
```
5. Start development server on your local environment
```bash
npm run start
# or
yarn start
```
6. Ensure you refresh the WordPress page you're on (once) so the page loads the injected Vite client.
### Base
If you're not using a traditional WordPress setup or want to use a different plugin folder/name, update the `base` in `vite.config.js`.
### Local environment / DDEV
When using a local environment like DDEV, make sure to install the Node packages on the server via SSH and ensure the ports are exposed.
(Default port configured in Vite: `5173`).
For DDEV, you can use the following addon: https://github.com/mrOttoW/ddev-wordpress-vite