├── .screenshot.png ├── wp-content └── themes │ └── raft-child │ ├── templates │ ├── template-blank.html │ ├── front-page.html │ ├── page.html │ ├── 404.html │ ├── archive.html │ ├── single.html │ ├── search.html │ └── index.html │ ├── main.js │ ├── style.css │ ├── blocks │ ├── svelte-demo-block-two │ │ ├── main.js │ │ ├── template.php │ │ ├── TestTwo.svelte │ │ └── block.json │ └── svelte-demo-block-one │ │ ├── block.json │ │ ├── main.js │ │ ├── Test.svelte │ │ └── template.php │ ├── acf-json │ └── group_638fa97b00877.json │ └── functions.php ├── .ddev ├── .env ├── viteserve │ ├── build-dotenv.sh │ ├── build-dotenv2.sh │ ├── vite-test-listener │ ├── build-dotenv3.sh │ └── build-dotenv1.sh ├── docker-compose.viteserve.yaml └── config.yaml ├── package.json ├── .gitignore ├── vite.config.js └── README.md /.screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mandrasch/ddev-wp-acf-blocks-svelte/HEAD/.screenshot.png -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/template-blank.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/main.js: -------------------------------------------------------------------------------- 1 | import './blocks/svelte-demo-block-one/main.js' 2 | import './blocks/svelte-demo-block-two/main.js' 3 | -------------------------------------------------------------------------------- /.ddev/.env: -------------------------------------------------------------------------------- 1 | # start vite 2 | VITE_PROJECT_DIR=. 3 | VITE_PRIMARY_PORT=5173 4 | VITE_SECONDARY_PORT=5273 5 | VITE_JS_PACKAGE_MGR=npm 6 | # end vite 7 | -------------------------------------------------------------------------------- /.ddev/viteserve/build-dotenv.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | #ddev-generated 3 | 4 | BASE_DIR=$(dirname $0) 5 | echo "BASEDIR $BASE_DIR" 6 | $BASE_DIR/build-dotenv1.sh "$@" 7 | $BASE_DIR/build-dotenv2.sh 8 | $BASE_DIR/build-dotenv3.sh 9 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Raft Child 3 | Description: Child theme 4 | Author: Example Author 5 | Author URI: https://example.com 6 | Template: raft 7 | Version: 1.0 8 | Text Domain: raft-child 9 | */ -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-two/main.js: -------------------------------------------------------------------------------- 1 | import TestTwo from './TestTwo.svelte'; 2 | 3 | let blockEls = document.querySelectorAll('.svelte-demo-block-two'); 4 | 5 | blockEls.forEach(function(blockEl){ 6 | const test = new Test({ 7 | target: blockEl 8 | }); 9 | }); -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-two/template.php: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | Rendering is currently only possible on frontend, not in Gutenberg editor mode. 5 | 6 | 7 |
-------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-two/TestTwo.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

6 | Svelte Demo Block Two 🎉 7 |

8 | 9 | 13 | 14 |

Hello {name}!

