https://github.com/youknowriad/blocky

Fastest way to create a WordPress block.
https://github.com/youknowriad/blocky

Last synced: 3 months ago
JSON representation

Fastest way to create a WordPress block.

• Host: GitHub
• URL: https://github.com/youknowriad/blocky
• Owner: youknowriad
• Created: 2021-08-29T17:25:53.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-01T13:04:55.000Z (over 3 years ago)
• Last Synced: 2024-10-04T11:34:30.622Z (3 months ago)
• Language: JavaScript
• Size: 47.9 KB
• Stars: 76
• Watchers: 13
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blocky

The fast way to create WordPress blocks. No more hard JavaScript files, or weird PHP registration. Just create a `block.json` file and generate your block code.

# Why?

The WordPress block API is very powerful, it's very flexible and allows any kind of block you can think about. That flexibility and power comes at the cost of simplicity. A higher level API could be built around it to achieve 80% of the use-cases and won't require any React or PHP expertise. Just define your block name, its markup, its attributes and be done with it.

# Usage

1- Create a block.json file like this:

```js

// example/rich.json

{

  //This is the block name.

  "name": "example/rich",

  // Define the attributes (or the editable properties of your blocks)

  // Only provide a type and a name.

  "attributes": {

    "content": {

      "type": "string"

    }

  },

   // You can use any core block supports.

  "supports": {

    "color": {

      "link": true

    },

    "typography": {

      "fontSize": true,

      "lineHeight": true

    }

  },

   // Define the template/view of your block.

   // This is a JSX like template that represents

   // both the frontend and the backend of the block.

   // You can use some helpers to annotate your template.

  "view": ""

}

```

2- Build your block `npm run cli build example/plain.json`

This will generate the PHP and JS code required to run your block.

It generates an `index.php` file as an entry point for your block.

3- Update your plugin's php file to require the generated block's `index.php` file.

```php