Skip to content

Cover Block: Enable fixed background support for videos#74512

Closed
saurabh-G07 wants to merge 1 commit intoWordPress:trunkfrom
saurabh-G07:add/cover-block-fixed-video
Closed

Cover Block: Enable fixed background support for videos#74512
saurabh-G07 wants to merge 1 commit intoWordPress:trunkfrom
saurabh-G07:add/cover-block-fixed-video

Conversation

@saurabh-G07
Copy link

PR Description: Cover Block - Enable Fixed Background for Videos
Related Issue: #52585

Description

This Pull Request extends the "Fixed background" (parallax) functionality to the Cover block when a Video is selected as the background media. Previously, this feature was only available for Images.

Implementation Details

Unlike images, which utilize background-attachment: fixed on a container div, video elements (<video>) do not support this CSS property.

To achieve feature parity, this PR implements a solution using:

  1. position: fixed on the <video> element to anchor it to the viewport.
  2. clip-path: inset(0) on the parent .wp-block-cover container. This ensures the fixed video is correctly "clipped" to the block's area as the user scrolls, replicating the background-attachment behavior.

Changes

  • inspector-controls.js: Updated the "Fixed background" toggle logic to be visible when isVideoBackground is true.
  • save.js: Passed the has-parallax class to the <video> element when the attribute is set.
  • style.scss: Added the necessary CSS rules for video.has-parallax (using position: fixed) and the container (using clip-path).

Testing Instructions

  1. Insert a Cover Block.
  2. Choose a Video from the media library.
  3. Open the Block Settings sidebar.
  4. Toggle "Fixed background" to ON.
  5. Scroll the page and verify the video remains fixed relative to the viewport (parallax effect).
  6. Verify that the "Repeated background" toggle remains hidden for videos (as it is not supported).

Checklist:

  • My code is tested.
  • My code follows the WordPress coding standards.
  • I have added a unit test to verify the toggle state.
  • I have verified the behavior on different viewports.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

@github-actions
Copy link

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @saurabh-G07.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: saurabh-G07.


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

@github-actions github-actions bot added [Package] Block library /packages/block-library First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository labels Jan 10, 2026
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @saurabh-G07! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

Regarding this enhancement, #74289 has already been submitted, so let me close this PR.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Jan 11, 2026
@t-hamano t-hamano closed this Jan 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Cover Affects the Cover Block - used to display content laid over a background image First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants