[Mobile] - BlockList - Block component refactor (#50108)

* Mobile - getMergedGlobalStyles - Update baseColors data to use only values that the editor uses

* Mobile - Refator BlockList Block component - It refactors the code to move old class component into functional component. It also uses the same approach as the web editor for with applyWithSelect and applyWithDispatch. It also updates the code to avoid nesting too many views, and updating memoized code like the mergedStyle constant

* Mobile - Block List - Block: Fix onFocus prop

* Mobile - Block Lisit - Block: Move the BlockOutline component to its own file and fix an issue where the dashed border wasn't showing for inner blocks

* Mobile - Block List - Block: Set wrapper styles for the Pressable element

* Mobile - Preformatted - Check for existing color attribute within baseColors

* Mobile - Block List - Block Invalid Warning - Fixes wrong import and adds two simple integration tests

* Mobile - BlockList - Block: Fix issue with Pressable and extra Views, this change simplifies using an extra View

* Mobile - BlockList - Block: Add missing isInnerBlockSelected prop

* Mobile - BlockList - Block: Remove unneeded mergedStyle prop

* Mobile - Block List - Block: Update hasSelectedInnerBlock selector to use the deep param

* Mobile - E2E tests - Update cover block test to use new height value after simplifying the View wrappers around blocks

* Mobile - BlockList - Block: Add missing isSelected dependency

* Mobile - BlockList - Block: Fix issue with the blockWidth value, it needs to be calculated and stored in the component's state to reflect changes

* Mobile - Device tests utils - Update some elements XPath related to recent changes in the tree structure

* Mobile - E2E tests - Update Drag & Drop test

* Mobile - E2E helpers - Update getBlockAtPosition to use the same type element for all blocks

* Mobile - E2E tests: Media blocks - restore previous cover height value to check

* Mobile - BlockList - Block: Rename isInnerBlockSelected to isDescendentBlockSelected to reflect it does a deep check

* Mobile - BlockList - BlockInvalidWarning: Update test to use setupCoreBlocks helper

* Mobile - BlockList - BlockInvalidWarning: Update test to remove Act comment and place the rest under the Assert section

* Mobile - Preformatted block - Update global styles color logic since the structure now will be always available except that then values would be undefined for non block-based themes

* Mobile - Update Changelog

packages/block-editor/src/components/block-list/block-invalid-warning.native.js

@@ -8,30 +8,38 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
+
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
 
 	const { replaceBlock } = useDispatch( blockEditorStore );
 

packages/block-editor/src/components/block-list/block-outline.native.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { alignmentHelpers } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+function BlockOutline( {
+	align,
+	blockWidth,
+	isParentSelected,
+	isSelected,
+	name,
+	screenWidth,
+} ) {
+	const { isFullWidth, isContainerRelated } = alignmentHelpers;
+	const isScreenWidthWider = blockWidth < screenWidth;
+
+	const styleSolidBorder = [
+		styles.solidBorder,
+		isFullWidth( align ) && isScreenWidthWider && styles.borderFullWidth,
+		isFullWidth( align ) &&
+			isContainerRelated( name ) &&
+			isScreenWidthWider &&
+			styles.containerBorderFullWidth,
+		usePreferredColorSchemeStyle(
+			styles.solidBorderColor,
+			styles.solidBorderColorDark
+		),
+	];
+	const styleDashedBorder = [
+		styles.dashedBorder,
+		usePreferredColorSchemeStyle(
+			styles.dashedBorderColor,
+			styles.dashedBorderColorDark
+		),
+	];
+
+	return (
+		<>
+			{ isSelected && (
+				<View pointerEvents="box-none" style={ styleSolidBorder } />
+			) }
+			{ isParentSelected && <View style={ styleDashedBorder } /> }
+		</>
+	);
+}
+
+export default BlockOutline;