Image Block: Conditionally Render Block Control Based on Component Presence

[amitraj2203]

What?

Fixes: #62040

Why?

There is a redundant separator in the block toolbar of Image block after setting an override in a synced pattern with an Image block.

How?

Conditionally render the block control based on the presence of internal components.

Testing Instructions

1. Create a synced pattern.
2. Add an image block.
3. Under Advanced in Block Settings, enable an override for the Image block.
4. Save and publish the synced pattern.
5. Create a new page or post.
6. Add the synced pattern with the override for the image block.
7. Select the image block in the synced pattern.

Screenshots or screencast

[github-actions]

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: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: michalczaplinski <czapla@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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

[michalczaplinski]

Hi @amitraj2203! Thanks for the contribution, it fixes the issue perfectly fine!

Could we group the various conditionals together like:

const showUrlInput =
  isSingleSelected &&
  ! isEditingImage &&
  ! lockHrefControls &&
  ! lockUrlControls;

const showCoverControls = isSingleSelected && canInsertCover;

const showBlockControls =
  showUrlInput || allowCrop || showCoverControls;

and then use them to conditionally render the ImageURLInputUI and ToolbarButton.

This way, there's only one place to add additional conditions in the future so less risk that someone forgets to update both places

[michalczaplinski]

A better name might be showBlockControls because they belong to the block group. The other group is below in the component tree.

Also, for consistency, we use show instead of render verb in variable names here to indicate that something is being shown (rendered).

[amitraj2203]

Hi @michalczaplinski, Thank you for reviewing the PR. I have made the changes as per your suggestions and will keep this approach in mind for future work.

[michalczaplinski]

Great work! 👍 Thanks for the quick response.