15 | -------------------------------------------------------------------------------- /.ddev/viteserve/build-dotenv2.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | #ddev-generated 3 | cd .ddev 4 | if [ -f .allow-upgrade ]; then 5 | if grep ask .allow-upgrade >/dev/null; then 6 | read replace 7 | if [ "$replace" = "y" ]; then 8 | echo "true" >.allow-upgrade 9 | else 10 | echo "false" >.allow-upgrade 11 | fi 12 | fi 13 | fi 14 | -------------------------------------------------------------------------------- /.ddev/viteserve/vite-test-listener: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | #ddev-generated 3 | 4 | # This is used by viteserve's tests 5 | # to mock a vite process. It's not 6 | # part of the public interface of the 7 | # module 8 | 9 | PORT=$1 10 | PORT=${PORT:-5173} 11 | 12 | if nc -zv 127.0.0.1 $PORT &>/dev/null; then 13 | exit 1 14 | fi 15 | 16 | nohup nc -lk $PORT &>/dev/null & 17 | # Print out a PID 18 | echo $! 19 | disown %1 20 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-one/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "acf/svelte-demo-block", 3 | "title": "Svelte Demo Block One", 4 | "description": "A custom svelte-demo-block block.", 5 | "style": [ "file:./svelte-demo-block.css" ], 6 | "category": "formatting", 7 | "icon": "heart", 8 | "keywords": ["svelte-demo-block"], 9 | "acf": { 10 | "mode": "preview", 11 | "renderTemplate": "template.php" 12 | }, 13 | "align": "full" 14 | } -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-two/block.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "acf/svelte-demo-block-two", 3 | "title": "Svelte Demo Block Two", 4 | "description": "A custom svelte-demo-block-two block.", 5 | "style": [ "file:./svelte-demo-block-two.css" ], 6 | "category": "formatting", 7 | "icon": "superhero", 8 | "keywords": ["svelte-demo-block-two"], 9 | "acf": { 10 | "mode": "preview", 11 | "renderTemplate": "template.php" 12 | }, 13 | "align": "full" 14 | } -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-one/main.js: -------------------------------------------------------------------------------- 1 | import Test from './Test.svelte'; 2 | 3 | let blockEls = document.querySelectorAll('.svelte-demo-block-container'); 4 | 5 | blockEls.forEach(function(blockEl){ 6 | 7 | const blockId = blockEl.getAttribute('data-block-id'); 8 | 9 | // Inject svelte component with props 10 | // thx to https://jimmyutterstrom.com/blog/2019/06/21/svelte-3-components-in-legacy-apps/ 11 | const test = new Test({ 12 | target: blockEl, 13 | props: svelteDemoBlockData[blockId] 14 | }); 15 | }); -------------------------------------------------------------------------------- /.ddev/viteserve/build-dotenv3.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | #ddev-generated 3 | cd .ddev 4 | if [ -f .allow-upgrade ]; then 5 | if grep "true" .allow-upgrade >/dev/null; then 6 | if [ -f .env ]; then 7 | sed -i.bak '/^# start vite/,/^\# end vite/d;' .env 8 | # strip weird null characters from sed output. 9 | tr <.env -d '\000' >.env-post-sed 10 | cat .env-post-sed .env-frag >.env 11 | echo ".env updated to:" 12 | cat .env 13 | rm .env-post-sed 14 | else 15 | cp .env-frag .env 16 | fi 17 | rm .env-frag 18 | fi 19 | fi 20 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-one/Test.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 |

Title (set as prop): {title}

10 |

11 | Svelte Demo Block 🎉 12 |

13 | 14 | 18 | 19 |

Hello {name}!

20 |
21 | 22 | 29 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/front-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/blocks/svelte-demo-block-one/template.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |

Rendering is currently only possible on frontend, not in Gutenberg editor mode.

9 | 10 | 11 | 12 |
13 |
14 | 15 | 25 | 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html", 3 | "version": "1.0.0", 4 | "description": "- `templates/` folder was copied over to child theme because of current bug https://github.com/WordPress/gutenberg/issues/44243", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/mandrasch/ddev-wp-acf-blocks-svelte.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/mandrasch/ddev-wp-acf-blocks-svelte/issues" 20 | }, 21 | "homepage": "https://github.com/mandrasch/ddev-wp-acf-blocks-svelte#readme", 22 | "devDependencies": { 23 | "@sveltejs/vite-plugin-svelte": "^1.4.0", 24 | "vite": "^3.2.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # https://ddev-pull-wp.mandrasch.eu/ 2 | # Ignore all ... 3 | /* 4 | 5 | # ... but track specific files / folders: 6 | 7 | # General files 8 | !.gitignore 9 | !/README.md 10 | !/LICENSE 11 | !/.screenshot.png 12 | 13 | # DDEV config and provider script 14 | !/.ddev 15 | /.ddev/* 16 | !/.ddev/config.yaml 17 | !/.ddev/providers 18 | /.ddev/providers/* 19 | !/.ddev/providers/ssh.yaml 20 | !/.ddev/providers/backup.yaml 21 | 22 | # vite serve files 23 | # TODO: how can we achieve this more robust? let ddev handle gitignore? 24 | !/.ddev/docker-compose.viteserve.yaml 25 | !/.ddev/web-build/Dockerfile.ddev-viteserve 26 | !/.ddev/viteserve 27 | !/.ddev/commands/web/vite-serve 28 | 29 | 30 | # Child theme: 31 | !/wp-content 32 | /wp-content/* 33 | !/wp-content/themes 34 | /wp-content/themes/* 35 | !/wp-content/themes/raft-child 36 | # vite output dir (compiled) 37 | /wp-content/themes/raft-child/dist 38 | 39 | # Vite & npm 40 | !/.ddev/.env 41 | !/vite.config.js 42 | !/package.json 43 | !/package-lock.json -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
6 | 7 | 8 |

