Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal to rename "reusable blocks" to "synced blocks" #34352

Closed
Tracked by #27890
mtias opened this issue Aug 27, 2021 · 77 comments
Closed
Tracked by #27890

Proposal to rename "reusable blocks" to "synced blocks" #34352

mtias opened this issue Aug 27, 2021 · 77 comments
Labels
[Block] Block The "Reusable Block" Block [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Design Feedback Needs general design feedback. [Type] Copy Issues or PRs that need copy editing assistance

Comments

@mtias
Copy link
Member

mtias commented Aug 27, 2021

Reusable blocks have a long history now. The started as "saved blocks" and went through some renaming iterations until we settled on "reusable blocks". This worked alright at the beginning, but with the introduction of patterns its meaning has started to become more fuzzy and confusing (see related comment). In the end, patterns are also reusable pieces of design.

Given the nature of these blocks is to have content in sync wherever it's displayed — edit once; update everywhere — I propose we change the name in the UI to "Synced Blocks" and adjust the block description a little bit to clarify that.

@mtias mtias added Needs Design Feedback Needs general design feedback. [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) [Type] Copy Issues or PRs that need copy editing assistance [Block] Block The "Reusable Block" Block labels Aug 27, 2021
@MikeWhelan
Copy link

I agree, "synced blocks" is much more descriptive to the end user and makes a clear distinction between this block and all other reusable patterns, templates and re-usable blocks - of which there are many!

@kellychoffman
Copy link
Contributor

Cosign! Its much more self explanatory.

:shipit:

@annezazu
Copy link
Contributor

annezazu commented Sep 1, 2021

Agreed - this makes a lot more sense to me! Thanks for kicking this off.

@karmatosed
Copy link
Member

+1 to rename, I'm not absolutely convinced that 'synced' is right but it's better than reusable so 👍🏻

@Collieth
Copy link

Collieth commented Oct 5, 2021

@mtias I like "Synced Blocks" too. However, if the discussion continues, here are a few more suggestions for the "Reusable Blocks":

  • Cloned Blocks/Clonable Blocks
  • Replicator Blocks
  • Reproduced/Reproducable Blocks
  • Wormhole Block

If none of those options work, let me know.

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented Oct 18, 2021

The term "synced" is definitely a massive improvement over the current terminology. "Reusable" is a term that could apply to almost every block you can copy-paste, and the older "shared" (remember that?) would have sounded like "sharing to the repository".

"Synced" brings to mind cloud storage, which is pretty close to how the feature works. Additionally, it is something that could not be applied to standard blocks or patterns. You wouldn't say a Paragraph block is synced to any others, and in fact, the most obvious difference between reusable blocks and patterns is that the latter is explicitly not synced.

@bph
Copy link
Contributor

bph commented Oct 18, 2021

Thinking of other apps
"Stored Info Blocks"
"Canned snippets"
"Content snippets" (:-)

@ndiego
Copy link
Member

ndiego commented Oct 19, 2021

I personally think that the word "synced" is a bit confusing. It makes sense when you know how these blocks work, but I don't think it really improves things for a new user. It's also kind of a tricky word on its own and is not common vernacular.

What about a more general term that emphasizes that these blocks are used throughout the user's website. I am thinking something like "Global" blocks?

@placoderm
Copy link

I personally think that the word "synced" is a bit confusing.

I agree. For a non-specialist, this really doesn't have any meaning. I think global is an improvement. How about "site wide"?

What do the major page builders call them? Because they have had them for years before Gutenberg.

Aren't reusable blocks really a collection of reusable blocks? And is that collection really anything different from a widget area? I think if WordPress 5.x were to drop down from the sky brand new to us today, it would be hard to explain to someone how a widget area filled with blocks was any different from what we now call reusable blocks.

Reusable blocks are really a powerful thing, but it feels like they have been poorly managed by core.

@ZebulanStanphill
Copy link
Member

What do the major page builders call them? Because they have had them for years before Gutenberg.

@JosVelasco
Copy link

Global blocks sounds better to me, reminds me about global variables with global scope. Synced blocks imply sincronization even for the first time of being created. Also, the word synced is too long for a lot of languages.

@svandragt
Copy link

svandragt commented Oct 19, 2021

I maintain a reference page to explain the multiple block types. Hopefully this add context for those picking a name that is descriptive not just to authors but also compared to the other block-types. Naming is hard, so it’s great to see the effort here.

https://brain.vandragt.com/books/wordpress/page/blocks-in-simple-english

I would suggest as the aim is to surface content in multiple places, to use the word Content instead of Blocks as part of the name. Perhaps something like Global Content?

@pshemek
Copy link

pshemek commented Oct 19, 2021

My vote goes to "global". It's intuitive even in non-English world.

@placoderm
Copy link

I would suggest as the aim is to surface content in multiple places, to use the word Content instead of Blocks as part of the name. Perhaps something like Global Content?

That's an interesting idea. Again I come back to the question of what, on a practical level, is the difference between a group of reusable blocks an a widget area made of blocks? If they are all just groups of blocks with content, how are they essentially different?

@Nahuai
Copy link

Nahuai commented Oct 19, 2021

+1 to Global Blocks.

@luminuu
Copy link
Member

luminuu commented Oct 19, 2021

I think "Synced Blocks" is fine but something like "Global Blocks" would be fine too. Unless it would be too confusing with "Global Styles", which is already set?

Looking at other software, for example Notion, their terminology is "Synced Blocks" too for that type of content.

@aristath
Copy link
Member

I agree that the name "reusable block" should be changed... But like all others above, I don't believe that "synced block" would be the best choice.
Reusable blocks are pieces of content that the user has customized and saved on their site so they can be reused & synchronized everywhere on their site. And it's also important to consider that it can be more than a single block. I can have a collection of blocks nested inside a group saved as a reusable-block... So even the term "block" is inaccurate in this case.
It's a user-created, personalized, site-wide, synchronized piece of content.
With that in mind, I'd propose the term Personalized Content.

The term "global" is familiar because most other page-builders also use it... but that should not be a real concern IMO.
If all others are doing something sub-optimal, that's no reason for us to follow blindly with the excuse that it's familiar.

@kevquirk
Copy link

"Global Blocks" makes the most sense to me.

By using "synced blocks" it's inferred they're synced somewhere - is that off-site? Is it a backup mechanism?

By using something more descriptive, like "Global Blocks" I think it's more clearly defines what they are.

@bgardner
Copy link

Quick +1 for the term Global Blocks, for many of the reasons others have previously said.

@ndiego
Copy link
Member

ndiego commented Oct 19, 2021

Reusable blocks are pieces of content that the user has customized and saved on their site so they can be reused & synchronized everywhere on their site. And it's also important to consider that it can be more than a single block. I can have a collection of blocks nested inside a group saved as a reusable-block... So even the term "block" is inaccurate in this case.
It's a user-created, personalized, site-wide, synchronized piece of content.
With that in mind, I'd propose the term Personalized Content.

I agree that "block" might also be confusing since it can be a collection of blocks as well as a single block. However, every block is/can be "user-created, personalized". So I do not feel that the "Personalized" gets to the root of what this type of content is. So I could see either "Global Blocks" or "Global Content".

The term "global" is familiar because most other page-builders also use it... but that should not be a real concern IMO.
If all others are doing something sub-optimal, that's no reason for us to follow blindly with the excuse that it's familiar.

I actually think it being familiar is the greatest asset to "global". I am not saying it is the perfect, but it's recognizable and we are already using it in "Global Styles". Furthermore, those that are coming back to core WordPress from page-builders will instantly recognize the functionality and understand it.

@aristath
Copy link
Member

I actually think it being familiar is the greatest asset to "global". I am not saying it is the perfect, but it's recognizable and we are already using it in "Global Styles". Furthermore, those that are coming back to core WordPress from page-builders will instantly recognize the functionality and understand it.

I'm mostly trying to think of what a new user, someone who has never seen WordPress or a builder will think.
Does the term "global block" make sense without having the context and experience of another, 3rd-party builder?
Is there maybe some other term we can use that will make more sense than something that a random page-builder chose a decade ago and then all other builders adopted because marketing?

@pshemek
Copy link

pshemek commented Oct 19, 2021

Don't beat me but I'm starting to think that "reusable content" is the most accurate descriptor for this concept. The whole idea - from user's perspective - is about the content piece that can be used in multiple places. Not about the block-based construction (where patterns play their role).
EN is not my mother language so I cannot judge if there's anything tasting bad in the word "reusable" in this context.

@MikeWhelan
Copy link

MikeWhelan commented Oct 19, 2021

What is the process for deciding these issues?

Picking up on the points raised so far:
From my experience, the main issue I've observed with 'Reusable Blocks' is that new/novice users edit them without realising they're changing other parts of the site.... and it could take a long time until they realise, if ever.

So: 'global', 'sitewide' or 'synced' are all an improvement - but I still think synced is the most effective way of dealing with this problem as it helps people to understand how they work and the ramifications. Perhaps the "are you ready to save" interface could be changed to: "are you ready to sync"? Notion explain the concept well.

I accept that 'global' is commonly used, but the end user, part time content editor is unlikely to be familiar with 'global styles'.

Content v Blocks v Widgets
Widgets and blocks are somewhat interchangeable terms. The difference between "content" and "widget", could be explained as: "site authors create content - in the content area, whereas widgets could be embedded from other sites and mostly appear in sidebars, etc". 'Synced Widget' doesn't really make sense as most site builders know that editing any widget is a sitewide change.... but do end users know that?

My vote is for 'Synced Content'

@jcasabona
Copy link

I agree with the previous contributors who've stated "global" is a better term than synced. Synced, as noted, makes it seem like you're moving the blocks to and from some other server (ie Cloud syncing).

Global is a term that's been used by lots of page builders and other tools, and I think will properly invoke the idea that "this is a block that when I change it here, I change it everywhere."

@youknowriad
Copy link
Contributor

Interesting discussion here. I really like where this is going. Luis makes the distinction between "blocks" and "patterns". I'd even consider pushing the unification/simplification even further: Everything is a block, and depending on some metadata and context for that block, it can "behave" differently a bit.

For instance:

  • Why a "name" is only needed for patterns (or synchronized blocks)? I can see a point on naming specific parts of your content/templates even if it's not synchronized in order to ease with navigation...
  • Why not allow "semantic categorization" for any container to help transform UIs...

It doesn't mean we'll be surfacing all these possibilities (naming, semantics..) in all parts of the UI, but it means everything is just a "block" with potentially added "metadata".

So for sections that are being tried right now, I was proposing just that #40393 (comment) (and this could be a starting point to even more simplification/unification down the road)

@jameskoster
Copy link
Contributor

The UI for this can theoretically be very simple:

Screenshot 2022-04-26 at 11 49 02

Why not allow "semantic categorization" for any container to help transform UIs

Without wanting to go too far down a rabbit hole, perhaps there is only one container type, and it absorbs the options from all existing containers. Then transforms can be much more dynamic, based on the child blocks rather than a static list. This allows us to not only simplify concepts like reusable blocks and template parts, but also streamline the block library quite significantly.

@luisherranz
Copy link
Member

luisherranz commented May 3, 2022

I'm glad to see more ideas are forming here 🙂

I've been thinking more about this since @mtias proposed the idea of sections: patterns/blocks that can style and control their children using theme.json capabilities.

My previous proposal had three different parts:

  1. Use a single name (pattern) for all the groups of blocks a user can import.
  2. Keep the same name (pattern) for the group of blocks that are synchronized.
  3. Use verbose UI prompts when making changes to synchronized patterns and when switching between synchronized/unsynchronized.

@mtias's sections proposal made me realize that synchronization is one of the capabilities a group of blocks can have, but not the only one. Monopolizing the term pattern for just one block/pattern capability doesn't make sense to me anymore.


Part 1 (using a single name for the groups of blocks a user can import) still makes sense to me to simplify the number of concepts we expose the users to.

We can aggregate the different origins and abstract them from the user:

And still, let users decide what they want to see with filters prepopulated depending on the context.

Excalidraw

We could hide some of the filters when they make no sense in a context.


Part 3 (verbose UI prompts) still makes sense to me to make sure users understand the consequences of their actions until they understand the mental model and learn the UI icons/tips.


But part 2 (monopolizing the pattern name for synchronized blocks) was based on the assumption that synchronization was the only/main capability of a group of blocks, and therefore it doesn't make sense to me anymore when analyzed in conjunction with the section's proposal.

It has two specific problems:

  1. Names/Concepts

    Pattern is an abstract name. It doesn't convey any information related to synchronization. If we absorb it for synchronized groups of blocks and then keep introducing other capabilities using other abstract names in the future, we will end up with multiple concepts based on arbitrary names that users need to learn.

    If blocks need to support more than one capability, we need to find something more explicit and scalable to name those capabilities.

  2. Block Wrappers

    A related problem can appear in the block tree. If each block capability ends up being a block wrapper, users could end up having to deal with an unnecessary amount of block wrappers when all they want is to add some capabilities.

So the more I think about it, the more I gravitate towards what @youknowriad mentioned here:

everything is just a "block" with potentially added "metadata"

I think the best example of this today would be the implementation of the locking mechanism.

If blocks can absorb these capabilities, naming can be more explicit, and the need for multiple wrappers disappears.

For reference, a list of block capabilities could be:

  • Synchronization (as described here)
  • Semantic categorization (as described here)
  • Editing permissions
  • Locking (already implemented)
  • User-defined name
  • Child settings and styles (part of sections)
  • Absorbing child controls (part of sections)

Maybe it's worth noting here that these capabilities don't belong to the block intent, so the platform should control the UI: icons and colors, toolbar settings…


But the work on sections has just started, so it's a bit early to know how it will materialize and if it will go in that direction or not. I'd wait a bit here until we know more about that.

@jameskoster
Copy link
Contributor

Here’s a design concept based on the discussions here and in other issues.

I’ve stripped things back to the bare minimum so that we might consider an iterative implementation. The steps necessary to get here feel fairly manageable, and align with on-going work across other initiatives (template editing).

pattern.mp4

All global entities are referred to as 'Patterns' in the UI which drastically reduces the cognitive load on the end user. Template Parts, and Reusable Blocks all now appear in the Patterns tab of the Inserter.

Pattern properties (such as category or semantic area) allow us to contextually surface them where appropriate. For example a 'Header' pattern would not appear in the post editing context, and perhaps have less prominence in the template editor when another header is already on the canvas. Those same properties facilitate the filtering of views where many patterns are visible.

When a pattern is inserted, we determine whether it should be synced or not. Ideally this would be done automatically based on context – A header pattern should be synced (being explored in #42142), an 'About me' pattern should not – but we can use a modal to ask the user as a fallback.

On the canvas, a synced pattern is un-editable and behaves as a single, inert object. The toolbar communicates synced status / usage, and has three primary tools:

  • Edit – opens the pattern in focus mode (same as template parts currently).
  • Replace – opens the pattern explorer pre-filtered to the corresponding category (again, same as template parts).
  • Detach – convert the pattern to regular blocks. Side note: It's not clear to me whether it should be possible to 're-sync' a detached pattern?

In the future we can build a centralised pattern management interface within the Site Editor from which you can create, edit, delete, import / export, etc.

Screenshot 2022-07-19 at 13 03 48

Even this fairly simple / iterative concept covers quite a lot, and obviously there are a number of details / interactions we'd need to polish. Nevertheless it seemed like a good opportunity to put some pictures to the words.


One piece missing here is pattern overrides, that means locking the blocks / arrangement of the pattern, but allowing content to be overridden locally. This is fairly complex and has several tangential considerations (pushing local edits upstream, resetting local edits, defining which properties can be overridden, etc). Since we don’t have anything like this right now, it seems fair to defer it until later.

@richtabor
Copy link
Member

Love where this is going @jameskoster; a few notes:

All global entities are referred to as 'Patterns' in the UI which drastically reduces the cognitive load on the end user.

🔥

For example a 'Header' pattern would not appear in the post editing context, and perhaps have less prominence in the template editor when another header is already on the canvas.

My hesitation is the with the use case of employing the Blank template for one-off page designs (such as landing pages). By assigning the Blank template, you can pick any header you'd like (or none) if they're added as patterns – not just template parts.

When a pattern is inserted, we determine whether it should be synced or not. Ideally this would be done automatically based on context – A header pattern should be synced (being explored in #42142), an 'About me' pattern should not – but we can use a modal to ask the user as a fallback.

I this is great — I've been thinking along similar lines. We could start with auto-syncing what we'd consider template parts (maybe even just headers and footers) and see if we need to introduce a modal to ask (I don't know that we would though).

On the canvas, a synced pattern is un-editable and behaves as a single, inert object. The toolbar communicates synced status / usage, and has three primary tools: Edit, Replace, Detach

I'm not sure we would need a focused in view to edit the synced pattern. Maybe not even replacing (seems like an extra model to understand).

I like how Notion handles syncing, where you can edit as per usual, navigate to other instances of the synced element, unsync a singular instance, or unsync all from the original. Maybe a border (using the synced/reusable purple) would help distinguish the pattern as synced:

CleanShot 2022-07-20 at 10 13 58@2x

CleanShot 2022-07-20 at 10 17 41@2x

This could simplify the understanding between syncing/unsyncing, while keeping the experience in line with what we have today, with a good bit more clarity. I think we should clean up/organize the block toolbar options, to bring more clarity to tailored experience such as syncing, but I cover that here: #42203

Side note: It's not clear to me whether it should be possible to 're-sync' a detached pattern?

I don't think so — once unsynced/detached, anything could have changed.

@jameskoster
Copy link
Contributor

Thanks @richtabor!

My hesitation is the with the use case of employing the Blank template for one-off page designs (such as landing pages)

Hmm, if the template is blank how does the page content get displayed? The template would have to at least include a Post Content block, no? Wouldn't it be more sensible to have a 'Landing page' template that was comprised of Header / Post Content/ Footer? 🤔 It's a bit subjective, but for me it's important that the template / content boundaries are more clearly defined.

There are certainly many options to explore with regards to adding clarity to the editing experience for global elements. I like focus mode for two key reasons though:

  1. The defined space makes it very clear that you're editing a discrete object.
  2. It indirectly paves the way for overrides later. If we were to allow inline editing, I struggle a bit to see how we could later add content overrides to synced patterns. Did you have any ideas around that?

@paaljoachim
Copy link
Contributor

paaljoachim commented Jul 21, 2022

A very good idea @jameskoster !

Thinking out loud...
I very much agree on incorporating Reusable blocks into Patterns!
I am wondering if there should be a Synced icon (plugin update spinner?) in the toolbar of patterns to where we can turn on/off synced status of a pattern.

We create a pattern. Define if it should be synced or not. We will need a way to notice which patterns are synced and not in the Pattern inserter. Perhaps an icon beside the Patterns inserter drop down elements giving a signal to where there are synced patterns. Then a synced icon just above right of the pattern to signal that it is synced.

There are a lot of possibilities here!

@richtabor
Copy link
Member

Hmm, if the template is blank how does the page content get displayed? The template would have to at least include a Post Content block, no?

Yea, I meant the Blank templates like this (https://github.com/WordPress/twentytwentytwo/blob/trunk/templates/blank.html) which only relay the post content — which you could add a header pattern to, to make a custom landing page (or whatever kind of page) for example.

The defined space makes it very clear that you're editing a discrete object.

It does, but this also takes the editor out of the page context. I'm not sure if introducing another layer of diving in/out is worth the weight of trying to understand what's happening with the "focused" state.

I struggle a bit to see how we could later add content overrides to synced patterns. Did you have any ideas around that?

Definitely tricky. But I'm still not convinced it needs a separate space to bake this in.

One thought I've had is perhaps any RichText attributes could be editable. For example, if you've changed text at the source, and not on any synced patterns, then those changes permeate.

But if a paragraph of one of the synced patterns was changed, then that paragraph text attribute would be opted out of the sync. If you wanted to opt it back in entirely to the original pattern, there's a control to reset all changes.

And maybe there's a control to force push changes from the original synced pattern. 🤔

@richtabor
Copy link
Member

I also think that if a user indicates they want to make a pattern a synced pattern (and it shows up in the pattern library) then we could consider not asking them if it is to be synced when added to the page. If we had an icon, or color change for focus, then that would indicate the synced pattern is indeed synced and I can detach/unsync it if I'd prefer otherwise.

CleanShot 2022-07-21 at 15 35 09@2x

@paaljoachim
Copy link
Contributor

I am seeing more and more modals show up in the Gutenberg UI. I believe we should look at UI methods that better incorporate decisions directly into the toolbar and/or sidebar settings. Instead of adding too much focus on modals. This is though more of a general feedback to the direction of design in the last few months.

@jameskoster
Copy link
Contributor

Yea, I meant the Blank templates like this (https://github.com/WordPress/twentytwentytwo/blob/trunk/templates/blank.html) which only relay the post content — which you could add a header pattern to, to make a custom landing page (or whatever kind of page) for example.

Yeah I still think adding headers (template parts) to content is a bit awkward. It can easily get confusing if you later change the template. If folks want a header for the current page, we should encourage them to add it to the template imo. Probably a discussion for another issue though :D

there's a control to reset all changes.

Or push upstream! Could work :)

I also think that if a user indicates they want to make a pattern a synced pattern (and it shows up in the pattern library) then we could consider not asking them if it is to be synced when added to the page. If we had an icon, or color change for focus, then that would indicate the synced pattern is indeed synced and I can detach/unsync it if I'd prefer otherwise.

Agreed. If you insert a pattern and sync it, subsequent insertions should be synced by default.

I am seeing more and more modals show up in the Gutenberg UI

It's true, but I think this is partly due to the increased complexity of the software (site editor in particular). From the handbook:

Modals give users information and choices related to a task they’re trying to accomplish. They can contain critical information, require decisions, or involve multiple tasks.

In that sense I think the modal is the correct choice here.

@jameskoster
Copy link
Contributor

@richtabor I tried a quick prototype for the direct-manipulation-editing of rich text:

pattern.overrides.mp4

I still think you need the dedicated editing view if you want to do anything beyond this (add / remove blocks, re-order, etc). There's also a question of how to handle non-text content overrides (e.g. images).

@luisherranz
Copy link
Member

I still think you need the dedicated editing view

I also think the dedicated view should be the default edit option to make clear that those blocks don't belong to that page/post, but there could also be an explicit "Edit in place" option.

@phil-sola
Copy link

I love the discussion and mock ups above relating to syncing patterns across a site. This is something I feel is really missing from FSE at the moment. There is no entity currently for this and patterns are slightly useless without the option to potentially sync this across a site. Often patterns are repeated across a design on various pages or templates.

Aside from the discussion above and in other issues (#41717, #39281) has any work been done on making this a reality?

I think the modal option illustrated above is super intuitive and simple for users to understand when choosing to add a pattern to a page or template and it would fill such a gaping hole currently in FSE.

I need to use a pattern across multiple pages in FSE and currently any style changes I make to that pattern are not globally synced, in effect making patterns pointless in this instance. I might as well just copy and paste that group of blocks to each page which is time consuming and not ideal if anything changes design wise in the future.

Compared to something like a php template or ACF Flexible content field where you could update that centrally in one place and change the style for the entire site, this workflow is horrible currently in comparison.

Tracking multiple issues all talking about patterns and potential ideas for them is also pretty confusing and hard to track for someone keen to follow any progress on this.

@annezazu
Copy link
Contributor

Work hasn't yet started but you're following the right issue. I do want to mention this sub-issue as part of the patterns as sectioning elements that was recently opened #48458 I know it's a lot to follow but it's a big change with many moving pieces. You've correctly identified the big ones :)

@phil-sola
Copy link

Thanks @annezazu, really appreciate the confirmation and letting me know. Excited to see what can come of all this great discussion around patterns!

@glendaviesnz
Copy link
Contributor

With the rename of reusable blocks to synced patterns going into 6.3 I think we can close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Block The "Reusable Block" Block [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Design Feedback Needs general design feedback. [Type] Copy Issues or PRs that need copy editing assistance
Projects
None yet
Development

No branches or pull requests