WordPress/gutenberg

Column block: Dropping block into an empty column using a drop zone.

Open

#30,699 opened on Apr 10, 2021

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (3,893 forks)batch import
Good First Issue[Block] Columns[Feature] Drag and Drop[Type] Enhancement

Repository metrics

Stars
 (9,607 stars)
PR merge metrics
 (Avg merge 12d 18h) (509 merged PRs in 30d)

Description

What problem does this address?

Column-drop-zone

https://user-images.githubusercontent.com/5323259/114276235-08ae2f80-9a26-11eb-985e-26866d31c030.mp4

Dropping happens "above" the main Column area (It looks like it).

What is your proposed solution?

Adding a drop zone to the Columns block when it is empty. Going from the above into something similar to this drop zone area for the Cover block.

Cover-block-drop-zone

For the empty Column: Column-drop-zone-mockup

Contributor guide

Research direction
Study the existing drop zone implementation in the Cover block (see linked code). Then modify the Columns block to show a drop zone when empty, similar to the Cover block.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
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.
Clear
Prerequisites
JavaScriptReactGutenberg block development
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65