Cover Block: Move Clear Media button from Inspector Controls to Block Controls.

[rohitmathur-7]

What?

• Move the Clear Media button from Inspector Controls to Block Controls for better UX.

Fixes: #64629

Why?

• The Clear Media button should be present in Block Controls alongside Replace button so that all the buttons related to the media are present in one place only.

How?

• Move the Button from Inspector Controls to Block Controls.

Testing Instructions

• Go to the editor.
• Add Cover Block.
• Add Cover image.
• The Clear Media button is should now be present in Block Controls.

Screenshots or screencast

Before (Clear Media button in Inspector Controls):

After (Clear Media button in Block Controls):

[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.

Unlinked Accounts

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

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: rohitmathur-7.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @rohitmathur-7! 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.

[Mamaduka]

Thanks, @rohitmathur-7!

Let's match other blocks like Featured Image that add control to the media replace dropdown. I'm also wondering if we should use "Reset" as a label instead of "Clear Media".

cc @jasmussen

Screenshot

[jasmussen]

Good opportunity to clean things up. A quick audit: Site logo has Reset in the dropdown:

As does Featured Image:

Image does not have it:

Neither does Cover:

It seems fine to add "Reset" in the dropdown for both Image and Cover, but I'd not call it "Clear Media", or add it to the block toolbar. Thank you for the contribution!

[Mamaduka]

Thanks for the confirmation, @jasmussen!

[akasunil]

Created PR #64669 to add "Reset" option on image block.

[rohitmathur-7]

Hii @Mamaduka @jasmussen ,
Thanks for the feedback!

I have changed the name of Clear Media Button to Reset and added it in the dropdown.
Please review the PR and let me of if there are any other suggestions from your side.
Thanks.

[Mamaduka]

Thank you, @rohitmathur-7!

It looks like the clears media when clear media button is clicked unit test for the cover block is failing.

Here's how to fix it:

1. Let's move the test from "Inspector controls" to the "Block toolbar" block.
2. The test will need some adjustments since the action is under the dropdown now and has a different label.

Here's what the updated test should look like:

test( 'clears media when clear media button clicked', async () => {
	await setup( {
		url: 'http://localhost/my-image.jpg',
	} );

	await selectBlock( 'Block: Cover' );
	expect(
		within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
			'img'
		)
	).toBeInTheDocument();

	await userEvent.click(
		screen.getByRole( 'button', { name: 'Replace' } )
	);
	await userEvent.click(
		screen.getByRole( 'menuitem', {
			name: 'Reset',
		} )
	);

	expect(
		within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
			'img'
		)
	).not.toBeInTheDocument();
} );

[rohitmathur-7]

Hii @Mamaduka ,
I have updated the code and moved it from Inspector Controls to Block Toolbar.
Can you please have a look now?
Thanks.

[Mamaduka]

Thanks, @rohitmathur-7!

Everything looks good 👍

[github-actions]

Congratulations on your first merged pull request, @rohitmathur-7! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!