Skip to content

Gutenberg block for displaying recipes on your site πŸ₯πŸ²πŸ₯˜πŸͺ

Notifications You must be signed in to change notification settings

ryelle/rmb-recipe-block

Repository files navigation

Recipe Block

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

Screenshot of the recipe block


Installation

  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 [email protected]:ryelle/rmb-recipe-block.git
$ cd rmb-recipe-block
$ npm install
$ npm run build

Now you can activate the plugin πŸŽ‰

Usage

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 😁


Development

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.

About

Gutenberg block for displaying recipes on your site πŸ₯πŸ²πŸ₯˜πŸͺ

Resources

Stars

Watchers

Forks

Packages

No packages published