Skip to content

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

Description

@ndiego

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
Image Image

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:

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    EnhancementChanges to an existing feature — removing, adding, or changing parts of it[Experiment] AI labels added[Feature] Offline Modeaka Development Mode or Debug Mode[Focus] BlocksIssues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack[Plugin] JetpackIssues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/[Pri] Normal

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions