WordPress/gutenberg

Cover block: empty block shows as black box on frontend

Open

#10854 opened on Oct 21, 2018

View on GitHub
 (7 comments) (1 reaction) (0 assignees)JavaScript (9,607 stars) (3,893 forks)batch import
Good First Issue[Block] Cover[Feature] Blocks[Priority] Low[Status] In Progress[Type] Enhancement

Description

Describe the bug If you insert a cover block and don't upload any image or video, it will appear as a black box in the frontend.

Expected behavior If the block in the backend is empty, I would expect the placeholder not to render any content.

Tested with Gutenberg 4.1 RC 1 + Twenty Seventeen as well as Twenty Nineteen.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
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.
under 1 hour
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
ReactGutenberg block development
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The issue is that the Cover block renders a black box when no image or video is set. The fix should be in the Cover block's edit component, likely in `packages/block library/src/cover/edit.js`. Look for the condition that determines whether to render the placeholder or the media. The expected behavior is to render nothing (or a placeholder) when empty. Check the current implementation and add a conditional check to only render the media element if a media ID or URL is present.