Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

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

wants to merge 1 commit into from
+245 −33

Conversation

dhruvikpatel18
Copy link
Contributor

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 GitHub Actions
Copy link

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
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 ndiego is a code owner

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