feature: add consistant illustrator to audio block

[up1512001]

What?

Added consistent illustrator for Audio block similar to the image block.

Why?

Part of #66828

How?

• added Placeholder into MediaPlaceholder similar to image block.

Testing Instructions

1. open the editor and insert the Audio block & Image block
2. select on Audio block and dis-select it see illustrator similar to the Image block

Screenshots or screencast

Screen.Recording.2024-11-08.at.00.00.09.mov

[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: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>

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

[t-hamano]

It looks incorrect at narrower widths:

If we were to take a similar approach to the Image block for the Audio block, these buttons shouldn't be visible. However, the Audio block toolbar doesn't yet have a button for adding audio, so there would be no way to add media.

Similar to #64320, we should add an add button to the block toolbar before moving forward with this PR.

[up1512001]

@t-hamano address your feedback please check 🙇‍♂️

Screen.Recording.2024-11-08.at.23.28.40.mov

cc: @richtabor

[up1512001]

@t-hamano any feedback for this PR? 🙇‍♂️

[t-hamano]

What is this? It should not be related to this PR.

[t-hamano]

Suggested change

	const autioReplaceFlow = isSingleSelected && (
	const mediaReplaceFlow = isSingleSelected && (

Additionally, the code here should also be replaced with this component.

[t-hamano]

Suggested change

	.components-placeholder.has-illustration {
	.block-editor-media-placeholder.is-small {

Selectors with the .components- prefix should be avoided where possible.

[jasmussen]

There was a past desire to do the same for the Audio block, where I voiced skepticism, because the Audio block is so different from Video and Image, that it much less counts as "this is a visual spot" therefore needing a visual placeholder in its resting state. To that end, I don't think it's right to add this illustration to the Audio block, but I'm happy to defer to others who have a stronger opinion.

[t-hamano]

There was a past desire to do the same for the Audio block, where I voiced skepticism

I recall there being a discussion about this: #64691

I don't have a strong opinion on whether or not we should use the placeholder for the Audio block, but I'm interested to hear what others think. @WordPress/gutenberg-design

[paaljoachim]

Let's see if I got this right... exploring here...
It would be helpful to have a consistent experience. When selecting and deselecting a block.

Here are various media blocks added to the canvas. This is what I see when none of the blocks are selected.

It is a not a consistent experience.

I do not feel that changing the none selected experience for the Audio block to be similar to the Image block is the correct way to go. I do feel that there is a need of a common consistency in a none selected state for all the media blocks. Perhaps only showing the icon something like this.

It would be better to go back to the general issue which @t-hamano Aki mentioned: #64691

[t-hamano]

A total of three PRs have been submitted related to this PR:

• feature: add consistant illustrator to audio block #66838
• feature: add consistant illustrator to file block #66839
• feature: add consistant illustrator to media text block #66841

Perhaps we should discuss a bit more in #66768 whether the illustrations are appropriate for these blocks.