Add error boundaries to widget screens #33771
Merged
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
…tate is not lost when re-initializing
…at its state is not lost when re-initializing" This reverts commit 7d607ff.
talldan
added
[Type] Enhancement
talldan
requested review from
adamziel,
draganescu,
kevin940726,
noisysocks and
tellthemachines
as code owners
|
Size Change: +632 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
kevin940726
approved these changes
Aug 1, 2021
| inserter={ activeSidebarControl.inserter } | ||
| inspector={ activeSidebarControl.inspector } | ||
| />, | ||
| <ErrorBoundary> |
There was a problem hiding this comment.
I wonder if we should add this to the root of the editor, in hope of being able to correctly reset all the states. Not sure if it would work though.
There was a problem hiding this comment.
I gave it a try during development, but yeah, doesn't quite work. I think we'll need something a little different to handle the portals properly in the customizer editor.
There was a problem hiding this comment.
I don't think it's a problem with the portals, but rather that we(I) don't properly clear/reset the states of controls after unmounted 😅. It didn't occur to me that we would ever need to unmount the component. Probably just have to add some useEffect in the components.
There was a problem hiding this comment.
The error boundary UI also needs to render in the right place (which is probably in the portal).
7d607ff has my first attempt to solve the activeSidebarControl state problems, but it was a bit naive because even the context is lost when unmounting/remounting the app.
Moving the active sidebar control to store state so that it persists across umounting/remounting the whole application might be the easiest option.
desrosj
pushed a commit
that referenced
this pull request
Aug 30, 2021
* Add error boundary to edit widgets screen * Add error boundary to customize widgets * Refactor sidebar controls provider to application level so that its state is not lost when re-initializing * Revert "Refactor sidebar controls provider to application level so that its state is not lost when re-initializing" This reverts commit 7d607ff. * Remove rebootability from customize widgets * Remove debug code
desrosj
added a commit
that referenced
this pull request
Sep 1, 2021
* Fix API docs generation (#33384) * Docs: use markdown headings instead of links for API declarations (#33381) * Docs: Run Prettier after updating API in documentation (#33498) (cherry picked from commit 626f233) * Use tabs instead of spaces in block transform doc example (#33549) (cherry picked from commit 8afca1e) * Fix metabox reordering (#30617). * Block editor: don't render layout and duotone styles in between blocks (#32083) * Widgets: Allow HTML tags in description (#33814) * Widgets: Allow HTML tags in description * Use `dangerouslySetInnerHTML` Avoid `<div />` inside the `<p />` tag * Describe by dangerouslySetInnerHTML is used * Use safeHTML * Update comment * Editor: Set 'hide_empty' for the most used terms query (#33457) Don't include terms that aren't assigned to any posts as "most used" terms. * Update widget editor help links to point to the new support article (#33482) * If select-all fires in .editor-post-title__input, end the process.. (#33621) * Writing flow: select all: remove early return for post title (#33699) * Call onChangeSectionExpanded conditionally (#33618) * FontSizePicker: Use number values when the initial value is a number (#33679) * FontSizePicker: Don't use units if the value is a number * Add unit tests * Disable units when we have number values * Fix justification for button block when selected (#33739) * Remove margin setting, auto right conflict with justify buttons * Per review, add little margin back * Add error boundaries to widget screens (#33771) * Add error boundary to edit widgets screen * Add error boundary to customize widgets * Refactor sidebar controls provider to application level so that its state is not lost when re-initializing * Revert "Refactor sidebar controls provider to application level so that its state is not lost when re-initializing" This reverts commit 7d607ff. * Remove rebootability from customize widgets * Remove debug code * Fix insertion point in Widgets editors (#33802) * Default batch processor: Respect the batch endpoint's maxItems (#34280) This updates the default batch processor to make multiple batch requests if the number of requests to process exceeds the number of requests that the batch endpoint can handle. We determine the number of requests that the batch endpoint can handle by making a preflight OPTIONS request to /batch/v1. By default it is 25 requests. See https://make.wordpress.org/core/2020/11/20/rest-api-batch-framework-in-wordpress-5-6/. * Fix button block focus trap after a URL has been added (#34314) * Rework button block link UI to match RichText format implementation * Refine some more, determine visibility by selection and url state * Add e2e test * Also focus rich text when unlinking using a keyboard shortcut * Text for dropdown fields within legacy widgets in the Customizer is off centered (#34076) * Fix ESLint errors reported * Regenerate autogenerated docs * Update the `INSERTER_SEARCH_SELECTOR` path. This is a partial cherry pick of 2356b2d in order to fix the performance tests. Co-authored-by: André <[email protected]> Co-authored-by: JuanMa <[email protected]> Co-authored-by: Greg Ziółkowski <[email protected]> Co-authored-by: Jeff Bowen <[email protected]> Co-authored-by: Bruno Ribarić <[email protected]> Co-authored-by: Ella van Durpe <[email protected]> Co-authored-by: Petter Walbø Johnsgård <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Hiroshi Urabe <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Marcus Kazmierczak <[email protected]> Co-authored-by: Robert Anderson <[email protected]> Co-authored-by: Anton Vlasenko <[email protected]>
Mamaduka
removed
the
Backport to WP Minor Release
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.
Description
Closes #33620
Adds error boundaries to the widgets screens. Previously users have reported JavaScript errors (like those solved by #33618) cause a blank white screen with very little information.
This PR at least adds a message and a Copy Error button. The edit widgets screen also has an 'Attempt Recovery' button, but I didn't add this to the customizer screen, as the customizer is a little more complex. When I attempted to do so, I found that the
activeSidebarControlstate was lost, so recovery would never work.The ErrorBoundary component is also in need of refactoring and improvement, but this PR would be good to backport to a minor release, so I'd prefer to keep it simple.
How has this been tested?
Appearance > Widgets screen
throw new Error( 'Test' );to somewhere like the Header component.Appearance > Customize > Widgets screen
throw new Error( 'Test' );to somewhere like the Header component.Screenshots
Appearance > Widgets screen
Appearance > Customize > Widgets screen
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).