[Mobile] Move unselected block accessibility handling to block-holder (v2)

packages/block-library/src/heading/edit.native.js

@@ -8,93 +8,64 @@ import styles from './editor.scss';
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { RichText, BlockControls } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { create } from '@wordpress/rich-text';
 
-class HeadingEdit extends Component {
-	plainTextContent( html ) {
-		const result = create( { html } );
-		if ( result ) {
-			return result.text;
-		}
-		return '';
-	}
+const HeadingEdit = ( {
+	attributes: {
+		level,
+		placeholder,
+		content,
+	},
+	insertBlocksAfter,
+	isSelected,
+	mergeBlocks,
+	onFocus,
+	onBlur,
+	setAttributes,
+	style,
+} ) => (
+	<View onAccessibilityTap={ onFocus }>
+		<BlockControls>
+			<HeadingToolbar
+				minLevel={ 2 }
+				maxLevel={ 5 }
+				selectedLevel={ level }
+				onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) }
+			/>
+		</BlockControls>
+		<RichText
+			identifier="content"
+			tagName={ 'h' + level }
+			value={ content }
+			isSelected={ isSelected }
+			style={ {
+				...style,
+				minHeight: styles[ 'wp-block-heading' ].minHeight,
+			} }
+			onFocus={ onFocus } // always assign onFocus as a props
+			onBlur={ onBlur } // always assign onBlur as a props
+			onChange={ ( value ) => setAttributes( { content: value } ) }
+			onMerge={ mergeBlocks }
+			unstableOnSplit={
+				insertBlocksAfter ?
+					( before, after, ...blocks ) => {
+						setAttributes( { content: before } );
+						insertBlocksAfter( [
+							...blocks,
+							createBlock( 'core/paragraph', { content: after } ),
+						] );
+					} :
+					undefined
+			}
+			placeholder={ placeholder || __( 'Write heading…' ) }
+		/>
+	</View>
+);
 
-	render() {
-		const {
-			attributes,
-			insertBlocksAfter,
-			setAttributes,
-			mergeBlocks,
-			style,
-		} = this.props;
-
-		const {
-			level,
-			placeholder,
-			content,
-		} = attributes;
-
-		const tagName = 'h' + level;
-
-		return (
-			<View
-				accessible={ ! this.props.isSelected }
-				accessibilityLabel={
-					isEmpty( content ) ?
-						sprintf(
-							/* translators: accessibility text. %s: heading level. */
-							__( 'Heading block. Level %s. Empty.' ),
-							level
-						) :
-						sprintf(
-							/* translators: accessibility text. 1: heading level. 2: heading content. */
-							__( 'Heading block. Level %1$s. %2$s' ),
-							level,
-							this.plainTextContent( content )
-						)
-				}
-				onAccessibilityTap={ this.props.onFocus }
-			>
-				<BlockControls>
-					<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
-				</BlockControls>
-				<RichText
-					identifier="content"
-					tagName={ tagName }
-					value={ content }
-					isSelected={ this.props.isSelected }
-					style={ {
-						...style,
-						minHeight: styles[ 'wp-block-heading' ].minHeight,
-					} }
-					onFocus={ this.props.onFocus } // always assign onFocus as a props
-					onBlur={ this.props.onBlur } // always assign onBlur as a props
-					onChange={ ( value ) => setAttributes( { content: value } ) }
-					onMerge={ mergeBlocks }
-					unstableOnSplit={
-						insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
-								insertBlocksAfter( [
-									...blocks,
-									createBlock( 'core/paragraph', { content: after } ),
-								] );
-							} :
-							undefined
-					}
-					placeholder={ placeholder || __( 'Write heading…' ) }
-				/>
-			</View>
-		);
-	}
-}
 export default HeadingEdit;

packages/block-library/src/heading/index.native.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { create } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { content, level } = attributes;
+
+		const plainTextContent = ( html ) => create( { html } ).text || '';
+
+		return isEmpty( content ) ?
+			sprintf(
+				/* translators: accessibility text. %s: heading level. */
+				__( 'Level %s. Empty.' ),
+				level
+			) :
+			sprintf(
+				/* translators: accessibility text. 1: heading level. 2: heading content. */
+				__( 'Level %1$s. %2$s' ),
+				level,
+				plainTextContent( content )
+			);
+	},
+};

packages/block-library/src/image/edit.native.js

@@ -229,14 +229,6 @@ class ImageEdit extends React.Component {
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
-
-				accessibilityLabel={ sprintf(
-					/* translators: accessibility text. 1: image alt text. 2: image caption. */
-					__( 'Image block. %1$s. %2$s' ),
-					alt,
-					caption
-				) }
-				accessibilityRole={ 'button' }
 				onPress={ this.onImagePressed }
 				disabled={ ! isSelected }
 			>

packages/block-library/src/image/index.native.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { caption, alt, url } = attributes;
+
+		if ( ! url ) {
+			return __( 'Empty' );
+		}
+
+		if ( ! alt ) {
+			return caption || '';
+		}
+
+		// This is intended to be read by a screen reader.
+		// A period simply means a pause, no need to translate it.
+		return alt + ( caption ? '. ' + caption : '' );
+	},
+};

packages/block-library/src/paragraph/edit.native.js

@@ -2,16 +2,14 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
-import { create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -83,14 +81,6 @@ class ParagraphEdit extends Component {
 		) ) );
 	}
 
-	plainTextContent( html ) {
-		const result = create( { html } );
-		if ( result ) {
-			return result.text;
-		}
-		return '';
-	}
-
 	render() {
 		const {
 			attributes,
@@ -105,20 +95,7 @@ class ParagraphEdit extends Component {
 		} = attributes;
 
 		return (
-			<View
-				accessible={ ! this.props.isSelected }
-				accessibilityLabel={
-					isEmpty( content ) ?
-						/* translators: accessibility text. empty paragraph block. */
-						__( 'Paragraph block. Empty' ) :
-						sprintf(
-							/* translators: accessibility text. %s: text content of the paragraph block. */
-							__( 'Paragraph block. %s' ),
-							this.plainTextContent( content )
-						)
-				}
-				onAccessibilityTap={ this.props.onFocus }
-			>
+			<View>
 				<RichText
 					identifier="content"
 					tagName="p"

packages/block-library/src/paragraph/index.native.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { create } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { content } = attributes;
+
+		const plainTextContent = ( html ) => create( { html } ).text || '';
+
+		return isEmpty( content ) ? __( 'Empty' ) : plainTextContent( content );
+	},
+};