404

9 | 10 | 11 | 12 |

Unfortunately the page was not found.

13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/acf-json/group_638fa97b00877.json: -------------------------------------------------------------------------------- 1 | { 2 | "key": "group_638fa97b00877", 3 | "title": "Svelte Demo Block", 4 | "fields": [ 5 | { 6 | "key": "field_638fa97b63a02", 7 | "label": "Title", 8 | "name": "title", 9 | "aria-label": "", 10 | "type": "text", 11 | "instructions": "", 12 | "required": 0, 13 | "conditional_logic": 0, 14 | "wrapper": { 15 | "width": "", 16 | "class": "", 17 | "id": "" 18 | }, 19 | "default_value": "", 20 | "maxlength": "", 21 | "placeholder": "", 22 | "prepend": "", 23 | "append": "" 24 | } 25 | ], 26 | "location": [ 27 | [ 28 | { 29 | "param": "block", 30 | "operator": "==", 31 | "value": "acf\/svelte-demo-block" 32 | } 33 | ] 34 | ], 35 | "menu_order": 0, 36 | "position": "normal", 37 | "style": "default", 38 | "label_placement": "top", 39 | "instruction_placement": "label", 40 | "hide_on_screen": "", 41 | "active": true, 42 | "description": "", 43 | "show_in_rest": 0, 44 | "modified": 1670359897 45 | } -------------------------------------------------------------------------------- /.ddev/docker-compose.viteserve.yaml: -------------------------------------------------------------------------------- 1 | #ddev-generated 2 | # Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE 3 | # Derived from the browsersync addition. 4 | # This is to expose the vite dev port. 5 | version: '3.6' 6 | services: 7 | web: 8 | expose: 9 | # needed so the upstream works: 10 | - ${VITE_PRIMARY_PORT:-5173} 11 | environment: 12 | # Set the vite-enabled js project here. 13 | # Actual settings are pulled from .ddev/.env, and 14 | # should be changed there, and not here. 15 | - VITE_PROJECT_DIR=${VITE_PROJECT_DIR:-frontend} 16 | - VITE_PRIMARY_PORT=${VITE_PRIMARY_PORT:-5173} 17 | - VITE_SECONDARY_PORT=${VITE_SECONDARY_PORT:-5273} 18 | - VITE_JS_PACKAGE_MGR=${VITE_JS_PACKAGE_MGR} 19 | # Expose the vite dev server's port (default 5173) here. 20 | # The odd port swap below is required so we do not need 21 | # to play with HMR settings due to different internal 22 | # and external ports. DDEV won't let us expose just HTTPS, 23 | # so a bit of trickery is required. 24 | - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,${VITE_SECONDARY_PORT:-5273}:${VITE_PRIMARY_PORT:-5173} 25 | - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,${VITE_PRIMARY_PORT:-5173}:${VITE_PRIMARY_PORT:-5173} 26 | -------------------------------------------------------------------------------- /.ddev/viteserve/build-dotenv1.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env bash 2 | #ddev-generated 3 | 4 | y_flag='' 5 | 6 | print_usage() { 7 | printf "Usage: $0 [-y]" 8 | } 9 | 10 | while getopts 'y' flag; do 11 | case "${flag}" in 12 | y) y_flag='true' ;; 13 | *) 14 | print_usage 15 | exit 1 16 | ;; 17 | esac 18 | done 19 | 20 | # defaults 21 | PROJ_DIR=frontend 22 | 23 | # check for special cases 24 | if [ "$DDEV_PROJECT_TYPE" = "laravel" ]; then 25 | PROJ_DIR=. 26 | fi 27 | 28 | # @see https://stackoverflow.com/a/27650122/8600734 29 | mapfile VITE_SETTINGS <.env-frag 48 | 49 | allow_upgrade=${y_flag} 50 | 51 | if [ "$allow_upgrade" = "" ]; then 52 | if [ ! -f "./.env" ]; then 53 | allow_upgrade="true" 54 | else 55 | if grep "^# start vite" .env >/dev/null; then 56 | echo "Found vite settings in your .ddev/.env file." 57 | echo -n "Replace old settings (y/n)? " 58 | allow_upgrade=ask 59 | fi 60 | fi 61 | fi 62 | echo $allow_upgrade >.allow-upgrade 63 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | // https://stackblitz.com/edit/vitejs-vite-vtb3nk?file=vite.config.js&terminal=dev 2 | 3 | // inspired by 4 | // https://github.com/fgeierst/typo3-vite-demo/blob/master/packages/typo3_vite_demo/Resources/Private/JavaScript/vite.config.js 5 | 6 | import { defineConfig } from 'vite' 7 | import { svelte } from '@sveltejs/vite-plugin-svelte' 8 | 9 | // https://vitejs.dev/config/ 10 | export default defineConfig({ 11 | plugins: [svelte()], 12 | // root: path.resolve(__dirname, 'src/js'), 13 | server: { 14 | host: "0.0.0.0", // leave this unchanged for DDEV! 15 | port: 5173, 16 | origin: 'https://ddev-wp-acf-blocks-svelte.ddev.site' 17 | }, 18 | publicDir: false, // disable copy `public/` to outDir 19 | build: { 20 | // generate manifest.json in outDir 21 | manifest: true, 22 | rollupOptions: { 23 | 24 | input: 'wp-content/themes/raft-child/main.js' 25 | 26 | 27 | /* Single files approach 28 | input: { 29 | 'svelte-demo-block': 'wp-content/themes/raft-child/blocks/svelte-demo-block/main.js', 30 | 'svelte-demo-block': 'wp-content/themes/raft-child/blocks/svelte-demo-block/main.js', 31 | },*/ 32 | // It is also possible to split it into multiple js files, see: https://rollupjs.org/guide/en/#input 33 | // But then we need to be careful with dev includes path () and path for production builds: src="/wp-content/themes/raft-child/dist/entry-svelte-demo-block.js" 34 | /* output: { 35 | entryFileNames: 'entry-[name].js' 36 | }*/ 37 | }, 38 | outDir: 'wp-content/themes/raft-child/dist', 39 | } 40 | 41 | }) 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ddev-wp-acf-blocks-svelte 2 | 3 | 4 | [ACF Blocks](https://www.advancedcustomfields.com/resources/blocks/) meets Svelte + Vite 🧡 5 | 6 | ![Screenshot block with svelte input binding](.screenshot.png?raw=true) 7 | 8 | Status: Work in progress 🧑‍🔧 9 | 10 | Made with 11 | 12 | - https://github.com/drud/ddev ([Discord](https://discord.gg/hCZFfAMc5k)) 13 | - https://github.com/torenware/ddev-viteserve 14 | - (https://themeisle.com/themes/raft/) 15 | 16 | Inspired by [fgeierst/typo3-vite-demo](https://github.com/fgeierst/typo3-vite-demo). See more experiments: https://my-ddev-lab.mandrasch.eu/ 17 | 18 | **Local development** 19 | 20 | - Run either `ddev npm run dev` or `ddev vite-serve start` 21 | 22 | Use `define('WP_ENV','production');` or `define('WP_ENV','development');` in `wp-config.php` to simulate the environment. The default is `development`. 23 | 24 | **Local first time setup:** 25 | 26 | ```bash 27 | ddev start && \ 28 | ddev wp core download && \ 29 | ddev launch 30 | 31 | # Finish installation of WordPress in browser, afterwards: 32 | 33 | ddev wp theme install raft && \ 34 | ddev wp theme activate raft-child && \ 35 | ddev npm install 36 | ``` 37 | 38 | 1. Use `ddev launch wp-admin/` to open `https://ddev-wp-acf-blocks-svelte.ddev.site/wp-admin/` 39 | 1. **Important**: Install and activate ACF Pro https://www.advancedcustomfields.com/pro/ 40 | 1. Add Svelte Block One to a page or post of your choice 41 | 42 | Now you can run either `ddev npm run dev` or `ddev vite-serve start` for local development. 43 | 44 | ## TODOs 45 | 46 | - [ ] Render svelte blocks also in Gutenberg editor mode? 47 | - [ ] Watch [Jesse Skinner - Adding Svelte to your legacy projects 48 | ](https://www.youtube.com/watch?v=uWxkaDdqfpI) for hints 49 | 50 | ## Notes 51 | 52 | - `templates/` folder was copied over to child theme because of current bug https://github.com/WordPress/gutenberg/issues/44243 53 | - If you run composer with WordPress, that might be of interest: https://github.com/idleberg/php-wordpress-vite-assets 54 | 55 | ## How was this created? 56 | 57 | ```bash 58 | # WP Quickstart for DDEV 59 | # https://ddev.readthedocs.io/en/latest/users/quickstart/#wordpress 60 | ddev config --project-type=wordpress && ddev start && ddev wp core download && ddev launch 61 | 62 | # Finish installation in browser 63 | 64 | # Install ACF Pro for ACF Blocks feature 65 | # https://www.advancedcustomfields.com/pro/ 66 | 67 | # We use the Raft theme by themeisle, with child theme: 68 | ddev wp theme install raft && ddev wp theme activate raft-child 69 | 70 | # Vite support (https://github.com/torenware/ddev-viteserve) 71 | ddev get torenware/ddev-viteserve 72 | # Modified /.ddev/.env for configuration 73 | 74 | ddev npm init -y 75 | ddev npm install --save-dev vite @sveltejs/vite-plugin-svelte 76 | 77 | # Added scripts-section to package.json & create vite.config.js 78 | ``` 79 | 80 | ## Thanks to 81 | 82 | - https://jimmyutterstrom.com/blog/2019/06/21/svelte-3-components-in-legacy-apps/ -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/archive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
6 | 7 | 8 |
9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 | 31 | 32 |
33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 | 55 | 56 |

