Reusable block: Handle empty content case

[fluiddot]

Description

Reusable blocks with empty content are not displayed properly.

Design proposed

@iamthomasbishop proposed a solution for this case in this comment, the idea is to use the Warning component when the block is selected but render an outlined empty box when is unselected.

Step-by-step reproduction instructions

1. Go to manage reusable blocks page in the web version, in WP.com navigate to: https://<YOUR_SITE>.wordpress.com/wp-admin/post-new.php?post_type=wp_block
2. Add a new reusable block
3. Set a title and publish it
4. Go to the mobile app
5. Open a post/page
6. Tap on ➕ button
7. Go to the reusable tab
8. Tap on the recently created reusable block
9. Observe that the block is displaying an empty paragraph

Expected behaviour

Empty reusable blocks should show a placeholder telling the user that there's no content.

Actual behaviour

Empty reusable blocks are displaying an empty paragraph that is editable.

Screenshots or screen recording (optional)

Empty reusable block	Insert empty reusable block
reusable-block-empty.mp4	reusable-block-insert-empty.mp4

WordPress information

• WordPress version: N/A
• Gutenberg version: N/A
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

• Device: iPhone 11
• Operating system: iOS 14.2
• WordPress app version: rnmobile/add/reusable-block-capability

[kathrynwp]

I'm still able to replicate this with a test site on WordPress.com.

Device: iPad Air 4th Gen
iOS 15.6
WP app v. 20.5