[Mobile] Update media placeholders and block outline

packages/base-styles/_colors.native.scss

@@ -31,9 +31,11 @@ $red-50: #d63638;
 // Primary Accent (Blues)
 $blue-wordpress: #0087be;
 $blue-medium: #00aadc;
+$blue-60: #055d9c;
 $blue-500: #016087;
 // Primary tint color (light)
 $blue-50: #2271b1;
+$blue-40: #1689db;
 // Primary tint color (dark)
 $blue-30: #5198d9;
 
@@ -97,6 +99,7 @@ $dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
 $dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
 $dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
 $dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
+$dark-dim: #ffffff1f; //rgba(255, 255, 255, 0.12)
 
 // Design Token colors
 $app-background: $white;

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

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+
+function BlockOutline( {
+	blockCategory,
+	hasInnerBlocks,
+	isRootList,
+	isSelected,
+	name,
+} ) {
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+	const hasBlockTextCategory =
+		blockCategory === 'text' && ! textBlockWithOutline;
+	const hasBlockMediaCategory =
+		blockCategory === 'media' ||
+		blockCategory === 'embed' ||
+		! blockCategory;
+	const shouldShowCompactOutline =
+		( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
+
+	const styleSolidBorder = [
+		styles.solidBorder,
+		usePreferredColorSchemeStyle(
+			styles.solidBorderColor,
+			styles.solidBorderColorDark
+		),
+		shouldShowCompactOutline && styles.solidBorderCompact,
+		hasBlockTextCategory && styles.solidBorderTextContent,
+	];
+
+	const shoudlShowOutline =
+		isSelected &&
+		( ( hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && hasInnerBlocks ) ||
+			( ! hasBlockTextCategory && isRootList ) ||
+			textBlockWithOutline );
+
+	return (
+		shoudlShowOutline && (
+			<View pointerEvents="box-none" style={ styleSolidBorder } />
+		)
+	);
+}
+
+export default BlockOutline;

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

@@ -35,6 +35,7 @@ import { compose, ifCondition, pure } from '@wordpress/compose';
 import BlockEdit from '../block-edit';
 import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
+import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
 import useSetting from '../use-setting';
@@ -59,15 +60,19 @@ function getWrapperProps( value, getWrapperPropsFunction ) {
 
 function BlockWrapper( {
 	accessibilityLabel,
+	blockCategory,
 	children,
 	clientId,
 	draggingClientId,
 	draggingEnabled,
+	hasInnerBlocks,
 	isDescendentBlockSelected,
+	isRootList,
 	isSelected,
 	isTouchable,
 	marginHorizontal,
 	marginVertical,
+	name,
 	onFocus,
 } ) {
 	const blockWrapperStyles = { flex: 1 };
@@ -89,6 +94,13 @@ function BlockWrapper( {
 			onPress={ onFocus }
 			style={ blockWrapperStyle }
 		>
+			<BlockOutline
+				blockCategory={ blockCategory }
+				hasInnerBlocks={ hasInnerBlocks }
+				isRootList={ isRootList }
+				isSelected={ isSelected }
+				name={ name }
+			/>
 			<BlockDraggable
 				clientId={ clientId }
 				draggingClientId={ draggingClientId }
@@ -127,9 +139,11 @@ function BlockListBlock( {
 } ) {
 	const {
 		baseGlobalStyles,
+		blockCategory,
 		blockType,
 		draggingClientId,
 		draggingEnabled,
+		hasInnerBlocks,
 		isDescendantOfParentSelected,
 		isDescendentBlockSelected,
 		isParentSelected,
@@ -146,6 +160,7 @@ function BlockListBlock( {
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 			const currentBlockType = getBlockType( name || 'core/missing' );
+			const currentBlockCategory = currentBlockType?.category;
 			const blockOrder = getBlockIndex( clientId );
 			const descendentBlockSelected = hasSelectedInnerBlock(
 				clientId,
@@ -162,13 +177,15 @@ function BlockListBlock( {
 			const selectedParents = clientId ? parents : [];
 			const descendantOfParentSelected =
 				selectedParents.includes( rootClientId );
-			const hasInnerBlocks = getBlockCount( clientId ) > 0;
+			const blockHasInnerBlocks = getBlockCount( clientId ) > 0;
 
 			// For blocks with inner blocks, we only enable the dragging in the nested
 			// blocks if any of them are selected. This way we prevent the long-press
 			// gesture from being disabled for elements within the block UI.
 			const isDraggingEnabled =
-				! hasInnerBlocks || isSelected || ! descendentBlockSelected;
+				! blockHasInnerBlocks ||
+				isSelected ||
+				! descendentBlockSelected;
 			// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
 			// will be the top in the hierarchy.
 			const currentDraggingClientId =
@@ -179,9 +196,11 @@ function BlockListBlock( {
 
 			return {
 				baseGlobalStyles: globalStylesBaseStyles,
+				blockCategory: currentBlockCategory,
 				blockType: currentBlockType,
 				draggingClientId: currentDraggingClientId,
 				draggingEnabled: isDraggingEnabled,
+				hasInnerBlocks: blockHasInnerBlocks,
 				isDescendantOfParentSelected: descendantOfParentSelected,
 				isDescendentBlockSelected: descendentBlockSelected,
 				isParentSelected: parentSelected,
@@ -279,16 +298,20 @@ function BlockListBlock( {
 	return (
 		<BlockWrapper
 			accessibilityLabel={ accessibilityLabel }
+			blockCategory={ blockCategory }
 			clientId={ clientId }
 			draggingClientId={ draggingClientId }
 			draggingEnabled={ draggingEnabled }
-			isFocused={ isFocused }
+			hasInnerBlocks={ hasInnerBlocks }
 			isDescendentBlockSelected={ isDescendentBlockSelected }
+			isFocused={ isFocused }
+			isRootList={ ! rootClientId }
 			isSelected={ isSelected }
 			isStackedHorizontally={ isStackedHorizontally }
 			isTouchable={ isTouchable }
 			marginHorizontal={ marginHorizontal }
 			marginVertical={ marginVertical }
+			name={ name }
 			onFocus={ onFocus }
 		>
 			{ () =>

packages/block-editor/src/components/block-list/block.native.scss

@@ -2,6 +2,14 @@
 	flex: 1 1 auto;
 }
 
+.solidBorderColor {
+	border-color: $blue-40;
+}
+
+.solidBorderColorDark {
+	border-color: $blue-50;
+}
+
 .dimmed {
 	opacity: $dimmed-opacity;
 }
@@ -25,6 +33,30 @@
 	min-height: 50px;
 }
 
+.solidBorder {
+	position: absolute;
+	top: -6px;
+	bottom: -6px;
+	left: -6px;
+	right: -6px;
+	border-width: 2px;
+	border-radius: 2px;
+	border-style: solid;
+	z-index: 1;
+}
+
+.solidBorderCompact {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.solidBorderTextContent {
+	left: 0;
+	right: 0;
+}
+
 .fullWidthPadding {
 	padding: $block-selected-to-content;
 }

packages/block-editor/src/components/button-block-appender/styles.native.scss

@@ -3,8 +3,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: 9px;
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: $grid-unit;
+	margin-right: $grid-unit;
 	border-radius: 4px;
 }