Include examples of if/else around text nodes

Where if/else isn't the lesson being taught, in some cases show how it
can be wrapped around text nodes. This is to teach users about Svelte's
template compilation whilst not obfuscating the lessons.

site/content/docs/02-template-syntax.md

@@ -167,15 +167,19 @@ Content that is conditionally rendered can be wrapped in an if block.
 Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
 
 ```html
-{#if porridge.temperature > 100}
-	<p>too hot!</p>
-{:else if 80 > porridge.temperature}
-	<p>too cold!</p>
-{:else}
-	<p>just right!</p>
-{/if}
+<p>
+	{#if porridge.temperature > 100}
+		too hot!
+	{:else if 80 > porridge.temperature}
+		too cold!
+	{:else}
+		just right!
+	{/if}
+</p>
 ```
 
+(Blocks don't have to wrap elements, they can also wrap text within elements!)
+
 
 ### {#each ...}
 

site/content/tutorial/04-logic/02-else-blocks/text.md

@@ -17,3 +17,10 @@ Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are
 ```
 
 > A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
+
+Svelte is really good at surgically updating only the parts of the DOM that need changing, including text nodes. However, it does not optimise common code in if/else blocks like this, so the `<button>` element will be replaced whenever the condition is changed. To further improve this example, we can wrap just the text:
+```html
+<button on:click="{toggle}">
+	Log {#if user.loggedIn}out{:else}in{/if}
+</button>
+```

site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte

@@ -7,11 +7,13 @@
 	Yes! Send me regular email spam
 </label>
 
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt in to continue. If you're not paying, you're the product.</p>
-{/if}
+<p>
+	{#if yes}
+		Thank you. We will bombard your inbox and sell your personal details.
+	{:else}
+		You must opt in to continue. If you're not paying, you're the product.
+	{/if}
+</p>
 
 <button disabled={!yes}>
 	Subscribe

site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte

@@ -7,11 +7,13 @@
 	Yes! Send me regular email spam
 </label>
 
-{#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
-{:else}
-	<p>You must opt in to continue. If you're not paying, you're the product.</p>
-{/if}
+<p>
+	{#if yes}
+		Thank you. We will bombard your inbox and sell your personal details.
+	{:else}
+		You must opt in to continue. If you're not paying, you're the product.
+	{/if}
+</p>
 
 <button disabled={!yes}>
 	Subscribe

site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte

@@ -42,13 +42,13 @@
 	Raspberry ripple
 </label>
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>

site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte

@@ -40,13 +40,13 @@
 	</label>
 {/each}
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>

site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte

@@ -40,13 +40,13 @@
 	</label>
 {/each}
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>

site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte

@@ -41,13 +41,13 @@
 	{/each}
 </select>
 
-{#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
-{:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
-{:else}
-	<p>
+<p>
+	{#if flavours.length === 0}
+		Please select at least one flavour
+	{:else if flavours.length > scoops}
+		Can't order more flavours than scoops!
+	{:else}
 		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
 		of {join(flavours)}
-	</p>
-{/if}
+	{/if}
+</p>