toeverything/blocksuite

Image block and code block toolbar renovation

Open

#7,037 opened on May 14, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (553 forks)github user discovery
good first issuetype:featui-style

Repository metrics

Stars
 (5,858 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

The design team has changed the toolbars' position, which are located outside the image block/code block, move to the top right corner of the blocks, and it will appear when hovered over. Please focus solely on the UI redesign for this issue. We don't need to address any functional discrepancies at this stage. Let's ensure the user interface aligns with the updated design specifications. If you encounter any functional issues while implementing the UI changes, you can note them, but there's no need to resolve them in this phase. Original design👇

Newest design👇 code block link image

Image block link image

Contributor guide

Research direction
Examine the Figma design links to understand the new toolbar position and styling. Then locate the toolbar components for image and code blocks in the codebase and adjust their positioning and hover behavior accordingly.
Tech stack
typescriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
CSSReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70