feat: allow parent to dictate position when it has the position class

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds support for parent containers to --force an overlay’s position.

Specifically, when overlay content is included via a template part, such as the mobile menu, the parent template part wrapper can define a position class like overlay-contents--position--right--force. This overrides the position set within the overlay itself, allowing patterns to control the slide direction without modifying the shared template part.

This allows us to have multiple patterns (e.g. header) but still make sure the overlay comes from the correct side of the screen based on how buttons are organised.

How to test the changes in this Pull Request:

Note: Small screen is probably the easiest way to test so resize your screen

1. Open your homepage and open the mobile menu. Notice it appears from the left as defined in parts/mobile-menu.html
2. Switch to this branch
3. In the editor, open your Header (mobile) and add a class of overlay-contents--position--right--force to the mobile-menu part, save
4. Reload your homepage
5. Notice now the menu opens from the right.
6. Test this with --ful-width--force too
7. Test if the search overlay still works (there was a small bug with the padding and was opened twice)

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

This works well on the front-end, @thomasguillot, but I get some weirdness in the editor:

When I add overlay-contents--position--right to the mobile menu template part -- this:

The menu toggle moves to the right just in the editor:

And when I add overlay-contents--position--full-width, it gets some extra spacing:

Both work as described on the front-end, though, and I don't see any issues with the search.

These are both with Mobile pattern 2, but I saw the same thing with 1 (haven't tested 3). Am I just screwing up where to add the class? I checked the Mobile Menu Contents template part and there's not a parent container wrapping everything.

[thomasguillot]

@laurelfulford I think it's because of the CSS (e.g. inset: 0 -100% 0 auto;). So instead of using the same class as the child, I introduced a --force option. This seems safer: .overlay-contents--position--{direction}--force.

So no CSS is applied in the editor. And the front-end still works. Let me know your thoughts.