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

Catch nested blocks preview errors #14767

Closed
wants to merge 1 commit into from
Closed

Conversation

youknowriad
Copy link
Contributor

closes #9897

This is a stopgap solution for block style variations for blocks using InnerBlocks. At the moment, rendering innerBlocks in a preview doesn't work. Details here #9897 (comment)

The solution for the root issue is a little bit complex and might require using a nested editor.

In the meantime, this is a stop-gap solution that avoid rendering the preview if it triggers an error.

Testing instructions

  • Add a style variations for the columns block
  • Check that you can switch style variations.

};
}

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.

😿

/>
</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.

@gziolo gziolo added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Bug An existing feature does not function as intended labels Apr 2, 2019
@talldan
Copy link
Contributor

talldan commented Apr 5, 2019

This seems to work fine for columns, but seeing an unusual issue when I test this on the section block. I've added the following styles (copied from the button block):

	styles: [
		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
		{ name: 'outline', label: __( 'Outline' ) },
		{ name: 'squared', label: _x( 'Squared', 'block style' ) },
	],

Here's a gif:
block-preview-glitch

I'm seeing the error thrown in the console, but the componentDidCatch isn't triggered.

@youknowriad
Copy link
Contributor Author

I'm seeing the error thrown in the console, but the componentDidCatch isn't triggered.

That's fine I think. I guess this is the default behavior of componentDidCatch

This seems to work fine for columns, but seeing an unusual issue when I test this on the section

@talldan Interesting, it feels like the focus is moving somewhere we display the preview

@youknowriad
Copy link
Contributor Author

closing in favor of #15561 which I think is a better fix.

@youknowriad youknowriad deleted the fix/preview-nested branch May 10, 2019 13:50
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 [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styles variations don't work for blocks using InnerBlocks
3 participants