Unfortunately no posts were found

57 | 58 | 59 | 60 |
61 | 62 | 63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 |
36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 |
44 | 45 | 46 | 47 |
48 | 49 | 50 |
51 | 52 | 53 | 54 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 |
64 | 65 | 66 | 67 | 68 | 69 |
70 | 71 | 72 | 73 | 74 |
75 | 76 | 77 |
78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
6 | 7 | 8 |
9 | 10 |

Search results

11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 |

Unfortunately no posts were 60 | found

61 | 62 | 63 |
64 | 65 |
66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /wp-content/themes/raft-child/functions.php: -------------------------------------------------------------------------------- 1 | {'wp-content/themes/raft-child/main.js'}->{'file'}; 10 | $mainCssFileName = $manifestJson->{'wp-content/themes/raft-child/main.css'}->{'file'}; 11 | // add compiled js to footer 12 | wp_enqueue_script('child-main-js', get_stylesheet_directory_uri() . "/dist/" . $mainJsFileName, array(), false, true); 13 | // add css to head 14 | wp_enqueue_style('child-main-css', get_stylesheet_directory_uri() . "/dist/" . $mainCssFileName, array('parent-style', 'child-theme-css')); 15 | } 16 | } 17 | add_action('wp_enqueue_scripts', 'enqueue_child_theme_styles'); 18 | 19 | add_action('init', 'register_acf_blocks'); 20 | function register_acf_blocks() 21 | { 22 | register_block_type(__DIR__ . '/blocks/svelte-demo-block-one'); 23 | register_block_type(__DIR__ . '/blocks/svelte-demo-block-two'); 24 | } 25 | 26 | // add vite support to frontend AND gutenberg editor 27 | // https://vitejs.dev/guide/backend-integration.html 28 | // https://wpdevelopment.courses/articles/how-to-add-javascript-to-wordpress/ 29 | // https://developer.wordpress.org/reference/hooks/enqueue_block_assets/ 30 | 31 | // TODO: is footer the correct way? 32 | add_action('wp_footer', 'add_vite_dev_scripts'); // frontend 33 | // add_action('admin_head', 'add_vite_scripts'); // backend 34 | function add_vite_dev_scripts() 35 | { 36 | // Production mode, quick & dirty check, use in wp-confing.php either 37 | // define('WP_ENV', 'production') OR define('WP_ENV', 'development') 38 | if (!defined('WP_ENV') || defined('WP_ENV') && WP_ENV === 'development') { ?> 39 | 40 | 41 | 42 | 43 | '; 66 | return $tag; 67 | } 68 | */ 69 | 70 | 71 | // TODO: for production we should read from manifest.json, see: https://vitejs.dev/guide/backend-integration.html 72 | // TODO: is it easier to use just one file instead of splitted entries? 73 | // 74 | // 75 | // -------------------------------------------------------------------------------- /wp-content/themes/raft-child/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
6 | 7 |

