Site Editor: Add Library for Template Parts & Patterns Management #51078
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
force-pushed
the
try/site-editor-library
branch
from
443dedf
to
8c29a7a
Compare
|
Size Change: +6.47 kB (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in ea08bb0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5331833101
|
aaronrobertshaw
force-pushed
the
try/site-editor-library
branch
from
4dc29d5
to
fd5f025
Compare
aaronrobertshaw
changed the title
aaronrobertshaw
force-pushed
the
try/site-editor-library
branch
3 times, most recently
from
8e640c3
to
fca8f9d
Compare
aaronrobertshaw
force-pushed
the
try/site-editor-library
branch
2 times, most recently
from
fabeda3
to
e5b1ab7
Compare
aaronrobertshaw
added
[Feature] Patterns
aaronrobertshaw
commented
Jun 16, 2023
Comment on lines
+180
to
+187
| showSidebar | ||
| ? { opacity: 1, display: 'block' } | ||
| : { | ||
| opacity: 0, | ||
| transitionEnd: { | ||
| display: 'none', | ||
| }, | ||
| } |
There was a problem hiding this comment.
Instead of completely avoiding rendering the sidebar, we simply hide it here, so that some routing syncing logic in the sidebar can still apply in some senerios.
Original explanation: #51558 (comment)
aaronrobertshaw
commented
Jun 16, 2023
Comment on lines
+54
to
+60
| // Go back in history if we came from the library page. | ||
| // Otherwise push a stack onto the history. | ||
| if ( location.state?.backPath === '/library' ) { | ||
| history.back(); | ||
| } else { | ||
| history.push( { path: '/library' } ); | ||
| } |
There was a problem hiding this comment.
The reason we have to do this instead of leveraging NavigatorToParentButton is because this tree isn't wrapped in the NavigatorProvider context, nor is it under the /library subtree of the NavigatorScreen, so navigator.goBack() won't work here.
Original explanation: #51558 (comment)
aaronrobertshaw
commented
Jun 16, 2023
Comment on lines
+4
to
+5
| import removeAccents from 'remove-accents'; | ||
| import { noCase } from 'change-case'; |
There was a problem hiding this comment.
These dependencies were added to the edit-site package to mirror the block editor's filtering in the inserter. Given the dependencies were already within the overall project we didn't see it as a blocker to add them here.
aaronrobertshaw
commented
Jun 16, 2023
| * | ||
| * @return {Array} Filtered item list. | ||
| */ | ||
| export const searchItems = ( items = [], searchInput = '', config = {} ) => { |
There was a problem hiding this comment.
It would have been nice to be able to reuse the util functions from the block editor however our filtering needs in the library ended up differing to the point it was easier to bring these in and update as required given the short time to 6.3.
When the dust settles we might be able to find some common ground and extract a shared util.
aaronrobertshaw
commented
Jun 16, 2023
|
|
||
| // If we aren't filtering on search terms, matching on category is satisfactory. | ||
| // If we are, then we need more than a category match. | ||
| const threshold = onlyFilterByCategory ? 0 : 1; |
There was a problem hiding this comment.
This "threshold" for the search enabled us to avoid having to loop all patterns etc first to filter by category before then repeating that to filter by search terms.
aaronrobertshaw
changed the title
aaronrobertshaw
force-pushed
the
try/site-editor-library
branch
from
8495e13
to
7b58fde
Compare
|
I've pushed some accessibility fixes. Here's a quick summary:
Some of this could definitely do with improvement, but I believe I've cleared any blockers that I can see from my testing. One small thing that could still be improved is to add a header at the top of each view to say which category is being shown, but I think that might require some discussion. |
talldan
approved these changes
Jun 21, 2023
scruffian
reviewed
Jun 22, 2023
...site/src/components/sidebar-navigation-screen-template-part/template-part-navigation-menu.js
Show resolved
Hide resolved
|
@aaronrobertshaw I think this PR has removed a feature which added the Navigation Menu to the Template Part sidebar #51492. Are you able to reinstate that change? |
|
@getdave @scruffian Sorry about that! Does it look like those features were re-instated correctly by #51825? |
|
Easily done. Lots of changes around that code recently 👍 |
youknowriad
reviewed
Jun 26, 2023
|
@aaronrobertshaw I think this change may have wiped out the Manage all template parts link from the Library panel:
|
|
@jameskoster the design we were working from omitted that "manage all" link. However, things have evolved on a few fronts since then where a manage all link was added for custom patterns given the possibility the custom patterns might be limited to the latest 100 or something. I'll get a PR up to reinstate a manage all template parts link. |
This was referenced Jun 27, 2023
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…rdPress#51078) * Add placeholder Library page * Add placeholder Library nav screen * Use placeholder library page and nav screen * Add dodgy placeholder display for patterns or template parts * Temporarily add category type and name to query params * Try displaying patterns and template parts * Highlight active category nav item * Add placeholder dropdown for deleting patterns * Try making pattern previews clickable * Add placeholder create pattern modal and action * Add category select to create pattern modal * Remove the library url params when existing library * Fix pattern styles not loading on fresh reload of Library page (WordPress#51114) * Hook up template part preview to existing edit page This also adds a temporary hack to the sidebar-navigation-screen so the back button from the existing template part editing will return to the previously selected category in the library. * Fix template part pattern display in library * Try retrieving user created patterns from wp_block CPT * Update now user created patterns have category arrays * Update user created patterns based of new meta wp_block property * Remove new template part screen as it was covered by pattern screen * Allow user created patterns to be clicked on * Fix typos * Fix classnames * Hook up reusable block editing * Try adding delete for user patterns * Add snackbar notices for user-created pattern deletion * Hook up pattern creation modal * Make new patterns return to correct category * Try updating the Library to use pattern category taxonomy * Fix theme pattern display in Grid * Fix selected pattern category detection * Use invalidateResolution to clear taxonomy cache Not sure if this will be better than manual counts as we'll likely still need to get userPatterns back to collect an Uncategorized group. * Include uncategorized reusable block patterns in Library * Make pattern category selection option and add sync toggle * Separate display of synced/unsynced patterns * Add placeholder search control. * Update to use new Page components added along with Table * Fix private apis imports * style changes to library * copy change * svg colour * add template part and pattern dialog * fix template part modal close * Try filtering of patterns in library * search input patterns style * responsive pattern grid * Use only default block pattern categories The removal of the pattern category taxonomy changes will be done once that related PR has been updated. * Fix Library routing in mobile (WordPress#51558) * Remove obselete TODO comments * Use extracted useDebouncedInput hook * Fix clicking browser's back button in edit mode from the Library (WordPress#51566) * Rename Your Patterns to Custom patterns * Remove arrow functions for internal Grid components * Fix linting error * Add dependencies to package-lock.json * Update core pattern filtering * Consolidate and reuse constants * Clean up comments and unused styles * Rename manage all link for custom patterns * Remove `wp_block` property from post meta for patterns * Update conversion of reusable block to pattern after sync_status moved * Rename setReusableBlock to setEditedEntity * Improve wording * Add aria description for pattern action menu * Refactor filtering out duplicate patterns by name * Add focus style for patterns * Add empty pattern placeholder * Fix tests and converter flow * Tweak focused placeholder styles * Make the action menu unfocusable and use a keyboard shortcut for deletion * Add confirm step for deleting * Add a more descriptive aria-description * Ensure pattern lists are announced with the correct number of items * Improve labelling of pattern lists --------- Co-authored-by: Glen Davies <glen.davies@automattic.com> Co-authored-by: Daniel Richards <daniel.richards@automattic.com> Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Kai Hao <kai@kaihao.dev>
|
I just discovered that the "Template Parts for Classic themes" e2e test has been removed and never added back. These tests are there to catch the regressions and shouldn't be discarded this easily. |
This was referenced Jul 17, 2023
Agreed 👍 It was removed as the page itself had been removed, as noted in #51078 (comment). When I reinstated the page, I missed this spec as that was removed in a separate commit. Apologies, I'll try adding it back and updating if required. |
|
A PR reinstating the spec is available: #52780 |
7 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #50028
Related:
What?
Introduces an admin section "Library" for managing template parts and patterns.
🤖 Generated by Copilot at e08f66f
This pull request introduces a new feature for block patterns that can be saved and synced across the site. It renames the existing
Reusable blockblock type toPatternand adds asourceproperty to distinguish core and user patterns. It also adds compatibility for WordPress 6.3 by loading custom files and extending the REST API. It updates the block editor, the edit site, and the block library packages to support the new feature. It modifies the documentation, the tests, and the labels to reflect the new terminology.Important Notes
Pattern categorization was explored via a new taxonomy in #51144 however given the tight timeframe before 6.3's beta, we've removed that in favour of initially displaying all patterns in the "Your Patterns" category.
There is currently no pagination for the "Your Patterns" category.
It's possible we may get the above approved as "blessed" tasks however for the time being the current state of this PR should be an MVP we can land for 6.3.
Why?
See #50028 for discussion and history.
How?
wp_blockCPT to add custom post metachange-caseandremove-accentsdependencies to the site editor package so pattern filtering can match the block editor inserterAddNewPatternandCreatePatternModalcomponents added to allow pattern creation in the site editor libraryAddNewTemplateCreateTemplatePartModalto be consistent with the patterns modalPageLibraryadding new hooks and components to combine display of template parts and patternsPageMainto renderPageLibraryPagecomponent to aid stylingsuffixsupport to sidebar navigation itemsbackPathpropsync-state-with-urlhooks to work with the Library or setwp_blockentity from URL paramssetReusableBlockaction in theedit-sitestoreget-is-list-page.jsutil to include Library pages🤖 Generated by Copilot at e08f66f
Reusable blockblock type toPatternand update the labels and titles of the inserter tabs, menu items, and modal dialogs to reflect the new terminology (link, link, link, link, link, link, link, link, link, link, link, link)sourceproperty to the block patterns schema and response and register the core patterns with thecoresource for WordPress 6.3 compatibility (link, link, link)wp_blockpost type and register thewp_block_sync_statusmeta field to store the sync status of a pattern for WordPress 6.3 compatibility (link)PostSyncStatuscomponent to the post status sidebar panel to display the sync status of a pattern and allow toggling it (link, link)setReusableBlockaction to the edit site store to set a reusable block (or pattern) in the store (link)blockblock edit function to check if the block is an unsynced pattern and replace its blocks with cloned blocks to avoid editing the original pattern content (link, link, link)change-caseandremove-accentsdependencies to the edit site package to use them for converting the pattern titles to kebab case for the slug (link, link)gutenberg_load_remote_block_patternsand related functions from the WordPress 6.2 compatibility file and move them to the WordPress 6.3 compatibility file with some modifications (link, link)Testing Instructions
+button create a template part+button next to the Library navigation screens title or by selecting blocks in the Block Editor and choosing "create a pattern" from the block toolbar's more menu.Testing Instructions for Keyboard
wp_blockCPT.Screenshots or screencast
Screen.Recording.2023-06-16.at.3.46.59.pm.mp4