zzap / Gutenberg-Development-Documentation

2 stars 0 forks source link

Introduction to Block Development -> Getting Started #2

Open zzap opened 4 years ago

zzap commented 4 years ago

Here's my out loud thinking about the structure for the first page. I'd add it as a child page Getting Started under Introduction to Block Development section.

As this would be the first thing developer see in docs I think it should start from everything known.

GOAL: ending this page should leave developer with created block inside theme, plugin or block as a standalone plugin with minimum code and files. This block doesn't do anything but is visible in block inserter and can be added to the post. No React for now, just a plain vanilla Javascript. This would be a small win on the first page.


The Block

What is a block...

The block can be created as:

File Structure

The usual file structure for block inside the theme, plugin and block being a plugin...

Registering a block

Regardless of approach, a block needs to be registered with both, PHP and Javascript.

PHP

In PHP file, registering a block goes together with registering scripts and styles. Note that scripts and styles are not enqueued, just registered.

Dependencies for js script explained in short.

register_block_type()

(Here we don't see all available arguments for second param array. Those are attributes for WP_Block_Type class and should be included in the docs - another story..)

// Example

Javascript

In Javascript file, usually index.js, registering block goes together with creating it.

registerBlockType()

// Example with all arguments and properties explained 
jonathanbossenger commented 4 years ago

I think this is a good starting point. Once we merge #1 we can start adding the relevant content structure as a new page.

I think we should also try and not specifically add content now, but rather focus on structure, which will then form part of our plan when we look for sponsors.

The idea being that we only work on actual content when we have sponsorship to do so.