Skip to content
Sample instructional code for creating custom Gutenberg blocks for WordPress.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
00-snippets
01-static-complete
01-static
02-editable-complete
02-editable
.distignore
.editorconfig
.gitignore
gutendev.php
readme.md
readme.txt

readme.md

Welcome!

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:

  1. Add this plugin's folder to the /wp-content/plugins/ directory (e.g. git clone git@github.com:brichards/gutendev.git)
  2. 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)


Speaker Slides


WCMIA 2018 Developer Workshop

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.

Workshop Requirements

Notice

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.

Environment Setup

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:

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.

Need a local development environment?

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.

0. Install Local by Flywheel

Download the installer for Mac or Windows.

1. Disable "Faster Docker Volumes" in Local's Advanced Preferences

This step is necessary for git to have write permissions inside an SSH connection:

2. Create a new site inside Local

  • 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:

3. Install git

apt-get update && apt-get -y install git wget

4. Install node and npm

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

5. Install gutenberg and the workshop starter plugin

  • cd /app/public/wp-content/plugins
  • wp plugin install --activate gutenberg
  • git clone https://github.com/brichards/gutendev.git
  • git clone https://github.com/caldera-learn/alert-block.git
  • wp plugin activate gutendev alert-block

6. Update WP-CLI to latest release

  • wp cli update --yes

7. Done!

Visit your local site in the browser and open the starter plugin in your code editor of choice.

You can’t perform that action at this time.