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.

Sign up for GitHub

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

Jump to bottom

Catch nested blocks preview errors #14767

Closed
wants to merge 1 commit into from
Closed

Catch nested blocks preview errors #14767

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 32 additions & 12 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@ import { noop } from 'lodash';
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import { Disabled } from '@wordpress/components';
import { Component } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -31,18 +32,37 @@ function BlockPreview( props ) {
);
}

export function BlockPreviewContent( { name, attributes } ) {
const block = createBlock( name, attributes );
return (
<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
<BlockEdit
name={ name }
focus={ false }
attributes={ block.attributes }
setAttributes={ noop }
/>
</Disabled>
);
export class BlockPreviewContent extends Component {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file contains 2 components. Wouldn't it better to handle this error in the parent BlockPreview component and don't review this part of UI at all?

Aside: it might be nice to split this into two files.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think it's better to handle as closely as possible to the error. That way the "title" of the preview is still shown properly and just the content is left empty.

constructor() {
super( ...arguments );
this.state = {
hasError: false,
};
}

componentDidCatch() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our goal is for Hooks to cover all use cases for classes as soon as possible. There are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we plan to add them soon.

😿

this.setState( {
hasError: true,
} );
}

render() {
if ( this.state.hasError ) {
return null;
}
const { name, attributes } = this.props;
const block = createBlock( name, attributes );
return (
<Disabled className="editor-block-preview__content block-editor-block-preview__content editor-styles-wrapper" aria-hidden>
<BlockEdit
name={ name }
focus={ false }
attributes={ block.attributes }
setAttributes={ noop }
/>
</Disabled>
);
}
}

export default BlockPreview;