@wordpress/block-editor 12.0.0 → 12.1.0

package/build-module/components/block-list/index.native.js

@@ -9,9 +9,8 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
  * WordPress dependencies
  */
 
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { useRef, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import { KeyboardAwareFlatList, ReadableContentView, WIDE_ALIGNMENTS, alignmentHelpers } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -47,74 +46,98 @@ const getStyles = (isRootList, isStackedHorizontally, horizontalAlignment) => {
   return computedStyles;
 };
 
-export class BlockList extends Component {
-  constructor() {
-    super(...arguments);
-    this.extraData = {
-      parentWidth: this.props.parentWidth,
-      renderFooterAppender: this.props.renderFooterAppender,
-      renderAppender: this.props.renderAppender,
-      onDeleteBlock: this.props.onDeleteBlock,
-      contentStyle: this.props.contentStyle
-    };
-    this.renderItem = this.renderItem.bind(this);
-    this.renderBlockListFooter = this.renderBlockListFooter.bind(this);
-    this.scrollViewInnerRef = this.scrollViewInnerRef.bind(this);
-    this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind(this);
-    this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(this);
-    this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(this);
-    this.renderEmptyList = this.renderEmptyList.bind(this);
-    this.getExtraData = this.getExtraData.bind(this);
-    this.getCellRendererComponent = this.getCellRendererComponent.bind(this);
-    this.onLayout = this.onLayout.bind(this);
-    this.state = {
-      blockWidth: this.props.blockWidth || 0
-    };
-  }
-
-  addBlockToEndOfPost(newBlock) {
-    this.props.insertBlock(newBlock, this.props.blockCount);
-  }
-
-  scrollViewInnerRef(ref) {
-    this.scrollViewRef = ref;
-  }
-
-  shouldFlatListPreventAutomaticScroll() {
-    return this.props.isBlockInsertionPointVisible;
-  }
+export default function BlockList(_ref) {
+  let {
+    blockWidth: initialBlockWidth,
+    contentResizeMode,
+    contentStyle,
+    filterInnerBlocks,
+    gridProperties,
+    header,
+    horizontal,
+    horizontalAlignment,
+    marginHorizontal = styles.defaultBlock.marginLeft,
+    marginVertical = styles.defaultBlock.marginTop,
+    onAddBlock,
+    onDeleteBlock,
+    orientation,
+    parentWidth,
+    renderAppender,
+    renderFooterAppender,
+    rootClientId,
+    title,
+    withFooter = true
+  } = _ref;
+  const {
+    blockClientIds,
+    blockCount,
+    blockInsertionPointIsVisible,
+    isReadOnly,
+    isRootList,
+    isFloatingToolbarVisible,
+    isStackedHorizontally,
+    maxWidth,
+    isRTL
+  } = useSelect(select => {
+    const {
+      getBlockCount,
+      getBlockHierarchyRootClientId,
+      getBlockOrder,
+      getSelectedBlockClientId,
+      isBlockInsertionPointVisible,
+      getSettings
+    } = select(blockEditorStore);
+    const selectedBlockClientId = getSelectedBlockClientId();
+    const rootBlockId = getBlockHierarchyRootClientId(selectedBlockClientId);
+    let blockOrder = getBlockOrder(rootClientId); // Display only block which fulfill the condition in passed `filterInnerBlocks` function.
+
+    if (filterInnerBlocks) {
+      blockOrder = filterInnerBlocks(blockOrder);
+    }
 
-  shouldShowInnerBlockAppender() {
     const {
-      blockClientIds,
-      renderAppender
-    } = this.props;
-    return renderAppender && blockClientIds.length > 0;
-  }
+      isRTL: isRTLSetting,
+      maxWidth: maxWidthSetting,
+      readOnly
+    } = getSettings();
+    return {
+      blockClientIds: blockOrder,
+      blockCount: getBlockCount(),
+      blockInsertionPointIsVisible: Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+      isReadOnly: readOnly,
+      isRootList: rootClientId === undefined,
+      isFloatingToolbarVisible: !!selectedBlockClientId && !!getBlockCount(rootBlockId),
+      isStackedHorizontally: orientation === 'horizontal',
+      maxWidth: maxWidthSetting,
+      isRTL: isRTLSetting
+    };
+  }, [filterInnerBlocks, orientation, rootClientId]);
+  const {
+    insertBlock,
+    clearSelectedBlock
+  } = useDispatch(blockEditorStore);
+  const extraData = useRef({
+    parentWidth,
+    renderFooterAppender,
+    renderAppender,
+    onDeleteBlock,
+    contentStyle
+  });
+  const [blockWidth, setBlockWidth] = useState(initialBlockWidth || 0);
+
+  const addBlockToEndOfPost = newBlock => {
+    insertBlock(newBlock, blockCount);
+  };
 
-  renderEmptyList() {
-    return createElement(EmptyListComponentCompose, {
-      rootClientId: this.props.rootClientId,
-      renderAppender: this.props.renderAppender,
-      renderFooterAppender: this.props.renderFooterAppender
-    });
-  }
+  const scrollViewRef = useRef(null);
 
-  getExtraData() {
-    const {
-      parentWidth,
-      renderFooterAppender,
-      onDeleteBlock,
-      contentStyle,
-      renderAppender,
-      gridProperties
-    } = this.props;
-    const {
-      blockWidth
-    } = this.state;
+  const shouldFlatListPreventAutomaticScroll = () => blockInsertionPointIsVisible;
+
+  const shouldShowInnerBlockAppender = () => renderAppender && blockClientIds.length > 0;
 
-    if (this.extraData.parentWidth !== parentWidth || this.extraData.renderFooterAppender !== renderFooterAppender || this.extraData.onDeleteBlock !== onDeleteBlock || this.extraData.contentStyle !== contentStyle || this.extraData.renderAppender !== renderAppender || this.extraData.blockWidth !== blockWidth || this.extraData.gridProperties !== gridProperties) {
-      this.extraData = {
+  const getExtraData = () => {
+    if (extraData.current.parentWidth !== parentWidth || extraData.current.renderFooterAppender !== renderFooterAppender || extraData.current.onDeleteBlock !== onDeleteBlock || extraData.current.contentStyle !== contentStyle || extraData.current.renderAppender !== renderAppender || extraData.current.blockWidth !== blockWidth || extraData.current.gridProperties !== gridProperties) {
+      extraData.current = {
         parentWidth,
         renderFooterAppender,
         onDeleteBlock,
@@ -125,101 +148,27 @@ export class BlockList extends Component {
       };
     }
 
-    return this.extraData;
-  }
-
-  getCellRendererComponent(_ref) {
-    let {
-      children,
-      item,
-      onLayout
-    } = _ref;
-    const {
-      rootClientId
-    } = this.props;
-    return createElement(BlockListItemCell, {
-      children: children,
-      clientId: item,
-      onLayout: onLayout,
-      rootClientId: rootClientId
-    });
-  }
+    return extraData.current;
+  };
 
-  onLayout(_ref2) {
+  const onLayout = _ref2 => {
     let {
       nativeEvent
     } = _ref2;
     const {
       layout
     } = nativeEvent;
-    const {
-      blockWidth
-    } = this.state;
-    const {
-      isRootList,
-      maxWidth
-    } = this.props;
     const layoutWidth = Math.floor(layout.width);
 
     if (isRootList && blockWidth !== layoutWidth) {
-      this.setState({
-        blockWidth: Math.min(layoutWidth, maxWidth)
-      });
+      setBlockWidth(Math.min(layoutWidth, maxWidth));
     } else if (!isRootList && !blockWidth) {
-      this.setState({
-        blockWidth: Math.min(layoutWidth, maxWidth)
-      });
+      setBlockWidth(Math.min(layoutWidth, maxWidth));
     }
-  }
-
-  render() {
-    const {
-      isRootList,
-      isRTL
-    } = this.props; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-
-    const blockList = isRootList ? createElement(BlockListProvider, {
-      value: { ...DEFAULT_BLOCK_LIST_CONTEXT,
-        scrollRef: this.scrollViewRef
-      }
-    }, createElement(BlockDraggableWrapper, {
-      isRTL: isRTL
-    }, _ref3 => {
-      let {
-        onScroll
-      } = _ref3;
-      return this.renderList({
-        onScroll
-      });
-    })) : createElement(BlockListConsumer, null, _ref4 => {
-      let {
-        scrollRef
-      } = _ref4;
-      return this.renderList({
-        parentScrollRef: scrollRef
-      });
-    });
-    return blockList;
-  }
+  };
 
-  renderList() {
+  const renderList = function () {
     let extraProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const {
-      clearSelectedBlock,
-      blockClientIds,
-      title,
-      header,
-      isReadOnly,
-      isRootList,
-      horizontal,
-      marginVertical = styles.defaultBlock.marginTop,
-      marginHorizontal = styles.defaultBlock.marginLeft,
-      isFloatingToolbarVisible,
-      isStackedHorizontally,
-      horizontalAlignment,
-      contentResizeMode,
-      blockWidth
-    } = this.props;
     const {
       parentScrollRef,
       onScroll
@@ -247,7 +196,7 @@ export class BlockList extends Component {
     return createElement(View, {
       style: containerStyle,
       onAccessibilityEscape: clearSelectedBlock,
-      onLayout: this.onLayout,
+      onLayout: onLayout,
       testID: "block-list-wrapper"
     }, createElement(KeyboardAwareFlatList, _extends({}, Platform.OS === 'android' ? {
       removeClippedSubviews: false
@@ -255,58 +204,54 @@ export class BlockList extends Component {
       // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
       accessibilityLabel: "block-list",
       innerRef: ref => {
-        this.scrollViewInnerRef(parentScrollRef || ref);
+        scrollViewRef.current = parentScrollRef || ref;
       },
       extraScrollHeight: extraScrollHeight,
       keyboardShouldPersistTaps: "always",
       scrollViewStyle: scrollViewStyle,
-      extraData: this.getExtraData(),
+      extraData: getExtraData(),
       scrollEnabled: isRootList,
       contentContainerStyle: [horizontal && styles.horizontalContentContainer, isWider(blockWidth, 'medium') && (isContentStretch && isMultiBlocks ? styles.horizontalContentContainerStretch : styles.horizontalContentContainerCenter)],
       style: getStyles(isRootList, isStackedHorizontally, horizontalAlignment),
       data: blockClientIds,
       keyExtractor: identity,
-      renderItem: this.renderItem,
-      CellRendererComponent: this.getCellRendererComponent,
-      shouldPreventAutomaticScroll: this.shouldFlatListPreventAutomaticScroll,
+      listKey: rootClientId ? `list-${rootClientId}` : 'list-root',
+      renderItem: renderItem,
+      CellRendererComponent: BlockListItemCell,
+      shouldPreventAutomaticScroll: shouldFlatListPreventAutomaticScroll,
       title: title,
       ListHeaderComponent: header,
-      ListEmptyComponent: !isReadOnly && this.renderEmptyList,
-      ListFooterComponent: this.renderBlockListFooter,
+      ListEmptyComponent: !isReadOnly && createElement(EmptyList, {
+        orientation: orientation,
+        rootClientId: rootClientId,
+        renderAppender: renderAppender,
+        renderFooterAppender: renderFooterAppender
+      }),
+      ListFooterComponent: createElement(Footer, {
+        addBlockToEndOfPost: addBlockToEndOfPost,
+        isReadOnly: isReadOnly,
+        renderFooterAppender: renderFooterAppender,
+        withFooter: withFooter
+      }),
       onScroll: onScroll
-    })), this.shouldShowInnerBlockAppender() && createElement(View, {
+    })), shouldShowInnerBlockAppender() && createElement(View, {
       style: {
         marginHorizontal: marginHorizontal - styles.innerAppender.marginLeft
       }
     }, createElement(BlockListAppender, {
-      rootClientId: this.props.rootClientId,
-      renderAppender: this.props.renderAppender,
+      rootClientId: rootClientId,
+      renderAppender: renderAppender,
       showSeparator: true
     })));
-  }
+  };
 
-  renderItem(_ref5) {
+  const renderItem = _ref3 => {
     let {
-      item: clientId
-    } = _ref5;
-    const {
-      contentResizeMode,
-      contentStyle,
-      onAddBlock,
-      onDeleteBlock,
-      rootClientId,
-      isStackedHorizontally,
-      blockClientIds,
-      parentWidth,
-      marginVertical = styles.defaultBlock.marginTop,
-      marginHorizontal = styles.defaultBlock.marginLeft,
-      gridProperties
-    } = this.props;
-    const {
-      blockWidth
-    } = this.state; // Extracting the grid item properties here to avoid
+      item: clientId,
+      index
+    } = _ref3;
+    // Extracting the grid item properties here to avoid
     // re-renders in the blockListItem component.
-
     const isGridItem = !!gridProperties;
     const gridItemProps = gridProperties && {
       numOfColumns: gridProperties.numColumns,
@@ -314,6 +259,7 @@ export class BlockList extends Component {
       tileIndex: blockClientIds.indexOf(clientId)
     };
     return createElement(BlockListItem, _extends({
+      index: index,
       isStackedHorizontally: isStackedHorizontally,
       rootClientId: rootClientId,
       clientId: clientId,
@@ -324,137 +270,101 @@ export class BlockList extends Component {
       marginVertical: marginVertical,
       marginHorizontal: marginHorizontal,
       onDeleteBlock: onDeleteBlock,
-      shouldShowInnerBlockAppender: this.shouldShowInnerBlockAppender,
+      shouldShowInnerBlockAppender: shouldShowInnerBlockAppender,
       blockWidth: blockWidth,
       isGridItem: isGridItem
     }, gridItemProps));
-  }
+  }; // Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 
-  renderBlockListFooter() {
-    const paragraphBlock = createBlock('core/paragraph');
-    const {
-      isReadOnly,
-      withFooter = true,
-      renderFooterAppender
-    } = this.props;
 
-    if (!isReadOnly && withFooter) {
-      return createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
-        accessibilityLabel: __('Add paragraph block'),
-        testID: __('Add paragraph block'),
-        onPress: () => {
-          this.addBlockToEndOfPost(paragraphBlock);
-        }
-      }, createElement(View, {
-        style: styles.blockListFooter
-      })));
-    } else if (renderFooterAppender) {
-      return renderFooterAppender();
+  const blockList = isRootList ? createElement(BlockListProvider, {
+    value: { ...DEFAULT_BLOCK_LIST_CONTEXT,
+      scrollRef: scrollViewRef.current
     }
-
-    return null;
-  }
-
+  }, createElement(BlockDraggableWrapper, {
+    isRTL: isRTL
+  }, _ref4 => {
+    let {
+      onScroll
+    } = _ref4;
+    return renderList({
+      onScroll
+    });
+  })) : createElement(BlockListConsumer, null, _ref5 => {
+    let {
+      scrollRef
+    } = _ref5;
+    return renderList({
+      parentScrollRef: scrollRef
+    });
+  });
+  return blockList;
 }
-export default compose([withSelect((select, _ref6) => {
-  let {
-    rootClientId,
-    orientation,
-    filterInnerBlocks
-  } = _ref6;
-  const {
-    getBlockCount,
-    getBlockHierarchyRootClientId,
-    getBlockOrder,
-    getSelectedBlockClientId,
-    isBlockInsertionPointVisible,
-    getSettings
-  } = select(blockEditorStore);
-  const isStackedHorizontally = orientation === 'horizontal';
-  const selectedBlockClientId = getSelectedBlockClientId();
-  let blockClientIds = getBlockOrder(rootClientId); // Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-
-  if (filterInnerBlocks) {
-    blockClientIds = filterInnerBlocks(blockClientIds);
-  }
 
-  const {
-    maxWidth
-  } = getSettings();
-  const isReadOnly = getSettings().readOnly;
-  const blockCount = getBlockCount();
-  const rootBlockId = getBlockHierarchyRootClientId(selectedBlockClientId);
-  const isFloatingToolbarVisible = !!selectedBlockClientId && !!getBlockCount(rootBlockId);
-  const isRTL = getSettings().isRTL;
-  return {
-    blockClientIds,
-    blockCount,
-    isBlockInsertionPointVisible: Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+function Footer(_ref6) {
+  let {
+    addBlockToEndOfPost,
     isReadOnly,
-    isRootList: rootClientId === undefined,
-    isFloatingToolbarVisible,
-    isStackedHorizontally,
-    maxWidth,
-    isRTL
-  };
-}), withDispatch(dispatch => {
-  const {
-    insertBlock,
-    replaceBlock,
-    clearSelectedBlock
-  } = dispatch(blockEditorStore);
-  return {
-    clearSelectedBlock,
-    insertBlock,
-    replaceBlock
-  };
-}), withPreferredColorScheme])(BlockList);
-
-class EmptyListComponent extends Component {
-  render() {
-    const {
-      shouldShowInsertionPoint,
-      rootClientId,
-      renderAppender,
-      renderFooterAppender
-    } = this.props;
-
-    if (renderFooterAppender || renderAppender === false) {
-      return null;
-    }
+    renderFooterAppender,
+    withFooter
+  } = _ref6;
 
-    return createElement(View, {
-      style: styles.defaultAppender
-    }, createElement(ReadableContentView, {
-      align: renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined
-    }, createElement(BlockListAppender, {
-      rootClientId: rootClientId,
-      renderAppender: renderAppender,
-      showSeparator: shouldShowInsertionPoint
+  if (!isReadOnly && withFooter) {
+    return createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
+      accessibilityLabel: __('Add paragraph block'),
+      testID: __('Add paragraph block'),
+      onPress: () => {
+        const paragraphBlock = createBlock('core/paragraph');
+        addBlockToEndOfPost(paragraphBlock);
+      }
+    }, createElement(View, {
+      style: styles.blockListFooter
     })));
+  } else if (renderFooterAppender) {
+    return renderFooterAppender();
   }
 
+  return null;
 }
 
-const EmptyListComponentCompose = compose([withSelect((select, _ref7) => {
+function EmptyList(_ref7) {
   let {
-    rootClientId,
-    orientation
+    orientation,
+    renderAppender,
+    renderFooterAppender,
+    rootClientId
   } = _ref7;
   const {
-    getBlockOrder,
-    getBlockInsertionPoint,
-    isBlockInsertionPointVisible
-  } = select(blockEditorStore);
-  const isStackedHorizontally = orientation === 'horizontal';
-  const blockClientIds = getBlockOrder(rootClientId);
-  const insertionPoint = getBlockInsertionPoint();
-  const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-  const shouldShowInsertionPoint = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // If list is empty, show the insertion point (via the default appender)
-  blockClientIds.length === 0 || // Or if the insertion point is right before the denoted block.
-  !blockClientIds[insertionPoint.index]);
-  return {
     shouldShowInsertionPoint
-  };
-})])(EmptyListComponent);
+  } = useSelect(select => {
+    const {
+      getBlockOrder,
+      getBlockInsertionPoint,
+      isBlockInsertionPointVisible
+    } = select(blockEditorStore);
+    const isStackedHorizontally = orientation === 'horizontal';
+    const blockClientIds = getBlockOrder(rootClientId);
+    const insertionPoint = getBlockInsertionPoint();
+    const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
+    return {
+      shouldShowInsertionPoint: !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // If list is empty, show the insertion point (via the default appender)
+      blockClientIds.length === 0 || // Or if the insertion point is right before the denoted block.
+      !blockClientIds[insertionPoint.index])
+    };
+  });
+
+  if (renderFooterAppender || renderAppender === false) {
+    return null;
+  }
+
+  return createElement(View, {
+    style: styles.defaultAppender
+  }, createElement(ReadableContentView, {
+    align: renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined
+  }, createElement(BlockListAppender, {
+    rootClientId: rootClientId,
+    renderAppender: renderAppender,
+    showSeparator: shouldShowInsertionPoint
+  })));
+}
 //# sourceMappingURL=index.native.js.map