WP Manifestindependent plugin directory
manifest / editor / voxels

voxels

Tiny Pixel Collective supported WordPress 5 Blocks

by Tiny Pixel Collective, Kelly Mears · github.com/pixelcollective/voxels · website

★ 2stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/pixelcollective/voxels/archive/refs/heads/development.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/pixelcollective/voxels ↗

"Make blocks," they said. "It'll be fun," they said.

Install

  1. git clone git@github.com/pixelcollective/voxels in plugins dir.
  2. Edit wpackio.server.js with your local host and proxy.
  3. Not using wp-content ? set paths in wpackio.project.js & wpackio.server.js.
  4. composer install
  5. yarn
  6. yarn start (Assets are hotloaded without saving to filesystem)
  7. yarn build (Assets outputted to ./assets; called from ./wpackio.php)
  8. yarn package (Assets built and saved to .zip in ./package)

Structure

/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)

Notes

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.

Credits