-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Site Editor: Add Library for Template Parts & Patterns Management #51078
Conversation
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
|
4dc29d5
to
fd5f025
Compare
8e640c3
to
fca8f9d
Compare
fabeda3
to
e5b1ab7
Compare
showSidebar | ||
? { opacity: 1, display: 'block' } | ||
: { | ||
opacity: 0, | ||
transitionEnd: { | ||
display: 'none', | ||
}, | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
// 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
import removeAccents from 'remove-accents'; | ||
import { noCase } from 'change-case'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
* | ||
* @return {Array} Filtered item list. | ||
*/ | ||
export const searchItems = ( items = [], searchInput = '', config = {} ) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
|
||
// 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is looking good. I'm going to merge this, so that it's in for 6.3, and we can continue to make small improvements and fixes to it.
...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 👍 |
@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. |
…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 <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Kai Hao <[email protected]>
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. |
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 |
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 block
block type toPattern
and adds asource
property 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_block
CPT to add custom post metachange-case
andremove-accents
dependencies to the site editor package so pattern filtering can match the block editor inserterAddNewPattern
andCreatePatternModal
components added to allow pattern creation in the site editor libraryAddNewTemplate
CreateTemplatePartModal
to be consistent with the patterns modalPageLibrary
adding new hooks and components to combine display of template parts and patternsPageMain
to renderPageLibrary
Page
component to aid stylingsuffix
support to sidebar navigation itemsbackPath
propsync-state-with-url
hooks to work with the Library or setwp_block
entity from URL paramssetReusableBlock
action in theedit-site
storeget-is-list-page.js
util to include Library pages🤖 Generated by Copilot at e08f66f
Reusable block
block type toPattern
and 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)source
property to the block patterns schema and response and register the core patterns with thecore
source for WordPress 6.3 compatibility (link, link, link)wp_block
post type and register thewp_block_sync_status
meta field to store the sync status of a pattern for WordPress 6.3 compatibility (link)PostSyncStatus
component to the post status sidebar panel to display the sync status of a pattern and allow toggling it (link, link)setReusableBlock
action to the edit site store to set a reusable block (or pattern) in the store (link)block
block 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-case
andremove-accents
dependencies 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_patterns
and 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_block
CPT.Screenshots or screencast
Screen.Recording.2023-06-16.at.3.46.59.pm.mp4