Synced blocks: Define them as such in the Inspector

[jameskoster]

Related to #42482 and #32163.

When you select a template part or reusable block, it might be nice to clarify their global / synced nature – and perhaps outline usage – in the Inspector.

[jameskoster]

A rough idea:

Perhaps clicking the pill could open a modal that explains the concept in mode detail:

[carolinan]

I am hesitant about introducing yet another term, "Synced blocks". Can the features of these blocks be described without it?
I feel like "Used in 4 X" Where the X represents the actual item -posts, page, template etc, would be easier to understand?

We should consider that this is also true for the site title, tagline, logo/site icon.

[jameskoster]

I'm sure there's room to explore the copy! It might be tricky to use absolute terms though, since things like Reusable Blocks might appear in posts, pages, templates, template parts... the string might get a bit long 😅

We should consider that this is also true for the site title, tagline, logo/site icon.

Good point. Navigation too.

[mtias]

Inferring how much a block is used throughout a site is not a trivial task, so I'd suggest a description that avoid saying that.

[jameskoster]

Since synced blocks are posts in their own right, could basic usage be saved as meta data to make it more trivial?

If not, it would be nice to do something to differentiate between local/global blocks, as it's a pretty big pain point right now. It could be something like this, or #32163, or a combination :)

[mtias]

Not really, the problem is figuring out how to keep it updated. Every time you embed a reusable block you'd bump the usage? What happens when it gets removed? What if you duplicate a post, or unpublish a page, or remove a template that referenced one? It gets unwieldy quickly. The right way to do it would be to query for its presence with has_blocks, which would need to be done performantly and on some cron job. Not a trivial thing to design well.

I don't think it adds that much context, anyways. A simpler "This block is synced" seems it fulfills mostly the same purpose.

[jameskoster]

Every time you embed a reusable block you'd bump the usage?

I was thinking the 'count' would be updated when the parent document is updated / published. But yes I suppose that will be tricky considering imports etc.

A simpler "This block is synced" seems it fulfills mostly the same purpose.

I agree, this would be a worthwhile update on its own.

[getdave]

So I took a look at this in the context of the Nav block. I realised that a few places in the codebase define isSynced as being isReusableBlock or isTemplatePart. I'm wondering if a better proxy might be areInnerBlocksControlled from @wordpress/block-editor?

That way it could apply generically to any block which is sync'd with an entity.

[getdave]

I spun up a quick experimental PR to see how this might work if it applied to all blocks which control their inner blocks

[jameskoster]

Thanks for taking a look.

This is where the fundamentally different behaviour of the Navigation and Template Part blocks makes things a bit awkward.

With template parts (and reusable blocks), their appearance in the UI is informed by the referenced content. IE when I insert my "Centered Header" template part, that's how I see it presented in the toolbar, list view, etc:

The template part 'wrapper' is obfuscated away, so in this context it makes sense to mark the blocks as synced.

As you know Navigation doesn't work like this. It's always presented as "Navigation", regardless of which menu is referenced. This makes me question whether we should mark the Navigation as synced, because it's not really true. It's the referenced menu that is synced, not the parent block. I worry it might be confusing to have multiple Navigation instances in a document that are all marked as synced despite having (potentially) different appearances.

If Navigation behaved like Template Parts this wouldn't be an issue, but I appreciate that will be a big can of worms :)

[scruffian]

If Navigation behaved like Template Parts this wouldn't be an issue, but I appreciate that will be a big can of worms :)

What changes would you expect to see in the navigation block for it behave like a Template Part? Here are some I thought of:

1. Display the name of the selected navigation menu (if there is one) in the block toolbar
2. Do the same thing in the list view

What else am I missing?

[jameskoster]

I would consider the block name in the Inspector too, but that might be trickier for Navigation. Worth noting this doesn't currently happen for template parts which is a bug to fix (#42154).

If there's a plan to support navigation editing in focus mode, then might be worth keeping an eye on too.

Edit: I forgot one, template parts and reusable blocks appear in the Inserter by name:

[talldan]

I've made a PR that shows the menu name in some of those areas - #46457.

It also fixes #42154 (I can extract that out to a separate patch if needed).

I forgot one, template parts and reusable blocks appear in the Inserter by name:

That should be possible too, though some users may have a lot of menus. Happy to try it out in a another PR, though I don't think it'll be quite as easy as it was for template parts.

[getdave]

Thanks for the feedback folks. I'm glad the PR has sparked discussion.

Perhaps I should ask a different question? What can we do design wise to make it more obvious that the contents of a given Navigation block are synced to an entity?

The requirement for improvement is there and now we need to devise a solution.

I don't think we necessarily have to make it identical to how TPs or RBs appear. But some of the styling could be similar.

@scruffian has made some suggestions.

@SaxonF @jasmussen may also have a view?

[jasmussen]

I think #46438 helps, #46457 can as well though to a lesser extent. As Jay suggests, should we also apply the purple "synced" color? (Both for any clickthrough overlays applied, but also to the icon and select state in the inspector). Those would be some initial steps, and I imagine more pieces of the puzzle could fall into place as the inspector editing interface matures.

[getdave]

As Jay suggests, should we also apply the purple "synced" color? (Both for any clickthrough overlays applied, but also to the icon and select state in the inspector).

That's doable. I can look into that. Still open to any additional thoughts as well.

Thank you to everyone who contributed here. It's much appreciated.

[jordesign]

Wondering if the way we present Synced Patterns in 6.3 and onwards is sufficient to close this issue @jameskoster ?

[jameskoster]

I don't think so because template parts are not captured.

At some point we'll probably want to allow custom descriptions for synced patterns, so the pill still seems like the best approach to me. Perhaps with "Syncing: Fully synced" to echo the details panel: