Skip to content

Verse block: add background image overlay and filter option#71141

Open
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/verse-block-overlay-color-opacity
Open

Verse block: add background image overlay and filter option#71141
dhruvikpatel18 wants to merge 1 commit intoWordPress:trunkfrom
dhruvikpatel18:feat/verse-block-overlay-color-opacity

Conversation

@dhruvikpatel18
Copy link
Copy Markdown
Contributor

@dhruvikpatel18 dhruvikpatel18 commented Aug 8, 2025

Closes: #66019

What?

Enhances the Verse block to support a background overlay color with adjustable opacity. This includes new color controls in the block inspector using ToolsPanel for a cleaner UI, and updated styles to ensure overlay color is contained within the <pre> element.

Why?

The Verse block previously supported only plain backgrounds without any overlay control. This limited design flexibility, especially when combining background images with readable text. By adding overlay color and dim ratio controls, authors can improve text legibility while preserving background visuals.

Testing Instructions

  1. Open the block editor and insert a Verse block.
  2. Add a background image.
  3. In the block inspector:
  • Adjust the overlay color.
  • Change the overlay opacity (dim ratio).
  1. Verify:
  • The overlay is contained within the <pre> area.
  • Text remains readable with default white text unless overridden by a user-selected text color.
  1. Save and preview — settings should persist on the front end.

Screenshots or screencast

Verse.block.mov

@dhruvikpatel18 dhruvikpatel18 marked this pull request as ready for review August 8, 2025 12:23
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 8, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: severine-pozzo <severinepozzo@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@shail-mehta shail-mehta added [Type] Enhancement A suggestion for improvement. [Block] Verse Affects the Verse block labels Aug 8, 2025
@Mamaduka
Copy link
Copy Markdown
Member

Mamaduka commented Aug 11, 2025 •
edited
Loading

The proposed change creates a mismatch between the markup rendered by the editor and the front-end, which should be avoided as much as possible.

Update: @dhruvikpatel18, I think we can close this in favor of a more general solution for the Background Image feature. See: #66019 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@juanmaguitar juanmaguitar Awaiting requested review from juanmaguitar juanmaguitar is a code owner

@ndiego ndiego Awaiting requested review from ndiego

At least 1 approving review is required to merge this pull request.

Assignees

@dhruvikpatel18 dhruvikpatel18

Labels

[Block] Verse Affects the Verse block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Verse block - background image does not have overlay or filter option

3 participants

@dhruvikpatel18 @Mamaduka @shail-mehta