Skip to content

Commit 9f10eff

Browse files
authored
Apply suggestions from code review
1 parent 0361af5 commit 9f10eff

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

guides/release/components/block-content.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -333,16 +333,16 @@ If you want to yield content to different spots in the same component, you can u
333333
You could also want to pass some values. This is the same process as the default `yield`, but you just have to pass `to` as the last argument. An example would be the popover:
334334

335335
```handlebars {data-filename=app/components/popover.hbs}
336-
<div class="popover">
337-
<div class="popover__trigger">
338-
{{yield this.isOpen to="trigger"}}
339-
</div>
340-
{{#if this.isOpen}}
341-
<div class="popover__content">
342-
{{yield to="content"}}
343-
</div>
344-
{{/if}}
336+
<div class="popover">
337+
<div class="popover__trigger">
338+
{{yield this.isOpen to="trigger"}}
345339
</div>
340+
{{#if this.isOpen}}
341+
<div class="popover__content">
342+
{{yield to="content"}}
343+
</div>
344+
{{/if}}
345+
</div>
346346
```
347347

348348
Without named blocks, we would certainly have to pass components as `args` to the popover. But this is much more practical!
@@ -355,14 +355,14 @@ Here’s how we would call our named blocks as a consumer:
355355
<button type="button">Click to {{if open "close" "open"}} the popover!</button>
356356
</:trigger>
357357
<:content>
358-
This is what is shown when I'm opened!
358+
This is what is shown when I'm opened!
359359
</:content>
360360
</Popover>
361361
```
362362

363363
We know the state of the popover because we passed it as an argument to the `yield`. To access its value, use the block parameters at the named block scope. It will not be accessible at the `Popover` level, so if you want the value to be available for all the blocks, you will have to pass it for each of them.
364364

365-
That would give this result:
365+
Rendering the previous code example would give this as result:
366366

367367
```html
368368
<!-- rendered -->
@@ -371,7 +371,7 @@ That would give this result:
371371
<button type="button">Click to close the popover!</button>
372372
</div>
373373
<div class="popover__content">
374-
This is what is showed when I'm opened!
374+
This is what is showed when I'm opened!
375375
</div>
376376
</div>
377377
```

0 commit comments

Comments
 (0)