Automattic / Automattic/jetpack

Sharing Buttons: 'More' section causes issues when AMP is enabled

Open
#21,149 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Sharing [Plugin] Jetpack [Pri] Low AMP Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Start on a site running a default theme (like Twenty Twenty One).
2. Activate both Jetpack and the [AMP](https://en-ca.wordpress.org/plugins/amp/) plugin.
3. Under WP Admin > AMP > Settings, switch the Template Mode to Standard.
4. Under WP Admin > Jetpack > Settings > Sharing, enable Share buttons. Click 'Configure your sharing buttons' and move at least one button to the 'More' section.
5. View a single post on the front-end.
6. Using the AMP menu item in the Admin Toolbar, switch between the AMP and non-AMP versions of the post, and compare how the share buttons look.

### A clear and concise description of what you expected to happen.

I expect the 'More' section to be stripped out (since there isn't an AMP version of it), but for the share buttons and post footer to otherwise look the same.

### What actually happened

There are minor visual differences between the AMP and non-AMP versions of the post footer - in the case of Twenty Twenty one, the border is missing and the formatting of the post meta is incorrect. The Print button is also greyed out.

Best I can tell there's an extra closing ``, or some other element left behind that's "closing" different HTML elements too soon, so the styles aren't applied.

### Other information

This may be a dupe of #12639; I'm not totally sure it's the same underlying issue, but it sounds like a similar result.

Examples of this issue with Twenty Twenty One:

AMP:

![image](https://user-images.githubusercontent.com/177561/134261518-c00bcccf-2acd-426b-a606-31fada049ca4.png)

Non-AMP:

![image](https://user-images.githubusercontent.com/177561/134261558-f9ed72cc-4b6c-4be2-a6c2-a228537a0ba4.png)

### Operating System

macOS

### OS Version

11.6

### Browser

Chrome/Chromium, Firefox, Safari

### Browser Version(s)

Chrome 93.0.4577.82; Firefox 92.0; Safari 14.1.2

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with Jetpack and AMP using the WP Admin Sharing settings and a default theme such as Twenty Twenty One. Compare the AMP and non-AMP post-footer markup and styling after moving a share button into More; done means More is omitted without changing the remaining share buttons or footer formatting, including the border, post meta, and Print button.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.