[RNMobile] Rounded image

packages/block-editor/src/components/block-styles/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import TokenList from '@wordpress/token-list';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
 import {
@@ -21,53 +20,9 @@ import {
 /**
  * Internal dependencies
  */
+import { getActiveStyle, replaceActiveStyle } from './utils';
 import BlockPreview from '../block-preview';
 
-/**
- * Returns the active style from the given className.
- *
- * @param {Array} styles Block style variations.
- * @param {string} className  Class name
- *
- * @return {Object?} The active style.
- */
-export function getActiveStyle( styles, className ) {
-	for ( const style of new TokenList( className ).values() ) {
-		if ( style.indexOf( 'is-style-' ) === -1 ) {
-			continue;
-		}
-
-		const potentialStyleName = style.substring( 9 );
-		const activeStyle = find( styles, { name: potentialStyleName } );
-		if ( activeStyle ) {
-			return activeStyle;
-		}
-	}
-
-	return find( styles, 'isDefault' );
-}
-
-/**
- * Replaces the active style in the block's className.
- *
- * @param {string}  className   Class name.
- * @param {Object?} activeStyle The replaced style.
- * @param {Object}  newStyle    The replacing style.
- *
- * @return {string} The updated className.
- */
-export function replaceActiveStyle( className, activeStyle, newStyle ) {
-	const list = new TokenList( className );
-
-	if ( activeStyle ) {
-		list.remove( 'is-style-' + activeStyle.name );
-	}
-
-	list.add( 'is-style-' + newStyle.name );
-
-	return list.value;
-}
-
 const useGenericPreviewBlock = ( block, type ) =>
 	useMemo(
 		() =>

packages/block-editor/src/components/block-styles/index.native.js

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { ScrollView } from 'react-native';
+import { find } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getActiveStyle, replaceActiveStyle } from './utils';
+import StylePreview from './preview';
+import containerStyles from './style.scss';
+
+function BlockStyles( { clientId, url } ) {
+	const selector = ( select ) => {
+		const { getBlock } = select( 'core/block-editor' );
+		const { getBlockStyles } = select( 'core/blocks' );
+		const block = getBlock( clientId );
+		return {
+			styles: getBlockStyles( block.name ),
+			className: block.attributes.className || '',
+		};
+	};
+
+	const { styles, className } = useSelect( selector, [ clientId ] );
+
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	if ( ! styles || styles.length === 0 ) {
+		return null;
+	}
+
+	const renderedStyles = find( styles, 'isDefault' )
+		? styles
+		: [
+				{
+					name: 'default',
+					label: _x( 'Default', 'block style' ),
+					isDefault: true,
+				},
+				...styles,
+		  ];
+
+	const activeStyle = getActiveStyle( renderedStyles, className );
+	return (
+		<ScrollView
+			horizontal
+			showsHorizontalScrollIndicator={ false }
+			contentContainerStyle={ containerStyles.content }
+		>
+			{ renderedStyles.map( ( style ) => {
+				const styleClassName = replaceActiveStyle(
+					className,
+					activeStyle,
+					style
+				);
+				const isActive = activeStyle === style;
+
+				const onStylePress = () => {
+					updateBlockAttributes( clientId, {
+						className: styleClassName,
+					} );
+				};
+
+				return (
+					<StylePreview
+						onPress={ onStylePress }
+						isActive={ isActive }
+						key={ style.name }
+						style={ style }
+						url={ url }
+					/>
+				);
+			} ) }
+		</ScrollView>
+	);
+}
+
+export default BlockStyles;

packages/block-editor/src/components/block-styles/preview.native.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import {
+	View,
+	TouchableWithoutFeedback,
+	Text,
+	Dimensions,
+	Animated,
+	Easing,
+	Image,
+} from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet } from '@wordpress/components';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const MAX_ITEM_WIDTH = 120;
+const HALF_COLUMN = 0.5;
+
+function StylePreview( { onPress, isActive, style, url } ) {
+	const [ itemWidth, setItemWidth ] = useState( MAX_ITEM_WIDTH );
+	const { label, name } = style;
+	const opacity = useRef( new Animated.Value( 1 ) ).current;
+
+	function onLayout() {
+		const columnsNum =
+			// To indicate scroll availabilty, there is a need to display additional half the column
+			Math.floor( BottomSheet.getWidth() / MAX_ITEM_WIDTH ) + HALF_COLUMN;
+		setItemWidth( BottomSheet.getWidth() / columnsNum );
+	}
+
+	useEffect( () => {
+		onLayout();
+		Dimensions.addEventListener( 'change', onLayout );
+
+		return () => {
+			Dimensions.removeEventListener( 'change', onLayout );
+		};
+	}, [] );
+
+	const labelStyle = usePreferredColorSchemeStyle(
+		styles.label,
+		styles.labelDark
+	);
+
+	const animateOutline = () => {
+		opacity.setValue( 0 );
+		Animated.timing( opacity, {
+			toValue: 1,
+			duration: 100,
+			useNativeDriver: true,
+			easing: Easing.linear,
+		} ).start();
+	};
+
+	const innerOutlineStyle = usePreferredColorSchemeStyle(
+		styles.innerOutline,
+		styles.innerOutlineDark
+	);
+
+	const getOutline = ( outlineStyles ) =>
+		outlineStyles.map( ( outlineStyle ) => {
+			return (
+				<Animated.View
+					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
+					key={ outlineStyle }
+				/>
+			);
+		} );
+
+	return (
+		<TouchableWithoutFeedback
+			onPress={ () => {
+				onPress();
+				animateOutline();
+			} }
+		>
+			<View style={ [ styles.container, { width: itemWidth } ] }>
+				<View style={ styles.imageWrapper }>
+					{ isActive &&
+						getOutline( [ styles.outline, innerOutlineStyle ] ) }
+					<Image
+						style={ [ styles.image, styles[ name ] ] }
+						source={ { uri: url } }
+					/>
+				</View>
+				<Text
+					style={ [ labelStyle, isActive && styles.labelSelected ] }
+				>
+					{ label }
+				</Text>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default StylePreview;

packages/block-editor/src/components/block-styles/style.native.scss

@@ -0,0 +1,64 @@
+$image-height: 64px;
+
+.image {
+	height: $image-height;
+}
+
+.container {
+	padding-top: $grid-unit;
+	padding-right: $grid-unit;
+}
+
+.imageWrapper {
+	height: $image-height;
+	margin-bottom: $grid-unit / 2;
+}
+
+.rounded {
+	border-radius: $image-height / 2;
+	overflow: hidden;
+}
+
+.label {
+	color: $gray-dark;
+	text-align: center;
+}
+
+.labelDark {
+	color: $white;
+}
+
+.labelSelected {
+	color: $blue-wordpress;
+}
+
+.outline {
+	border-color: $blue-wordpress;
+	border-width: $border-width;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 2;
+}
+
+.innerOutline {
+	border-color: $white;
+	border-width: $border-width * 2;
+	position: absolute;
+	top: $border-width;
+	left: $border-width;
+	right: $border-width;
+	bottom: $border-width;
+	z-index: 2;
+}
+
+.innerOutlineDark {
+	border-color: $background-dark-elevated;
+}
+
+.content {
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+}

packages/block-editor/src/components/block-styles/test/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getActiveStyle, replaceActiveStyle } from '../';
+import { getActiveStyle, replaceActiveStyle } from '../utils';
 
 describe( 'getActiveStyle', () => {
 	it( 'Should return the undefined if no active style', () => {

packages/block-editor/src/components/block-styles/utils.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import TokenList from '@wordpress/token-list';
+
+/**
+ * Returns the active style from the given className.
+ *
+ * @param {Array} styles Block style variations.
+ * @param {string} className  Class name
+ *
+ * @return {Object?} The active style.
+ */
+export function getActiveStyle( styles, className ) {
+	for ( const style of new TokenList( className ).values() ) {
+		if ( style.indexOf( 'is-style-' ) === -1 ) {
+			continue;
+		}
+
+		const potentialStyleName = style.substring( 9 );
+		const activeStyle = find( styles, { name: potentialStyleName } );
+		if ( activeStyle ) {
+			return activeStyle;
+		}
+	}
+
+	return find( styles, 'isDefault' );
+}
+
+/**
+ * Replaces the active style in the block's className.
+ *
+ * @param {string}  className   Class name.
+ * @param {Object?} activeStyle The replaced style.
+ * @param {Object}  newStyle    The replacing style.
+ *
+ * @return {string} The updated className.
+ */
+export function replaceActiveStyle( className, activeStyle, newStyle ) {
+	const list = new TokenList( className );
+
+	if ( activeStyle ) {
+		list.remove( 'is-style-' + activeStyle.name );
+	}
+
+	list.add( 'is-style-' + newStyle.name );
+
+	return list.value;
+}

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

@@ -51,6 +51,7 @@ export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
 export { default as BlockVariationPicker } from './block-variation-picker';
+export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';