# New Awesome Blocks for Gutenberg

This project is about creating some new blocks for the new WordPress visual editor (codename: Gutenberg)

A settings page is available to choose which blocks to activate/deactivate and add a default configuration

__Work in progress__
Not yet suitable for production...

## Features

- Add new awesome blocks for the new WordPress editor
- clean up blocks list by disabling unwanted ones
- improves defaults blocks with more options


# Blocks

Here are the current available blocks

## Card preview

Transform a link in a card preview like Twitter, Facebook and Slack do

![Gutenberg Blocks : Card](https://dha4w82d62smt.cloudfront.net/items/2X2T2818311f013I270h/Image%202018-03-10%20at%207.14.38%20PM.jpg?X-CloudApp-Visitor-Id=464056&v=4c25a7eb)

## Notice

Display a simple notice : Info (blue), Advice (green), Warning (yellow), Avoid (red).

![Gutenberg Blocks : Notice](https://dha4w82d62smt.cloudfront.net/items/0L1y2t0p1f220t2t0s0C/notice.jpg?X-CloudApp-Visitor-Id=464056&v=5585bdfc)

## Plugin

Search and display plugin information from the WordPress Plugin Repository. Uses the official WP Plugin API.

![Gutenberg Blocks : Plugin](https://dha4w82d62smt.cloudfront.net/items/2G281x2E320p1s0r3k1J/plugin.jpg?X-CloudApp-Visitor-Id=464056&v=e3e54e8a)

## Woo Commerce Add To Cart Buttons

Display a customizable add to card action button showing the price and discount

![Gutenberg Blocks : Add To Cart](https://dha4w82d62smt.cloudfront.net/items/450m3p2k1c160g3G1d20/addtocart.jpg?X-CloudApp-Visitor-Id=464056&v=9b1da892)

# Requirements

Node 8+

# Setup

Download this folder in your plugins directory

```
cd /wp-content/plugins/gutenberg-blocks/
npm install
npm run
```

This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block).

---

Any block idea? Join Me!
Feel free to tweet and say 👋 at me [@MaximeBJ](https://twitter.com/maximebj/)