[RNMobile] Performance improvements in Buttons, Image and SocialLinks related controls

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

@@ -9,6 +9,7 @@ import { find } from 'lodash';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -33,10 +34,6 @@ function BlockStyles( { clientId, url } ) {
 
 	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
 
-	if ( ! styles || styles.length === 0 ) {
-		return null;
-	}
-
 	const renderedStyles = find( styles, 'isDefault' )
 		? styles
 		: [
@@ -48,37 +45,46 @@ function BlockStyles( { clientId, url } ) {
 				...styles,
 		  ];
 
-	const activeStyle = getActiveStyle( renderedStyles, className );
+	const mappedRenderedStyles = useMemo( () => {
+		const activeStyle = getActiveStyle( renderedStyles, className );
+
+		return 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 }
+				/>
+			);
+		} );
+	}, [ renderedStyles, className, clientId ] );
+
+	if ( ! styles || styles.length === 0 ) {
+		return null;
+	}
+
 	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 }
-					/>
-				);
-			} ) }
+			{ mappedRenderedStyles }
 		</ScrollView>
 	);
 }

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

@@ -71,7 +71,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ outlineStyle }
+					key={ outlineStyle.borderColor }
 				/>
 			);
 		} );

packages/block-library/src/button/color-edit.js

@@ -7,7 +7,13 @@ import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useRef, Platform } from '@wordpress/element';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useMemo,
+	Platform,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -200,32 +206,43 @@ function ColorEdit( props ) {
 		};
 	};
 
+	const settings = useMemo( () => {
+		return [
+			{
+				label: __( 'Text Color' ),
+				onColorChange: onChangeColor( 'text' ),
+				colorValue: getColorObjectByAttributeValues(
+					colors,
+					textColor,
+					style?.color?.text
+				).color,
+			},
+			{
+				label: __( 'Background Color' ),
+				onColorChange: onChangeColor( 'background' ),
+				colorValue: getColorObjectByAttributeValues(
+					colors,
+					backgroundColor,
+					style?.color?.background
+				).color,
+				gradientValue,
+				onGradientChange: onChangeGradient,
+			},
+		];
+	}, [
+		colors,
+		textColor,
+		backgroundColor,
+		gradientValue,
+		style?.color?.text,
+		style?.color?.background,
+	] );
+
 	return (
 		<ColorPanel
 			enableContrastChecking={ ! gradient && ! style?.color?.gradient }
 			clientId={ props.clientId }
-			settings={ [
-				{
-					label: __( 'Text Color' ),
-					onColorChange: onChangeColor( 'text' ),
-					colorValue: getColorObjectByAttributeValues(
-						colors,
-						textColor,
-						style?.color?.text
-					).color,
-				},
-				{
-					label: __( 'Background Color' ),
-					onColorChange: onChangeColor( 'background' ),
-					colorValue: getColorObjectByAttributeValues(
-						colors,
-						backgroundColor,
-						style?.color?.background
-					).color,
-					gradientValue,
-					onGradientChange: onChangeGradient,
-				},
-			] }
+			settings={ settings }
 		/>
 	);
 }

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

@@ -61,6 +61,37 @@ class ButtonEdit extends Component {
 			isButtonFocused: true,
 			placeholderTextWidth: 0,
 		};
