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

Block Inserter: Error displayed in browser console when opening custom pattern categories #51873

Closed
t-hamano opened this issue Jun 25, 2023 · 1 comment · Fixed by #51947
Closed
Assignees
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Bug An existing feature does not function as intended

Comments

@t-hamano
Copy link
Contributor

Description

Note: I initially tried to resolve this issue with #51870, but since I could not find an ideal solution, I am submitting it here as an issue.

When opening a custom pattern category from the main block inserter, an error appears in the browser console.

248545202-39a57a49-3806-45bb-a3fd-75327145fe89

Log
react_devtools_backend_compact.js:2367 Warning: Encountered two children with the same key, `core/block`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at div
    at Comp (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:72773:26)
    at BlockPatternList (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:19258:3)
    at div
    at BlockPatternsCategoryPanel (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:37924:3)
    at div
    at BlockPatternsCategoryDialog (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:37898:3)
    at div
    at InserterMenu (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:39881:3)
    at InserterLibrary (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:38984:3)
    at div
    at div
    at InserterSidebar (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:15682:67)
    at div
    at NavigableRegion (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:29252:3)
    at div
    at div
    at div
    at InterfaceSkeleton (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:29006:3)
    at BlockContextProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/block-editor/index.min.js?ver=a7304d534910f4ac477a:13462:3)
    at EntityProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/core-data/index.min.js?ver=0335a67734cd7ff3e5b9:2617:3)
    at EntityProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/core-data/index.min.js?ver=0335a67734cd7ff3e5b9:2617:3)
    at Editor (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:6109:3)
    at div
    at MotionComponent (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:89145:65)
    at div
    at MotionComponent (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:89145:65)
    at Resizable (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:20997:28)
    at UnforwardedResizableBox (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:55985:3)
    at ResizableFrame (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:14731:3)
    at ErrorBoundary (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:6270:5)
    at div
    at MotionComponent (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:89145:65)
    at div
    at div
    at div
    at Layout (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:12334:100)
    at RouterProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/router/index.min.js?ver=0f50332f42b79121e4e2:183:3)
    at GlobalStylesProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:6870:3)
    at SlotFillProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:57903:3)
    at SlotFillProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:58326:5)
    at Provider (http://localhost:8888/wp-content/plugins/gutenberg/build/components/index.min.js?ver=ce65b624bfa003890a5d:58258:3)
    at div
    at ShortcutProvider (http://localhost:8888/wp-content/plugins/gutenberg/build/keyboard-shortcuts/index.min.js?ver=86111e37c161eaba276a:41:87)
    at App (http://localhost:8888/wp-content/plugins/gutenberg/build/edit-site/index.min.js?ver=dccd84a46a5e6812f016:4143:67)
overrideMethod @ react_devtools_backend_compact.js:2367
printWarning @ react-dom.js?ver=18:73
error @ react-dom.js?ver=18:47
warnOnInvalidKey @ react-dom.js?ver=18:15303
reconcileChildrenArray @ react-dom.js?ver=18:15340
reconcileChildFibers @ react-dom.js?ver=18:15831
reconcileChildren @ react-dom.js?ver=18:19184
updateHostComponent @ react-dom.js?ver=18:19934
beginWork @ react-dom.js?ver=18:21628
beginWork$1 @ react-dom.js?ver=18:27436
performUnitOfWork @ react-dom.js?ver=18:26567
workLoopSync @ react-dom.js?ver=18:26476
renderRootSync @ react-dom.js?ver=18:26444
performConcurrentWorkOnRoot @ react-dom.js?ver=18:25748
workLoop @ react.js?ver=18:2653
flushWork @ react.js?ver=18:2626
performWorkUntilDeadline @ react.js?ver=18:2920
queue.<computed> @ wp-polyfill.js?ver=3.15.0:1977
run @ wp-polyfill.js?ver=3.15.0:1953
listener @ wp-polyfill.js?ver=3.15.0:1964

Step-by-step reproduction instructions

  • Create a non-synced pattern.
  • Open the main block inserter and open "Custom patterns" from the Patterns tab.
  • Confirm that errors are output to the browser console.

Screenshots, screen recording, code snippet

10d517cb75e3b47b76755c52c24bc53c.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Jun 25, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jun 25, 2023
@glendaviesnz
Copy link
Contributor

@t-hamano I wasn't able to replicate the console error, but it looks like it is definitely getting duplicate key names so I am not sure why I am not seeing the error.

I have added a PR here that should fix it, can you test and see if it resolves the console error for you, please.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Bug An existing feature does not function as intended
Projects
None yet
3 participants