[RNMobile] Page Template Picker UI Improvements (#19307)

* RNMobile - Page template picker: styles and icons, scroll and accessibility text

* Update Page templates picker for web

* RNMobile - Layout template picker: accessibility hint added

* RNMobile - Layout template picker: style improvements, removed unneeded icons

* Page layout picker: remove Icon dependency

packages/block-editor/src/components/page-template-picker/button.js

@@ -5,13 +5,14 @@ import { Button } from '@wordpress/components';
 
 const PickerButton = ( props ) => {
 	const {
+		icon,
 		label,
 		onPress,
 	} = props;
 
 	return (
 		<Button onClick={ onPress }>
-			{ label }
+			{ icon } { label }
 		</Button>
 	);
 };

packages/block-editor/src/components/page-template-picker/button.native.js

@@ -1,20 +1,40 @@
 /**
  * External dependencies
  */
-import { Button } from 'react-native';
+import { TouchableOpacity, Text } from 'react-native';
 
-const PickerButton = ( props ) => {
-	const {
-		label,
-		onPress,
-	} = props;
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const PickerButton = ( {
+	icon,
+	label,
+	onPress,
+	getStylesFromColorScheme,
+} ) => {
+	const butonStyles = getStylesFromColorScheme( styles.button, styles.buttonDark );
+	const butonTextStyles = getStylesFromColorScheme( styles.buttonText, styles.buttonTextDark );
 
 	return (
-		<Button
+		<TouchableOpacity
+			accessibilityLabel={ label }
+			accessibilityHint={ __( 'Double tap to select layout' ) }
+			activeOpacity={ 0.7 }
 			onPress={ onPress }
-			title={ label }
-		/>
+			style={ butonStyles }
+		>
+			<Text style={ styles.buttonIcon }>{ icon }</Text>
+			<Text style={ butonTextStyles }>{ label }</Text>
+		</TouchableOpacity>
 	);
 };
 
-export default PickerButton;
+export default withPreferredColorScheme( PickerButton );

packages/block-editor/src/components/page-template-picker/container.js

@@ -1,8 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import __experimentalBlockListFooter from '../block-list-footer';
+
 const Container = ( { children } ) => {
 	return (
-		<>
+		<__experimentalBlockListFooter>
 			{ children }
-		</>
+		</__experimentalBlockListFooter>
 	);
 };
 

packages/block-editor/src/components/page-template-picker/container.native.js

@@ -1,6 +1,26 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { ScrollView } from 'react-native';
 
-export default View;
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const Container = ( { style, children } ) => {
+	return (
+		<ScrollView
+			alwaysBounceHorizontal={ false }
+			contentContainerStyle={ styles.content }
+			horizontal={ true }
+			keyboardShouldPersistTaps="always"
+			showsHorizontalScrollIndicator={ false }
+			style={ [ styles.container, style ] }
+		>
+			{ children }
+		</ScrollView >
+	);
+};
+
+export default Container;

packages/block-editor/src/components/page-template-picker/default-templates.js

@@ -1,6 +1,6 @@
 const defaultTemplates = [
-	{ name: 'About', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing – in their own words.</p><!-- /wp:paragraph -->' },
-	{ name: 'Contact', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Let\'s talk 👋 Don\'t hesitate to reach out with the contact information below, or send a message using the form.</p><!-- /wp:paragraph -->' },
+	{ name: 'About', icon: '👋', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing – in their own words.</p><!-- /wp:paragraph -->' },
+	{ name: 'Contact', icon: '✉️', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Let\'s talk 👋 Don\'t hesitate to reach out with the contact information below, or send a message using the form.</p><!-- /wp:paragraph -->' },
 ];
 
 export default defaultTemplates;

packages/block-editor/src/components/page-template-picker/picker.js

@@ -7,24 +7,22 @@ import { withDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import __experimentalBlockListFooter from '../block-list-footer';
 import Button from './button';
 import Container from './container';
 import defaultTemplates from './default-templates';
 
 const __experimentalPageTemplatePicker = ( { templates = defaultTemplates, resetContent } ) => {
 	return (
-		<__experimentalBlockListFooter>
-			<Container style={ { flexDirection: 'row' } }>
-				{ templates.map( ( { name, content } ) => (
-					<Button
-						key={ name }
-						onPress={ () => resetContent( content ) }
-						label={ name }
-					/>
-				) ) }
-			</Container>
-		</__experimentalBlockListFooter>
+		<Container>
+			{ templates.map( ( { name, content, icon } ) => (
+				<Button
+					icon={ icon }
+					key={ name }
+					label={ name }
+					onPress={ () => resetContent( content ) }
+				/>
+			) ) }
+		</Container>
 	);
 };
 

packages/block-editor/src/components/page-template-picker/styles.native.scss

@@ -0,0 +1,36 @@
+.container {
+	margin: 10px 0;
+}
+
+.content {
+	padding: 0 12px;
+}
+
+.button {
+	background-color: rgba($black, 0.04);
+	border-radius: 20px;
+	flex-direction: row;
+	margin-right: 8px;
+	padding: 9px 18px 9px 14px;
+	align-items: center;
+}
+
+.buttonDark {
+	background-color: rgba($white, 0.08);
+}
+
+.buttonIcon {
+	margin-right: 6px;
+	font-size: 18px;
+}
+
+.buttonText {
+	color: $dark-opacity-800;
+	font-size: 14px;
+	font-weight: 600;
+	letter-spacing: 0.25px;
+}
+
+.buttonTextDark {
+	color: $light-opacity-700;
+}

packages/edit-post/src/components/layout/index.native.js

@@ -129,10 +129,10 @@ class Layout extends Component {
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
+						{ showPageTemplatePicker && <__experimentalPageTemplatePicker /> }
 						<Header />
 						<BottomSheetSettings />
 					</KeyboardAvoidingView> ) }
-				{ showPageTemplatePicker && <__experimentalPageTemplatePicker /> }
 			</SafeAreaView>
 		);
 	}