+
+		this.linkSettingsActions = [
+			{
+				label: __( 'Remove link' ),
+				onPress: this.onClearSettings,
+			},
+		];
+
+		this.linkSettingsOptions = {
+			url: {
+				label: __( 'Button Link URL' ),
+				placeholder: __( 'Add URL' ),
+				autoFocus: true,
+				autoFill: true,
+			},
+			openInNewTab: {
+				label: __( 'Open in new tab' ),
+			},
+			linkRel: {
+				label: __( 'Link Rel' ),
+				placeholder: __( 'None' ),
+			},
+		};
+
+		this.noFocusLinkSettingOptions = {
+			...this.linkSettingsOptions,
+			url: {
+				...this.linkSettingsOptions.url,
+				autoFocus: false,
+			},
+		};
 	}
 
 	componentDidMount() {
@@ -221,39 +252,22 @@ class ButtonEdit extends Component {
 	getLinkSettings( isCompatibleWithSettings ) {
 		const { isLinkSheetVisible } = this.state;
 		const { attributes, setAttributes } = this.props;
-		const actions = [
-			{
-				label: __( 'Remove link' ),
-				onPress: this.onClearSettings,
-			},
-		];
-
-		const options = {
-			url: {
-				label: __( 'Button Link URL' ),
-				placeholder: __( 'Add URL' ),
-				autoFocus: ! isCompatibleWithSettings,
-				autoFill: true,
-			},
-			openInNewTab: {
-				label: __( 'Open in new tab' ),
-			},
-			linkRel: {
-				label: __( 'Link Rel' ),
-				placeholder: __( 'None' ),
-			},
-		};
-
 		return (
 			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
-				attributes={ attributes }
+				url={ attributes.url }
+				rel={ attributes.rel }
+				linkTarget={ attributes.linkTarget }
 				onClose={ this.dismissSheet }
 				setAttributes={ setAttributes }
 				withBottomSheet={ ! isCompatibleWithSettings }
 				hasPicker
-				actions={ actions }
-				options={ options }
+				actions={ this.linkSettingsActions }
+				options={
+					isCompatibleWithSettings
+						? this.linkSettingsOptions
+						: this.noFocusLinkSettingOptions
+				}
 				showIcon={ ! isCompatibleWithSettings }
 			/>
 		);
@@ -392,35 +406,35 @@ class ButtonEdit extends Component {
 				</ColorBackground>
 
 				{ isSelected && (
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								title={ __( 'Edit link' ) }
-								icon={ link }
-								onClick={ this.onShowLinkSettings }
-								isActive={ url }
-							/>
-						</ToolbarGroup>
-					</BlockControls>
+					<>
+						<BlockControls>
+							<ToolbarGroup>
+								<ToolbarButton
+									title={ __( 'Edit link' ) }
+									icon={ link }
+									onClick={ this.onShowLinkSettings }
+									isActive={ url }
+								/>
+							</ToolbarGroup>
+						</BlockControls>
+						{ this.getLinkSettings( false ) }
+						<ColorEdit { ...this.props } />
+						<InspectorControls>
+							<PanelBody title={ __( 'Border Settings' ) }>
+								<RangeControl
+									label={ __( 'Border Radius' ) }
+									minimumValue={ MIN_BORDER_RADIUS_VALUE }
+									maximumValue={ MAX_BORDER_RADIUS_VALUE }
+									value={ borderRadiusValue }
+									onChange={ this.onChangeBorderRadius }
+								/>
+							</PanelBody>
+							<PanelBody title={ __( 'Link Settings' ) }>
+								{ this.getLinkSettings( true ) }
+							</PanelBody>
+						</InspectorControls>
+					</>
 				) }
-
-				{ this.getLinkSettings( false ) }
-
-				<ColorEdit { ...this.props } />
-				<InspectorControls>
-					<PanelBody title={ __( 'Border Settings' ) }>
-						<RangeControl
-							label={ __( 'Border Radius' ) }
-							minimumValue={ MIN_BORDER_RADIUS_VALUE }
-							maximumValue={ MAX_BORDER_RADIUS_VALUE }
-							value={ borderRadiusValue }
-							onChange={ this.onChangeBorderRadius }
-						/>
-					</PanelBody>
-					<PanelBody title={ __( 'Link Settings' ) }>
-						{ this.getLinkSettings( true ) }
-					</PanelBody>
-				</InspectorControls>
 			</View>
 		);
 	}

packages/block-library/src/buttons/content-justification-dropdown.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { DropdownMenu } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
 
@@ -44,21 +45,25 @@ export default function ContentJustificationDropdown( {
 	toggleProps,
 	value,
 } ) {
+	const controls = useMemo( () => {
+		return allowedValues.map( ( allowedValue ) => {
+			return {
+				...CONTROLS[ allowedValue ],
+				isActive: value === allowedValue,
+				role: 'menuitemradio',
+				onClick: () =>
+					onChange(
+						value === allowedValue ? undefined : allowedValue
+					),
+			};
+		} );
+	}, [ allowedValues, value, onChange ] );
+
 	return (
 		<DropdownMenu
 			icon={ CONTROLS[ value ]?.icon ?? DEFAULT_ICON }
 			label={ __( 'Change content justification' ) }
-			controls={ allowedValues.map( ( allowedValue ) => {
-				return {
-					...CONTROLS[ allowedValue ],
-					isActive: value === allowedValue,
-					role: 'menuitemradio',
-					onClick: () =>
-						onChange(
-							value === allowedValue ? undefined : allowedValue
-						),
-				};
-			} ) }
+			controls={ controls }
 			toggleProps={ toggleProps }
 		/>
 	);