Developer experience: Display all blocks that require a Jetpack connection, but disable functionality

### Impacted plugin

Jetpack

### What

Display all blocks that require a Jetpack connection, but disable functionality.

### How

Currently, there are a number of blocks in Jetpack that only work if you are connected to Jetpack and not in offline mode. While I understand why these blocks are disabled, this approach significantly harms the developer/design experience when working with a site powered with Jetpack. Here are a few example of what these blocks look like:

| Payments | Subscribe |
|-|-|
|||

In the current implementation, it's impossible to view and style these Jetpack blocks in a local development environment. My personal workaround is to add the block to a draft page on the production site, edit the CSS in the browser, and then copy it back to the theme locally. This is obviously not ideal, nor is it a workflow we want to encourage.

For reference, these are two PR related to the current implementations:

- https://github.com/Automattic/jetpack/pull/39647
- https://github.com/Automattic/jetpack/pull/39390

While I know this would require a fair amount of development, I believe that the HTML markup of every block, or a solid approximation, should be visible to logged-in users when Jetpack is not connected and/or in offline mode (at least in the Editor). They would functionally just be disabled. We could also display a little notice explaining that the functionality has been disabled if needed.

Studio Sync is making it easier than ever for users to develop locally and push their changes up WordPress.com. Jetpack needs to work harmoniously with this new workflow.

Review PRs 39647 and 39390 first to understand the current handling of Jetpack blocks without a connection. Reproduce the Payments and Subscribe block behavior in the WordPress Editor while offline, then define done as showing their markup for logged-in users while disabling functionality.

Written by the indexing model from the issue text.