Block definitions and overriding in Flask - Step-by-Step Execution

Concept Flow - Block definitions and overriding

Base Template defines block

↓

Child Template extends base

↓

Child overrides block?

No→Use base block content

Yes↓

Use child block content

↓

Render final HTML

The base template defines a block. The child template can override this block. If overridden, the child's content is used; otherwise, the base content is rendered.

Execution Sample

Flask

{% block title %}Base Title{% endblock %}

{% block content %}Base Content{% endblock %}

<!-- Child template -->
{% extends 'base.html' %}
{% block title %}Child Title{% endblock %}

Shows a base template with two blocks and a child template overriding only the title block.

Execution Table

Step	Template	Block	Action	Content Used
1	base.html	title	Define block with 'Base Title'	Base Title
2	base.html	content	Define block with 'Base Content'	Base Content
3	child.html	extends	Extends base.html	N/A
4	child.html	title	Override block with 'Child Title'	Child Title
5	child.html	content	No override, use base block	Base Content
6	render	title	Render block	Child Title
7	render	content	Render block	Base Content

💡 Rendering completes after all blocks are resolved with child overrides or base defaults.

Variable Tracker

Block	Base Content	Child Override	Final Content
title	Base Title	Child Title	Child Title
content	Base Content	None	Base Content

Key Moments - 2 Insights

Why does the content block show 'Base Content' even though the child template extends the base?

Because the child template did not override the 'content' block, so the base template's 'content' block is used as shown in execution_table row 5.

What happens if the child template overrides a block with empty content?

The block renders empty because the child override replaces the base content, even if empty. This is like execution_table row 4 but with empty content.

Visual Quiz - 3 Questions

Look at the execution table, what content is used for the 'title' block at render step?

A Base Title

B Child Title

C Empty

D Error

💡 Hint

See execution_table row 6 where 'title' block renders 'Child Title'.

At which step does the child template override a block?

A Step 2

B Step 5

C Step 4

D Step 7

💡 Hint

Check execution_table row 4 for child block override action.

If the child template did not override any blocks, what would be the final content of the 'content' block?

A Base Content

B Empty

C Child Content

D Error

💡 Hint

Refer to variable_tracker row for 'content' block showing base content used when no override.

Concept Snapshot

Flask templates use blocks to define replaceable sections.
Base template defines blocks with {% block name %}...{% endblock %}.
Child templates extend base with {% extends 'base.html' %}.
Child can override blocks by redefining them.
If not overridden, base block content is used.
Final render combines child overrides and base defaults.

Full Transcript

In Flask template inheritance, the base template defines blocks as placeholders for content. The child template extends the base and can override these blocks to customize parts of the page. When rendering, Flask uses the child's block content if it exists; otherwise, it falls back to the base's block content. This allows flexible reuse of layouts with specific customizations. The execution table shows the steps: defining blocks in base, extending in child, overriding blocks, and rendering final content. The variable tracker highlights which blocks have overrides and what content is finally used. Key moments clarify why some blocks show base content and how empty overrides behave. The visual quiz tests understanding of which content is used at each step.

Practice

1. What is the main purpose of using {% block %} in Flask templates?

easy

A. To include external CSS files

B. To define sections that child templates can override

C. To write Python code inside templates

D. To create comments in the template

Solution

1. Step 1: Understand block usage in Flask templates

   The {% block %} tag defines a section in a base template that child templates can replace or extend.

2. Step 2: Identify the purpose of blocks

   Blocks allow flexible template inheritance by letting child templates override specific parts without rewriting the whole template.

3. Final Answer:

   To define sections that child templates can override -> Option B

4. Quick Check:

   Blocks = override sections [OK]

Hint: Blocks mark replaceable sections in templates [OK]

Common Mistakes:

• Confusing blocks with comments
• Thinking blocks run Python code
• Using blocks to include CSS

2. Which of the following is the correct syntax to override a block named content in a child template?

easy

A. {% block content %}New content{% endblock %}

B. {% extends content %}New content{% endextends %}

C. {% override content %}New content{% endoverride %}

D. {% include content %}New content{% endinclude %}

Solution

1. Step 1: Recall block override syntax

   To override a block, use {% block block_name %}...{% endblock %} in the child template.

2. Step 2: Check each option

   Only {% block content %}New content{% endblock %} uses the correct {% block %} and {% endblock %} tags with the block name.

3. Final Answer:

   {% block content %}New content{% endblock %} -> Option A

4. Quick Check:

   Override block = {% block %}...{% endblock %} [OK]

Hint: Override blocks with {% block name %}...{% endblock %} [OK]

Common Mistakes:

• Using {% extends %} instead of {% block %} to override
• Using non-existent tags like {% override %}
• Confusing {% include %} with block override

3. Given the base template base.html with:

{% raw %}{% block title %}Base Title{% endblock %}{% endraw %}

and child template child.html with:

{% raw %}{% extends 'base.html' %}{% block title %}Child Title{% endblock %}{% endraw %}

What will be displayed in the title block when rendering child.html?

medium

A. Base Title

B. Base TitleChild Title

C. Child Title

D. An error occurs

Solution

1. Step 1: Understand template inheritance

   The child template extends the base and overrides the title block.

2. Step 2: Determine which block content is used

   Since the child overrides the block, the content shown is from the child: "Child Title".

3. Final Answer:

   Child Title -> Option C

4. Quick Check:

   Child block overrides base block [OK]

Hint: Child block content replaces base block content [OK]

Common Mistakes:

• Assuming base block content shows instead
• Thinking both contents concatenate automatically
• Expecting a syntax error

4. Identify the error in this child template code:

{% raw %}{% extends 'base.html' %}{% block content %}Hello{% endblock content %}{% endraw %}

medium

A. Incorrect block closing tag; should be {% endblock %} not {% endblock content %}

B. Missing {% block %} tag

C. Incorrect extends syntax

D. No error; code is correct

Solution

1. Step 1: Check block closing syntax

   The correct way to close a block is with {% endblock %} without repeating the block name.

2. Step 2: Identify the error in the code

   The code uses {% endblock content %}, which is invalid and causes a syntax error.

3. Final Answer:

   Incorrect block closing tag; should be {% endblock %} not {% endblock content %} -> Option A

4. Quick Check:

   Block ends with {% endblock %} only [OK]

Hint: Close blocks with {% endblock %} only, no name [OK]

Common Mistakes:

• Adding block name in endblock tag
• Omitting {% block %} tag
• Wrong quotes in extends

5. You have a base template with two blocks:

{% raw %}{% block header %}Base Header{% endblock %}{% block footer %}Base Footer{% endblock %}{% endraw %}

You want a child template to override only the footer block but keep the base header. Which is the correct child template code?

hard

A. {% raw %}{% extends 'base.html' %}{% block header %}Base Header{% endblock %}{% block footer %}Child Footer{% endblock %}{% endraw %}

B. {% raw %}{% extends 'base.html' %}{% block header %}Child Header{% endblock %}{% endraw %}

C. {% raw %}{% block footer %}Child Footer{% endblock %}{% endraw %}

D. {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %}

Solution

1. Step 1: Understand block overriding behavior

   Only blocks defined in the child template override the base. Blocks not overridden use base content.

2. Step 2: Check which blocks are overridden

   {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %} overrides only footer, so header remains from base.

3. Final Answer:

   {% extends 'base.html' %}{% block footer %}Child Footer{% endblock %} -> Option D

4. Quick Check:

   Override only needed blocks in child [OK]

Hint: Override only blocks you want to change [OK]

Common Mistakes:

• Overriding blocks unnecessarily
• Forgetting {% extends %} in child
• Defining blocks without extends