This plugin is designed to be the instructional companion to the WordCamp Miami 2018 Developer workshop.
In its default state this plugin does nothing. Throughout the workshop we will be enabling each new section and writing code to power our custom blocks. To enable each custom block, edit the gutendev.php file and uncomment the include statement for the given section. The *-complete directory includes final, working code for each lesson. Review and include these directories to see the desired outcome after practicing yourself in the working directories.
This plugin can be installed like every other WordPress plugin:
- Add this plugin's folder to the
/wp-content/plugins/directory (e.g.git clone git@github.com:brichards/gutendev.git) - Activate the plugin either via the 'Plugins' menu in WordPress or via WP-CLI (e.g.
wp plugin activate gutendev)
There is a second instructional plugin which you can install from https://github.com/caldera-learn/alert-block
(Run git clone https://github.com/caldera-learn/alert-block.git inside your wp-content/plugins directory)
Hello! We are all very excited to host you for the Future of WordPress Development Workshop. Below are some notes to help you prepare for Friday's day-long event.
If you're not already comfortable and experienced with writing both PHP and JavaScript you will find this workshop quite challenging. Our goal is to help everyone reach a comfort level creating custom gutenberg blocks but we know that new tech can be frustrating and may be beyond the current skill level of several attendees.
Ideally, you're already comfortable creating custom plugins and writing your own JS interactions. Nevertheless, each speaker has worked hard to make the code examples accessible and as well-documented as possible. We have also prepared abundant resource material for further self-directed learning. If you get stuck, and our presenters cannot help you get unstuck, simply skip the practice assignments for now. Enjoy the presenters' slides and demos during the workshop then dive into the material again after you get home.
If you would like to practice alongside the presenters throughout the development workshop, you'll want to have a solid local development environment with all the following already installed before you arrive:
- WordPress 4.9+
- Gutenberg plugin
- WP-CLI
- git
- node.js & npm
- Your favorite code editor (we like Sublime, VS Code, Atom, and many, many others, but stick with what you love).
Finally, you'll want to clone our GutenDev sample plugin from its GitHub repo into your development site's plugins directory. It's inside this plugin where we'll be practicing.
If you don't already have a good, working local development environment we recommend installing for this workshop Local, by Flywheel (it's free). There are many great tools to choose from, though, if you'd like something different. We have instructions below for getting Local setup and configured in 6 easy steps.
All code lines below are items to be copy/pasted directly into the SSH terminal.
Download the installer for Mac or Windows.
This step is necessary for git to have write permissions inside an SSH connection:
- Take note of your selected URL, username, and password
- Once the site has been provisioned, right-click on the site and open an SSH terminal:
apt-get update && apt-get -y install git wget
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | NVM_DIR=/usr/local/nvm bash && \. /usr/local/nvm/nvm.sh && nvm install node
cd /app/public/wp-content/pluginswp plugin install --activate gutenberggit clone https://github.com/brichards/gutendev.gitgit clone https://github.com/caldera-learn/alert-block.gitwp plugin activate gutendev alert-block
wp cli update --yes
Visit your local site in the browser and open the starter plugin in your code editor of choice.