feat(docs): Add onMount and onMountAsync docs.

packages/docs/concepts/blocks.yaml

@@ -34,6 +34,9 @@ _ref:
               ##### Block validation
               - Field level input validation can be achieved by marking a `input` block as `required` or by specifying a list of `validate` tests.
               - Validation is invoked using the [`Validate`](/Validate) action.
+              ##### Block events
+              - All blocks have`onMount` and `onMountAsync` events.
+              - Each block implements it's own additional events such as `onClick` etc.
               ##### Block loading
               - By default all blocks render a loading skeleton when the block's source code is fetched or while the block is waiting on data from a request.
               - A block's default loading can be overwritten by defining custom `loading` settings on a block.
@@ -151,6 +154,14 @@ _ref:
                   title: Email
             ```
 
+            # Block events
+
+            By default all blocks implements `onMount` and `onMountAsync` events. Both the `onMount` and `onMountAsync` events are triggered when the block is mounted. For the `onMount` event, the block only mounts when the event action chain is completed, however, for the `onMountAsync` event, the block will mount as soon as possible while the event actions completes execution.
+
+            Apart from the `onMount` and `onMountAsync` events, most blocks also implements their own block specific events such as `onOpen` for [Modal](/Modal) or `onClick` for [Button](/Button). See the events tab on each block's documentation for more details.
+
+            See [the events and actions page](/events-and-actions) for more details.
+
             # Block loading
 
             Block loading renders a placeholder block while the block component is being fetched, or a block is waiting on a request to return before to rendering the block. This allows for a smoother user experience and reduces 'bounce' in the user interface as more blocks takes up their full width and height on the page while in a loading state.

packages/docs/concepts/events-and-actions.yaml

@@ -40,9 +40,10 @@ _ref:
 
             -----------
 
-
             Blocks can define _events_ which the block can trigger when something happens on the page, like a button being clicked, an input's value being modified or a page being loaded. Some examples are `onClick` on a [`Button`](/Button) or `onEnter` on a [`PageHeaderMenu`](/PageHeaderMenu) block.
 
+            All blocks implements `onMount` and `onMountAsync` events. These are useful for triggering actions when a block is mounted. For the `onMount` event, the block only mounts when the event action chain is completed, however, for the `onMountAsync` event, the block will mount as soon as possible while the event actions completes execution.
+
             _Actions_ are tasks that can be executed, like calling a request, linking to a new page or changing a value in state. An array of actions can be defined for a event on a block. If that event gets triggered, those actions will execute sequentially. If any actions error while executing, the actions that follow it won't be executed, however, `catch` actions chain can be defined on a event to trigger when an error in a chain of actions occurs.
 
             Actions which are `async: true` are an exception to the sequential rule of the actions chain. These actions will be executed asynchronously and the next actions in the chain will not wait for them to finish. If any `async: true` action throws an error, the chain will not be stopped and the event will still be completed successfully.