Variation tooltip styling and edit post/page link styling

[RachelRVasquez]

All Submissions:

• Have you followed the Contributing guidelines?
• Does your code follow the WordPress' 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:

• Added a new SCSS component for header/footer variation edit-link tooltips.
• Moved header/footer variation edit-link markup inside the header/footer containers.
• Added a helper function to fetch the pencil SVG icon we're using for all "edit" links.
• Restyled and relabeled post/page edit links (“Edit Post” / “Edit Page”).

How to test the changes in this Pull Request:

Prep:

• Test while logged in as Admin.
• Run npm run build in your theme directory.
• Confirm that you're using a header and footer pattern in your customizer settings. Tooltips do not show for the default (legacy) version of the header/footer.
• Go to the front-end of your site.

Testing:

• Mobile: Confirm that the mobile header styling is still fine, and that the tooltips are not visible for either header or footer. This is a desktop only feature.
• Desktop: Hover within the header/footer areas. Does the tooltip show?
• Desktop: Navigate through the site with the tab key only. Are you able to get to/focus on the "Edit Header/Footer" tooltips?
• Color Schemes: Test different color schemes from customizer. Are the tooltips still readable?
• Variations: Test different header/footer patterns. Are the tooltips still positioned correctly?
• Edit Post/Page: Is the new style visible when logged in and viewing a page/post archive or a single page/post?

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully run tests with your changes locally?

Changelog entry

Added a new SCSS component for header/footer variation edit-link tooltips and includes it in the main SCSS build. Moved header/footer variation edit-link markup inside the header/footer containers. Added a helper function to fetch the pencil SVG icon we're using for all "edit" links. Restyled and relabeled post/page edit links (“Edit Post” / “Edit Page”).

[Copilot]

Pull request overview

This PR updates front-end “edit” affordances by adding a dedicated tooltip style for header/footer variation edit links and restyling post/page edit links to match a button-like UI with an icon.

Changes:

• Add a new SCSS component for header/footer variation edit-link tooltips and include it in the main SCSS build.
• Move header/footer variation edit-link markup inside the header/footer containers and add an inline pencil SVG icon.
• Restyle and relabel post/page edit links (“Edit Post” / “Edit Page”) and exclude them from the default entry-footer link styling.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
src/scss/structure/_content.scss	Excludes .post-edit-link from default entry-footer link styling; adds new button-like styling for edit links.
src/scss/main.scss	Registers the new tooltips component in the SCSS build.
src/scss/components/_tooltips.scss	Introduces tooltip styling/behavior for variation edit links in header/footer.
inc/variations.php	Adds pencil SVG icon and IDs for header/footer edit links to support tooltip styling.
header.php	Moves header edit link rendering inside the <header> element.
footer.php	Moves footer edit link rendering inside the <footer> element.
components/post/entry-footer.php	Updates post edit link label and adds inline SVG icon.
components/page/content-page.php	Updates page edit link label and adds inline SVG icon.
components/page/content-landing.php	Updates landing page edit link label and adds inline SVG icon.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.