Gutenberg block for displaying recipes on your site πŸ₯πŸ²πŸ₯˜πŸͺ
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add PR template Jan 5, 2019
assets Use the correct prop value for templateLock Feb 10, 2019
.eslintignore Initial commit Nov 12, 2018
.eslintrc.js Update build process Dec 17, 2018
.gitignore Remove CLI command from plugin Jan 5, 2019
.travis.yml Add β€œBuild” step to travis to check that build passes Jan 5, 2019
package-lock.json Update dependency eslint to v5.14.1 Feb 18, 2019
package.json Update dependency eslint to v5.14.1 Feb 18, 2019
phpcs.xml.dist Add composer for PHP CodeSniffer Jan 5, 2019
renovate.json Add renovate.json Jan 5, 2019
webpack.config.js Add a postcss config file, and use cssnano on production builds Jan 5, 2019

Recipe Block

A block for displaying recipes on your WordPress site πŸ₯ 🍲 πŸ₯˜ πŸͺ

Screenshot of the recipe block


  1. For a ready-to-use version, download the zip on the release tab.
  2. Upload that to your WP site by going to Plugins > Add New, then click Upload Plugin in the header to reveal the file upload.
  3. Activate the plugin πŸŽ‰
  4. You can skip to the Usage section.

Alternately, if you want to hack on the plugin (feel free!), you'll want to clone this repo, install dependencies, and build the files. You will need node & npm installed.

$ git clone
$ cd rmb-recipe-block
$ npm install
$ npm run build

Now you can activate the plugin πŸŽ‰


You now have "Recipe" block in the block inserter.

Screenshot block inserter: new Recipe icon in Widgets section

Adding this will insert a template with an image, heading, recipe information (serving size, time, duration), and a section for ingredients and directions. You can add and remove blocks from this container.

When in the recipe block, you'll be able to add extra Recipe Ingredients, Recipe Directions, and Recipe Meta blocks.

Screenshot of block inserter: new recipe section blocks in Recipe section

Note: This block doesn't add schema or structured content to your site (the magic used by google to format recipes in search results and for voice assistants). That's probably not in scope for me as this is a side-project and fulfills my use case, but PRs are welcome 😁


There are other npm scripts that will come in handy:

  • npm run start – Run the build process, and keep watching for any file changes.
  • npm run lint – Run the JS linter to make sure all code is following code standards. This will also be run on each PR automatically, so it might save a step to run it yourself before making a PR.

Set SCRIPT_DEBUG to true, or add define( 'RMB_RECIPE_DEV_MODE', true ); in wp-config.php to turn on "dev mode". This will trigger a cache-buster on the JS and CSS files, so that you're loading the most current files (only necessary if you're developing on the block).