[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash #54382

fluiddot · 2023-09-12T13:24:15Z

Related PRs:

Limit inner blocks nesting depth to avoid call stack size exceeded crash wordpress-mobile/gutenberg-mobile#6191
[TEST][Gutenberg] Limit inner blocks nesting depth to avoid call stack size exceeded crash wordpress-mobile/WordPress-Android#19163
[TEST][Gutenberg] Limit inner blocks nesting depth to avoid call stack size exceeded crash wordpress-mobile/WordPress-iOS#21553

What?

Limits InnerBlock component to render blocks that are deeply nested, in order to prevent a crash related to exceeding the maximum call stack trace set by the Hermes engine.

Why?

Fixes wordpress-mobile/WordPress-Android#18750.
Fixes wordpress-mobile/gutenberg-mobile#6123

How?

In the InnerBlocks component we check the number of parent blocks associated with the block, this determines the nesting depth level. If it exceeds a threshold defined here, we render a warning message box instead of rendering the inner blocks.

gutenberg/packages/block-editor/src/components/inner-blocks/index.native.js

Lines 130 to 139 in e028e9a

    
           const nestingLevel = useSelect( 
        
           	( select ) => { 
        
           		return select( blockEditorStore ).getBlockParents( clientId ) 
        
           			?.length; 
        
           	}, 
        
           	[ clientId ] 
        
           ); 
        
           if ( nestingLevel >= MAX_NESTING_DEPTH ) { 
        
           	return <WarningMaxDepthExceeded clientId={ clientId } />; 
        
           }

Additionally, I extracted the UI elements used in the "missing" block (i.e. the block used to render unsupported blocks) into a separate component (BlockFallbackWebVersion). In a separate PR, I'll update that block to use this new component.

Testing Instructions

The warning IS NOT displayed when NOT exceeding the threshold

In the web version of the editor, create a post with the following HTML:

Deeply nested block structure (8 levels)

<!-- wp:heading -->
<h2 class="wp-block-heading">Group block</h2>
<!-- /wp:heading -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#cb6767"}}} -->
<p class="has-background" style="background-color:#cb6767">Level 1 </p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#b89759"}}} -->
<p class="has-background" style="background-color:#b89759">Level 2</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#816531"}}} -->
<p class="has-background" style="background-color:#816531">Level 3</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#86c64d"}}} -->
<p class="has-background" style="background-color:#86c64d">Level 4</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b873"}}} -->
<p class="has-background" style="background-color:#58b873">Level 5</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b8b8"}}} -->
<p class="has-background" style="background-color:#58b8b8">Level 6</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5880b8"}}} -->
<p class="has-background" style="background-color:#5880b8">Level 7</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5870b8"}}} -->
<p class="has-background" style="background-color:#5870b8">Level 8</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Open the post in the app.
Scroll down the content.
Observe that all blocks are rendered and that no warning message box is displayed.

The warning IS displayed when exceeding the limit

In the web version of the editor, create a post with the following HTML in a WPCOM site:

Deeply nested block structure (20 levels)

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#cb6767"}}} -->
<p class="has-background" style="background-color:#cb6767">Level 1 </p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#b89759"}}} -->
<p class="has-background" style="background-color:#b89759">Level 2</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#816531"}}} -->
<p class="has-background" style="background-color:#816531">Level 3</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#86c64d"}}} -->
<p class="has-background" style="background-color:#86c64d">Level 4</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b873"}}} -->
<p class="has-background" style="background-color:#58b873">Level 5</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b8b8"}}} -->
<p class="has-background" style="background-color:#58b8b8">Level 6</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5880b8"}}} -->
<p class="has-background" style="background-color:#5880b8">Level 7</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5870b8"}}} -->
<p class="has-background" style="background-color:#5870b8">Level 8</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5877b8"}}} -->
<p class="has-background" style="background-color:#5877b8">Level 9</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 10</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 11</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 12</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 13</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 14</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 15</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 16</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 17</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 18</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 19</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 20</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Open the post in the app.
Observe that no crash is produced.
Scroll down the content.
Observe that starting at level 10, a warning message box is displayed within the block list.
Tap on the warning twice.
Observe that a bottom sheet is displayed explaining the problem.
Observe that two options are presented, one for editing using the web editor and another one for ungrouping the block.
Tap on the "Edit using web editor" option.
Observe that UBE (Unsupported Block Editor) opens with the content that is not rendered in the native editor.
Modify the content and tap on "Continue".
Preview the post and observe the post reflects recent modifications.
Back in the editor tap on the warning message box again.
Tap on the "Ungroup block" option.
Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.
Observe that the warning message box is still present.
Tap on the warning message box and then the "Dismiss" option.
Observe that the bottom sheet closes.
Save the post.
Observe that no crash is produced.

Option for editing using the web editor is not present in self-hosted sites without Jetpack

In the web version of the editor, create a post with the following HTML in a self-hosted site without Jetpack:

Deeply nested block structure (20 levels)

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#cb6767"}}} -->
<p class="has-background" style="background-color:#cb6767">Level 1 </p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#b89759"}}} -->
<p class="has-background" style="background-color:#b89759">Level 2</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#816531"}}} -->
<p class="has-background" style="background-color:#816531">Level 3</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#86c64d"}}} -->
<p class="has-background" style="background-color:#86c64d">Level 4</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b873"}}} -->
<p class="has-background" style="background-color:#58b873">Level 5</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b8b8"}}} -->
<p class="has-background" style="background-color:#58b8b8">Level 6</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5880b8"}}} -->
<p class="has-background" style="background-color:#5880b8">Level 7</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5870b8"}}} -->
<p class="has-background" style="background-color:#5870b8">Level 8</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5877b8"}}} -->
<p class="has-background" style="background-color:#5877b8">Level 9</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 10</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 11</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 12</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 13</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 14</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 15</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 16</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 17</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 18</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 19</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 20</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Open the post in the app.
Observe that no crash is produced.
Scroll down the content.
Observe that starting at level 10, a warning message box is displayed within the block list.
Tap on the warning twice.
Observe that a bottom sheet is displayed explaining the problem.
Observe that the message doesn't mention the web editor.
Observe that only the "Ungroup block" option is presented.
Tap on the "Ungroup block" option.
Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.
Observe that the warning message box is still present.
Tap on the warning message box and then the "Dismiss" option.
Observe that the bottom sheet closes.
Save the post.
Observe that no crash is produced.

Self-hosted site with Jetpack

In the web version of the editor, create a post with the following HTML in a self-hosted site with Jetpack:

Deeply nested block structure (20 levels)

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#cb6767"}}} -->
<p class="has-background" style="background-color:#cb6767">Level 1 </p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#b89759"}}} -->
<p class="has-background" style="background-color:#b89759">Level 2</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#816531"}}} -->
<p class="has-background" style="background-color:#816531">Level 3</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#86c64d"}}} -->
<p class="has-background" style="background-color:#86c64d">Level 4</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b873"}}} -->
<p class="has-background" style="background-color:#58b873">Level 5</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#58b8b8"}}} -->
<p class="has-background" style="background-color:#58b8b8">Level 6</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5880b8"}}} -->
<p class="has-background" style="background-color:#5880b8">Level 7</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5870b8"}}} -->
<p class="has-background" style="background-color:#5870b8">Level 8</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5877b8"}}} -->
<p class="has-background" style="background-color:#5877b8">Level 9</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 10</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 11</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 12</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 13</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 14</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 15</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 16</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 17</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 18</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 19</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#5873b8"}}} -->
<p class="has-background" style="background-color:#5873b8">Level 20</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Go to Jetpack/Settings and uncheck the option "Allow users to log in to this site using WordPress.com accounts" under the "WordPress.com login" section.
Open the post in the app.
Observe that no crash is produced.
Scroll down the content.
Observe that starting at level 10, a warning message box is displayed within the block list.
Tap on the warning twice.
Observe that a bottom sheet is displayed explaining the problem.
Observe that a note is included mentioning to allow WordPress.com login to edit using UBE.
Tap on the "Open Jetpack Security settings" option.
Enable "Allow WordPress.com login".
Tap on the warning message box again.
Observe that the option "Edit using web editor" is now presented.
Tap on the "Edit using web editor" option.
Observe that UBE (Unsupported Block Editor) opens with the content that is not rendered in the native editor.
Modify the content and tap on "Continue".
Preview the post and observe the post reflects recent modifications.
Back in the editor tap on the warning message box again.
Tap on the "Ungroup block" option.
Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.
Observe that the warning message box is still present.
Tap on the warning message box and then the "Dismiss" option.
Observe that the bottom sheet closes.
Save the post.
Observe that no crash is produced.

Unsupported Block Editing

Since we are using UBE in the warning message box, it would be great to cover some of the test cases of that feature.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Light mode	Dark mode

WPCOM site	Self-hosted site without Jetpack
ios-max-depth-warning-wpcom.mp4	ios-max-depth-warning-self-hosted.mp4

github-actions · 2023-09-12T13:35:28Z

Size Change: 0 B

Total Size: 1.62 MB

ℹ️ View Unchanged

Filename	Size
`build/a11y/index.min.js`	964 B
`build/annotations/index.min.js`	2.71 kB
`build/api-fetch/index.min.js`	2.29 kB
`build/autop/index.min.js`	2.11 kB
`build/blob/index.min.js`	461 B
`build/block-directory/index.min.js`	7.05 kB
`build/block-directory/style-rtl.css`	1.04 kB
`build/block-directory/style.css`	1.04 kB
`build/block-editor/content-rtl.css`	4.28 kB
`build/block-editor/content.css`	4.27 kB
`build/block-editor/default-editor-styles-rtl.css`	403 B
`build/block-editor/default-editor-styles.css`	403 B
`build/block-editor/index.min.js`	218 kB
`build/block-editor/style-rtl.css`	15.6 kB
`build/block-editor/style.css`	15.6 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	90 B
`build/block-library/blocks/archives/style.css`	90 B
`build/block-library/blocks/audio/editor-rtl.css`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	122 B
`build/block-library/blocks/audio/style.css`	122 B
`build/block-library/blocks/audio/theme-rtl.css`	138 B
`build/block-library/blocks/audio/theme.css`	138 B
`build/block-library/blocks/avatar/editor-rtl.css`	116 B
`build/block-library/blocks/avatar/editor.css`	116 B
`build/block-library/blocks/avatar/style-rtl.css`	104 B
`build/block-library/blocks/avatar/style.css`	104 B
`build/block-library/blocks/block/editor-rtl.css`	305 B
`build/block-library/blocks/block/editor.css`	305 B
`build/block-library/blocks/button/editor-rtl.css`	587 B
`build/block-library/blocks/button/editor.css`	587 B
`build/block-library/blocks/button/style-rtl.css`	633 B
`build/block-library/blocks/button/style.css`	632 B
`build/block-library/blocks/buttons/editor-rtl.css`	337 B
`build/block-library/blocks/buttons/editor.css`	337 B
`build/block-library/blocks/buttons/style-rtl.css`	332 B
`build/block-library/blocks/buttons/style.css`	332 B
`build/block-library/blocks/calendar/style-rtl.css`	239 B
`build/block-library/blocks/calendar/style.css`	239 B
`build/block-library/blocks/categories/editor-rtl.css`	113 B
`build/block-library/blocks/categories/editor.css`	112 B
`build/block-library/blocks/categories/style-rtl.css`	124 B
`build/block-library/blocks/categories/style.css`	124 B
`build/block-library/blocks/code/editor-rtl.css`	53 B
`build/block-library/blocks/code/editor.css`	53 B
`build/block-library/blocks/code/style-rtl.css`	121 B
`build/block-library/blocks/code/style.css`	121 B
`build/block-library/blocks/code/theme-rtl.css`	124 B
`build/block-library/blocks/code/theme.css`	124 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	421 B
`build/block-library/blocks/columns/style.css`	421 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-content/style-rtl.css`	92 B
`build/block-library/blocks/comment-content/style.css`	92 B
`build/block-library/blocks/comment-template/style-rtl.css`	199 B
`build/block-library/blocks/comment-template/style.css`	198 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-title/editor-rtl.css`	75 B
`build/block-library/blocks/comments-title/editor.css`	75 B
`build/block-library/blocks/comments/editor-rtl.css`	840 B
`build/block-library/blocks/comments/editor.css`	839 B
`build/block-library/blocks/comments/style-rtl.css`	637 B
`build/block-library/blocks/comments/style.css`	636 B
`build/block-library/blocks/cover/editor-rtl.css`	647 B
`build/block-library/blocks/cover/editor.css`	650 B
`build/block-library/blocks/cover/style-rtl.css`	1.7 kB
`build/block-library/blocks/cover/style.css`	1.69 kB
`build/block-library/blocks/details/editor-rtl.css`	65 B
`build/block-library/blocks/details/editor.css`	65 B
`build/block-library/blocks/details/style-rtl.css`	98 B
`build/block-library/blocks/details/style.css`	98 B
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	410 B
`build/block-library/blocks/embed/style.css`	410 B
`build/block-library/blocks/embed/theme-rtl.css`	138 B
`build/block-library/blocks/embed/theme.css`	138 B
`build/block-library/blocks/file/editor-rtl.css`	316 B
`build/block-library/blocks/file/editor.css`	316 B
`build/block-library/blocks/file/style-rtl.css`	311 B
`build/block-library/blocks/file/style.css`	312 B
`build/block-library/blocks/file/view.min.js`	321 B
`build/block-library/blocks/footnotes/style-rtl.css`	201 B
`build/block-library/blocks/footnotes/style.css`	199 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.61 kB
`build/block-library/blocks/freeform/editor.css`	2.61 kB
`build/block-library/blocks/gallery/editor-rtl.css`	957 B
`build/block-library/blocks/gallery/editor.css`	962 B
`build/block-library/blocks/gallery/style-rtl.css`	1.55 kB
`build/block-library/blocks/gallery/style.css`	1.55 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	654 B
`build/block-library/blocks/group/editor.css`	654 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	189 B
`build/block-library/blocks/heading/style.css`	189 B
`build/block-library/blocks/html/editor-rtl.css`	340 B
`build/block-library/blocks/html/editor.css`	341 B
`build/block-library/blocks/image/editor-rtl.css`	834 B
`build/block-library/blocks/image/editor.css`	833 B
`build/block-library/blocks/image/style-rtl.css`	1.42 kB
`build/block-library/blocks/image/style.css`	1.41 kB
`build/block-library/blocks/image/theme-rtl.css`	137 B
`build/block-library/blocks/image/theme.css`	137 B
`build/block-library/blocks/image/view.min.js`	1.83 kB
`build/block-library/blocks/latest-comments/style-rtl.css`	357 B
`build/block-library/blocks/latest-comments/style.css`	357 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	213 B
`build/block-library/blocks/latest-posts/editor.css`	212 B
`build/block-library/blocks/latest-posts/style-rtl.css`	478 B
`build/block-library/blocks/latest-posts/style.css`	478 B
`build/block-library/blocks/list/style-rtl.css`	88 B
`build/block-library/blocks/list/style.css`	88 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	505 B
`build/block-library/blocks/media-text/style.css`	503 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	671 B
`build/block-library/blocks/navigation-link/editor.css`	672 B
`build/block-library/blocks/navigation-link/style-rtl.css`	115 B
`build/block-library/blocks/navigation-link/style.css`	115 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	299 B
`build/block-library/blocks/navigation-submenu/editor.css`	299 B
`build/block-library/blocks/navigation/editor-rtl.css`	2.26 kB
`build/block-library/blocks/navigation/editor.css`	2.26 kB
`build/block-library/blocks/navigation/style-rtl.css`	2.25 kB
`build/block-library/blocks/navigation/style.css`	2.23 kB
`build/block-library/blocks/navigation/view.min.js`	1.01 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	401 B
`build/block-library/blocks/page-list/editor.css`	401 B
`build/block-library/blocks/page-list/style-rtl.css`	175 B
`build/block-library/blocks/page-list/style.css`	175 B
`build/block-library/blocks/paragraph/editor-rtl.css`	235 B
`build/block-library/blocks/paragraph/editor.css`	235 B
`build/block-library/blocks/paragraph/style-rtl.css`	335 B
`build/block-library/blocks/paragraph/style.css`	335 B
`build/block-library/blocks/post-author/style-rtl.css`	175 B
`build/block-library/blocks/post-author/style.css`	176 B
`build/block-library/blocks/post-comments-form/editor-rtl.css`	96 B
`build/block-library/blocks/post-comments-form/editor.css`	96 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	508 B
`build/block-library/blocks/post-comments-form/style.css`	508 B
`build/block-library/blocks/post-date/style-rtl.css`	61 B
`build/block-library/blocks/post-date/style.css`	61 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	71 B
`build/block-library/blocks/post-excerpt/editor.css`	71 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	141 B
`build/block-library/blocks/post-excerpt/style.css`	141 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	588 B
`build/block-library/blocks/post-featured-image/editor.css`	586 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	322 B
`build/block-library/blocks/post-featured-image/style.css`	322 B
`build/block-library/blocks/post-navigation-link/style-rtl.css`	215 B
`build/block-library/blocks/post-navigation-link/style.css`	214 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	314 B
`build/block-library/blocks/post-template/style.css`	314 B
`build/block-library/blocks/post-terms/style-rtl.css`	96 B
`build/block-library/blocks/post-terms/style.css`	96 B
`build/block-library/blocks/post-time-to-read/style-rtl.css`	69 B
`build/block-library/blocks/post-time-to-read/style.css`	69 B
`build/block-library/blocks/post-title/style-rtl.css`	100 B
`build/block-library/blocks/post-title/style.css`	100 B
`build/block-library/blocks/preformatted/style-rtl.css`	125 B
`build/block-library/blocks/preformatted/style.css`	125 B
`build/block-library/blocks/pullquote/editor-rtl.css`	135 B
`build/block-library/blocks/pullquote/editor.css`	135 B
`build/block-library/blocks/pullquote/style-rtl.css`	335 B
`build/block-library/blocks/pullquote/style.css`	335 B
`build/block-library/blocks/pullquote/theme-rtl.css`	168 B
`build/block-library/blocks/pullquote/theme.css`	168 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	288 B
`build/block-library/blocks/query-pagination/style.css`	284 B
`build/block-library/blocks/query-title/style-rtl.css`	63 B
`build/block-library/blocks/query-title/style.css`	63 B
`build/block-library/blocks/query/editor-rtl.css`	486 B
`build/block-library/blocks/query/editor.css`	486 B
`build/block-library/blocks/query/style-rtl.css`	375 B
`build/block-library/blocks/query/style.css`	372 B
`build/block-library/blocks/query/view.min.js`	609 B
`build/block-library/blocks/quote/style-rtl.css`	222 B
`build/block-library/blocks/quote/style.css`	222 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	149 B
`build/block-library/blocks/rss/editor.css`	149 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	184 B
`build/block-library/blocks/search/editor.css`	184 B
`build/block-library/blocks/search/style-rtl.css`	604 B
`build/block-library/blocks/search/style.css`	604 B
`build/block-library/blocks/search/theme-rtl.css`	114 B
`build/block-library/blocks/search/theme.css`	114 B
`build/block-library/blocks/search/view.min.js`	471 B
`build/block-library/blocks/separator/editor-rtl.css`	146 B
`build/block-library/blocks/separator/editor.css`	146 B
`build/block-library/blocks/separator/style-rtl.css`	234 B
`build/block-library/blocks/separator/style.css`	234 B
`build/block-library/blocks/separator/theme-rtl.css`	194 B
`build/block-library/blocks/separator/theme.css`	194 B
`build/block-library/blocks/shortcode/editor-rtl.css`	329 B
`build/block-library/blocks/shortcode/editor.css`	329 B
`build/block-library/blocks/site-logo/editor-rtl.css`	760 B
`build/block-library/blocks/site-logo/editor.css`	760 B
`build/block-library/blocks/site-logo/style-rtl.css`	204 B
`build/block-library/blocks/site-logo/style.css`	204 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	116 B
`build/block-library/blocks/site-title/editor.css`	116 B
`build/block-library/blocks/site-title/style-rtl.css`	57 B
`build/block-library/blocks/site-title/style.css`	57 B
`build/block-library/blocks/social-link/editor-rtl.css`	184 B
`build/block-library/blocks/social-link/editor.css`	184 B
`build/block-library/blocks/social-links/editor-rtl.css`	682 B
`build/block-library/blocks/social-links/editor.css`	681 B
`build/block-library/blocks/social-links/style-rtl.css`	1.45 kB
`build/block-library/blocks/social-links/style.css`	1.45 kB
`build/block-library/blocks/spacer/editor-rtl.css`	359 B
`build/block-library/blocks/spacer/editor.css`	359 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	432 B
`build/block-library/blocks/table/editor.css`	432 B
`build/block-library/blocks/table/style-rtl.css`	646 B
`build/block-library/blocks/table/style.css`	645 B
`build/block-library/blocks/table/theme-rtl.css`	157 B
`build/block-library/blocks/table/theme.css`	157 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	251 B
`build/block-library/blocks/tag-cloud/style.css`	253 B
`build/block-library/blocks/template-part/editor-rtl.css`	403 B
`build/block-library/blocks/template-part/editor.css`	403 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/term-description/style-rtl.css`	111 B
`build/block-library/blocks/term-description/style.css`	111 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	99 B
`build/block-library/blocks/verse/style.css`	99 B
`build/block-library/blocks/video/editor-rtl.css`	552 B
`build/block-library/blocks/video/editor.css`	555 B
`build/block-library/blocks/video/style-rtl.css`	191 B
`build/block-library/blocks/video/style.css`	191 B
`build/block-library/blocks/video/theme-rtl.css`	139 B
`build/block-library/blocks/video/theme.css`	139 B
`build/block-library/classic-rtl.css`	179 B
`build/block-library/classic.css`	179 B
`build/block-library/common-rtl.css`	1.11 kB
`build/block-library/common.css`	1.11 kB
`build/block-library/editor-elements-rtl.css`	75 B
`build/block-library/editor-elements.css`	75 B
`build/block-library/editor-rtl.css`	12.2 kB
`build/block-library/editor.css`	12.2 kB
`build/block-library/elements-rtl.css`	54 B
`build/block-library/elements.css`	54 B
`build/block-library/index.min.js`	207 kB
`build/block-library/reset-rtl.css`	472 B
`build/block-library/reset.css`	472 B
`build/block-library/style-rtl.css`	14 kB
`build/block-library/style.css`	14 kB
`build/block-library/theme-rtl.css`	700 B
`build/block-library/theme.css`	705 B
`build/block-serialization-default-parser/index.min.js`	1.13 kB
`build/block-serialization-spec-parser/index.min.js`	2.87 kB
`build/blocks/index.min.js`	51.5 kB
`build/commands/index.min.js`	15.5 kB
`build/commands/style-rtl.css`	947 B
`build/commands/style.css`	942 B
`build/components/index.min.js`	246 kB
`build/components/style-rtl.css`	11.8 kB
`build/components/style.css`	11.8 kB
`build/compose/index.min.js`	12.7 kB
`build/core-commands/index.min.js`	2.62 kB
`build/core-data/index.min.js`	70.5 kB
`build/customize-widgets/index.min.js`	12 kB
`build/customize-widgets/style-rtl.css`	1.51 kB
`build/customize-widgets/style.css`	1.5 kB
`build/data-controls/index.min.js`	651 B
`build/data/index.min.js`	8.87 kB
`build/date/index.min.js`	17.9 kB
`build/deprecated/index.min.js`	462 B
`build/dom-ready/index.min.js`	336 B
`build/dom/index.min.js`	4.68 kB
`build/edit-post/classic-rtl.css`	571 B
`build/edit-post/classic.css`	571 B
`build/edit-post/index.min.js`	35.6 kB
`build/edit-post/style-rtl.css`	7.92 kB
`build/edit-post/style.css`	7.91 kB
`build/edit-site/index.min.js`	185 kB
`build/edit-site/style-rtl.css`	14 kB
`build/edit-site/style.css`	14 kB
`build/edit-widgets/index.min.js`	17 kB
`build/edit-widgets/style-rtl.css`	4.84 kB
`build/edit-widgets/style.css`	4.84 kB
`build/editor/index.min.js`	45.9 kB
`build/editor/style-rtl.css`	3.58 kB
`build/editor/style.css`	3.58 kB
`build/element/index.min.js`	4.87 kB
`build/escape-html/index.min.js`	548 B
`build/format-library/index.min.js`	7.75 kB
`build/format-library/style-rtl.css`	577 B
`build/format-library/style.css`	577 B
`build/hooks/index.min.js`	1.57 kB
`build/html-entities/index.min.js`	454 B
`build/i18n/index.min.js`	3.61 kB
`build/interactivity/index.min.js`	11.4 kB
`build/is-shallow-equal/index.min.js`	535 B
`build/keyboard-shortcuts/index.min.js`	1.74 kB
`build/keycodes/index.min.js`	1.9 kB
`build/list-reusable-blocks/index.min.js`	2.2 kB
`build/list-reusable-blocks/style-rtl.css`	865 B
`build/list-reusable-blocks/style.css`	865 B
`build/media-utils/index.min.js`	2.92 kB
`build/notices/index.min.js`	964 B
`build/nux/index.min.js`	2 kB
`build/nux/style-rtl.css`	775 B
`build/nux/style.css`	771 B
`build/patterns/index.min.js`	3.56 kB
`build/patterns/style-rtl.css`	325 B
`build/patterns/style.css`	325 B
`build/plugins/index.min.js`	1.8 kB
`build/preferences-persistence/index.min.js`	1.85 kB
`build/preferences/index.min.js`	1.25 kB
`build/primitives/index.min.js`	994 B
`build/priority-queue/index.min.js`	1.52 kB
`build/private-apis/index.min.js`	972 B
`build/react-i18n/index.min.js`	624 B
`build/react-refresh-entry/index.min.js`	9.46 kB
`build/react-refresh-runtime/index.min.js`	6.78 kB
`build/redux-routine/index.min.js`	2.71 kB
`build/reusable-blocks/index.min.js`	2.72 kB
`build/reusable-blocks/style-rtl.css`	265 B
`build/reusable-blocks/style.css`	265 B
`build/rich-text/index.min.js`	10.2 kB
`build/router/index.min.js`	1.78 kB
`build/server-side-render/index.min.js`	1.95 kB
`build/shortcode/index.min.js`	1.4 kB
`build/style-engine/index.min.js`	1.98 kB
`build/token-list/index.min.js`	587 B
`build/url/index.min.js`	3.84 kB
`build/vendors/inert-polyfill.min.js`	2.48 kB
`build/vendors/react-dom.min.js`	41.8 kB
`build/vendors/react.min.js`	4.02 kB
`build/viewport/index.min.js`	968 B
`build/warning/index.min.js`	259 B
`build/widgets/index.min.js`	7.17 kB
`build/widgets/style-rtl.css`	1.18 kB
`build/widgets/style.css`	1.18 kB
`build/wordcount/index.min.js`	1.03 kB

_{compressed-size-action}

fluiddot · 2023-09-13T17:13:55Z

@osullivanchris I've shared some screenshots and video captures in the PR. Let me know if you have any feedback regarding design and copy, thanks 🙇 !

osullivanchris · 2023-09-14T10:18:10Z

@fluiddot looks good. Nice job!

dcalhoun

Well done! Thank you for identifying a useful resolution to this crash.

I left several comments for consideration. Additionally, I noted that one can change the background color, text color, and alignment of these blocks. Only the first of those three results in a visual change. Is this expected? Should we disable those controls? Is it confusing? Does it matter? I'm not sure. 🤔

packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js

packages/block-editor/src/components/block-fallback-web-version/style.native.scss

packages/block-editor/src/components/index.native.js

packages/block-editor/src/components/block-fallback-web-version/index.native.js

Co-authored-by: David Calhoun <github@davidcalhoun.me>

fluiddot · 2023-09-15T15:12:19Z

Well done! Thank you for identifying a useful resolution to this crash.

I left several comments for consideration. Additionally, I noted that one can change the background color, text color, and alignment of these blocks. Only the first of those three results in a visual change. Is this expected? Should we disable those controls? Is it confusing? Does it matter? I'm not sure. 🤔

Good question. The warning limit is displayed within the block's content, so the rest of the block settings, like the toolbar buttons, are still present. I don't have a strong opinion on whether we should disable the settings. However, if we'd like to allow the user to still edit the block, even though some of them won't have a visual change, maybe it makes sense to keep them. Besides, those changes would be reflected when editing the block via UBE or in case the block is ungrouped.

ios-nested-blocks-block-settings.mp4

UPDATE:

[...] Besides, those changes would be reflected when editing the block via UBE or in case the block is ungrouped.

Seems that changes to block settings are not propagated (at least the text color) when ungrouping a block. I checked this behavior in the web version and it can also be reproduced there.

dcalhoun · 2023-09-15T15:18:06Z

I don't have a strong opinion on whether we should disable the settings. However, if we'd like to allow the user to still edit the block, even though some of them won't have a visual change, maybe it makes sense to keep them.

Given this is somewhat of an edge case within an edge case, I feel comfortable leaving the implementation as-is. It could cause some confusion, but it is not destructive in any way.

`MAX_NESTING_DEPTH` has been moved to the constants file.

fluiddot · 2023-09-25T12:05:00Z

@dcalhoun I addressed the feedback from the review and generated new installable builds. Let me know if you could take another look.

I also added two new WP hooks to allow GBM edit the messaging based on the UBE's availability (6e64270, 167418f).

Simple site	Self-hosted without Jetpack	Self-hosted with Jetpack

dcalhoun

🚀 I verified the test plan succeeds. Thank you for improving this experience.

dcalhoun · 2023-09-25T15:00:25Z

We should likely add a release note.

fluiddot · 2023-09-25T16:20:46Z

We should likely add a release note.

Good point. I'll add an entry to the changelog and release notes before merging the PR.

…-solution

github-actions · 2023-09-25T17:52:02Z

Flaky tests detected in 3b5c09a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6302497204
📝 Reported issues:

[Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js

…-solution

Prevent rendering deeply nested block list

0c8b6d6

fluiddot added Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) Mobile App - Automation Label used to initiate Mobile App PR Automation labels Sep 12, 2023

fluiddot self-assigned this Sep 12, 2023

wpmobilebot mentioned this pull request Sep 12, 2023

Limit inner blocks nesting depth to avoid call stack size exceeded crash wordpress-mobile/gutenberg-mobile#6191

Merged

fluiddot added the [Type] Bug An existing feature does not function as intended label Sep 12, 2023

fluiddot added 3 commits September 13, 2023 18:54

Add BlockFallbackWebVersion component

0cde414

Add WarningMaxDepthExceeded component

d61890b

Add max depth warning in inner blocks component

e028e9a

fluiddot force-pushed the rnmobile/fix/call-stack-size-exceeded-limit-solution branch from f9891cf to e028e9a Compare September 13, 2023 16:55

fluiddot marked this pull request as ready for review September 13, 2023 17:03

fluiddot requested review from dcalhoun, SiobhyB and geriux September 13, 2023 17:12

dcalhoun reviewed Sep 14, 2023

View reviewed changes

Update title of max depth exceeded warning

0f4637c

Co-authored-by: David Calhoun <github@davidcalhoun.me>

fluiddot added 9 commits September 15, 2023 17:18

Update description of max depth exceeded warning

df993f8

Add constants file to InnerBlocks component

a4fc872

`MAX_NESTING_DEPTH` has been moved to the constants file.

Revert BlockFallbackWebVersion export

4ae212b

Rename BlockFallbackWebVersion component to UnsupportedBlockDetails

053a2c8

Rename UnsupportedBlockDetails styles

4c645ac

Update default web editor action label via WP hooks

6e64270

Allow inserting extra notes to description via WP hooks

167418f

Extract UBE settings fetch to a hook

8195aff

Update description of max depth exceeded warning based on UBE support

87fbea6

fluiddot requested a review from dcalhoun September 25, 2023 12:05

dcalhoun approved these changes Sep 25, 2023

View reviewed changes

fluiddot added 2 commits September 25, 2023 19:00

Merge branch 'trunk' into rnmobile/fix/call-stack-size-exceeded-limit…

7004cae

…-solution

Update react-native-editor changelog

3b5c09a

Merge branch 'trunk' into rnmobile/fix/call-stack-size-exceeded-limit…

cb994d0

…-solution

fluiddot enabled auto-merge (squash) September 26, 2023 07:49

fluiddot merged commit 66388b0 into trunk Sep 26, 2023
50 checks passed

fluiddot deleted the rnmobile/fix/call-stack-size-exceeded-limit-solution branch September 26, 2023 08:30

github-actions bot added this to the Gutenberg 16.8 milestone Sep 26, 2023

twstokes mentioned this pull request Sep 26, 2023

Native Mobile current focus areas #38407

Closed

derekblank mentioned this pull request Sep 28, 2023

Release 1.105.0 wordpress-mobile/gutenberg-mobile#6243

Merged

4 tasks

fluiddot mentioned this pull request Oct 6, 2023

[RNMobile] Use UnsupportedBlockDetails component in Missing block #55133

Merged

fluiddot mentioned this pull request Oct 31, 2023

Ungroup option displayed in deeply nested block warning doesn't work properly #55738

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash #54382

[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash #54382

fluiddot commented Sep 12, 2023 •

edited

Loading

github-actions bot commented Sep 12, 2023 •

edited

Loading

fluiddot commented Sep 13, 2023

osullivanchris commented Sep 14, 2023

dcalhoun left a comment

fluiddot commented Sep 15, 2023 •

edited

Loading

dcalhoun commented Sep 15, 2023

fluiddot commented Sep 25, 2023

dcalhoun left a comment

dcalhoun commented Sep 25, 2023

fluiddot commented Sep 25, 2023

github-actions bot commented Sep 25, 2023 •

edited

Loading

	const nestingLevel = useSelect(
	( select ) => {
	return select( blockEditorStore ).getBlockParents( clientId )
	?.length;
	},
	[ clientId ]
	);
	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
	return <WarningMaxDepthExceeded clientId={ clientId } />;
	}

[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash #54382

[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash #54382

Conversation

fluiddot commented Sep 12, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

The warning IS NOT displayed when NOT exceeding the threshold

The warning IS displayed when exceeding the limit

Option for editing using the web editor is not present in self-hosted sites without Jetpack

Self-hosted site with Jetpack

Unsupported Block Editing

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Sep 12, 2023 • edited Loading

fluiddot commented Sep 13, 2023

osullivanchris commented Sep 14, 2023

dcalhoun left a comment

Choose a reason for hiding this comment

fluiddot commented Sep 15, 2023 • edited Loading

dcalhoun commented Sep 15, 2023

fluiddot commented Sep 25, 2023

dcalhoun left a comment

Choose a reason for hiding this comment

dcalhoun commented Sep 25, 2023

fluiddot commented Sep 25, 2023

github-actions bot commented Sep 25, 2023 • edited Loading

fluiddot commented Sep 12, 2023 •

edited

Loading

github-actions bot commented Sep 12, 2023 •

edited

Loading

fluiddot commented Sep 15, 2023 •

edited

Loading

github-actions bot commented Sep 25, 2023 •

edited

Loading