"Make blocks," they said. "It'll be fun," they said.
git clone [email protected]/pixelcollective/voxelsin plugins dir.- Edit
wpackio.server.jswith your local host and proxy. - Not using wp-content ? set paths in
wpackio.project.js&wpackio.server.js. composer installyarnyarn start(Assets are hotloaded without saving to filesystem)yarn build(Assets outputted to./assets; called from./wpackio.php)yarn package(Assets built and saved to .zip in./package)
/voxels # → Root of plugin
├── assets/ # → Packed JS/CSS
├── includes/ # → PHP Classes, etc.
├── languages/ # → i18n
├── node_modules/ # → Node.js packages (never edit)
├── src # → Blocks
│ ├── blocks/ # → Block JS
│ │ ├── button/ # → Button block
│ │ ├── card / # → Card block
│ │ ├── components/ # → Functionality for general block imports
│ │ ├── header/ # → Fancy header block
│ │ ├── _common.scss # → Baseline stylesheet
│ │ ├── _vars.scss # → Stylesheet settings and variables
│ │ ├── editor.js # → JS Entrypoint
│ │ ├── editor.scss # → SCSS Main for wp-admin
│ │ ├── icons.js # → svg icons
│ │ ├── public.js # → JS Entrypoint for public
│ │ ├── public.scss # → SCSS Main for public
│ │ └───wp_imports.js # → WordPress API wrapper
│ └── client/ # → Public scripts (load React on frontend, etc.)
├── vendor/ # → Composer packages (never edit)
├── composer.json # → Composer dependencies (never edit)
├── composer.lock # → Composer lockfile (never edit)
├── index.php # → // silence is golden
├── LICENSE # → MIT License
├── package.json # → npm packages
├── postcss.config.js # → postcss configuration
├── uninstall.php # → Plugin uninstaller
├── README.md # → ** YOU ARE HERE **
├── voxels.php # → Plugin main
├── wpackio.php # → PHP style and script loader (dev and prod)
├── wpackio.project.js # → wpack.io configuration
├── wpackio.server.js # → wpack.io dev server configuration
└── yarn.lock # → yarn lockfile (never edit)
If you want to use react on the public site you should utilize the ./src/public/ dir for your scripts. In that case don't bother adding the React package; you an just tap into wp which is identical and ships with WordPress. I overrode the babel configuration in wpackio.project.js to load the wp object into the hotloaded environment so you should be ready to just get crackin'. It is compatible with full-on JSX if you'd like to go whole hog.
