Skip to content

Add a test theme for the Nav Overlay#263

Draft
MaggieCabrera wants to merge 5 commits into
trunkfrom
test-overlay-defaults
Draft

Add a test theme for the Nav Overlay#263
MaggieCabrera wants to merge 5 commits into
trunkfrom
test-overlay-defaults

Conversation

@MaggieCabrera
Copy link
Copy Markdown
Collaborator

@MaggieCabrera MaggieCabrera commented Dec 17, 2025

Do NOT merge

This is a test theme to test the new overlay feature. Best tested with WordPress/gutenberg#74069 checked out. The theme is just a blank empty theme with the following changes:

  • Added the overlay.html template part. This doesn't work yet, this PR will be helpful to test that feature. This part uses the overlay 1 pattern
  • Added two patterns for the overlay. Both should show on the sidebar when creating a new overlay pattern
Screenshot 2025-12-17 at 16 02 50

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Dec 17, 2025

Preview changes

I've detected changes to the following themes in this PR: Overlay test.

You can preview these changes by following the links below:

I will update this comment with the latest preview links as you push more changes to this PR.

⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

@@ -0,0 +1 @@
<!-- wp:pattern {"slug":"overlay-test/overlay-1"} /-->
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not showing up yet as the default overlay, it's expecting a user created one

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even if it did, would we a way to get the parent navigation block it's assigned to? Maybe in the render we'd know to grab the parent navigation if this is the templating style?

Copy link
Copy Markdown
Collaborator Author

@MaggieCabrera MaggieCabrera Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave it's just a one liner but this is ok, we do this often. The template part invokes the pattern

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it's a good approach and keeps things DRY.

* Title: Navigation Overlay 1
* Slug: overlay-test/overlay-1
* Categories: navigation
* Block Types: core/template-part/overlay
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is what makes it show on the right sidebar

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave this will be the pattern we show on the theme's tempalte part

<!-- wp:heading -->
<h2 class="wp-block-heading">This is the default Overlay for this theme</h2>
<!-- /wp:heading -->
<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"}} /--></div>
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Nav block will show the same as what the header nav block shows

</div>
<!-- /wp:group -->

<!-- wp:navigation {"overlay":"navigation-overlay"} /-->
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave this is the key change, we are telling the nav block to use a particular overlay that we have defined before

Comment thread overlay-test/theme.json
"name": "footer"
},
{
"area": "navigation-overlay",
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getdave we also need to register the template part here, like we do header and footer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants