Automattic / Automattic/jetpack

Generate an image with AI: the modal doesn't look very good

Open
#39,810 0 comments 0 reactions 0 assignees View on GitHub
[Extension] AI Assistant [Plugin] Jetpack [Pri] Normal Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

When I click on "Generate with AI" in the image block, the modal is not very nice to look at or work with:

![Image](https://github.com/user-attachments/assets/eeac7a2c-0799-4378-b98d-4f62520a3a9f)

The issues I'm seeing are:
- it looks almost like an unstyled plain HTML markup.
- its height is very large, you can't see the entire modal unless your browser window is at least 820px. It gets worse after a first image is generated, because then the modal gets even taller.
- when generating the first image, the "Generate" button should be the primary button, because that's the primary CTA. Right now the button is always secondary.
- the header should use the default style (font size, no horizontal line) used by other Core/Gutenberg modals. Like this one:
![Image](https://github.com/user-attachments/assets/804a86cd-c0cb-4b62-88f7-8ff39dd893c8)
- the textarea should be styled differently: different border radius and focus ring color. Gutenberg `TextAreaControl` typically looks like this:
![Image](https://github.com/user-attachments/assets/823f4933-0f62-4e9e-b2bf-0dcee3f4cb99)
- when generating an image, the placeholder has a 7:4 aspect ratio, while already generated images are 4:3. That causes erratic jumping when browsing through the carousel:
https://github.com/user-attachments/assets/9b099437-26e2-4a13-bb89-27747b6ffdbf
- the "Provide feedback" doesn't need its own toolbar, it could be inlined into the existing toolbar with the carousel controls and the "Insert" button. The extra toolbar makes the already tall modal even taller.

Contributor guide

Open the contributing guide

Research direction

Start from the image block’s “Generate with AI” entry point and compare its modal with other Core/Gutenberg modals and TextAreaControl styling. Check both the initial and post-generation states, then verify the modal fits shorter browser windows, keeps a stable image aspect ratio, and places the feedback controls in the existing toolbar.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, wordpress
Domain
design, 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.