Subscriber Count Appears Below Subscribe Button In Jetpack Subscriptions Widget

[matthewdevaney]

Impacted plugin

Jetpack

Quick summary

After updating to the latest version of Jetpack the subscriber count appears below the subscribe button in the JetPack subscriptions widget. It should be directly below the "Optional text to display to your readers:"

You can view the issue at MatthewDevaney.com (https://www.matthewdevaney.com/)

Steps to reproduce

1. Open WordPress appearance customization menu
2. Add the Jetpack Subscriptions widget to the sidebar
3. Input optional text to display to readers
4. Check include subscriber count
5. Publish WordPress appearance customization

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

Subscriber count should be directly below the "Optional text to display to your readers:"

What actually happened

Subscriber count appears below opt in button

Impact

All

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

No response

Logs or notes

• Chrome (Browser)
• Cream Blog Pro (Theme)

[jeherve]

Subscriber count should be directly below the "Optional text to display to your readers:"

We've typically displayed that information after the submit button, not before. There is no option to move this above the submit button at the moment. Would you like to see such an option added to the block settings?

[matthewdevaney]

@jeherve thank you for your prompt response 😀

Are you certain the subscriber count was not displayed above the email text input? Here's a screenshot of my site using the Internet Archive Wayback machine showing the subscriber account above the email text input.

Link: https://web.archive.org/web/20230605120621/https://www.matthewdevaney.com/

Also, here's the HTML code showing the order of the subscriber form elements. Something definitely changed here.

[jeherve]

You're right, it seems I had missed #25262 last summer, sorry about that!

@yansern What did you have in mind with:

This is to allow using flex to the positioning of the subscription count before or after the input fields (for the future, https://github.com/Automattic/jetpack/pull/24942#issuecomment-1185235336).

I'm not quite sure how I would go about moving .wp-block-jetpack-subscriptions__subscount inside the form, before #subscribe-email. Right now I can only think of something like this, but that will move the counts above the whole form:

.wp-block-jetpack-subscriptions__container {
  display: flex;
  flex-direction: column;
}

.wp-block-jetpack-subscriptions__subscount {
  order: -1;
  margin-bottom: 1rem;
}

[matthewdevaney]

Agreed, I’m not quite sure how I’d move it back to where it should be either. Guess I’ll just accept that it can’t go back to where it was previously, above the text input. Thank you for your time.

[jeherve]

Guess I’ll just accept that it can’t go back to where it was previously, above the text input. Thank you for your time.

I'll reopen this, because this change was made with the aim for this to be flexible enough so you could place it anywhere in the form. It should be an option.

[matthewdevaney]

In addition, the subscriber count has no spacing between itself and the "success" message.

Thank you for keeping the issue open. In my opinion the subscriber count should go above the text input like it had been in the past. Its purpose is to convince people to join. So users need to read it before the text input.

[yansern]

You're right, it seems I had missed #25262 last summer, sorry about that!

@yansern What did you have in mind with:

This is to allow using flex to the positioning of the subscription count before or after the input fields (for the future, #24942 (comment)).

I'm not quite sure how I would go about moving .wp-block-jetpack-subscriptions__subscount inside the form, before #subscribe-email. Right now I can only think of something like this, but that will move the counts above the whole form:

.wp-block-jetpack-subscriptions__container {
  display: flex;
  flex-direction: column;
}

.wp-block-jetpack-subscriptions__subscount {
  order: -1;
  margin-bottom: 1rem;
}

I'm not sure how the HTML structure has changed since I last looked at it, but yes, I recall what I had in mind was to use flex positioning to change the position of the subscriber count, where there would be a dropdown in the block settings that allow you to pick say Top, Bottom, Left, Right, and it would apply an additional classname to the container of the Subscribe block and all the necessary CSS flex changes would be via the stylesheet. It's just based on my interpretation of a much earlier code on why they wanted to use position absolute for the count (but absolute positioning was problematic, so I changed it to flex).

But I think the use case now is more like, place the count before the input or after the input, right?

[jeherve]

place the count before the input or after the input

Correct. It used to be before the input fields until your PR, but is now placed after the input fields and submit button.

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.