[RNMobile] Add improvements to Reusable block (#30966)

These changes also cover a couple of error cases: 1. Render a reusable block inside itself 2. Render a block that doesn't exist
WordPress · Apr 29, 2021 · 959252b · 959252b
1 parent e442998
commit 959252b
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 51 deletions.
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
@@ -50,6 +50,8 @@ export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseEditorFeature } from './use-editor-feature';
+export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export { default as Warning } from './warning';
 
 export {
 	BottomSheetSettings,

diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
@@ -13,14 +13,18 @@ import {
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
+import {
+	useEntityBlockEditor,
+	useEntityProp,
+	store as coreStore,
+} from '@wordpress/core-data';
 import { BottomSheet, Icon, Disabled } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
-	BlockEditorProvider,
-	BlockList,
-	store as blockEditorStore,
+	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	InnerBlocks,
+	Warning,
 } from '@wordpress/block-editor';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { help } from '@wordpress/icons';
@@ -37,7 +41,9 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const recordArgs = [ 'postType', 'wp_block', ref ];
+	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
+		ref
+	);
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -57,30 +63,26 @@ export default function ReusableBlockEdit( {
 		styles.spinnerDark
 	);
 
-	const { reusableBlock, hasResolved, isEditing, settings } = useSelect(
+	const { hasResolved, isEditing, isMissing } = useSelect(
 		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-
+			const persistedBlock = select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_block',
+				ref
+			);
+			const hasResolvedBlock = select(
+				coreStore
+			).hasFinishedResolution( 'getEntityRecord', [
+				'postType',
+				'wp_block',
+				ref,
+			] );
 			return {
-				reusableBlock: select( coreStore ).getEditedEntityRecord(
-					...recordArgs
-				),
-				hasResolved: select( coreStore ).hasFinishedResolution(
-					'getEditedEntityRecord',
-					recordArgs
-				),
-				isSaving: select( coreStore ).isSavingEntityRecord(
-					...recordArgs
-				),
-				canUserUpdate: select( coreStore ).canUser(
-					'update',
-					'blocks',
-					ref
-				),
+				hasResolved: hasResolvedBlock,
 				isEditing: select(
 					reusableBlocksStore
 				).__experimentalIsEditingReusableBlock( clientId ),
-				settings: getSettings(),
+				isMissing: hasResolvedBlock && ! persistedBlock,
 			};
 		},
 		[ ref, clientId ]
@@ -92,6 +94,8 @@ export default function ReusableBlockEdit( {
 		{ id: ref }
 	);
 
+	const [ title ] = useEntityProp( 'postType', 'wp_block', 'title', ref );
+
 	function openSheet() {
 		setShowHelp( true );
 	}
@@ -128,49 +132,57 @@ export default function ReusableBlockEdit( {
 		);
 	}
 
-	if ( ! hasResolved ) {
+	if ( hasAlreadyRendered ) {
 		return (
-			<View style={ spinnerStyle }>
-				<ActivityIndicator animating />
-			</View>
+			<Warning
+				message={ __( 'Block cannot be rendered inside itself.' ) }
+			/>
 		);
 	}
 
-	if ( ! reusableBlock ) {
+	if ( isMissing ) {
 		return (
-			<Text>{ __( 'Block has been deleted or is unavailable.' ) }</Text>
+			<Warning
+				message={ __( 'Block has been deleted or is unavailable.' ) }
+			/>
+		);
+	}
+
+	if ( ! hasResolved ) {
+		return (
+			<View style={ spinnerStyle }>
+				<ActivityIndicator animating />
+			</View>
 		);
 	}
 
-	const { title } = reusableBlock;
 	let element = (
-		<BlockEditorProvider
-			settings={ settings }
+		<InnerBlocks
 			value={ blocks }
 			onChange={ onChange }
 			onInput={ onInput }
-		>
-			<BlockList withFooter={ false } marginHorizontal={ 0 } />
-		</BlockEditorProvider>
+		/>
 	);
 
 	if ( ! isEditing ) {
 		element = <Disabled>{ element }</Disabled>;
 	}
 
 	return (
-		<TouchableWithoutFeedback
-			disabled={ ! isSelected }
-			accessibilityLabel={ __( 'Help button' ) }
-			accessibilityRole={ 'button' }
-			accessibilityHint={ __( 'Tap here to show help' ) }
-			onPress={ openSheet }
-		>
-			<View>
-				{ isSelected && <EditTitle title={ title } /> }
-				{ element }
-				{ renderSheet() }
-			</View>
-		</TouchableWithoutFeedback>
+		<RecursionProvider>
+			<TouchableWithoutFeedback
+				disabled={ ! isSelected }
+				accessibilityLabel={ __( 'Help button' ) }
+				accessibilityRole={ 'button' }
+				accessibilityHint={ __( 'Tap here to show help' ) }
+				onPress={ openSheet }
+			>
+				<View>
+					{ isSelected && <EditTitle title={ title } /> }
+					{ element }
+					{ renderSheet() }
+				</View>
+			</TouchableWithoutFeedback>
+		</RecursionProvider>
 	);
 }
diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss
@@ -1,7 +1,7 @@
 .titleContainer {
 	flex-direction: row;
 	align-items: center;
-	padding-bottom: 12;
+	padding-bottom: 28;
 }
 
 .title {
@@ -21,7 +21,7 @@
 	position: absolute;
 	left: -$block-selected-to-content + $block-selected-border-width;
 	right: -$block-selected-to-content + $block-selected-border-width;
-	bottom: 0;
+	bottom: 16;
 }
 
 .separatorDark {