Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss

[mediaformat]

What?

Addresses part of #65954

Why?

The utility .screen-reader-text CSS is used in several places throughout the Gutenberg code base. In #65409 it came up that we should update all the areas to match the changing CSS rules proposed in #65409.

How?

Remove the unnecessary clip: rect(1px, 1px, 1px, 1px); and -webkit-clip-path: inset(50%); rules from the packages/block-library/src/components/downloadable-block-list-item/style.scss

Style attribute

Before	After

[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: mediaformat <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: colorful-tones <[email protected]>

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, @mediaformat! 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.

[afercia]

Thanks @mediaformat
I think this rulest can be entirely replaced with a display: none. Currently, this rule is only set when a block from the blocks directory in the main inserter is in the process of being installed.
It is meant to temporarily hide the block author name when isInstalling is true. After the block is installed, the author name is visible again. Anyways, the whole content of the button in the inserter is overridde by the aria-label set on the button so there's really no need to use the screen-reader-text rule on the author name.

• Open the main inserter.
• Search for some term e.g. image
• Scroll down the inserter and observe the Available to install section. Note: this is the blocks directory. It takes a while to load.
• Choose one of the blocks from the blocks directory and click to install it.
• Observe the content of the block item in the list changes and shows an Installing... text.
• Observe the original content of the block item is visible again when the block is installed.

Default	Installing

[afercia]

I'd suggest to replace the entire rule with a display: none.

[mediaformat]

@afercia I see what you mean. I'll replace the entire rule with display: none; as suggested.

[colorful-tones]

I'd suggest to replace the entire rule with a display: none.

Great catch and thanks @afercia !
Thanks for addressing with an update @mediaformat 👏

I tested with display: none and works as intended.

[afercia]

LGTM to me!