Library: enable ability to create & classify a pattern library alongside reusable blocks

[annezazu]

Pulling this out of phase 2 tasks #33094 to include a standalone issue. I welcome edits! This work ties into longer term work around phase 3:

Library. Introduce an admin section or “library” for managing blocks, patterns, styles, and fonts. As part of this work, also look at what improvements can be done to enhance the media library design, interactions, and extensibility.

For now, the focus is on implementing this for patterns alongside reusable blocks. Currently, there's a work in progress PR to explore what this might look like to create and save patterns: #49607

Of note, we should keep in mind the work being done with the wp:pattern block namely due to this item:

Possibly unifying concepts with reusable blocks where everything is a "pattern" just with different sync properties.

[SaxonF]

Attaching a scoped design here based off the sync video shared in the main patterns thread #48458. Note that this is essentially Milestone 1 of the work detailed here.

manage-patterns.mp4

This piece of work is purely relating to the management side of patterns which we will need regardless of direction. This does not include syncing behaviour.

• Library contains template parts and patterns, with an external link out to re-usable blocks (for now)
• Template parts are separated from the rest, positioned at the top
• Pattern categories are listed below
• Clicking a category shows patterns on right in a masonry style
• Clicking a pattern on the right opens it in editor
• Any block can be turned into a pattern via the more menu item "Create a pattern"
• Template part categories behave the same way
• Each pattern in the grid has a more menu that initially just contains a delete action

TODO Design:

• Separate action to trigger drill down for template part
• Pattern renaming and editing category
• Category creation if none exists

[jasmussen]

Nice work Saxon, this feels close to ready. A few comments and questions, first one coming to mind is, should the Library also hold Reusable Blocks? And if yes, should we separate patterns and RBs with a subheading, but otherwise show them in one list? Or should we add drilldowns for each? Speaking of this screen:

Whether drilldown or not, it might also be useful to have a new variation of the reusable blocks icon that denotes "Patterns". I imagine still the double rhomboids but perhaps with flair in the pattern version. Such an icon would be useful not just for a drilldown menu, or perhaps a subheading, but also to show here:

I'm happy to work on one.

This purple snackbar I recall from #49980

This is to denote the global/synced nature of patterns, correct? Can work, but probably not a blocker for dev work to move forward with a default snackbar in the interim.

[adriacobo]

Hi! It's so lovely this navigation! Nice job!
Will the Library page be merged with classic themes?
It is an exciting way to navigate the patterns and reusable blocks.
Thank you!

[glendaviesnz]

@SaxonF, @jasmussen how do you imagine the difference between local and remote patterns working in the Library? In theory, Patterns will be able to be pulled in from 3 different places with these changes:

• Remote .org patterns via API
• Theme patterns via files in the theme directory
• User-created patterns from a CPT

In terms of adding/editing/deleting it is straightforward for the user-created patterns in the CPT. In terms of the remote and theme patterns editing is straightforward, ie. when choosing to edit the pattern the content can be copied to a CPT at that point. But, with delete of remote/theme patterns, are you imagining that users will be able to curate which of these will be available to users via the Library? In which case we may have to save some sort of pattern slug disallow list filter which is used by the pattern inserter to remove this from display.

Hopefully all that makes sense, get back to me if not.

[SaxonF]

@glendaviesnz I think to start with we should follow existing template/template part behaviour for the most part.

• You can add/edit/delete patterns that are user created
• You can't delete theme patterns but you can modify them.
• You should be able to add remote patterns to your local library, at which point they are now user created. You're essentially remixing them. I don't think we should display remote patterns directly in the library but we should have links out to the directory. "e.g. View hero patterns created by the community". This piece of work needs more design consideration though and shouldn't block a first release of library.

In future we can look at adding the ability to delete/archive theme patterns which as you mentioned would be more like a flag on the pattern vs actually removing the pattern.

[gziolo]

There are also patterns that sites or plugins can create by using register_block_pattern function directly. The same function gets called internally to register any patterns that the active theme may provide under its ./patterns/ directory.