Full Site Editing basics in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a block template part in Full Site Editing.

Wordpress

register_block_template_part( '[1]', array( 'slug' => 'header' ) );

Drag options to blanks, or click blank then click option'

Aheader

Bfooter

Csidebar

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'footer' or 'sidebar' instead of 'header' will register the wrong template part.

Leaving the blank empty causes a syntax error.

The register_block_template_part function needs the template part name, here 'header', to register the header part.

2fill in blank

medium

Complete the code to add a block theme support for Full Site Editing.

Wordpress

add_theme_support( '[1]' );

Drag options to blanks, or click blank then click option'

Amenus

Bpost-thumbnails

Ccustom-logo

Dblock-templates

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'custom-logo' or 'menus' does not enable Full Site Editing.

Forgetting to add this support disables block templates.

To enable Full Site Editing, the theme must support 'block-templates'.

3fill in blank

hard

Fix the error in the code to correctly register a block template part with a slug.

Wordpress

register_block_template_part( 'footer', array( 'slug' => [1] ) );

Drag options to blanks, or click blank then click option'

A'footer'

B'sidebar'

C'header'

D'content'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different slug than the template part name causes registration errors.

Omitting quotes around the slug causes syntax errors.

The slug must match the first argument to correctly register the 'footer' template part.

4fill in blank

hard

Fill both blanks to create a block template part registration for the sidebar with a description.

Wordpress

register_block_template_part( '[1]', array( 'slug' => '[2]', 'description' => 'Site sidebar' ) );

Drag options to blanks, or click blank then click option'

Asidebar

Bheader

Cfooter

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for name and slug causes errors.

Using 'header' or 'footer' instead of 'sidebar' registers the wrong part.

Both the first argument and the slug should be 'sidebar' to register the sidebar template part correctly.

5fill in blank

hard

Fill all three blanks to create a block template part registration for the content area with a slug and description.

Wordpress

register_block_template_part( '[1]', array( 'slug' => '[2]', 'description' => '[3]' ) );

Drag options to blanks, or click blank then click option'

Acontent

Bmain-content

CMain site content area

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for slug and description causes confusion.

Leaving description blank makes the part less clear.

The template part name is 'content', the slug is 'main-content', and the description explains it is the main site content area.

Practice

1. What is the main purpose of Full Site Editing (FSE) in WordPress?

easy

A. To build and customize the entire website layout using blocks visually

B. To write PHP code for custom themes

C. To manage plugins from the WordPress dashboard

D. To create posts and pages only

Solution

1. Step 1: Understand Full Site Editing concept

   FSE allows users to build the whole site layout using blocks instead of coding.

2. Step 2: Compare options with FSE purpose

   Only To build and customize the entire website layout using blocks visually describes building and customizing the entire site visually with blocks.

3. Final Answer:

   To build and customize the entire website layout using blocks visually -> Option A

4. Quick Check:

   Full Site Editing = Visual site layout building [OK]

Hint: FSE means editing the whole site visually with blocks [OK]

Common Mistakes:

• Confusing FSE with plugin management
• Thinking FSE is only for posts or pages
• Assuming FSE requires coding PHP

2. Which of the following is the correct way to open the Site Editor in WordPress for Full Site Editing?

easy

A. Go to Posts > Add New

B. Go to Appearance > Site Editor in the WordPress dashboard

C. Go to Plugins > Add New

D. Go to Settings > General

Solution

1. Step 1: Identify where Site Editor is located

   The Site Editor for Full Site Editing is accessed via Appearance menu.

2. Step 2: Match correct menu path

   Only Appearance > Site Editor opens the FSE interface.

3. Final Answer:

   Go to Appearance > Site Editor in the WordPress dashboard -> Option B

4. Quick Check:

   Site Editor location = Appearance > Site Editor [OK]

Hint: Site Editor is under Appearance menu [OK]

Common Mistakes:

• Looking for Site Editor under Plugins or Posts
• Confusing Site Editor with plugin or post creation
• Trying to find Site Editor in Settings

3. In Full Site Editing, if you add a Header block and then add a Navigation block inside it, what will happen when you save the template?

medium

A. The header with navigation will appear on all pages using that template

B. Only the current page will show the header and navigation

C. The navigation block will be saved but not the header

D. The template will not save due to block nesting errors

Solution

1. Step 1: Understand template saving in FSE

   Templates saved in Site Editor apply site-wide to all pages using that template.

2. Step 2: Analyze block nesting effect

   Adding Navigation inside Header means both are saved together in the template.

3. Final Answer:

   The header with navigation will appear on all pages using that template -> Option A

4. Quick Check:

   Template save = site-wide layout change [OK]

Hint: Templates apply site-wide, not just one page [OK]

Common Mistakes:

• Thinking changes affect only one page
• Assuming nested blocks won't save together
• Believing block nesting causes save errors

4. You tried to add a Footer block in the Site Editor but it does not appear on your site after saving. What is the most likely reason?

medium

A. Footer blocks only work on posts, not pages

B. The Site Editor does not support Footer blocks

C. You need to install a plugin to enable Footer blocks

D. The Footer block was added but not included in the active template part

Solution

1. Step 1: Check how Footer blocks work in FSE

   Footer blocks must be part of the active template part to show on the site.

2. Step 2: Identify common mistake

   Adding Footer block outside the active template or not saving template part causes it not to appear.

3. Final Answer:

   The Footer block was added but not included in the active template part -> Option D

4. Quick Check:

   Footer block must be in active template part [OK]

Hint: Footer must be in active template part to show [OK]

Common Mistakes:

• Thinking Footer blocks need plugins
• Believing Site Editor lacks Footer support
• Assuming Footer blocks only work on posts

5. You want to create a custom page template with a unique header and footer using Full Site Editing. Which steps should you follow?

hard

A. Install a plugin that disables Full Site Editing and use classic templates

B. Edit the theme's PHP files directly to add header and footer code

C. Create a new template in Site Editor, add custom Header and Footer blocks, then assign it to the page

D. Create a new post and add header and footer blocks inside the post content

Solution

1. Step 1: Use Site Editor to create a new template

   In Full Site Editing, custom templates are created visually in the Site Editor.

2. Step 2: Add custom Header and Footer blocks to the new template

   Blocks let you build unique headers and footers for that template.

3. Step 3: Assign the new template to the desired page

   Assigning applies the custom layout to that page only.

4. Final Answer:

   Create a new template in Site Editor, add custom Header and Footer blocks, then assign it to the page -> Option C

5. Quick Check:

   Custom template = new template + blocks + assign [OK]

Hint: Create and assign templates visually in Site Editor [OK]

Common Mistakes:

• Editing PHP files instead of using Site Editor
• Trying to add header/footer inside post content
• Disabling FSE plugins unnecessarily