Skip to content

Commit b783c39

Browse files
committed
Reword and reposition
1 parent c34455d commit b783c39

File tree

2 files changed

+35
-37
lines changed

2 files changed

+35
-37
lines changed

src/LiveComponent/doc/index.rst

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2453,40 +2453,6 @@ The parent-child system is *smart*. And with a few tricks
24532453
(:ref:`such as the key prop for lists of embedded components <rendering-quirks-with-list-of-embedded-components>`),
24542454
you can make it behave exactly like you need.
24552455

2456-
.. _passing-blocks:
2457-
2458-
Passing Blocks to Components
2459-
----------------------------
2460-
2461-
Passing blocks to Live components works completely the same way you would `pass blocks for Twig Components`_. Except...
2462-
2463-
When re-rendering a Live component, only the template for thàt component is rendered. The blocks defined in the
2464-
"parent" template are grabbed via the smart Twig templating system, but the context from the parent template is *NOT*
2465-
available during re-rendering. So, keep in mind to not refer to any outer context variables within blocks of a live component.
2466-
2467-
This won't work:
2468-
2469-
.. code-block:: twig
2470-
2471-
{# templates/some_page.html.twig #}
2472-
{% set message = 'Outer context only works on first render' %}
2473-
2474-
{% component Alert %}
2475-
{% block content %}{{ message }}{% endblock %}
2476-
{% endcomponent %}
2477-
2478-
Local variables do remain available:
2479-
2480-
.. code-block:: twig
2481-
2482-
{# templates/some_page.html.twig #}
2483-
{% component Alert %}
2484-
{% block content %}
2485-
{% set message = 'this works during re-rendering!' %}
2486-
{{ message }}
2487-
{% endblock %}
2488-
{% endcomponent %}
2489-
24902456
.. _child-component-independent-rerender:
24912457

24922458
Each component re-renders independent of one another
@@ -2945,6 +2911,36 @@ To fix this, you have two options:
29452911
}
29462912
}
29472913

2914+
.. _passing-blocks:
2915+
2916+
Passing Content (Blocks) to Components
2917+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2918+
2919+
Passing content via blocks to Live components works completely the same way you would `pass content to Twig Components`_.
2920+
Except with one important difference: when a component is re-rendered, any variables defined only in the
2921+
"outside" template will note be available. For example, this won't work:
2922+
2923+
.. code-block:: twig
2924+
2925+
{# templates/some_page.html.twig #}
2926+
{% set message = 'Variables from the outer part of the template are only available during the initial render' %}
2927+
2928+
{% component Alert %}
2929+
{% block content %}{{ message }}{% endblock %}
2930+
{% endcomponent %}
2931+
2932+
Local variables do remain available:
2933+
2934+
.. code-block:: twig
2935+
2936+
{# templates/some_page.html.twig #}
2937+
{% component Alert %}
2938+
{% block content %}
2939+
{% set message = 'this works during re-rendering!' %}
2940+
{{ message }}
2941+
{% endblock %}
2942+
{% endcomponent %}
2943+
29482944
Advanced Functionality
29492945
----------------------
29502946

@@ -3161,4 +3157,4 @@ bound to Symfony's BC policy for the moment.
31613157
.. _`the traditional collection type`: https://symfony.com/doc/current/form/form_themes.html#fragment-naming-for-collections
31623158
.. _`How to Work with Form Themes`: https://symfony.com/doc/current/form/form_themes.html
31633159
.. _`Symfony's built-in form theming techniques`: https://symfony.com/doc/current/form/form_themes.html
3164-
.. _`pass blocks for Twig Components`: https://symfony.com/bundles/ux-twig-component/current/index.html#passing-blocks
3160+
.. _`pass content to Twig Components`: https://symfony.com/bundles/ux-twig-component/current/index.html#passing-blocks

src/TwigComponent/doc/index.rst

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1006,8 +1006,10 @@ This requires Twig 3.7.0 or higher:
10061006

10071007
<twig:Alert{{ ...myAttributes }} />
10081008

1009-
Passing Blocks to your Component
1010-
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1009+
.. _passing-blocks:
1010+
1011+
Passing Content (Blocks) to Components
1012+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10111013

10121014
You can also pass content directly to your component:
10131015

0 commit comments

Comments
 (0)