ACF Blocks meets Svelte + Vite ๐งก
Status: Work in progress ๐งโ๐ง
Made with
- https://github.com/drud/ddev (Discord)
- https://github.com/torenware/ddev-viteserve
- (https://themeisle.com/themes/raft/)
Inspired by fgeierst/typo3-vite-demo. See more experiments: https://my-ddev-lab.mandrasch.eu/
Local development
- Run either
ddev npm run dev
orddev vite-serve start
Use define('WP_ENV','production');
or define('WP_ENV','development');
in wp-config.php
to simulate the environment. The default is development
.
Local first time setup:
ddev start && \
ddev wp core download && \
ddev launch
# Finish installation of WordPress in browser, afterwards:
ddev wp theme install raft && \
ddev wp theme activate raft-child && \
ddev npm install
- Use
ddev launch wp-admin/
to openhttps://ddev-wp-acf-blocks-svelte.ddev.site/wp-admin/
- Important: Install and activate ACF Pro https://www.advancedcustomfields.com/pro/
- Add Svelte Block One to a page or post of your choice
Now you can run either ddev npm run dev
or ddev vite-serve start
for local development.
- Render svelte blocks also in Gutenberg editor mode?
- Watch Jesse Skinner - Adding Svelte to your legacy projects for hints
templates/
folder was copied over to child theme because of current bug WordPress/gutenberg#44243- If you run composer with WordPress, that might be of interest: https://github.com/idleberg/php-wordpress-vite-assets
# WP Quickstart for DDEV
# https://ddev.readthedocs.io/en/latest/users/quickstart/#wordpress
ddev config --project-type=wordpress && ddev start && ddev wp core download && ddev launch
# Finish installation in browser
# Install ACF Pro for ACF Blocks feature
# https://www.advancedcustomfields.com/pro/
# We use the Raft theme by themeisle, with child theme:
ddev wp theme install raft && ddev wp theme activate raft-child
# Vite support (https://github.com/torenware/ddev-viteserve)
ddev get torenware/ddev-viteserve
# Modified /.ddev/.env for configuration
ddev npm init -y
ddev npm install --save-dev vite @sveltejs/vite-plugin-svelte
# Added scripts-section to package.json & create vite.config.js