Background

So recently I've been working with the SirTrevor Block Editor for a couple of projects I've been working on. This post is a quick rundown of the editor and block lifecycles.

The Editor Lifecycle

Initialize()

1. DOM Setup
   ST double checks that it has a dom element and then setups up references to $el, el, $form and wraps everything with $wrapper divs

2. Creates Store -- as in the document store

3. Calls build

4. Binds to form submission

Build()

/*------------------------------------------------------------------------------
* Build the Editor instance.
* Check to see if we've been passed JSON already, and if not try and create a default block.
* If we have JSON then we need to build all of our blocks from this.
------------------------------------------------------------------------------*/

1. Creates block controls:
   e.g. block controls, floating block controls and format bar

2. Sets up events

3. Sets up reference to local store

4. Creates blocks

   • If blocks are given, will loop through and create them all
   • If no block is given, it will create the default block
   • Note: This would be a good place to set up a hook to show the block chooser on load...

The Block Lifecycle

1. Checks to see if the block limit has been hit
   Checks the global limit as well as limits for the specific type

2. Sets focus on block
   block needs to implement getTextBlock() which should return the element meant to be focused on.

3. Fires Created event
   \"block:create:existing\" or \"block:create:new\"

4. Triggers onRender

Form Submission Lifecycle

1. calls removeErrors()
2. resets store
3. Validates Blocks
   Only if should_validate is set to true (anything else defaults to false)
4. Displays any errors
5. Saves Store