mandrasch/ddev-wp-acf-blocks-svelte

Experimental, WordPress ACF Blocks meets Svelte + Vite 🧡

ddev-wp-acf-blocks-svelte

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 or ddev 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

1. Use ddev launch wp-admin/ to open https://ddev-wp-acf-blocks-svelte.ddev.site/wp-admin/
2. Important: Install and activate ACF Pro https://www.advancedcustomfields.com/pro/
3. 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.

TODOs

• Render svelte blocks also in Gutenberg editor mode?
• Watch Jesse Skinner - Adding Svelte to your legacy projects for hints

Notes

• 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

How was this created?

# 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

Thanks to

• https://jimmyutterstrom.com/blog/2019/06/21/svelte-3-components-in-legacy-apps/