Automattic / Automattic/jetpack

WhatsApp Button Block alignment doesn't work

Open
#36,517 3 comments 0 reactions 0 assignees View on GitHub
[Block] Send a message [Platform] Atomic [Platform] Simple [Plugin] Jetpack [Pri] Low [Status] Stale Bug Customer Report [LEGACY] Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

On simple sites, the Align option doesn't seem to work and the block stays on the left side.

On Atomic sites with Gutenberg plugin active, only the Align left and Align right options are functional, while the Align center is not working.

If Gutenberg is inactive, the Align option seems to work properly.

### Steps to reproduce

1. On a Simple site, add WhatsApp Button Block to a page, a post or a template
2. Click Align under the block toolbar option to align-center or to align-right

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

The alignment works. The button can be align-center or align-right.

### What actually happened

The alignment doesn't work. I demonstrated it in the following video:

https://github.com/Automattic/jetpack/assets/33721365/650d30c7-9004-410a-9309-4b405e32e74b

### Impact

Some (< 50%)

### Available workarounds?

Yes, easy to implement

### Platform (Simple and/or Atomic)

Simple, Atomic

### Logs or notes

I can reproduce this in various themes, such as Twenty Twenty-Four, Cakely, and Startfitter.

The workaround is to put the WhatsApp Button Block inside a Columns block. For Atomic sites, deactivating Gutenberg works.

User report: 7926221-zen

Contributor guide

Open the contributing guide

Research direction

Start with the WhatsApp Button Block and reproduce its alignment behavior on Simple and Atomic sites with Gutenberg active and inactive. Check the Align toolbar options across the reported themes and compare the block's behavior inside and outside a Columns block. Done means center and right alignment work consistently without the workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, react, wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.