[RNMobile] performance improvements (#27446)

* remove console logs for production builds

* fix button select

* Add useMemo to BlockVariations

* add check in the layout component

* remove cascadeu update in rich-text

* update columns only if needed

* Do not update link attributes if not needed

* add fix for sidebar opened prop

* update package-lock.json

* fix columns settings issue

package.json

@@ -145,6 +145,7 @@
  "babel-plugin-inline-json-import": "0.3.2",
  "babel-plugin-react-native-classname-to-style": "1.2.2",
  "babel-plugin-react-native-platform-specific-extensions": "1.1.1",
+ "babel-plugin-transform-remove-console": "6.9.4",
  "benchmark": "2.1.4",
  "browserslist": "4.15.0",
  "chalk": "4.0.0",

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

@@ -382,16 +382,14 @@ export default compose( [
  const { maxWidth } = getSettings();
  const isReadOnly = getSettings().readOnly;
 
- const blockCount = getBlockCount( rootBlockId );
-
  const rootBlockId = getBlockHierarchyRootClientId(
  selectedBlockClientId
  );
+ const blockCount = getBlockCount( rootBlockId );
  const hasRootInnerBlocks = !! blockCount;
 
  const isFloatingToolbarVisible =
  !! selectedBlockClientId && hasRootInnerBlocks;
-
  return {
  blockClientIds,
  blockCount,

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

@@ -77,38 +77,41 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
  onClose();
  };
 
- return (
- <BottomSheet
- isVisible={ isVisible }
- onClose={ onClose }
- title={ __( 'Select a layout' ) }
- contentStyle={ styles.contentStyle }
- leftButton={ leftButton }
- >
- <ScrollView
- horizontal
- showsHorizontalScrollIndicator={ false }
- contentContainerStyle={ styles.contentContainerStyle }
- style={ styles.containerStyle }
+ return useMemo(
+ () => (
+ <BottomSheet
+ isVisible={ isVisible }
+ onClose={ onClose }
+ title={ __( 'Select a layout' ) }
+ contentStyle={ styles.contentStyle }
+ leftButton={ leftButton }
  >
- { variations.map( ( v ) => {
- return (
- <InserterButton
- item={ v }
- key={ v.name }
- onSelect={ () => onVariationSelect( v ) }
- />
- );
- } ) }
- </ScrollView>
- <PanelBody>
- <FooterMessageControl
- label={ __(
- 'Note: Column layout may vary between themes and screen sizes'
- ) }
- />
- </PanelBody>
- </BottomSheet>
+ <ScrollView
+ horizontal
+ showsHorizontalScrollIndicator={ false }
+ contentContainerStyle={ styles.contentContainerStyle }
+ style={ styles.containerStyle }
+ >
+ { variations.map( ( v ) => {
+ return (
+ <InserterButton
+ item={ v }
+ key={ v.name }
+ onSelect={ () => onVariationSelect( v ) }
+ />
+ );
+ } ) }
+ </ScrollView>
+ <PanelBody>
+ <FooterMessageControl
+ label={ __(
+ 'Note: Column layout may vary between themes and screen sizes'
+ ) }
+ />
+ </PanelBody>
+ </BottomSheet>
+ ),
+ [ variations, isVisible, onClose ]
  );
 }
 

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

@@ -371,7 +371,7 @@ export default compose( [
  insertionIndexAfter,
  insertionIndexStart,
  insertionIndexEnd,
- isAnyBlockSelected,
+ isAnyBlockSelected: !! isAnyBlockSelected,
  isSelectedBlockReplaceable: isSelectedUnmodifiedDefaultBlock,
  };
  } ),

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

@@ -99,10 +99,10 @@ class ButtonEdit extends Component {
  }
 
  componentDidUpdate( prevProps, prevState ) {
- const { selectedId, editorSidebarOpened, parentWidth } = this.props;
+ const { isSelected, editorSidebarOpened, parentWidth } = this.props;
  const { isLinkSheetVisible, isButtonFocused } = this.state;
 
- if ( prevProps.selectedId !== selectedId ) {
+ if ( isSelected && ! prevProps.isSelected ) {
  this.onToggleButtonFocus( true );
  }
 
@@ -123,17 +123,11 @@ class ButtonEdit extends Component {
  }
 
  if ( this.richTextRef ) {
- const selectedRichText = this.richTextRef.props.id === selectedId;
-
- if ( ! selectedRichText && isButtonFocused ) {
+ if ( ! isSelected && isButtonFocused ) {
  this.onToggleButtonFocus( false );
  }
 
- if (
- selectedRichText &&
- selectedId !== prevProps.selectedId &&
- ! isButtonFocused
- ) {
+ if ( isSelected && ! isButtonFocused ) {
  AccessibilityInfo.isScreenReaderEnabled().then( ( enabled ) => {
  if ( enabled ) {
  this.onToggleButtonFocus( true );
@@ -194,7 +188,9 @@ class ButtonEdit extends Component {
  }
 
  onToggleButtonFocus( value ) {
- this.setState( { isButtonFocused: value } );
+ if ( value !== this.state.isButtonFocused ) {
+ this.setState( { isButtonFocused: value } );
+ }
  }
 
  onClearSettings() {
@@ -444,23 +440,18 @@ export default compose( [
  withInstanceId,
  withGradient,
  withColors( 'backgroundColor', { textColor: 'color' } ),
- withSelect( ( select, { clientId } ) => {
+ withSelect( ( select, { clientId, isSelected } ) => {
  const { isEditorSidebarOpened } = select( 'core/edit-post' );
- const {
- getSelectedBlockClientId,
- getBlockCount,
- getBlockRootClientId,
- getSettings,
- } = select( 'core/block-editor' );
+ const { getBlockCount, getBlockRootClientId, getSettings } = select(
+ 'core/block-editor'
+ );
  const { maxWidth } = getSettings();
 
  const parentId = getBlockRootClientId( clientId );
- const selectedId = getSelectedBlockClientId();
  const numOfButtons = getBlockCount( parentId );
 
  return {
- selectedId,
- editorSidebarOpened: isEditorSidebarOpened(),
+ editorSidebarOpened: isSelected && isEditorSidebarOpened(),
  numOfButtons,
  maxWidth,
  };

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

@@ -11,7 +11,7 @@ import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import {
  ToolbarGroup,
  ToolbarItem,
@@ -28,6 +28,8 @@ import ContentJustificationDropdown from './content-justification-dropdown';
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
+const layoutProp = { type: 'default', alignments: [] };
+
 export default function ButtonsEdit( {
  attributes: { contentJustification, align },
  clientId,
@@ -83,20 +85,25 @@ export default function ButtonsEdit( {
  }
  }, [ sizes, align ] );
 
- const onAddNextButton = debounce( ( selectedId ) => {
- const order = getBlockOrder( clientId );
- const selectedButtonIndex = order.findIndex(
- ( i ) => i === selectedId
- );
+ const onAddNextButton = useCallback(
+ debounce( ( selectedId ) => {
+ const order = getBlockOrder( clientId );
+ const selectedButtonIndex = order.findIndex(
+ ( i ) => i === selectedId
+ );
 
- const index =
- selectedButtonIndex === -1 ? order.length + 1 : selectedButtonIndex;
+ const index =
+ selectedButtonIndex === -1
+ ? order.length + 1
+ : selectedButtonIndex;
 
- const insertedBlock = createBlock( 'core/button' );
+  const insertedBlock = createBlock( 'core/button' );
 
- insertBlock( insertedBlock, index, clientId );
- selectBlock( insertedBlock.clientId );
- }, 200 );
+ insertBlock( insertedBlock, index, clientId );
+ selectBlock( insertedBlock.clientId );
+ }, 200 ),
+ []
+ );
 
  function onChangeContentJustification( updatedValue ) {
  setAttributes( {
@@ -113,8 +120,8 @@ export default function ButtonsEdit( {
  </View>
  ) );
 
+ const remove = useCallback( () => removeBlock( clientId ), [ clientId ] );
  const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
-
  return (
  <>
  { isSelected && (
@@ -141,14 +148,12 @@ export default function ButtonsEdit( {
  }
  orientation="horizontal"
  horizontalAlignment={ contentJustification }
- onDeleteBlock={
- shouldDelete ? () => removeBlock( clientId ) : undefined
- }
+ onDeleteBlock={ shouldDelete ? remove : undefined }
  onAddBlock={ onAddNextButton }
  parentWidth={ maxWidth }
  marginHorizontal={ spacing }
  marginVertical={ spacing }
- __experimentalLayout={ { type: 'default', alignments: [] } }
+ __experimentalLayout={ layoutProp }
  templateInsertUpdatesSelection
  blockWidth={ blockWidth }
  />

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

@@ -106,7 +106,6 @@ function ColumnsEditContainer( {
  useEffect( () => {
  if ( columnCount === 0 ) {
  const newColumnCount = columnCount || DEFAULT_COLUMNS_NUM;
-
  updateColumns( columnCount, newColumnCount );
  }
  }, [] );
@@ -453,6 +452,7 @@ const ColumnsEdit = ( props ) => {
  getBlockAttributes,
  } = select( 'core/block-editor' );
  const { isEditorSidebarOpened } = select( 'core/edit-post' );
+
  const block = getBlock( clientId );
  const innerBlocks = block?.innerBlocks;
  const isContentEmpty = map(
@@ -467,7 +467,7 @@ const ColumnsEdit = ( props ) => {
  innerColumns: innerBlocks,
  hasParents: !! parents.length,
  parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
- editorSidebarOpened: isEditorSidebarOpened(),
+ editorSidebarOpened: isSelected && isEditorSidebarOpened(),
  };
  },
  [ clientId ]
@@ -481,6 +481,10 @@ const ColumnsEdit = ( props ) => {
  }
  }, [] );
 
+ const onClose = useCallback( () => {
+ setIsVisible( false );
+ }, [] );
+
  return (
  <>
  <ColumnsEditContainerWrapper
@@ -493,7 +497,7 @@ const ColumnsEdit = ( props ) => {
  />
  <BlockVariationPicker
  variations={ variations }
- onClose={ () => setIsVisible( false ) }
+ onClose={ onClose }
  clientId={ clientId }
  isVisible={ isVisible }
  />

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

@@ -583,13 +583,13 @@ export class FileEdit extends Component {
 
 export default compose( [
  withSelect( ( select, props ) => {
- const { attributes } = props;
+ const { attributes, isSelected } = props;
  const { id, href } = attributes;
  const { isEditorSidebarOpened } = select( 'core/edit-post' );
  const isNotFileHref = id && getProtocol( href ) !== 'file:';
  return {
  media: isNotFileHref ? select( 'core' ).getMedia( id ) : undefined,
- isSidebarOpened: isEditorSidebarOpened(),
+ isSidebarOpened: isSelected && isEditorSidebarOpened(),
  };
  } ),
  withDispatch( ( dispatch ) => {

packages/block-library/src/media-text/edit.native.js

@@ -396,23 +396,18 @@ export default compose(
  withSelect( ( select, { clientId } ) => {
  const {
  getSelectedBlockClientId,
- getBlockRootClientId,
  getBlockParents,
  getSettings,
  } = select( 'core/block-editor' );
 
  const parents = getBlockParents( clientId, true );
 
  const selectedBlockClientId = getSelectedBlockClientId();
- const isParentSelected =
- selectedBlockClientId &&
- selectedBlockClientId === getBlockRootClientId( clientId );
  const isAncestorSelected =
  selectedBlockClientId && parents.includes( selectedBlockClientId );
 
  return {
  isSelected: selectedBlockClientId === clientId,
- isParentSelected,
  isAncestorSelected,
  isRTL: getSettings().isRTL,
  };

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

@@ -8,6 +8,7 @@ import {
  BlockControls,
  RichText,
 } from '@wordpress/block-editor';
+import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
@@ -31,15 +32,16 @@ function ParagraphBlock( {
  ...style,
  };
 
+ const onAlignmentChange = useCallback( ( nextAlign ) => {
+ setAttributes( { align: nextAlign } );
+ }, [] );
  return (
  <>
  <BlockControls>
  <AlignmentToolbar
  value={ align }
  isRTL={ isRTL }
- onChange={ ( nextAlign ) => {
- setAttributes( { align: nextAlign } );
- } }
+ onChange={ onAlignmentChange }
  />
  </BlockControls>
  <RichText