Skip to content
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.

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

[Background Image Control] - Added placeholder for background images #69244

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

Mayank-Tripathi32
Copy link
Contributor

@Mayank-Tripathi32 Mayank-Tripathi32 commented Feb 19, 2025

Attempt fix #69243

What?

This PR ensures that when a Group has no background image, the placeholder (grey crossed-out circle) is displayed alongside the "Add background image" text.

Why?

Currently, when a Group has no background image, only the text "Add background image" is shown, but the placeholder icon is missing. This inconsistency affects the visual clarity of the UI. The placeholder is present for color options, so it should also be added for background images for consistency.

How?

  • Added the missing placeholder (grey crossed-out circle) next to the "Add background image" text.
  • Matched the placeholder style to the one used for colors.
  • Ensured that when an image is added, it appears within the same circular container as expected.
<ColorIndicator
	 as="span"
	 className="block-editor-global-styles-background-panel__inspector-image-indicator"
	 colorValue={ undefined }
/>

Testing Instructions

  1. Open a post or page in the editor.
  2. Insert a Group block.
  3. Ensure that the "Add background image" text now includes the grey crossed-out circle as a placeholder.
  4. Add a background image and verify that it displays correctly in the same circular placeholder area.
  5. Remove the background image and confirm that the placeholder reappears.

Screencast

Screen.Recording.2025-02-19.at.5.46.06.PM.mov

@Mayank-Tripathi32 Mayank-Tripathi32 marked this pull request as ready for review February 19, 2025 12:20
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.

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: Mayank-Tripathi32 <[email protected]>
Co-authored-by: hanneslsm <[email protected]>

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

@Mayank-Tripathi32
Copy link
Contributor Author

The unit test failure appears unrelated; need to re-run the tests. Will push commit for it

</span>
) }
) : (
<ColorIndicator
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar Feb 20, 2025

Choose a reason for hiding this comment

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

If we're supposed to use the undefined ColorIndicator, we should either generalize the component and update the implementation across places or extract it specifically for usage within BackgroundImageControl (Probably the latter). Using ColorIndicator within BackgroundImageControl seems questionable.

Also, the PR title might need updating, as it doesn't seem to target the Group Block.

@Mayank-Tripathi32 Mayank-Tripathi32 changed the title [Group Block] - Added placeholder for background images [Background Image Control] - Added placeholder for background images Feb 20, 2025
@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Background Image: Add placeholder
3 participants