feat: automatic catch up from 5.4 to 5.11 (#276)

.remarkignore

@@ -22,7 +22,6 @@ guides/**/*.md
 !guides/applications/initializers.md
 !guides/applications/run-loop.md
 !guides/code-editors/index.md
-!guides/components/block-content.md
 !guides/components/built-in-components.md
 !guides/components/component-arguments-and-html-attributes.md
 !guides/components/index.md

guides/components/block-content.md

@@ -306,4 +306,98 @@ Il est possible de retourner ainsi plusieurs valeurs, séparées par des espaces
 </BlogPost>
 ```
 
+## Named Blocks
+
+If you want to yield content to different spots in the same component, you can use named blocks. You just need to specify a name for the yielded block, like this:
+
+```handlebars
+{{yield to="somePlace"}}
+```
+
+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:
+
+```handlebars {data-filename=app/components/popover.hbs}
+<div class="popover">
+  <div class="popover__trigger">
+    {{yield this.isOpen to="trigger"}}
+  </div>
+  {{#if this.isOpen}}
+    <div class="popover__content">
+      {{yield to="content"}}
+    </div>
+  {{/if}}
+</div>
+```
+
+Without named blocks, we would certainly have to pass components as `args` to the popover. But this is much more practical!
+
+Here’s how we would call our named blocks as a consumer:
+
+```handlebars
+<Popover>
+  <:trigger as |open|>
+    <button type="button">Click to {{if open "close" "open"}}  the popover!</button>
+  </:trigger>
+  <:content>
+     This is what is shown when I'm opened!
+  </:content>
+</Popover>
+```
+
+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.
+
+Rendering the previous code example would give this as result:
+
+```html
+<!-- rendered -->
+<div class="popover">
+  <div class="popover__trigger">
+    <button type="button">Click to close the popover!</button>
+  </div>
+  <div class="popover__content">
+    This is what is showed when I'm opened!
+  </div>
+</div>
+```
+
+Don't worry, you can also still use `yield` by itself, and mix it with named blocks. Let’s take a card example:
+
+```handlebars {data-filename=app/components/card.hbs}
+<div class="card">
+  {{#if (has-block "title")}}
+    <div class="card__title">
+      {{yield to="title"}}
+    </div>
+  {{/if}}
+  <div class="card__content">
+    {{yield}}
+  </div>
+</div>
+```
+
+A yielded block without a name is called `default`. So to access it, it’s like any other named blocks.
+
+```handlebars
+<Card>
+  <:title>
+    <h3>It's nice to have me. Sometimes</h3>
+  </:title>
+  <:default>
+    The card content will appear here!
+  </:default>
+</Card>
+```
+
+The title being optional when you create a card, you can use the `(has-block)` helper with the named block by adding its name as a first parameter. That means you could also create this card:
+
+```handlebars
+<Card>
+  I don't want any title, and I only have a default content!
+</Card>
+```
+
+As you are not using named blocks, you can simply yield the content you would like to add, which becomes the default yield block.
+
+
+
 <!-- eof - needed for pages that end in a code block  -->

guides/components/introducing-components.md

@@ -4,7 +4,7 @@ In Ember, those smaller pieces are called _components_.
 
 Let's start with the sample HTML for a messaging app (that we introduced in the previous chapter, if you're reading the guides in order):
 
-```html {data-filename="app/templates/application.hbs"}
+```handlebars {data-filename="app/templates/application.hbs"}
 <div class="messages">
   <aside>
     <div class="avatar is-active" title="Tomster's avatar">T</div>