@wordpress/block-editor 12.0.0 → 12.2.0

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

@@ -9,11 +9,10 @@ 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 { KeyboardAwareFlatList, WIDE_ALIGNMENTS, alignmentHelpers } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -23,19 +22,16 @@ import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
 import BlockListItem from './block-list-item';
 import BlockListItemCell from './block-list-item-cell';
-import { BlockListProvider, BlockListConsumer, DEFAULT_BLOCK_LIST_CONTEXT } from './block-list-context';
+import { BlockListProvider, DEFAULT_BLOCK_LIST_CONTEXT } from './block-list-context';
 import { BlockDraggableWrapper } from '../block-draggable';
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 import { store as blockEditorStore } from '../../store';
 
 const identity = x => x;
 
 const stylesMemo = {};
 
-const getStyles = (isRootList, isStackedHorizontally, horizontalAlignment) => {
-  if (isRootList) {
-    return;
-  }
-
+const getStyles = (isStackedHorizontally, horizontalAlignment) => {
   const styleName = `${isStackedHorizontally}-${horizontalAlignment}`;
 
   if (stylesMemo[styleName]) {
@@ -47,74 +43,97 @@ 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,
+    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,188 +144,32 @@ 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() {
-    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
-    } = extraProps;
-    const {
-      blockToolbar,
-      headerToolbar,
-      floatingToolbar
-    } = styles;
-    const containerStyle = {
-      flex: isRootList ? 1 : 0,
-      // We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
-      marginVertical: isRootList ? 0 : -marginVertical,
-      marginHorizontal: isRootList ? 0 : -marginHorizontal
-    };
-    const isContentStretch = contentResizeMode === 'stretch';
-    const isMultiBlocks = blockClientIds.length > 1;
-    const {
-      isWider
-    } = alignmentHelpers;
-    const extraScrollHeight = headerToolbar.height + blockToolbar.height + (isFloatingToolbarVisible ? floatingToolbar.height : 0);
-    const scrollViewStyle = [{
-      flex: isRootList ? 1 : 0
-    }, !isRootList && styles.overflowVisible];
-    return createElement(View, {
-      style: containerStyle,
-      onAccessibilityEscape: clearSelectedBlock,
-      onLayout: this.onLayout,
-      testID: "block-list-wrapper"
-    }, createElement(KeyboardAwareFlatList, _extends({}, Platform.OS === 'android' ? {
-      removeClippedSubviews: false
-    } : {}, {
-      // 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);
-      },
-      extraScrollHeight: extraScrollHeight,
-      keyboardShouldPersistTaps: "always",
-      scrollViewStyle: scrollViewStyle,
-      extraData: this.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,
-      title: title,
-      ListHeaderComponent: header,
-      ListEmptyComponent: !isReadOnly && this.renderEmptyList,
-      ListFooterComponent: this.renderBlockListFooter,
-      onScroll: onScroll
-    })), this.shouldShowInnerBlockAppender() && createElement(View, {
-      style: {
-        marginHorizontal: marginHorizontal - styles.innerAppender.marginLeft
-      }
-    }, createElement(BlockListAppender, {
-      rootClientId: this.props.rootClientId,
-      renderAppender: this.props.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 +177,7 @@ export class BlockList extends Component {
       tileIndex: blockClientIds.indexOf(clientId)
     };
     return createElement(BlockListItem, _extends({
+      index: index,
       isStackedHorizontally: isStackedHorizontally,
       rootClientId: rootClientId,
       clientId: clientId,
@@ -324,137 +188,181 @@ export class BlockList extends Component {
       marginVertical: marginVertical,
       marginHorizontal: marginHorizontal,
       onDeleteBlock: onDeleteBlock,
-      shouldShowInnerBlockAppender: this.shouldShowInnerBlockAppender,
+      shouldShowInnerBlockAppender: shouldShowInnerBlockAppender,
       blockWidth: blockWidth,
       isGridItem: isGridItem
     }, gridItemProps));
-  }
-
-  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 {
+    blockToolbar,
+    headerToolbar,
+    floatingToolbar
+  } = styles;
+  const containerStyle = {
+    flex: isRootList ? 1 : 0,
+    // We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
+    marginVertical: isRootList ? 0 : -marginVertical,
+    marginHorizontal: isRootList ? 0 : -marginHorizontal
+  };
+  const isContentStretch = contentResizeMode === 'stretch';
+  const isMultiBlocks = blockClientIds.length > 1;
+  const {
+    isWider
+  } = alignmentHelpers;
+  const extraScrollHeight = headerToolbar.height + blockToolbar.height + (isFloatingToolbarVisible ? floatingToolbar.height : 0);
+  return createElement(View, {
+    style: containerStyle,
+    onAccessibilityEscape: clearSelectedBlock,
+    onLayout: onLayout,
+    testID: "block-list-wrapper"
+  }, isRootList ? createElement(BlockListProvider, {
+    value: { ...DEFAULT_BLOCK_LIST_CONTEXT,
+      scrollRef: scrollViewRef.current
+    }
+  }, createElement(BlockDraggableWrapper, {
+    isRTL: isRTL
+  }, _ref4 => {
+    let {
+      onScroll
+    } = _ref4;
+    return createElement(KeyboardAwareFlatList, _extends({}, Platform.OS === 'android' ? {
+      removeClippedSubviews: false
+    } : {}, {
+      // 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 => {
+        scrollViewRef.current = ref;
+      },
+      extraScrollHeight: extraScrollHeight,
+      keyboardShouldPersistTaps: "always",
+      scrollViewStyle: {
+        flex: 1
+      },
+      extraData: getExtraData(),
+      scrollEnabled: isRootList,
+      contentContainerStyle: [horizontal && styles.horizontalContentContainer, isWider(blockWidth, 'medium') && (isContentStretch && isMultiBlocks ? styles.horizontalContentContainerStretch : styles.horizontalContentContainerCenter)],
+      data: blockClientIds,
+      keyExtractor: identity,
+      renderItem: renderItem,
+      CellRendererComponent: BlockListItemCell,
+      shouldPreventAutomaticScroll: shouldFlatListPreventAutomaticScroll,
+      ListHeaderComponent: header,
+      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
+    }));
+  })) : createElement(Fragment, null, blockClientIds.length > 0 ? createElement(View, {
+    style: [{
+      flex: 0
+    }, styles.overflowVisible]
+  }, createElement(View, {
+    style: [...getStyles(isStackedHorizontally, horizontalAlignment), horizontal && styles.horizontalContentContainer]
+  }, blockClientIds.map((currentClientId, index) => {
+    return createElement(View, {
+      key: currentClientId
+    }, renderItem({
+      item: currentClientId,
+      index
+    }));
+  }), createElement(Footer, {
+    addBlockToEndOfPost: addBlockToEndOfPost,
+    isReadOnly: isReadOnly,
+    renderFooterAppender: renderFooterAppender,
+    withFooter: withFooter
+  }))) : createElement(EmptyList, {
+    orientation: orientation,
+    rootClientId: rootClientId,
+    renderAppender: renderAppender,
+    renderFooterAppender: renderFooterAppender
+  })), shouldShowInnerBlockAppender() && createElement(View, {
+    style: {
+      marginHorizontal: marginHorizontal - styles.innerAppender.marginLeft
     }
+  }, createElement(BlockListAppender, {
+    rootClientId: rootClientId,
+    renderAppender: renderAppender,
+    showSeparator: true
+  })));
+}
 
-    return null;
+function Footer(_ref5) {
+  let {
+    addBlockToEndOfPost,
+    isReadOnly,
+    renderFooterAppender,
+    withFooter
+  } = _ref5;
+
+  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 createElement(View, null, renderFooterAppender());
   }
 
+  return null;
 }
-export default compose([withSelect((select, _ref6) => {
+
+function EmptyList(_ref6) {
   let {
-    rootClientId,
     orientation,
-    filterInnerBlocks
+    renderAppender,
+    renderFooterAppender,
+    rootClientId
   } = _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(),
-    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() {
+    shouldShowInsertionPoint
+  } = useSelect(select => {
     const {
-      shouldShowInsertionPoint,
-      rootClientId,
-      renderAppender,
-      renderFooterAppender
-    } = this.props;
-
-    if (renderFooterAppender || renderAppender === false) {
-      return null;
-    }
+      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])
+    };
+  });
+  const align = renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined;
+  const [wrapperStyles] = useEditorWrapperStyles({
+    align
+  });
 
-    return createElement(View, {
-      style: styles.defaultAppender
-    }, createElement(ReadableContentView, {
-      align: renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined
-    }, createElement(BlockListAppender, {
-      rootClientId: rootClientId,
-      renderAppender: renderAppender,
-      showSeparator: shouldShowInsertionPoint
-    })));
+  if (renderFooterAppender || renderAppender === false) {
+    return null;
   }
 
+  const containerStyles = [styles.defaultAppender, wrapperStyles];
+  return createElement(View, {
+    style: containerStyles
+  }, createElement(BlockListAppender, {
+    rootClientId: rootClientId,
+    renderAppender: renderAppender,
+    showSeparator: shouldShowInsertionPoint
+  }));
 }
-
-const EmptyListComponentCompose = compose([withSelect((select, _ref7) => {
-  let {
-    rootClientId,
-    orientation
-  } = _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);
 //# sourceMappingURL=index.native.js.map