Extend Build a Page with Editable Content. Editors should change the main heading through WordPress's normal Page title field, compose the body with Gutenberg, and see a fixed information panel beside that body on wider screens.

This exercise uses native Page fields. The title is read with useWpTitle() and the body with BlockArea; no additional field plugin is needed.

Your task

Work in the existing src/app/pages/AboutStay.tsx file and keep its named AboutStay export.

1. Import useWpTitle alongside BlockArea.
2. Read the current Page title inside the component and use it in the main h1.
3. Place the body and an aside in a responsive grid.
4. Add fixed information to the sidebar: Plan your stay, followed by a short invitation to contact the hotel about arrival times.
5. Keep one BlockArea for the editorial body.

Acceptance criteria

• Changing the WordPress Page title updates the visitor's h1 after saving.
• Changing a paragraph or image in the Page body updates the content region independently of the title.
• Reloading the editor preserves both the title and body edits.
• The fixed sidebar stays outside the body region while blocks are reordered.
• The body and sidebar stack on narrow screens and sit side by side on wider screens.
• Inserting a second Page with the same custom template gives it its own title and body.
• A theme update that changes only spacing leaves those saved values connected.

Keep the generated About Stay template selected. Include one main h1, then use h2 headings for body sections and the sidebar.

Hints

Hint 1: Read the title

The title hook is a native Page-data binding. In local preview it reads the current mock context; in the exported template it resolves the current WordPress Page title.

Use that value where the recipe currently contains the fixed words Our story.

Hint 2: Separate layout from content

Wrap the content area and sidebar in a normal grid div. Keep BlockArea inside the body column, and write the aside as its sibling. You are arranging the template rather than adding a second saved body slot.

Hint 3: Test two Pages

Assign the same custom template to a second test Page with a different title and paragraph. Verify both visitor URLs. This shows the difference between one reusable template and each Page's independent saved data.

Verify and compare

Update the test theme and run the acceptance checks. Inspect the generated fragment for the Page-title binding and the_content() at the body location. The PHP wrapper establishes the current Page context before including it.

When ready, open Solution: Page Title and Sidebar.

Extension

Add the earlier Latest Posts block to the editable body. Give the Page a title different from all Post titles and verify that the Page heading stays correct while the listing reads each queried Post's data.