GITBOOK-22: Estelle's Oct 2 changes - Fix typos & broken code blocks

Author: stlgaits

docs/.gitbook/includes/less-than-div-class-field-greater-than-for....md

@@ -0,0 +1,28 @@
+---
+title: <div class="field">  {{ for...
+---
+
+{% tabs %}
+{% tab title="property access via hookable_metadata" %}
+<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
+  {{ form_row(hookable_metadata.context.form.some_field) }}
+<strong> &#x3C;/div>
+</strong></code></pre>
+{% endtab %}
+
+{% tab title="variable binding" %}
+<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
+  {% set context = hookable_metadata.context %}
+  {{ form_row(context.form.some_field) }}
+<strong> &#x3C;/div>
+</strong></code></pre>
+{% endtab %}
+
+{% tab title="utility function" %}
+<pre class="language-twig" data-title="index/some_field.html.twig" data-line-numbers><code class="lang-twig">&#x3C;div class="field">
+  {% set context = get_hookable_context() %}
+  {{ form_row(context.form.some_field) }}
+<strong> &#x3C;/div>
+</strong></code></pre>
+{% endtab %}
+{% endtabs %}

docs/twig-hooks/passing-data-to-your-hookables.md

@@ -1,69 +1,42 @@
 # Passing data to your hookables
 
-One of the most powerful aspects of hooks & hookables is an ability to pass their data down to the children. We can have two sources of the context data:
+One of the most powerful aspects of hooks & hookables is the ability to pass data down to children elements. We can have two sources of context data:
 
 * Hook-level defined data
 * Hookable-level defined data
 
-The context data from these two sources are merged and passed with the metadata to the hookable template or component, so we can use them.
+Context data from these two sources is merged and passed to the **hookable** template or component together with the metadata , so we can access them.
 
-<div data-full-width="false">
+<div data-full-width="false"><figure><img src="../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure></div>
 
-<figure><img src="../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+### Example
 
-</div>
+| <p>Let's assume we want to render a form in our <code>index.html.twig</code> template via a <code>form</code> variable containing a <code>FormView</code> instance.</p><p>Here, we define an <strong><code>index.form</code></strong> hook, and we can pass it the form's context data thanks to the <code>with</code> keyword.</p> |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 
-### Example
+This means that we can technically pass down multiple pieces of data to hookables that will hook into `index.form`.
 
 {% code title="index.html.twig" lineNumbers="true" fullWidth="false" %}
 ```twig
-{#
- # we assume there is a `form` variable holding a `FormView` instance passed
- # from the controller
- #}
-
 <div class="container">
     {{ form_start(form) }}
-        {{ form_errors(form) }}
-        {{ form_widget(form._token) }}
+    {{ form_errors(form }}
+    {{ form_widget(form._token) }}
+    
+    {% hook 'index.form' with { form } %}
     
-        {% raw %}
-{% hook 'index.form' with { form } %}
-{% endraw %}
-    {{ form_end(form, {render_rest: false}) }}
+    {{ form_end(form, {render_rest: false} }}
 </div>
 ```
 {% endcode %}
 
-So, as we see at `line 11` we define the `index.form` hook. But also, we pass the `form` with using the `with` keyword. Thanks to it, we are able to pass multiple data to hookables that will hook into the `index.form` hook.
-
 {% hint style="info" %}
 `with { form }` is a short-hand for `with { form: form }`, so the key for our `FormView` in the context data bag will be `form.`
 {% endhint %}
 
-Now let's create a Twig template rendering some field from our form, and let's make it a hookable.
+Now let's create a Twig template that renders a field from our form and let's make it a hookable. We have 3 possible options to do this :&#x20;
 
-{% code title="index/some_field.html.twig" lineNumbers="true" %}
-```twig
-<div class="field">
-     {{ form_row(hookable_metadata.context.form.some_field) }}
-     
-     {# we can also write it like #}
-     
-     {% raw %}
-{% set context = hookable_metadata.context %}
-     
-     {{ form_row(context.form.some_field) }}
-     
-     {# or #}
-     
-     {% set context = get_hookable_context() %}
-{% endraw %}
-     
-     {{ form_row(context.form.some_field) }}
-</div>
-```
-{% endcode %}
+{% include "../.gitbook/includes/less-than-div-class-field-greater-than-for....md" %}
 
 {% hint style="info" %}
 You can access the context data in multiple ways, so you can pick the one you like the most. Available options are:
@@ -72,6 +45,10 @@ You can access the context data in multiple ways, so you can pick the one you li
 * getting the context data bag via the Twig function like `get_hookable_context().<data_key>`
 {% endhint %}
 
+### Override behavior
+
+When the same context data key is defined at both the **hook** and **hookable** levels, the **hookable-level** value takes precedence.
+
 {% hint style="info" %}
-Sometimes you might want to override some data that are defined at the hook-level. It is possible by defining the same context data key on the hookable level. If the same context data key is defined at both hook-level and hookable-level the hookable-level one is used.
+You can use this to override hook-level data by redefining the key at the hookable level.
 {% endhint %}