Our awesome blog

8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 |

Unfortunately no posts were found

47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 |
56 | 57 | 58 |

Power-up your Gutenberg layouts with Otter

59 | 60 | 61 | 62 |
63 | 64 | 65 | 66 |
67 | 68 | 69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /.ddev/config.yaml: -------------------------------------------------------------------------------- 1 | name: ddev-wp-acf-blocks-svelte 2 | type: wordpress 3 | docroot: "" 4 | php_version: "8.0" 5 | webserver_type: nginx-fpm 6 | router_http_port: "80" 7 | router_https_port: "443" 8 | xdebug_enabled: false 9 | additional_hostnames: [] 10 | additional_fqdns: [] 11 | database: 12 | type: mariadb 13 | version: "10.4" 14 | nfs_mount_enabled: false 15 | mutagen_enabled: false 16 | use_dns_when_possible: true 17 | composer_version: "2" 18 | web_environment: [] 19 | nodejs_version: "16" 20 | 21 | # Key features of ddev's config.yaml: 22 | 23 | # name: # Name of the project, automatically provides 24 | # http://projectname.ddev.site and https://projectname.ddev.site 25 | 26 | # type: # drupal6/7/8, backdrop, typo3, wordpress, php 27 | 28 | # docroot: # Relative path to the directory containing index.php. 29 | 30 | # php_version: "7.4" # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1" 31 | 32 | # You can explicitly specify the webimage but this 33 | # is not recommended, as the images are often closely tied to ddev's' behavior, 34 | # so this can break upgrades. 35 | 36 | # webimage: # nginx/php docker image. 37 | 38 | # database: 39 | # type: # mysql, mariadb 40 | # version: # database version, like "10.3" or "8.0" 41 | # Note that mariadb_version or mysql_version from v1.18 and earlier 42 | # will automatically be converted to this notation with just a "ddev config --auto" 43 | 44 | # router_http_port: # Port to be used for http (defaults to port 80) 45 | # router_https_port: # Port for https (defaults to 443) 46 | 47 | # xdebug_enabled: false # Set to true to enable xdebug and "ddev start" or "ddev restart" 48 | # Note that for most people the commands 49 | # "ddev xdebug" to enable xdebug and "ddev xdebug off" to disable it work better, 50 | # as leaving xdebug enabled all the time is a big performance hit. 51 | 52 | # xhprof_enabled: false # Set to true to enable xhprof and "ddev start" or "ddev restart" 53 | # Note that for most people the commands 54 | # "ddev xhprof" to enable xhprof and "ddev xhprof off" to disable it work better, 55 | # as leaving xhprof enabled all the time is a big performance hit. 56 | 57 | # webserver_type: nginx-fpm # or apache-fpm 58 | 59 | # timezone: Europe/Berlin 60 | # This is the timezone used in the containers and by PHP; 61 | # it can be set to any valid timezone, 62 | # see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones 63 | # For example Europe/Dublin or MST7MDT 64 | 65 | # composer_root: 66 | # Relative path to the composer root directory from the project root. This is 67 | # the directory which contains the composer.json and where all Composer related 68 | # commands are executed. 69 | 70 | # composer_version: "2" 71 | # You can set it to "" or "2" (default) for Composer v2 or "1" for Composer v1 72 | # to use the latest major version available at the time your container is built. 73 | # It is also possible to select a minor version for example "2.2" which will 74 | # install the latest release of that branch. Alternatively, an explicit Composer 75 | # version may be specified, for example "1.0.22". Finally, it is also possible 76 | # to use one of the key words "stable", "preview" or "snapshot" see Composer 77 | # documentation. 78 | # To reinstall Composer after the image was built, run "ddev debug refresh". 79 | 80 | # nodejs_version: "16" 81 | # change from the default system Node.js version to another supported version, like 12, 14, 17, 18. 82 | # Note that you can use 'ddev nvm' or nvm inside the web container to provide nearly any 83 | # Node.js version, including v6, etc. 84 | 85 | # additional_hostnames: 86 | # - somename 87 | # - someothername 88 | # would provide http and https URLs for "somename.ddev.site" 89 | # and "someothername.ddev.site". 90 | 91 | # additional_fqdns: 92 | # - example.com 93 | # - sub1.example.com 94 | # would provide http and https URLs for "example.com" and "sub1.example.com" 95 | # Please take care with this because it can cause great confusion. 96 | 97 | # upload_dir: custom/upload/dir 98 | # would set the destination path for ddev import-files to /custom/upload/dir 99 | # When mutagen is enabled this path is bind-mounted so that all the files 100 | # in the upload_dir don't have to be synced into mutagen 101 | 102 | # working_dir: 103 | # web: /var/www/html 104 | # db: /home 105 | # would set the default working directory for the web and db services. 106 | # These values specify the destination directory for ddev ssh and the 107 | # directory in which commands passed into ddev exec are run. 108 | 109 | # omit_containers: [db, dba, ddev-ssh-agent] 110 | # Currently only these containers are supported. Some containers can also be 111 | # omitted globally in the ~/.ddev/global_config.yaml. Note that if you omit 112 | # the "db" container, several standard features of ddev that access the 113 | # database container will be unusable. In the global configuration it is also 114 | # possible to omit ddev-router, but not here. 115 | 116 | # nfs_mount_enabled: false 117 | # Great performance improvement but requires host configuration first. 118 | # See https://ddev.readthedocs.io/en/stable/users/performance/#using-nfs-to-mount-the-project-into-the-container 119 | 120 | # mutagen_enabled: false 121 | # Performance improvement using mutagen asynchronous updates. 122 | # See https://ddev.readthedocs.io/en/latest/users/performance/#using-mutagen 123 | 124 | # fail_on_hook_fail: False 125 | # Decide whether 'ddev start' should be interrupted by a failing hook 126 | 127 | # host_https_port: "59002" 128 | # The host port binding for https can be explicitly specified. It is 129 | # dynamic unless otherwise specified. 130 | # This is not used by most people, most people use the *router* instead 131 | # of the localhost port. 132 | 133 | # host_webserver_port: "59001" 134 | # The host port binding for the ddev-webserver can be explicitly specified. It is 135 | # dynamic unless otherwise specified. 136 | # This is not used by most people, most people use the *router* instead 137 | # of the localhost port. 138 | 139 | # host_db_port: "59002" 140 | # The host port binding for the ddev-dbserver can be explicitly specified. It is dynamic 141 | # unless explicitly specified. 142 | 143 | # phpmyadmin_port: "8036" 144 | # phpmyadmin_https_port: "8037" 145 | # The PHPMyAdmin ports can be changed from the default 8036 and 8037 146 | 147 | # host_phpmyadmin_port: "8036" 148 | # The phpmyadmin (dba) port is not normally bound on the host at all, instead being routed 149 | # through ddev-router, but it can be specified and bound. 150 | 151 | # mailhog_port: "8025" 152 | # mailhog_https_port: "8026" 153 | # The MailHog ports can be changed from the default 8025 and 8026 154 | 155 | # host_mailhog_port: "8025" 156 | # The mailhog port is not normally bound on the host at all, instead being routed 157 | # through ddev-router, but it can be bound directly to localhost if specified here. 158 | 159 | # webimage_extra_packages: [php7.4-tidy, php-bcmath] 160 | # Extra Debian packages that are needed in the webimage can be added here 161 | 162 | # dbimage_extra_packages: [telnet,netcat] 163 | # Extra Debian packages that are needed in the dbimage can be added here 164 | 165 | # use_dns_when_possible: true 166 | # If the host has internet access and the domain configured can 167 | # successfully be looked up, DNS will be used for hostname resolution 168 | # instead of editing /etc/hosts 169 | # Defaults to true 170 | 171 | # project_tld: ddev.site 172 | # The top-level domain used for project URLs 173 | # The default "ddev.site" allows DNS lookup via a wildcard 174 | # If you prefer you can change this to "ddev.local" to preserve 175 | # pre-v1.9 behavior. 176 | 177 | # ngrok_args: --basic-auth username:pass1234 178 | # Provide extra flags to the "ngrok http" command, see 179 | # https://ngrok.com/docs#http or run "ngrok http -h" 180 | 181 | # disable_settings_management: false 182 | # If true, ddev will not create CMS-specific settings files like 183 | # Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php 184 | # In this case the user must provide all such settings. 185 | 186 | # You can inject environment variables into the web container with: 187 | # web_environment: 188 | # - SOMEENV=somevalue 189 | # - SOMEOTHERENV=someothervalue 190 | 191 | # no_project_mount: false 192 | # (Experimental) If true, ddev will not mount the project into the web container; 193 | # the user is responsible for mounting it manually or via a script. 194 | # This is to enable experimentation with alternate file mounting strategies. 195 | # For advanced users only! 196 | 197 | # bind_all_interfaces: false 198 | # If true, host ports will be bound on all network interfaces, 199 | # not just the localhost interface. This means that ports 200 | # will be available on the local network if the host firewall 201 | # allows it. 202 | 203 | # default_container_timeout: 120 204 | # The default time that ddev waits for all containers to become ready can be increased from 205 | # the default 120. This helps in importing huge databases, for example. 206 | 207 | #web_extra_exposed_ports: 208 | #- name: nodejs 209 | # container_port: 3000 210 | # http_port: 2999 211 | # https_port: 3000 212 | #- name: something 213 | # container_port: 4000 214 | # https_port: 4000 215 | # http_port: 3999 216 | # Allows a set of extra ports to be exposed via ddev-router 217 | # The port behavior on the ddev-webserver must be arranged separately, for example 218 | # using web_extra_daemons. 219 | # For example, with a web app on port 3000 inside the container, this config would 220 | # expose that web app on https://.ddev.site:9999 and http://.ddev.site:9998 221 | # web_extra_exposed_ports: 222 | # - container_port: 3000 223 | # http_port: 9998 224 | # https_port: 9999 225 | 226 | #web_extra_daemons: 227 | #- name: "http-1" 228 | # command: "/var/www/html/node_modules/.bin/http-server -p 3000" 229 | # directory: /var/www/html 230 | #- name: "http-2" 231 | # command: "/var/www/html/node_modules/.bin/http-server /var/www/html/sub -p 3000" 232 | # directory: /var/www/html 233 | 234 | # Many ddev commands can be extended to run tasks before or after the 235 | # ddev command is executed, for example "post-start", "post-import-db", 236 | # "pre-composer", "post-composer" 237 | # See https://ddev.readthedocs.io/en/stable/users/extend/custom-commands/ for more 238 | # information on the commands that can be extended and the tasks you can define 239 | # for them. Example: 240 | #hooks: 241 | # Un-comment to emit the WP CLI version after ddev start. 242 | # post-start: 243 | # - exec: wp cli version 244 | --------------------------------------------------------------------------------