Skip to content

Style States: Allow unsetting background image per viewport - #81448

Open
shail-mehta wants to merge 4 commits into
trunkfrom
fix/style-states-unset-background-image-viewport
Open

Style States: Allow unsetting background image per viewport#81448
shail-mehta wants to merge 4 commits into
trunkfrom
fix/style-states-unset-background-image-viewport

Conversation

@shail-mehta

@shail-mehta shail-mehta commented Aug 11, 2026

Copy link
Copy Markdown
Member

What?

Part of #80388

Allows unsetting a block background image for a specific viewport/pseudo style state (e.g. Mobile or Tablet).

Previously, clearing/resetting the background image in a viewport removed the override, so the default-state image still showed. Reset now stores backgroundImage: 'none' for that state only, and the default-state image is exposed as inherited so Remove/Reset is available.

Why?

Background image works but can't be unset for a particular viewport

Without an explicit unset value, the cascade keeps the default-state background image. Reset all could also miss viewport scoping and clear the default-state image across devices.

How?

  • Merge the block's default-state background into the panel's inherited value when a style state is selected, so Remove appears.
  • Persist backgroundImage: 'none' on Reset / Reset all / media Reset under a selected style state.
  • Scope inspector Reset all using the selected block style state from the store, and keep full-style resets from overwriting the default-state image.
  • Add unit coverage for scoped/none reset behavior.

Testing Instructions

  1. Insert a Group block and set a Background → Image on the default/desktop view.
  2. Go to View → Responsive styles → Mobile.
  3. Open the background image control and Reset / Remove, or use Background options → Reset Image / Reset all.
  4. Confirm Mobile shows no background image.
  5. Switch back to the default/desktop state and confirm the original image is still there.

Use of AI Tools

  • Yes

@shail-mehta shail-mehta self-assigned this Aug 11, 2026
@shail-mehta shail-mehta added [Type] Bug An existing feature does not function as intended [Feature] Style States Related to block style states (currently viewport and pseudo-states) labels Aug 11, 2026
@github-actions github-actions Bot added the [Package] Block editor /packages/block-editor label Aug 11, 2026
@github-actions

Copy link
Copy Markdown

Size Change: +340 B (0%)

Total Size: 7.71 MB

📦 View Changed
Filename Size Change
build/scripts/block-editor/index.min.js 458 kB +340 B (+0.07%)

compressed-size-action

@shail-mehta
shail-mehta marked this pull request as ready for review August 11, 2026 17:23
@github-actions

Copy link
Copy Markdown

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: shail-mehta <shailu25@git.wordpress.org>

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

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

Labels

[Feature] Style States Related to block style states (currently viewport and pseudo-states) [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant