Block Editor Image Component Improvement

[wezell]

Parent Issue

No response

User Story

When I select an image using the block editor, it does not look "selected". We should add a border or something around the image to show that the image is selected.

Also, there is no visible way to delete an image once you have added it - we should probably add a trash can icon to the properties bar that will remove the image if you click it.

Other ideas - do we want to allow an image to be resized? Take a look at our wysiwyg and how it allows an image to be resized inline. It just stores the resize as another property in the block that can be used or ignored.

Acceptance Criteria

• Add a blue? border around an image once you have selected it.
• Add a trash can icon to the properties bar that will delete the image.

Proposed Objective

User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[fmontes]

Important test with:

dotAssets and external images

[rjvelazco]

Passed Internal QA

Docker Image: [dotcms/dotcms:master_524e70e]

Screen.Recording.2023-08-04.at.11.56.02.AM.mov

[josemejias11]

Approved QA - Tested on master_a07a969_SNAPSHOT // Docker // macOS 13.0 // FF v113.0